Mdui-in-react NPM

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 inputtype='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 inputtype= "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 inputtype='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