varlet icon indicating copy to clipboard operation
varlet copied to clipboard

Published 20 hours ago • verified publisher icon varletjs

About support for MD 3 and some other suggestions | 关于 MD 3 的深度支持和一些其他建议

Open kuriyota opened this issue 5 months ago • 5 comments
trafficstars

Varlet 是一款我非常喜欢的组件库，我也做了几次虽然不大的 issue 和 pr 第一次看到这个组件库的时候，抉择之下还是放弃了使用。因为并不是我更喜欢的 Material Design 3 (Material You)。 但是感到，虽然 Vue Material 的组件库似乎不少，但是基本上都是 M2，对 M3 还原的好的基本上组件数量堪忧。（Vuetify 目前对 M3 的支持还是稀烂） 后面看到 Varlet 支持了 M3，就用回了 Varlet，虽然不如我期待得那么 M3，但已经是最优选择了。

所以我也想就一些问题进行询问或请求。

首先还是先问一下有没有实现的打算。至于实现，我认为自己并没有足够的实力去参与这个项目具体组件的能力。尽力而为，只算提交了 #1858 的贡献。

基本上是关于缺少的组件和样式的，考虑到实际的需要，一些新样式应该是被做成选择性启用的。就像 Varlet 里，M3 样式的 Switch 一样。

<template>
  <var-switch variant v-model="value" />
</template>

~~感觉 Varlet 的 AppBar 很没 Material 的感觉却又说不上为什么~~

Navigation

BottomNavigation 对应 Navigation bar 没什么问题。 但是缺少对应 Navigation rail 和 Navigation drawer 的。 其中我认为 Navigation rail 更为刚需。而且应该是支持缩放和展开的。

Image

~~顺带解决一些命名的差异？~~

Tabs

Tabs 缺少了第一种（Primary tabs）样式。

Tabs

Image

Fabs

Fab 并不可以作为一个普通按钮（比如在 Navigation rail 中）和包含文字（Extended FAB）。

同时建议最好加上 Extended FAB 的 Expanding 功能。

https://github.com/user-attachments/assets/e532065b-19d9-4a3d-a321-f86a323b5ec1

Split Button

目前 Varlet 的 Split Button 实现的不完善的。需要用户半自行实现。

<template>
  <var-menu placement="bottom" same-width :offset-y="6">
    <var-button-group type="primary">
      <var-button @click.stop>Split Button</var-button>
      <var-button style="padding: 0 6px;">
        <var-icon name="menu-down" :size="24" />
      </var-button>
    </var-button-group>

    <template #menu>
      <var-cell ripple>Split Button</var-cell>
      <var-cell ripple>Split Button</var-cell>
      <var-cell ripple>Split Button</var-cell>
    </template>
  </var-menu>
</template>

同时建议支持 M3 的中间直接分割开的样式（应该给一个选项选择性启用）。

Image

Loading

支持 Progress indicators 这种已加载和未加载中有分割的样式。

Image

但是至于这种波浪样式的，我个人不是很认同，还是请开发者取舍。

Image

Search 的实现

和普通文本框还是有很大不同的。

Search

Image

Slider

可选 MD 3 Slider 样式。

Image

更好的 PC 支持

#1864

大概先想到这些。也不是是一定要支持，更多是先问一下。~~我甚至没提莫奈取色呢（感觉要大改主题系统）~~

抛开样式，我认为 Navigation rail，其次 Fab 和 Split Button 是比较重要的了。

kuriyota avatar Jun 07 '25 07:06 kuriyota

Varlet v3 是以兼容 md2 为前提去设计的，所以在设计上受到了不小的制约，以我们的人力又没办法完全独立维护 md2 和 md3 的组件（这样也很割裂）权衡之下只能如此。 你提的建议都非常不错，有一些 ROI 高的 feature 个人感觉也是可以在 v3 版本支持的。

长期来看的个人看法：纯 md3 组件库（把官方设计的坑都填上）+ 移动端优先 + 桌面端更好的支持（尤其是管理后台需求的那几个重型组件、虚拟列表全支持），可能真得升 v4，然后把 md2 的历史包袱全扔掉才有可能做到了。

haoziqaq avatar Jun 08 '25 09:06 haoziqaq

但是缺少对应 Navigation rail 和 Navigation drawer 的。

这个可以使用 Popup

haoziqaq avatar Jun 08 '25 10:06 haoziqaq

Varlet 的输入组件缺少了 filled variant，确实可以增加一下。

Image

haoziqaq avatar Jun 08 '25 10:06 haoziqaq

但是缺少对应 Navigation rail 和 Navigation drawer 的。

这个可以使用 Popup

使用 Popup 还需要自行实现很多样式，无法像这样简单使用。

  <var-bottom-navigation variant v-model:active="active">
    <var-bottom-navigation-item label="标签" icon="home" />
    <var-bottom-navigation-item label="标签" icon="magnify" />
    <var-bottom-navigation-item label="标签" icon="heart" />
    <var-bottom-navigation-item label="标签" icon="account-circle" />
  </var-bottom-navigation>

Varlet v3 是以兼容 md2 为前提去设计的，所以在设计上受到了不小的制约，以我们的人力又没办法完全独立维护 md2 和 md3 的组件（这样也很割裂）权衡之下只能如此。 你提的建议都非常不错，有一些 ROI 高的 feature 个人感觉也是可以在 v3 版本支持的。

长期来看的个人看法：纯 md3 组件库（把官方设计的坑都填上）+ 移动端优先 + 桌面端更好的支持（尤其是管理后台需求的那几个重型组件、虚拟列表全支持），可能真得升 v4，然后把 md2 的历史包袱全扔掉才有可能做到了。

我完全理解，并提到的相关内容。 ~~主题系统方面是最麻烦的几块~~ 毕竟实在苦于没有找到更加合适的 M3 组件库实现了。 关于 v4 有其他计划吗。

还有两个事情。

一个是 的值类型导致使用比较麻烦，而且 v-model.number 也无法使用。 一个是官网是不是应该加一个搜索（就算不含具体内容的搜索，至少可以 / 加关键词跳转到某一篇组件的文档），以及相应实现效果到左变滚动查找也挺麻烦。重制官网也是一个大工程啊。

kuriyota avatar Jun 08 '25 14:06 kuriyota

v4 暂无计划，人力不足以从 0 到 1 将它完成。相比 v4，可能强化 v3 更加实惠。文档有计划进行一次重构，文档搜索也在重构计划内。

---原始邮件--- 发件人: "Kuriyota @.> 发送时间: 2025年6月8日(周日) 晚上10:09 收件人: @.>; 抄送: @.@.>; 主题: Re: [varletjs/varlet] 关于 Material Design （没想好标题怎么写） (Issue #1896)

kuriyota left a comment (varletjs/varlet#1896)

但是缺少对应 Navigation rail 和 Navigation drawer 的。

这个可以使用 Popup

使用 Popup 还需要自行实现很多样式，无法像这样简单使用。 <var-bottom-navigation variant v-model:active="active"> <var-bottom-navigation-item label="标签" icon="home" /> <var-bottom-navigation-item label="标签" icon="magnify" /> <var-bottom-navigation-item label="标签" icon="heart" /> <var-bottom-navigation-item label="标签" icon="account-circle" /> </var-bottom-navigation>

Varlet v3 是以兼容 md2 为前提去设计的，所以在设计上受到了不小的制约，以我们的人力又没办法完全独立维护 md2 和 md3 的组件（这样也很割裂）权衡之下只能如此。 你提的建议都非常不错，有一些 ROI 高的 feature 个人感觉也是可以在 v3 版本支持的。

长期来看的个人看法：纯 md3 组件库（把官方设计的坑都填上）+ 移动端优先 + 桌面端更好的支持（尤其是管理后台需求的那几个重型组件、虚拟列表全支持），可能真得升 v4，然后把 md2 的历史包袱全扔掉才有可能做到了。

我完全理解，并提到的相关内容。 主题系统方面是最麻烦的几块 毕竟实在苦于没有找到更加合适的 M3 组件库实现了。 关于 v4 有其他计划吗。

还有两个事情。

一个是 Input type="number" 的值类型导致使用比较麻烦，而且 v-model.number 也无法使用。 一个是官网是不是应该加一个搜索（就算不含具体内容的搜索，至少可以 / 加关键词跳转到某一篇组件的文档），以及相应实现效果到左变滚动查找也挺麻烦。重制官网也是一个大工程啊。

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>

haoziqaq avatar Jun 08 '25 15:06 haoziqaq

分析了一下 你的诉求如下 ：

Navigation 目前 BottomNavigation 没问题，但缺少 Navigation rail 和 Navigation drawer。 特别强调 Navigation rail 是刚需，且应支持缩放和展开。 Tabs Tabs 缺少了 MD3 的 Primary tabs 样式。 FAB（Floating Action Button） Fab 不能作为普通按钮用，也不支持带文字（Extended FAB）。 建议支持 Extended FAB 的 Expanding 功能。 Split Button 目前实现不完善，需要用户手动拼装。 建议支持 MD3 的分割样式，并能选择性启用。 Loading/Progress 建议支持 MD3 的 Progress indicators（加载进度分段样式）。 波浪样式可选，开发者可自行取舍。 Search Search 组件和普通文本框差异较大，建议有专门实现。 Slider 建议支持 MD3 的 Slider 样式。 这些已经开始实现了

william-xue avatar Jul 04 '25 06:07 william-xue

Varlet 是一款我非常喜欢的组件库，我也做了几次虽然不大的 issue 和 pr 第一次看到这个组件库的时候，抉择之下还是放弃了使用。因为并不是我更喜欢的 Material Design 3 (Material You)。 但是感到，虽然 Vue Material 的组件库似乎不少，但是基本上都是 M2，对 M3 还原的好的基本上组件数量堪忧。（Vuetify 目前对 M3 的支持还是稀烂） 后面看到 Varlet 支持了 M3，就用回了 Varlet，虽然不如我期待得那么 M3，但已经是最优选择了。

所以我也想就一些问题进行询问或请求。

首先还是先问一下有没有实现的打算。至于实现，我认为自己并没有足够的实力去参与这个项目具体组件的能力。尽力而为，只算提交了 #1858 的贡献。

基本上是关于缺少的组件和样式的，考虑到实际的需要，一些新样式应该是被做成选择性启用的。就像 Varlet 里，M3 样式的 Switch 一样。

~感觉 Varlet 的 AppBar 很没 Material 的感觉却又说不上为什么~

Navigation

BottomNavigation 对应 Navigation bar 没什么问题。 但是缺少对应 Navigation rail 和 Navigation drawer 的。 其中我认为 Navigation rail 更为刚需。而且应该是支持缩放和展开的。

Image ~顺带解决一些命名的差异？~

Tabs

Tabs 缺少了第一种（Primary tabs）样式。

Tabs

Image ## Fabs Fab 并不可以作为一个普通按钮（比如在 Navigation rail 中）和包含文字（[Extended FAB](https://m3.material.io/components/extended-fab/guidelines)）。

同时建议最好加上 Extended FAB 的 Expanding 功能。

m0e6w6vv-EFAB-B_1.mp4

Split Button

目前 Varlet 的 Split Button 实现的不完善的。需要用户半自行实现。

同时建议支持 M3 的中间直接分割开的样式（应该给一个选项选择性启用）。 Image ## Loading 支持 [Progress indicators](https://m3.material.io/components/progress-indicators/guidelines) 这种已加载和未加载中有分割的样式。

Image

但是至于这种波浪样式的，我个人不是很认同，还是请开发者取舍。

Image ## Search 的实现 和普通文本框还是有很大不同的。

Search

Image ## Slider 可选 [MD 3 Slider](https://m3.material.io/components/sliders/guidelines) 样式。 Image ## 更好的 PC 支持 [#1864](https://github.com/varletjs/varlet/issues/1864)

大概先想到这些。也不是是一定要支持，更多是先问一下。~我甚至没提莫奈取色呢（感觉要大改主题系统）~

抛开样式，我认为 Navigation rail，其次 Fab 和 Split Button 是比较重要的了。

会分步骤的开始实现

william-xue avatar Jul 04 '25 06:07 william-xue