GoLink - Mina - UI

---

Link Design - 小程序组件库

📝 目录

• About
• Getting Started
• Deployment
• Usage
• Built Using
• TODO
• Contributing
• Authors
• Acknowledgments

🧐 关于

Taro 小程序组件库，包含通用组件、全局样式两部分。

🎈 指南

环境要求

1taro >= 3.4.0

安装

1yarn add @golink/mina-ui

全局样式

索引

1// * 间距尺寸
2--space-xs: 8px;
3--space-sm: 16px;
4--space-md: 32px;
5--space-lg: 48px;
6--space-xl: 64px;
7--space-xxl: 96px;
8
9// * 字体大小
10--font-size-h1: 48px;
11--font-size-h2: 42px;
12--font-size-h3: 38px;
13--font-size-h5: 34px;
14--font-size-subtitle1: 32px;
15--font-size-subtitle2: 30px;
16--font-size-text: 28px;
17--font-size-tab: 22px;
18--font-size-caption: 22px;
19
20// * 品牌色
21--color-primary: #426fff;
22--color-on-primary: #fff;
23
24// * 平面色
25--color-surface-0: #fff;
26--color-surface-1: #f8f8f8;
27--color-surface-4: #000;
28
29// * 线条色
30--color-line-0: #fff;
31--color-line-1: #f3f3f5;
32--color-line-2: #f0f0f2;
33--color-line-3: #798194;
34--color-line-4: #000;
35
36// * 文字色
37--color-font-0: #fff;
38--color-font-1: #a2a7af;
39--color-font-2: #58667f;
40--color-font-3: #333;
41--color-font-4: #111;

使用

项目入口样式文件（app.scss）引入

1@import "@golink/mina-ui/dist/style/index.scss";

示例

1// 字体大小
2font-size: var(--font-size-text);
3// 颜色
4background-color: var(--color-surface-0);
5// 尺寸
6margin-right: var(--space-xs);

覆盖

1.welcome {
2  --color-primary: #fff;
3
4  // ...
5  .button {
6    background-color: var(--color-primary);
7  }
8}

Scss 工具函数

索引

1// 多行文本截断；第三行开始截断
2@include text-ellipsis(3);
3
4// 单行文本截断
5@include text-ellipsis-single();
6
7// 骨架屏 -> 圆形
8@include skeleton-loading--radius();
9
10// 骨架屏 -> 矩形
11@include skeleton-loading();
12
13// 图片旋转
14@include rotate-icon();

SVG 图标

索引

图标库 - 目前仅支持 Line 风格，不支持 Fill 风格。

使用

项目入口样式文件（app.scss）引入

1@import "@golink/mina-ui/dist/style/icon.scss";

示例, 在图标库中找到心仪的图标，以icon-作为前缀添加类名即可。

1<div className="user-block__switch__icon icon-refresh-line" />

组件

🏁 开发

✍️ Authors

• @王祚

🎉 Acknowledgements

• Hat tip to anyone whose code was used
• Inspiration
• References