GoLink - Mina - UI
Link Design - 小程序组件库
📝 目录
🧐 关于
Taro 小程序组件库，包含通用组件、全局样式两部分。
🎈 指南
环境要求
taro >= 3.4.0安装
yarn add @golink/mina-ui全局样式
索引
// * 间距尺寸
--space-xs: 8px;
--space-sm: 16px;
--space-md: 32px;
--space-lg: 48px;
--space-xl: 64px;
--space-xxl: 96px;
// * 字体大小
--font-size-h1: 48px;
--font-size-h2: 42px;
--font-size-h3: 38px;
--font-size-h5: 34px;
--font-size-subtitle1: 32px;
--font-size-subtitle2: 30px;
--font-size-text: 28px;
--font-size-tab: 22px;
--font-size-caption: 22px;
// * 品牌色
--color-primary: #426fff;
--color-on-primary: #fff;
// * 平面色
--color-surface-0: #fff;
--color-surface-1: #f8f8f8;
--color-surface-4: #000;
// * 线条色
--color-line-0: #fff;
--color-line-1: #f3f3f5;
--color-line-2: #f0f0f2;
--color-line-3: #798194;
--color-line-4: #000;
// * 文字色
--color-font-0: #fff;
--color-font-1: #a2a7af;
--color-font-2: #58667f;
--color-font-3: #333;
--color-font-4: #111;使用
项目入口样式文件（app.scss）引入
@import "@golink/mina-ui/dist/style/index.scss";示例
// 字体大小
font-size: var(--font-size-text);
// 颜色
background-color: var(--color-surface-0);
// 尺寸
margin-right: var(--space-xs);覆盖
.welcome {
--color-primary: #fff;
// ...
.button {
background-color: var(--color-primary);
}
}Scss 工具函数
索引
// 多行文本截断；第三行开始截断
@include text-ellipsis(3);
// 单行文本截断
@include text-ellipsis-single();
// 骨架屏 -> 圆形
@include skeleton-loading--radius();
// 骨架屏 -> 矩形
@include skeleton-loading();
// 图片旋转
@include rotate-icon();SVG 图标
索引
图标库 - 目前仅支持 Line 风格，不支持 Fill 风格。
使用
项目入口样式文件（app.scss）引入
@import "@golink/mina-ui/dist/style/icon.scss";示例, 在图标库中找到心仪的图标，以icon-作为前缀添加类名即可。
<div className="user-block__switch__icon icon-refresh-line" />组件
🏁 开发
✍️ Authors
🎉 Acknowledgements
- Hat tip to anyone whose code was used
- Inspiration
- References