Browse Source

Update 'README.md'

天问 1 year ago
parent
commit
34a8c67544
1 changed files with 74 additions and 0 deletions
  1. 74 0
      README.md

+ 74 - 0
README.md

@@ -1,2 +1,76 @@
+
 # vehicle-plate-keyboard
 
+
+React 实现的车牌键盘。
+
+## 💡 Features
+
+- 省份 + 字母/数字 + '港澳学警领'
+- 新能源车牌
+- 自动判断当前位置可输入字符类型
+
+## 🚗 Demo
+
+[Demo](https://codesandbox.io/s/vehicle-plate-keyboard-demo-xxdlv)
+
+![Demo](https://raw.githubusercontent.com/LiuuY/vehicle-plate-keyboard/master/demo.gif)
+
+## 📷 Screenshots
+
+![1](https://raw.githubusercontent.com/LiuuY/vehicle-plate-keyboard/master/screenshots/keyboard1.png)
+
+![2](https://raw.githubusercontent.com/LiuuY/vehicle-plate-keyboard/master/screenshots/keyboard2.png)
+
+![3](https://raw.githubusercontent.com/LiuuY/vehicle-plate-keyboard/master/screenshots/keyboard3.png)
+
+## 📦 Installation
+
+```Javascript
+yarn add vehicle-plate-keyboard
+```
+
+## 🔨 Usage
+
+```JavaScript
+import LicenseKeyboard from 'vehicle-plate-keyboard';
+import 'vehicle-plate-keyboard/dist/main.css';
+
+...
+
+<LicenseKeyboard
+   visible={state.showKeyboard}
+   onChange={value => setState({ value })}
+   value={state.value}
+   done={() => setState({ showKeyboard: false })}
+/>
+```
+
+## 🗺 API
+
+| props              | type                    | description                   |
+| ------------------ | ----------------------- | ----------------------------- |
+| visiable           | boolean                 | keyboard visible              |
+| onChange           | (value: string) => void | trigger when user tap         |
+| value              | string                  | controlled value              |
+| done               | () => void              | trigger when keyborad dismiss |
+| confirmButtonStyle | React.CSSProperties     | confirm button style          |
+| confirmButtonText  | string                  | confirm button text           |
+| cellTextStyle      | React.CSSProperties     | keycell style                 |
+| safeArea           | boolean                 | show safearea                 |
+
+## 🚧 Development
+
+vehicle-plate-keyboard use [Storybook](https://storybook.js.org/) for developing in isolation.
+
+```javascript
+yarn storybook
+```
+
+open browser, http://localhost:6006/, 😆
+
+![1](https://raw.githubusercontent.com/LiuuY/vehicle-plate-keyboard/master/screenshots/storybook.png)
+
+## 📝 License
+
+MIT License