66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
|
import Stack from '@mui/joy/Stack';
|
||
|
|
import Sheet from '@mui/joy/Sheet';
|
||
|
|
import Divider from '@mui/joy/Divider';
|
||
|
|
import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
|
||
|
|
|
||
|
|
export default function DividerUsage() {
|
||
|
|
return (
|
||
|
|
<JoyUsageDemo
|
||
|
|
componentName="Divider"
|
||
|
|
data={[
|
||
|
|
{
|
||
|
|
propName: 'orientation',
|
||
|
|
knob: 'radio',
|
||
|
|
defaultValue: 'horizontal',
|
||
|
|
options: ['horizontal', 'vertical'],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
propName: 'children',
|
||
|
|
knob: 'input',
|
||
|
|
defaultValue: '',
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
renderDemo={(props) => (
|
||
|
|
<Sheet sx={{ my: 2, bgcolor: 'transparent' }}>
|
||
|
|
<Sheet
|
||
|
|
sx={{
|
||
|
|
height: 12,
|
||
|
|
width: 80,
|
||
|
|
borderRadius: 'lg',
|
||
|
|
mb: 1,
|
||
|
|
bgcolor: 'background.level3',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<Stack
|
||
|
|
direction={props.orientation === 'vertical' ? 'row' : 'column'}
|
||
|
|
spacing={2}
|
||
|
|
sx={{ width: 300, pb: 3 }}
|
||
|
|
>
|
||
|
|
<Sheet
|
||
|
|
sx={[
|
||
|
|
{
|
||
|
|
flexGrow: 1,
|
||
|
|
borderRadius: 'xs',
|
||
|
|
bgcolor: 'background.level3',
|
||
|
|
},
|
||
|
|
props.orientation === 'vertical' ? { height: 120 } : { height: 40 },
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
<Divider {...props} />
|
||
|
|
<Sheet
|
||
|
|
sx={[
|
||
|
|
{
|
||
|
|
flexGrow: 1,
|
||
|
|
borderRadius: 'xs',
|
||
|
|
bgcolor: 'background.level3',
|
||
|
|
},
|
||
|
|
props.orientation === 'vertical' ? { height: 120 } : { height: 40 },
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
</Stack>
|
||
|
|
</Sheet>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|