mirror of
https://github.com/overleaf/overleaf.git
synced 2024-10-17 21:05:04 -04:00
2f74b79d3a
[web] Bootstrap 5 containers, rows, cols GitOrigin-RevId: 2b6b6fd1aebce739971e1428ab7c3cd6ec6c3858
32 lines
960 B
TypeScript
32 lines
960 B
TypeScript
import { Container, Row, Col } from 'react-bootstrap-5'
|
|
import { Meta } from '@storybook/react'
|
|
|
|
type Args = React.ComponentProps<typeof Row>
|
|
|
|
export const ColumnRowCell = (args: Args) => {
|
|
return (
|
|
<Container style={{ border: '3px solid green' }}>
|
|
<Row {...args} style={{ border: '1px solid black' }}>
|
|
<Col sm={6} style={{ border: '1px solid red' }}>
|
|
<div style={{ backgroundColor: '#ddd' }}>Col 1</div>
|
|
</Col>
|
|
<Col sm={6} style={{ border: '1px solid red' }}>
|
|
<div style={{ backgroundColor: '#ddd' }}>Col 2</div>
|
|
</Col>
|
|
<Col sm={{ span: 10, offset: 2 }} style={{ border: '1px solid red' }}>
|
|
<div style={{ backgroundColor: '#ddd' }}>Col 3</div>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
)
|
|
}
|
|
|
|
const meta: Meta<typeof Row> = {
|
|
title: 'Shared / Components / Bootstrap 5 / Column-Row-Cell',
|
|
component: Row,
|
|
parameters: {
|
|
bootstrap5: true,
|
|
},
|
|
}
|
|
|
|
export default meta
|