1 | <p align="center">
|
2 | <img width="80" align="center" src="https://image-1256107964.cos.ap-beijing.myqcloud.com/blog/2019-02-22-logo.jpg">
|
3 | </p>
|
4 | <h1 align="center">Semon UI</h1>
|
5 | <div align="center">
|
6 |
|
7 | [![Build Status](https://travis-ci.org/Hoofoo-WHU/semon-ui.svg?branch=master)](https://travis-ci.org/Hoofoo-WHU/semon-ui)
|
8 | [![Codecov](https://img.shields.io/codecov/c/github/hoofoo-WHU/semon-ui.svg)](https://codecov.io/gh/Hoofoo-WHU/semon-ui)
|
9 | [![License](https://img.shields.io/github/license/hoofoo-WHU/semon-ui.svg?style=flat)](LICENSE)
|
10 | [![install size](https://packagephobia.now.sh/badge?p=@semon/semon-ui)](https://packagephobia.now.sh/result?p=@semon/semon-ui)
|
11 | [![gzip:js](http://img.badgesize.io/https://unpkg.com/@semon/semon-ui/dist/index.js?compression=gzip&label=gzip:%20js)](https://www.npmjs.com/package/@semon/semon-ui)
|
12 | [![gzip:css](http://img.badgesize.io/https://unpkg.com/@semon/semon-ui/dist/index.css?compression=gzip&label=gzip:%20css)](https://www.npmjs.com/package/@semon/semon-ui)
|
13 | [![downloads](https://img.shields.io/npm/v/@semon/semon-ui.svg)](https://www.npmjs.com/package/@semon/semon-ui)
|
14 | [![version](https://img.shields.io/npm/dt/@semon/semon-ui.svg)](https://www.npmjs.com/package/@semon/semon-ui)
|
15 |
|
16 | </div>
|
17 |
|
18 | ## ✨ 介绍
|
19 | 一套简单的React组件库,目的是练手,不要在项目中使用
|
20 |
|
21 | ## 📦 安装
|
22 | ```shell
|
23 | npm install @semon/semon-ui --save
|
24 | ```
|
25 | ```shell
|
26 | yarn add @semon/semon-ui
|
27 | ```
|
28 |
|
29 | ## 🚀 开始使用
|
30 | ```jsx
|
31 | import { Button } from '@semon/semon-ui'
|
32 | ReactDOM.render(<Button />, container)
|
33 | ```
|
34 | 引入css样式:
|
35 | ```js
|
36 | import '@semon/semon-ui/dist/index.css'
|
37 | ```
|
38 | 按需引入:
|
39 | ```jsx
|
40 | import Button from '@semon/semon-ui/dist/Button'
|
41 | import '@semon/semon-ui/dist/Button.css'
|
42 | ```
|
43 |
|
44 | ```js
|
45 | [
|
46 | "import",
|
47 | {
|
48 | "libraryName": "@semon/semon-ui",
|
49 | "libraryDirectory": "dist",
|
50 | "style": (name) => `@semon/semon-ui/dist/${name}.css`
|
51 | }
|
52 | ]
|
53 |
|
54 | ``` -->
|
55 | ## 🔗 链接
|
56 | - [更新日志](CHANGELOG.md) |
\ | No newline at end of file |