📝 目录

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

🧐 关于

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