0.3.4 • Published 4 years ago
@b-flower/bdm-react v0.3.4
BDM-React components
Basic components for use with React & @b-flower/bdm environment.
Components
Button
Same as @material-ui button with a big size option.
import '@b-flower/bdm-react/core/Button'
<Button size="big">Flex
Flex system layout
Properties
| property | values | |
|---|---|---|
| component | String|Component | Component to use for render, default div |
| direction | Stringrow|row-reverse|column|column-reverse | Cross axis direction |
| align | Stringflex-start|flex-end|center|baseline|stretch | Cross axis alignement |
| justify | String | Justification |
| wrap | Stringnowrap|wrap|wrap-reverse | Wether to wrap if contents overflow |
| flex | Number | Flex shortcut only : 0 -> n, relative size for a Flex.Item |
| basis | Number|String | Base item size |
| shrink | Number|String | Item can shrink |
| grow | Number | Item can grow |
| width | String | Any allowed CSS value |
| height | String | Any allowed CSS value |
| ... | + any prop supported by component |
Usage
import Flex from '@b-flower/bdm-react/core/Flex'
/* default container - direction : row */
<Flex/>
/* alias for Flex - direction : row */
<Flex.Row/>
/* container - direction : column */
<Flex.Column/>
/* default content - flex : 1 */
<Flex.Item/>Example
<Flex ...props>
<Flex.Item flex={1}>
// default size, takes available space (flex:1)
</Flex.Item>
</Flex.Item flex={0}>
// resize to content size
</Flex.Item>
</Flex>Header
Title & subtitle component
import Header from '@b-flower/bdm-react/core/Header'
<Header title="My Title"/>Loader
Extended @material-ui's CircularProgress component
Properties
| property | values | |
|---|---|---|
| modal | Boolean | Full screen & centered loader |
| ... | + any prop supported by CircularProgress |
Usage
import Loader from '@b-flower/bdm-react/core/Loader'
<Loader modal/>Markdown
Markdown parser & renderer (uses react-markdown)
Properties
| property | values | |
|---|---|---|
| component | String|Component | Component to use for render, default div |
| source | String | Markdown text |
| options | Object | react-markdown options |
| ... | + any prop supported by component |
Usage
import Markdown from '@b-flower/bdm-react/core/Markdown'
<Markdown />