# yg-library

### 介绍

1、基于 taro+ts 框架的 ui 私有组件库；

2、所有组件和样式都由 yg 开头

3、组件都在 components 文件夹下，命名规范为组件名大写开头【具体相关事项如需请参考案例】，src/index.ts 为组件的统一暴露口，Yg + compName

4、组件的对应样式在 style/components 中，文件名命名与需与组件名对应

<!-- 5、base 文件的组件为私有基础组件，不做外部调用 -->

### 安装及使用

安装：npm install yg-library -s

### 样式

1、引用方式：app.scss 中引入全局样式 @import 'yg-library/styles';

2、变量：样式变量见 variable.scss，对应生成的 class 类名与其变量一致，开发中可使用类名【皮肤变量文件也可单独引入 @import "yg-library/variable"】

3、换肤：如需根据项目做皮肤替换，需注意的是<font color="red">在 app.scss 中 引用路径【@import 'yg-library/styles';】需要写在文件最后面才能覆盖默认的变量</font>

4、常用样式见 style/css

5、如引用库的项目使用了webpack5，需要在config中配置，清除webpack5中对该库的cache，要不然在开发环境会出现部分原生标签找不到的情况(解决taro框架自带的bug)
```
compiler: {
  type: 'webpack5',
  prebundle: { exclude: ['yg-library'] }
},
 ```
### 使用示例

```
import { YgButton } from 'yg-library';

const Index = () => {
  return (
    <View>
      <YgButton isFull onClick={_ => alert('我是按钮')}>
        按钮
      </YgButton>
    </View>
  )
}
```