介绍

  • SnowDesign 目前是一个教学性质的项目,助力您快速搭建Web组件库。
  • 从零到一的搭建文章(努力更新中...)
  • 参考学习以下项目:

📦能力

  • 一套逻辑代码支持VueReact框架。
  • 支持 ES6 导出,无缝 TreeShaking。
  • 包含WebpackVite插件支持自定义组件样式主题,可进行全局CSS变量覆盖及组件级SCSS变量覆盖。
  • 完善的单元测试与端到端测试
  • 支持国际化与无障碍访问
  • 内置黑暗主题(努力更新中...)

🚀CSS架构

编译时插件

CSS变量及SCSS变量在编译时动态插入,实现主题更改。 编译后会将SCSS文件保留,ViteWebpack插件将原本读取的CSS文件转化为读取SCSS文件并使用sassWebpackLoader进行编译,实现主题包加载。

项目将主题包和组件样式包分离。

🍭 主题包包含以下文件:

  • global.scss:全局CSS变量定义
  • index.scss:全局SCSS入口文件
  • variables.scss:用于全局SCSS变量定义
  • _palette.scss:用于基础色版定义,使用ant-design设计规范的色板。

🍭 组件包包含以下文件:

  • xxx.scss:组件样式编写
  • variables.scss:组件级SCSS变量定义

🔧API

  • 如无特殊说明,UI 组件均支持自定义 styleclass 两个参数。
属性说明类型默认值
className/class类名string-
style样式名CSSProperties-