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 |
String row|row-reverse|column|column-reverse |
Cross axis direction |
align |
String flex-start|flex-end|center|baseline|stretch |
Cross axis alignement |
justify | String |
Justification |
wrap |
String nowrap|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 />