纱线材料 UI

简介

纱线材料是一个基于 React 的 UI 组件库，提供了一系列易于使用、高度定制化的组件。

功能

1. 提供丰富的 UI 组件，包括按钮、输入框、表格、弹窗等。
2. 支持定制化主题，通过配置文件轻松更换应用的主题色。
3. 内置许多实用的工具类函数，如颜色转换、日期格式化等。
4. 支持国际化，可轻松实现多语言切换。

安装

使用 npm 安装：

npm install yarn
yarn add shawn-UI

使用

引入相应的组件并使用即可，例如：

import { Button } from 'shawn-UI'

<Button type="primary" onClick={() => console.log('hello world')}>
  Click me!
</Button>

定制主题

在应用中创建一个 theme.js 文件，并修改相应主题色即可。例如：

// theme.js

module.exports = {
  primaryColor: '#1890ff'
}

工具类函数

• colorToRgba(color: string, alpha: number): 将十六进制颜色转为 rgba 颜色。
• rgbaToColor(rgba: string): 将 rgba 颜色转为十六进制颜色。
• dateFormat(date: Date, format: string): 将日期格式化为指定格式的字符串。

国际化

在应用中创建一个 locales 文件夹，按照语言类型分别创建对应的语言文件，例如：

// locales/en-US.json

{
  "hello": "Hello, world!"
}

然后使用 react-intl 库中的 FormattedMessage 组件即可：

import { FormattedMessage } from 'react-intl'

<FormattedMessage id="hello" defaultMessage="Hello, world!" />

结语

纱线材料 UI 是一个易于使用、高度定制化的组件库，欢迎使用和贡献。