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` |
| 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` |
| shrink | `Number | String` |
| 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` |
| 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 />