search

varletjs / varlet

A mobile component library based on Vue3, Material Design 2, Material Design 3, and supports desktop development.
https://varlet.pages.dev
MIT License
4.81k stars 602 forks source link

var-card 插槽样式 ？ #1661

Closed CNChestnut closed 3 weeks ago

CNChestnut commented 3 weeks ago

Bug report 🐞

可能是我的使用问题？如果是那就抱歉了，但是我已经尽力去理解文档了

var-card 在使用插槽添加内容时部分插槽没有正常的样式。

我在 Playground 和自己的开发环境都碰到了这个问题。

屏幕截图 2024-06-08 001301

Code in Playground

Version & Environment

题外话

关于之前在某个 issue 下的讨论的后续？

haoziqaq commented 3 weeks ago

当用户使用插槽的时候，我们会认为用户希望完全定制某一个区域的内容，所以不会另外设置样式。另外 #img 应该是拼写有误，正确的应该是 #image。

源码设计参考如下，如果希望携带样式也可以直接复用组件使用的 var-card__title class。 image

关于图标库扩展： 我们提供了一个插件尽可能简单的对图标库扩展，详情见这里。

haoziqaq commented 3 weeks ago

对于您或者部分用户可能需要的定制插槽并携带样式的需要。我们后续可能会加入作用域插槽参数来解决。例如

<var-card>
  <template #title="{ class }">
     <div :class="class"></div>
  </template>
</var-card>

或许可以提升一些体验。

chouchouji commented 3 weeks ago

对于您或者部分用户可能需要的定制插槽并携带样式的需要。我们后续可能会加入作用域插槽参数来解决。例如

<var-card>
  <template #title="{ class }">
     <div :class="class"></div>
  </template>
</var-card>

或许可以提升一些体验。

已提pr