react-purecss-ui v1.0.1
react-pure-css
React components for purecss
Install
npm install --save react-purecss-ui Usage
import React, { Component } from 'react'
import { Button } from 'react-pure-css'
class Example extends Component {
render () {
return (
<Button primary>React Purecss</Button>
)
}
} Components
Button
Use this component to generate purecss.io buttons For more description: Purecss.io Button
Properties:
| property | description |
|---|---|
primary : bool | (optional, default=true) To indicate that a button represents a primary action |
active : bool | (optional, default=false) To style a button so that it appears "pressed" |
disabled : bool | (optional, default=false) To mark a button as disabled |
href : string | (optional, default="") If it's defined it will renders a link instead of button |
className : string | (optional, default="") For additional classes |
Button.Group
Use this component to group multiple buttons together on a single line. For more description: Purecss.io Button Group
Properties:
| property | description |
|---|---|
role : string | (optional, default="group") (group\|toolbar) |
Grid
Use this component to generate purecss.io grids. For more description: Purecss.io Grid
Properties:
| property | description |
|---|---|
className : string | (optional, default="") For additional classes |
Cell
Use this component to generate purecss.io Units. For more description: Purecss.io Units
Properties:
| property | description |
|---|---|
unit : string | (optional, default="1") To set general unit size |
xl : string | (optional, default="") To set unit size on extra large screen sizes |
lg : string | (optional, default="") To set unit size on large screen sizes |
md : string | (optional, default="") To set unit size on medium screen sizes |
sm : string | (optional, default="") To set unit size on small screen sizes |
className : string | (optional, default="") For additional classes |
Table
Use this component to generate purecss.io Tables. For more description: Purecss.io Tables
Properties:
| property | description |
|---|---|
bordered : bool | (optional, default=false) To add horizontal and vertical borders to all cells |
horizontal : bool | (optional, default=false) To add horizontal borders to all cells |
striped : bool | (optional, default=false) To add class name to every other <tr> element changes the background of the row and creates a zebra-styled effect |
className : string | (optional, default="") For additional classes |
Menu
Use this component to generate purecss.io Menus. For more description: Purecss.io Menus
Properties:
| property | description |
|---|---|
horizental : bool | (optional, default=false) To create a horizontal menu |
scrollable : bool | (optional, default=false) To create a scrollable horizontal menu |
className : string | (optional, default="") For additional classes |
Menu.List
Use this component to generate a ulfor listing menu items with purecss.io classnames.
For more description: Purecss.io Menus
Properties:
| property | description |
|---|---|
className : string | (optional, default="") For additional classes |
Menu.Item
Use this component to generate a purecss.io menu item. For more description: Purecss.io Menus
Properties:
| property | description |
|---|---|
selected : bool | (optional, default=false) To mark a selected list element |
disabled : bool | (optional, default=false) To mark a link as disabled |
className : string | (optional, default="") For additional classes |
Menu.Header
Use this component to generate a purecss.io menu heading item. For more description: Purecss.io Menus
Properties:
| property | description |
|---|---|
className : string | (optional, default="") For additional classes |
Dropdown
Use this component to generate a purecss.io menu item with sub menus.
For more description: Purecss.io Dropdown
Use Dropdown.Item to generate dropdown item. It's the same as Menu.Item
Use Dropdown.Header to generate dropdown header. It's the same as Menu.Header
Properties:
| property | description |
|---|---|
label : string or element | (required) To set dropdown label |
disabled : bool | (optional, default=false) To disable dropdown |
listClassName : string | (optional, default="") To add custom css classes to dropdown submenus' list |
listStyle : string | (optional, default="") To add custom css styles to dropdown submenus' list |
className : string | (optional, default="") For additional classes |
License
MIT © jeangovil