# bees-ui

**Repository Path**: public-cli/bees-ui

## Basic Information

- **Project Name**: bees-ui
- **Description**: React框架PC端组件
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-07-01
- **Last Updated**: 2023-09-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# BeesUI

**React 框架 PC 端组件**

## 安装

1. 默认安装最新

```bash
$ npm install -S git+https://gitee.com/public-cli/bees-ui.git
```

2. 指定版本

```bash
$ npm install -S git+https://gitee.com/public-cli/bees-ui.git#1.0.0
```

## 使用

### 1. model

###### example

```tsx
import React, { useEffect, useReducer } from 'react';
import { Align, Model } from '@mcit/ui';

class Models extends Model {
  initialState = { count: 1 }; // 初始
  reduceCount = (count = 0) => {
    this.dispatch({ count: count - 1 });
  }; // 减少
}

const $models = new Models();

export default () => {
  const [state, dispatch] = useReducer($models.reducer, $models.initialState);
  $models.assign(dispatch);
  const { updater, loading, processing, count } = state;

  return (
    <Align>
      <button onClick={() => dispatch({ count: count + 1 })}>增加</button>
      <p>{count}</p>
      <button onClick={() => $models.reduceCount(count)}>减少</button>
    </Align>
  );
};
```

### 2. Icon

> 已本地化处理，CDN 私有化：//xxxx/fonts/remixicon.css

| 属性  | 说明 | 类型                                         | 默认值 |
| ----- | ---- | -------------------------------------------- | ------ |
| type  | 类型 | string [图标参照](https://www.remixicon.cn/) | home   |
| size  | 大小 | fw、xxs、xs、sm、1x、lg、xl、2x、3x、10x     | fw     |
| theme | 风格 | line、fill、null                             | line   |
| color | 颜色 | string                                       | null   |

##### 特殊的 theme

> 部分图标不区分线框或实底风格，需设置 theme='' 空状态。

### 3. Align

| 属性   | 说明     | 类型                 | 默认值 |
| ------ | -------- | -------------------- | ------ |
| align  | 排列方式 | string               | lm     |
| gutter | 间距     | string、number       | 8      |
| flex   | 栅格     | Array<number,string> | -      |

##### 如何使用 align

- 水平方向参数：l 左、c 中、r 右、s 均分、j 两端
- 垂直方向参数：t 上、m 中、b 下

##### 如何使用 flex

- 用法一：数字 [1, 2, 1] 按划分比例自动计算每个单元格占位大小
- 用法二：字符串 ['50px', '80px', '120px']、['120px', 'calc(100% - 120px)']、['30%', '70%'] 根据传入值渲染

### 4. Title

| 属性     | 说明                                | 类型                       | 默认值 |
| -------- | ----------------------------------- | -------------------------- | ------ |
| level    | 重要程度，相当于 h1、h2、h3、h4、h5 | 1、2、3、4、5、6           | 4      |
| strong   | 是否加粗                            | boolean                    | false  |
| icon     | 图标前缀                            | string、boolean、ReactNode | null   |
| title    | 标题                                | string                     | 标题   |
| subTitle | 子标题                              | string、null               | null   |