Skip to content

Commit

Permalink
feat(docs): add readme file
Browse files Browse the repository at this point in the history
  • Loading branch information
hankliu62 committed Apr 16, 2024
1 parent f05741c commit b5c84f1
Show file tree
Hide file tree
Showing 2 changed files with 160 additions and 0 deletions.
156 changes: 156 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
## @hankliu/hankliu-ui

基于AntDesign@4.x的一个UI组件库,一套企业级 UI 设计语言和 React 组件库

### 安装

```
npm install @hankliu/hankliu-ui --save-dev
```

或者

```
yarn add -D @hankliu/hankliu-ui
```

或者

```
pnpm add -D @hankliu/hankliu-ui
```

### 使用
``` tsx
import { Button, ImageCropper } from "@hankliu/hankliu-ui";

const DEFAULT_PROPS = {
aspectRatios: [
{
title: 'free'
},
{
value: 1/1,
title: '1:1'
},
{
value: 2/1,
title: '2:1'
},
{
value: 4/3,
title: '4:3'
}
],
title: "图像裁剪",
previewTitle: "此为预览图片",
tip: (
<div>
<div>
平台支持 JPG、PNG 图片格式;
<br />
每张图片文件请保持在 10Mb 以内
</div>
</div>
)
};

class ImageCropperDefault extends React.Component {
constructor(props) {
super(props);
this.state = {
url: "https://github.com/hankliu62/hankliu62.github.com/assets/8088864/91a13d0f-4685-411e-90bf-d8ecbec2ab56"
};
}

onChooseImage = () => {
ImageCropper.selectImage().then(img => this.setState({url: img.url}))
}

onUpload = (data) => {
this.setState({
okButtonProps: { loading: true }
})

// 上传操作
setTimeout(() => {
this.setState({
cropperVisible: false,
okButtonProps: { loading: false }
})
}, 3000)
}

render() {
const { cropperProps, okButtonProps, cropperVisible, url } = this.state;
return (
<div>
{
cropperVisible && (
<ImageCropper
{...cropperProps}
url={url}
open={cropperVisible}
onCancel={() => this.setState({ cropperVisible: false })}
onOk={this.onUpload}
onReupload={this.onChooseImage}
okButtonProps={okButtonProps}
/>
)
}
<Button
className="mr-8"
onClick={() =>
ImageCropper.selectImage().then(img => {
this.setState({ url: img.url, cropperProps: DEFAULT_PROPS, cropperVisible: true })
})
}
>
裁剪图片
</Button>
</div>
);
}
}

ReactDOM.render(<ImageCropperDefault />, mountNode);
```

## 特性

- 🍉 基于 `AntDesign@4.x`,具有其所有特性。
- 🍑 新增更多的高质量 `React` 组件,开箱即用。


## 兼容环境

- 现代浏览器和 IE11(需要 [polyfills](https://4x.ant.design/docs/react/getting-started-cn#兼容性))。
- 支持服务端渲染。
- [Electron](https://www.electronjs.org/)

| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Electron |
| --- | --- | --- | --- | --- |
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

## 链接

- [首页](https://hankliu62.github.io/hankliu-ui)

## 本地开发

克隆到本地开发:

```bash
$ git clone https://github.com/hankliu62/hankliu-ui.git hankliu-ui
$ cd hankliu-ui
$ npm install
$ npm start
```

打开浏览器访问 http://127.0.0.1:8001

## 免责声明

本项目只做个人练习以及私人项目使用,非商业用途,如有侵权,请告知本人进行删除。

非商业用途产品,如过 `Fork` 本项目使用于商业用途,造成法律责任,请自行解决,与本人无关。
4 changes: 4 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,10 @@
"site": "rimraf _website && cross-env NODE_OPTIONS=--max_old_space_size=4096 NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=production OUTPUT=_website bisheng build --ssr -c ./site/bisheng.config.js",
"less": "lessc --js --modify-var=\"root-entry-name=variable\" --global-var=\"root-entry-name=variable\" ./components/button/style/index.less ./components/button/style/index.css"
},
"repository": {
"type": "git",
"url": "git+https://github.com/hankliu62/hankliu-ui.git"
},
"author": "hank.liu",
"license": "ISC",
"dependencies": {
Expand Down

0 comments on commit b5c84f1

Please sign in to comment.