Skip to content

alvinhtml/react-miniui

Repository files navigation

react-miniui

A mini react UI library. Demo: http://mui.alvinhtml.com/

Development

  • Install npm packages

    npm install
    
  • Launch dev server

    npm run start
    
  • Lint

    npm run lint
    
  • Build

    npm run build
    

Install react-miniui

npm install react-miniui --save

Usage

import React, { Component } from 'react';
import { Button, ButtonGroup } from 'react-miniui';

export default class ButtonPage extends Component {
  handleClick() {
    console.log('cilck!');
  }
  render() {
    return(
      <div>
          <Button color="blue" onClick={this.handleClick.bind(this)}>click</Button>
          <ButtonGroup>
            <Button color="green">button1</Button>
            <Button className="active" color="green">button2</Button>
            <Button color="green">button3</Button>
          </ButtonGroup>
        </div>
      </div>
    )
  }
}

Components

Row, Flex, Col, Button, ButtonGroup, Input, Textarea, FormGroup, Icon, Badge, Dropdown, Menu, Item Select, Option

http://mui.alvinhtml.com/

Dropdown

export default class DropdownPage extends Component {
  render() {
    return(
      <Dropdown name="phone" value="iphone" onChange={this.handleChange.bind(this)}>
        <Button color="blue">请选择 <Icon icon="fa-down-dir" /></Button>
        <Menu>
          <Item value="iphone">iphone</Item>
          <Item value="ipad">ipad</Item>
          <Item value="Macbook Pro">Macbook Pro</Item>
          <Item value="windows phone">windows phone</Item>
        </Menu>
      </Dropdown>
    )
  }
}

About

A mini react UI library

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published