mdui-in-react
<Input
onValueChange={newText=>{
this.setState({inputText:newText})
}}
value={inputText}
header="输入内容"
icon="link"
error="这是一个可选的错误信息"
type="number"
/>
Mdui in react is a react UI Library Based on mdui. It encapsulates the built-in components of mdui (including callback events), and adds some practical extension components.
This project is a derivative project of my website ygktool. Thanks to mdui for its excellent front-end framework!
Quick Start
Install
npm i mdui-in-react
or
yarn add mdui-in-react
Usage
import '../node_modules/mdui/dist/css/mdui.min.css'
<ComponentName
{...props}
/>MDUI Components
输入框Input
Options
| Name | type | default | description |
|---|---|---|---|
| icon | string | No display | The name of the material design icon to display in front of the input |
| value | string | -- | Input content |
| onValueChange | func | -- | The callback function after the value of the input box changes. The parameter is the new value |
| rows | string | -- | If it exists, it will automatically switch to the textarea label |
| header | string | 输入框 | Label Text |
| placeholder | string | null | If there is content (including space), the header will be fixed |
| other | object | -- | Other parameters that can be used for input tags, using JSX synatx |
列表控制——开关ListControlCheck
Options
| Name | type | default | description |
|---|---|---|---|
| icon | string | settings | The name of the material design icon to display in front of the litem |
| checked | boolean | true | if check |
| onCheckedChange | func | -- | Callback function when value changes, parameter is new value |
| title | string | 开关 | just as its name implies |
滑块RangeInput
Options
| Name | type | default | description |
|---|---|---|---|
| value | string | 5 | just as its name implies |
| onValueChange | string | text | Callback function when value changes, the parameter is new value |
| title | string | 调节 | just as its name implies |
| other | object | -- | Other parameters that can be used for input[type='range'] tags(Such as max step..), using JSX synatx. |
下拉选择Select
You need to pass in an array similar to the following as the item to be selected.Value is usually used as an identifier
[{
name:'通用物体和场景',
value:'normal'
}, {
name:'动物',
value:'animal'
}]
Options
| Name | type | default | description |
|---|---|---|---|
| options | [object] | -- | Items to be selected |
| value | number | -- | Value corresponding to the selected item |
| onOptionChange | func | -- | The callback function after the option is modified. The parameter is the value corresponding to the selected item |
Extended components
音频播放器MusicPlayer
Accept a blob link as a prop, support adjusting progress / pause / play / download
options
| Name | type | default | description |
|---|---|---|---|
| audio | blob | -- | Audio source |
| title | string | 音频播放器 | A title in the top left corner of card |
| subtitle | string | -- | A subtitle in the top left corner of card |
| cover | string | https://s4.music.126.net/style/web2/img/default/default_album.jpg | A img in the left of card |
| other | object | -- | Other parameters that can be used for audio tags, using JSX synatx. |
颜色选择器ColorInput
The color selector beautifies the input[type= "color"] tag as a block level button with color blocks.
options
| Name | type | default | description |
|---|---|---|---|
| value | string | -- | color value |
| text | string | "选择颜色" | 标题文字 |
| onColorChange | func | -- | The callback function after modifying the color. The parameter is the color value |
| other | object | -- | Other parameters that can be used for input[type='color'] tags, using JSX synatx. |
回顶按钮ToTop
When the screen is more than 148px away from the top, it will automatically appear in the lower left corner. After clicking, the screen will smoothly scroll to the top.
options
Nothing....
对话框菜单选择ListControlMenu
A list item, click to display a dialog box containing the items to be selected. You need to pass in an array similar to 下拉选择
Optinos
| Name | type | default | description |
|---|---|---|---|
| items | array | -- | Items to be selected |
| checked | number | -- | Array subscript corresponding to the selected item |
| onCheckedChange | func | -- | The callback function after modifying the option. The parameter is value attribute |
| title | string | "请选择" | 标题文字 |
| icon | string | settings | The name of the material design icon to display in front of the input |
Related resources
- MDUI：https://mdui.org
- Material Design Icons https://www.mdui.org/docs/material_icon
About
The author is a senior one student