This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (component-ui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
component-ui
Simple components for React. Bring your own CSS reset.
import React from'react';import{ Button }from'component-ui';constButtonExamples=(props)=>(<div><Button className="button-example">Button with className</Button><Button click={props.click}>Button with click handler</Button><Button confirm disabled>Confirm Disabled</Button><Button primary>Primary</Button><Button submit>Submit</Button><Button warning>Warning</Button></div>);
Flex
Property
Type
Description
align
String
Aligns the children within the component
basis
Number
Percent of the parent Flex used for size
className
String
CSS class passed into the element
grow
Boolean
Fills the space available in the parent
hidden
Boolean
Hides the component (display: none)
hide
String
Hides the component for the screen size
hideXs
Boolean
Hidden for Extra Small to Small screens
hideSm
Boolean
Hidden for Small to Medium screens
hideMd
Boolean
Hidden for Medium to Large screens
hideLg
Boolean
Hidden for Large to Extra Large screens
layout
String
Direction to layout the children within
overflow
Boolean
Allows scrolling of overflowing content
show
String
Shows the component for the screen size
shrink
Boolean
Shrinks to allow siblings to fit parent
wrap
Boolean
Allows wrapping the children to fit
import React from'react';import{ Flex }from'component-ui';/*
align:
start | start-{center, end, around, between}
center | center-{start, end, around, between}
end | end-{start, center, around, between}
stretch | stretch-{start, center, end, around, between}
baseline | baseline-{start, center, end, around, between}
hide/show:
xs, gt-xs, lt-xs | extra small (320px), greater than, less than
sm, gt-sm, lt-sm | small (480px), greater than, less than
md, gt-md, lt-md | medium (768px), greater than, less than
lg, gt-lg, lt-lg | large (1024px), greater than, less than
xl, gt-xl, lt-xl | extra large (1280px), greater than, less than
*/constFlexExamples=()=>(<Flex align="start-center" className="flex-example" layout="row"><Flex align="stretch-start" basis={50} hide="gt-md" layout="column"><p>Content</p></Flex><Flex align="center-end" grow hideLg layout="column"><p>Content</p></Flex><Flex align="center-start" layout="column" overflow shrink><p>Content</p></Flex><Flex align="end" hidden layout="column" overflow show="lt-md" shrink><p>Content</p></Flex></Flex>);
Grid
Property
Type
Description
className
String
CSS class passed into the element
container
Boolean
Becomes a container for Grid components
hidden
Boolean
Hides the component (display: none)
hide
String
Hides the component for the screen size
hideXs
Boolean
Hidden for Extra Small to Small screens
hideSm
Boolean
Hidden for Small to Medium screens
hideMd
Boolean
Hidden for Medium to Large screens
hideLg
Boolean
Hidden for Large to Extra Large screens
show
String
Shows the component for the screen size
xs
Number
Grid size (1-12) for Extra Small screens
sm
Number
Grid size (1-12) for Small screens
md
Number
Grid size (1-12) for Medium screens
lg
Number
Grid size (1-12) for Large screens
xl
Number
Grid size (1-12) for Extra Large screens
import React from'react';import{ Grid }from'component-ui';/*
hide/show:
xs, gt-xs, lt-xs | extra small (320px), greater than, less than
sm, gt-sm, lt-sm | small (480px), greater than, less than
md, gt-md, lt-md | medium (768px), greater than, less than
lg, gt-lg, lt-lg | large (1024px), greater than, less than
xl, gt-xl, lt-xl | extra large (1280px), greater than, less than
*/constGridExamples=()=>(<Grid className="grid-example" container><Grid hide="lt-md" xs={12} sm={6} md={4}><p>Content</p></Grid><Grid hideMd xs={12} sm={6} md={4}><p>Content</p></Grid><Grid show="gt-md" xs={12} sm={6} md={4}><p>Content</p></Grid></Grid>);
import React from'react';import{ Each }from'component-ui';const items =[{name:'Pasta'},{name:'Pizza'}];constItem=(props)=><li>{props.name}</li>;constEachExample=()=>(<ul><Each items={items} component={Item}/></ul>);
When
Property
Type
Description
is
Boolean
Renders the children if value is truthy
import React from'react';import{ When }from'component-ui';constWhenExample=(props)=>(<div><When is={props.isExampleReady}><p>Content is rendered</p></When><When is={!props.isExampleReady}><p>Content is not rendered</p></When></div>);