Deprecated !
react.mdl
React Components for google/material-design-lite v1
Components
-
DateTimePicker
Props
- See chmln/flatpickr
Example
<DateTimePicker ='datepicker' == /> -
Badge
-
Props
- className: string
- background: bool
- overlap: bool
- href: string
-
Example
<Badge ='go'>hello</Badge> -
-
Button
-
Props
- className: string
- floating: bool
- colored: bool
- primary: bool
- ripple: bool
- raised: bool
- accent: bool
- icon: bool
- mini: bool
-
Example
<Button>button</Button><Button = =>floating</Button> -
-
Checkbox
-
Props
- className: string
- label: string
- ripple: bool
- id: string
-
Example
<Checkbox ='hello world' /> -
-
Progress
-
Props
- indeterminate: bool,
- className: string,
- progress: number,
- buffer: number,
-
Example
<Progress = = /><Progress = /> -
-
Radio
-
Props
- className: string,
- label: string,
- name: string,
- ripple: bool,
- id: string
-
Example
<Radio ='hello world' /> -
-
Slider
-
Props
- className: string
-
Example
<Slider ='1' ='10' /> -
-
Spinner
-
Props
- singleColor: bool
- className: string
- active: bool
-
Example
<Spinner = /> -
-
Switch
-
Props
- className: string
- label: string
- ripple: bool
- id: string
-
Example
<Switch ='hello world' /> -
-
Tag
-
Props
- onClose: func,
- color: string,
- name: string,
-
Example
<Tag ='hello' ='red'= /> -
-
TextField
-
Props
- className: string,
- expandable: bool,
- floating: bool,
- pattern: string,
- label: string,
- error: string
-
Example
<TextField /><TextField ='hello input' = /><TextField ='-?[0-9]*(\.[0-9]+)?' ='number' ='u sb' = /><TextField ='-?[0-9]*(\.[0-9]+)?' ='number' ='u sb' = /> -
-
Textarea
-
Props
- className: string
- label: string
- id: string
-
Example
<Textarea ='4' ='50' /><Textarea ='4' ='50' ='hello, textarea' /> -
-
Tooltip
-
Props
- className: string
- htmlFor: string
- large: bool
-
Example
<Tooltip ='tip'}>tooltip!!!</Tooltip><div ='tip'>hello world</div> -
-
Menu
-
Props
- direction: string
- icon: string
-
Example
<Menu ='right-bottom'><MenuItem>one</MenuItem><MenuItem>two</MenuItem><MenuItem><a ='#'>hello</a></MenuItem></Menu><Menu ='top-right' ='toc'><MenuItem>one</MenuItem><MenuItem>two</MenuItem><MenuItem><a ='#'>hello</a></MenuItem></Menu> -
-
Tabs
-
Props
- defaultActiveKey: string
- onTabClick: func
-
Example
<Tabs><TabPane ='1' ='one'>hello</TabPane><TabPane ='2' ='two'>world</TabPane><TabPane ='3' ='three'>go go go</TabPane></Tabs> -
-
Table
-
Props
- dataSource: array.isRequired,
- columns: array.isRequired,
- className: string,
- selectable: bool
-
Example
- basic
const dataSource =name: 'haoxin'age: 18address: 'Shanghai'name: 'luqiang'age: 22address: 'Hangzhou'const columns =title: 'name'dataIndex: 'name'title: 'age'dataIndex: 'age'title: 'address'dataIndex: 'address'key: 'address'<Table = = />- custom
render
const dataSource =name: 'haoxin'age: 18address: 'Shanghai'name: 'luqiang'age: 22address: 'Hangzhou'const columns =title: 'name'dataIndex: 'name'<a ='#'>name</a>title: 'age'dataIndex: 'age'title: 'address'dataIndex: 'address'{return<strong>address + '. ' + recordname</strong>}<Table = = /> -
License
MIT