Page 1 of 1

@ray-js/smart-ui Tab 标签页,不够自由灵活

Posted: 2024年 Aug 22日 09:21
by 18559697016

https://developer.tuya.com/material/smartui?comId=tab

@ray-js/smart-ui Tab 标签页,不够自由灵活

1.Tab的margin被写死在代码里面(请看下图)
2.Tab Item样式也是写死,实现胶囊效果,还需要特殊手段才能实现(你们官网都是有胶囊效果的,现在这个胶囊效果很常用
3.Tab Content样式也是,想实现圆角效果,都要特殊手段才能实现

666.png
888.png

Re: @ray-js/smart-ui Tab 标签页,不够自由灵活

Posted: 2024年 Aug 22日 10:37
by lshinylee

我们逐一分析哈,首先可以先了解下 https://developer.mozilla.org/zh-CN/doc ... properties

  • Tab的 margin 被写死在代码里面:可参考附件图,我们可以通过自定义 CSS 变量来覆盖默认样式。例如,tab 组件的边距或圆角使用了 --padding-md 等 CSS 变量。因此,你可以在业务中通过定义这些变量来覆盖默认样式,如下代码所示:

Code: Select all

.smart-tabs {
  --tabs-card-border-radius: 24px;
  --padding-md: 12px;
}
  • Tab Item样式也是写死:同样,你可以通过元素检查器查看对应的 CSS 变量,并自行复写这些变量来实现自定义样式。需要注意的是,官网和当前组件之间存在差异是因为 PC 端和移动端的设计规范和交互并不完全一致。此外,不同技术栈也会导致样式的差异。通常来说,组件的自定义样式较多,在保留逻辑的情况下,允许各个业务自行去覆盖样式是常见的做法,因为默认样式无法满足所有场景。

  • Tab Content样式也是,想实现圆角效果,都要特殊手段才能实现:同样可以通过 CSS 变量来实现,如果你目前使用了特殊手段来实现圆角效果,可以分享一下具体的实现方式,我们可以进一步优化。例如,你可能使用了某些 JavaScript 或者额外的 CSS 规则来实现这些效果,了解具体实现后,我们可以提供更合适的优化方案。


Re: @ray-js/smart-ui Tab 标签页,不够自由灵活

Posted: 2024年 Aug 22日 10:51
by 18559697016

上面 说的 “需要特殊手段”,就是你上面说的------自定义 CSS 变量来覆盖默认样式,
这样不是有点麻烦么,是不是可以把样式传参的形式出来,以方便使用者,组件封装出来的目的也是提供更好的体验,方便使用者的吧 哈哈哈


Re: @ray-js/smart-ui Tab 标签页,不够自由灵活

Posted: 2024年 Aug 22日 10:59
by lshinylee

样式通过 props 传参是可行的,但我们发现存在以下几个问题:

  1. 复杂性增加:UI 组件的可定制样式往往种类繁多,如果全部通过 props 导出,会大幅增加 props 的数量,导致组件接口复杂化,不利于维护和理解。
  2. 性能问题:通过 xxxStyle 传参,类似 CSS in JS 的方案,虽然灵活,但在使用过多时会对性能产生一定影响,尤其是在频繁更新样式的场景中。
  3. 一致性和可读性:过多样式传参可能导致代码风格不一致,降低代码的可读性和可维护性。开发者需要记住和管理大量的 props 名称,增加了出错的可能性。
  4. 扩展性:随着组件功能的增加,样式需求也会不断变化和增加,通过 props 传参的方式难以灵活应对未来的扩展需求。
  5. 调试难度:当样式通过大量 props 传递时,调试和跟踪问题变得更加困难,因为样式的来源可能分散在多个地方。

综上,我们暂时是不会考虑通过增加样式传参来解决此类问题。