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

[Kuriyona]

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 更为刚需。而且应该是支持缩放和展开的。

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

Tabs

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

Tabs

Fabs

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

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

m0e6w6vv-EFAB-B_1.mp4

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 的中间直接分割开的样式（应该给一个选项选择性启用）。

Loading

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

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

Search 的实现

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

Search

Slider

可选 MD 3 Slider 样式。

更好的 PC 支持

#1864

---

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

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

[haoziqaq]

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

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

[haoziqaq]

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

这个可以使用 Popup

[haoziqaq]

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

[Kuriyona]

但是缺少对应 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 也无法使用。
一个是官网是不是应该加一个搜索（就算不含具体内容的搜索，至少可以 / 加关键词跳转到某一篇组件的文档），以及相应实现效果到左变滚动查找也挺麻烦。重制官网也是一个大工程啊。

[haoziqaq]

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

…

---原始邮件--- 发件人: "Kuriyota ***@***.***&gt; 发送时间: 2025年6月8日(周日) 晚上10:09 收件人: ***@***.***&gt;; 抄送: ***@***.******@***.***&gt;; 主题: 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"&gt; <var-bottom-navigation-item label="标签" icon="home" /&gt; <var-bottom-navigation-item label="标签" icon="magnify" /&gt; <var-bottom-navigation-item label="标签" icon="heart" /&gt; <var-bottom-navigation-item label="标签" icon="account-circle" /&gt; </var-bottom-navigation&gt; 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: ***@***.***&gt;

[william-xue]

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

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]

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 更为刚需。而且应该是支持缩放和展开的。

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

Tabs

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

Tabs

## 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 实现的不完善的。需要用户半自行实现。

Split Button

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

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

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

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

Search

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

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

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

会分步骤的开始实现