69 lines
1.7 KiB
JavaScript
69 lines
1.7 KiB
JavaScript
|
import Avatar from '@mui/joy/Avatar';
|
||
|
|
import Box from '@mui/joy/Box';
|
||
|
|
import Chip from '@mui/joy/Chip';
|
||
|
|
import ChipDelete from '@mui/joy/ChipDelete';
|
||
|
|
import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
|
||
|
|
|
||
|
|
export default function ChipVariables() {
|
||
|
|
return (
|
||
|
|
<JoyVariablesDemo
|
||
|
|
componentName="Chip"
|
||
|
|
renderCode={(formattedSx) => `<Chip
|
||
|
|
startDecorator={<Avatar />}
|
||
|
|
endDecorator={<ChipDelete />}${formattedSx ? `${formattedSx}>` : '\n>'}`}
|
||
|
|
data={[
|
||
|
|
{
|
||
|
|
var: '--Chip-minHeight',
|
||
|
|
defaultValue: '32px',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
var: '--Chip-radius',
|
||
|
|
defaultValue: '24px',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
var: '--Chip-gap',
|
||
|
|
defaultValue: '6px',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
var: '--Chip-paddingInline',
|
||
|
|
defaultValue: '12px',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
var: '--Chip-decoratorChildHeight',
|
||
|
|
defaultValue: '24px',
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
renderDemo={(sx) => (
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'column',
|
||
|
|
alignItems: 'center',
|
||
|
|
gap: 1,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Chip variant="soft" color="danger" sx={sx}>
|
||
|
|
Some text
|
||
|
|
</Chip>
|
||
|
|
<Chip
|
||
|
|
startDecorator={<Avatar src="/static/images/avatar/1.jpg" />}
|
||
|
|
endDecorator={<ChipDelete />}
|
||
|
|
sx={sx}
|
||
|
|
>
|
||
|
|
Person name
|
||
|
|
</Chip>
|
||
|
|
<Chip
|
||
|
|
variant="outlined"
|
||
|
|
color="neutral"
|
||
|
|
startDecorator={<Avatar src="/static/images/avatar/1.jpg" />}
|
||
|
|
endDecorator={<ChipDelete />}
|
||
|
|
sx={sx}
|
||
|
|
>
|
||
|
|
Person name
|
||
|
|
</Chip>
|
||
|
|
</Box>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|