react.mdl

Deprecated !

• Try haoxins/react-mdc

react.mdl

React Components for google/material-design-lite v1

Components

• DateTimePicker

  • Props
    • See chmln/flatpickr
  • Example

  <DateTimePicker id='datepicker' data-enabletime={true}
    onChange={v => console.info(v)} />

• Badge

  • Props

    • className: string
    • background: bool
    • overlap: bool
    • href: string

  • Example

  <Badge data-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={true} primary={true}>floating</Button>

• Checkbox

  • Props

    • className: string
    • label: string
    • ripple: bool
    • id: string

  • Example

  <Checkbox label='hello world' />

• Progress

  • Props

    • indeterminate: bool,
    • className: string,
    • progress: number,
    • buffer: number,

  • Example

  <Progress progress={progress} buffer={buffer} />
  <Progress indeterminate={true} />

• Radio

  • Props

    • className: string,
    • label: string,
    • name: string,
    • ripple: bool,
    • id: string

  • Example

  <Radio label='hello world' />

• Slider

  • Props

    • className: string

  • Example

  <Slider min='1' max='10' />

• Spinner

  • Props

    • singleColor: bool
    • className: string
    • active: bool

  • Example

  <Spinner active={true} />

• Switch

  • Props

    • className: string
    • label: string
    • ripple: bool
    • id: string

  • Example

  <Switch label='hello world' />

• Tag

  • Props

    • onClose: func,
    • color: string,
    • name: string,

  • Example

  <Tag name='hello' color='red'
    onClose={() => console.info('close tag')} />

• TextField

  • Props

    • className: string,
    • expandable: bool,
    • floating: bool,
    • pattern: string,
    • label: string,
    • error: string

  • Example

  <TextField />
  <TextField label='hello input' floating={true} />
  <TextField pattern='-?[0-9]*(\.[0-9]+)?' label='number' error='u sb' floating={true} />
  <TextField pattern='-?[0-9]*(\.[0-9]+)?' label='number' error='u sb' expandable={true} />

• Textarea

  • Props

    • className: string
    • label: string
    • id: string

  • Example

  <Textarea rows='4' cols='50' />
  <Textarea rows='4' cols='50' label='hello, textarea' />

• Tooltip

  • Props

    • className: string
    • htmlFor: string
    • large: bool

  • Example

  <Tooltip htmlFor='tip'}>tooltip!!!</Tooltip>
  <div id='tip'>hello world</div>

• Menu

  • Props

    • direction: string
    • icon: string

  • Example

  <Menu direction='right-bottom'>
    <MenuItem>one</MenuItem>
    <MenuItem>two</MenuItem>
    <MenuItem>
      <a href='#'>hello</a>
    </MenuItem>
  </Menu>
   
  <Menu direction='top-right' icon='toc'>
    <MenuItem>one</MenuItem>
    <MenuItem>two</MenuItem>
    <MenuItem>
      <a href='#'>hello</a>
    </MenuItem>
  </Menu>

• Tabs

  • Props

    • defaultActiveKey: string
    • onTabClick: func

  • Example

  <Tabs>
    <TabPane key='1' tab='one'>
      hello
    </TabPane>
    <TabPane key='2' tab='two'>
      world
    </TabPane>
    <TabPane key='3' tab='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: 18,
    address: 'Shanghai'
  }, {
    name: 'luqiang',
    age: 22,
    address: 'Hangzhou'
  }]
   
  const columns = [{
    title: 'name',
    dataIndex: 'name',
  }, {
    title: 'age',
    dataIndex: 'age',
  }, {
    title: 'address',
    dataIndex: 'address',
    key: 'address'
  }]
   
  <Table dataSource={dataSource} columns={columns} />

  • custom render

  const dataSource = [{
    name: 'haoxin',
    age: 18,
    address: 'Shanghai'
  }, {
    name: 'luqiang',
    age: 22,
    address: 'Hangzhou'
  }]
   
  const columns = [{
    title: 'name',
    dataIndex: 'name',
    render: name => <a href='#'>{name}</a>
  }, {
    title: 'age',
    dataIndex: 'age'
  }, {
    title: 'address',
    dataIndex: 'address',
    render(address, record) {
      return (
        <strong>{address + '. ' + record.name}</strong>
      )
    }
  }]
   
  <Table dataSource={dataSource} columns={columns} />

License

MIT