forked from ddrilling/asb_cloud_front
39 lines
933 B
JavaScript
39 lines
933 B
JavaScript
export const Grid = ({children, style, ...other}) => {
|
|
const gridContainerStyle = {
|
|
display: 'grid',
|
|
margin: '8px',
|
|
justifyItems: 'stretch',
|
|
alignItems: 'stretch',
|
|
...style,
|
|
}
|
|
|
|
return <div style={gridContainerStyle} {...other}>
|
|
{children}
|
|
</div>
|
|
}
|
|
|
|
export const GridItem = ({children, row, col, rowSpan, colSpan, style, ...other}) => {
|
|
const localRow = +row
|
|
const localCol = +col
|
|
const localColSpan = colSpan ? colSpan - 1 : 0
|
|
const localRowSpan = rowSpan ? rowSpan - 1 : 0
|
|
const gridItemStyle = {
|
|
gridColumnStart: localCol,
|
|
gridColumnEnd: localCol + localColSpan,
|
|
gridRowStart: localRow,
|
|
gridRowEnd: localRow + localRowSpan,
|
|
padding: '4px',
|
|
...style,
|
|
}
|
|
|
|
return <div style={gridItemStyle} {...other}>
|
|
{children}
|
|
</div>
|
|
}
|
|
|
|
export const Flex = ({children, style, ...other}) =>
|
|
<div
|
|
style={{display:'flex', ...style}}
|
|
{...other}>
|
|
{children}
|
|
</div> |