search

varletjs / varlet

A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.
https://varletjs.org/#/en-US/index
MIT License
4.82k stars 607 forks source link

feat(switch): support variant mode #1552

Closed YHoney7 closed 3 months ago

YHoney7 commented 3 months ago

Checklist

List of tasks you have already done and plan to do.

Change information

Describe your modifications here.

Issues

close #1550

Related Links

Links related to this pr.

vercel[bot] commented 3 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
varlet ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 29, 2024 6:47am
varlet-ui-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 29, 2024 6:47am
vercel[bot] commented 3 months ago

@YHoney7 is attempting to deploy a commit to the varletjs Team on Vercel.

A member of the Team first needs to authorize it.

codecov[bot] commented 3 months ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 92.79%. Comparing base (6588b4a) to head (c0ce8ee). Report is 4 commits behind head on dev.

Additional details and impacted files ```diff @@ Coverage Diff @@ ## dev #1552 +/- ## ========================================== - Coverage 92.81% 92.79% -0.03% ========================================== Files 305 305 Lines 7167 7173 +6 Branches 1780 1786 +6 ========================================== + Hits 6652 6656 +4 - Misses 449 451 +2 Partials 66 66 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

haoziqaq commented 3 months ago

playground 显示似乎有些问题。

haoziqaq commented 3 months ago

还有一个问题就是 ripple 似乎有点过于大了。

haoziqaq commented 3 months ago

props.size 似乎在 variant 模式下没有适配

YHoney7 commented 3 months ago

我看下playground是有问题, ripple的尺寸目前是对比figma标注的尺寸的

BeADre commented 3 months ago

参考md3, 间距还有样式好像不太对

YHoney7 commented 3 months ago

image 我们看到的效果似乎不一样

YHoney7 commented 3 months ago

image @BeADre 分为两种形式，目前实现的是没有图标的，但当前这个看来还缺个hover和拖动实现开关的效果

BeADre commented 3 months ago

image image

上面的是我们的，下面这个是md3的， 样式和间距都不太一样

YHoney7 commented 3 months ago

收到👌

chouchouji commented 3 months ago

影响到了form的快照，看下为啥，如果有必要就更新下快照

YHoney7 commented 3 months ago

好的

BeADre commented 3 months ago

样式上还有点小问题，官方是hover的时候只有水波纹，按下去里面的滑块才会变大，还有一个就是亮色模式并打开switch的时候hover效果会导致滑块颜色改变，这里颜色应该是不会变化的

YHoney7 commented 3 months ago

收到, 已经在改进了

BeADre commented 3 months ago

20240329-102804

我点击switch其他的地方，switch的块应该也会变大，这是官方的实现

YHoney7 commented 3 months ago

明白， 我看了你发的示例，在开和关的情况下还有个小回弹的效果，但是在另个示例中却没有这个回弹效果