1.0.4 • Published 7 years ago
axs-ui v1.0.4
Axs UI
UI component primitives built with Axs
npm i axs-ui
// Example
import {
Heading,
Flex,
Button
} from 'axs-ui'
const Header = () => (
<Flex>
<Heading>Hello</Heading>
<Button>Go</Button>
</Flex>
)
Components
Heading
Heading element with level
prop for setting element type.
<Heading level={1}>Renders an h1 element</Heading>
Flex
Box component with display: flex
.
Uses array prop types for responsive styles.
<Flex
alignItems='center'
flexDirection={[
'column',
'row'
]}
justifyContent='space-between'
/>
Flex props
flexWrap
(string or array) - setsflex-wrap
flexDirection
(string or array) - setsflex-direction
alignItems
(string or array) - setsalign-items
justifyContent
(string or array) - setsjustify-content
flexAuto
(boolean or array) - setsflex: 1 1 auto
flexNone
(boolean or array) - setsflex: none
Button
<Button>Go</Button>
Label
<Label>Label</Label>
Input
<Input
name='input'
value='Hello'
onChange={onChange}
/>
Select
<Select
name='select'
value='Hello'
onChange={onChange}>
<option>Hello</option>
<option>Hi</option>
</Select>
Textarea
<Textarea
name='textarea'
value='Hello'
onChange={onChange}
/>
Radio
<label>
<Radio
name='radio'
checked={checked}
onClick={onClick}
/>
Radio
</label>
Checkbox
<label>
<Checkbox
name='checkbox'
checked={checked}
onClick={onClick}
/>
Checkbox
</label>
Slider
<Slider
name='slider'
value={32}
onChange={onChange}
/>
Progress
<Progress value={1/4}>
25%
</Progress>
InlineBlock
<InlineBlock width={1/4}>
InlineBlock
</InlineBlock>
Span
<Span blue>
Span
</Span>
- Link
- Pre
- Code
- Blockquote
- List
MIT License