47 lines
1.4 KiB
JavaScript
47 lines
1.4 KiB
JavaScript
|
import * as React from 'react';
|
||
|
|
import ToggleButton from '@mui/material/ToggleButton';
|
||
|
|
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
|
||
|
|
import Stack from '@mui/material/Stack';
|
||
|
|
import Tooltip from '@mui/material/Tooltip';
|
||
|
|
|
||
|
|
export default function DifferentChildren() {
|
||
|
|
const falsyCondition = 1 === 2;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Stack spacing={2}>
|
||
|
|
{/* With tooltip */}
|
||
|
|
<ToggleButtonGroup value="one">
|
||
|
|
<Tooltip title="tooltip">
|
||
|
|
<ToggleButton value="one">One</ToggleButton>
|
||
|
|
</Tooltip>
|
||
|
|
<Tooltip title="tooltip">
|
||
|
|
<span>
|
||
|
|
<ToggleButton value="two" disabled>
|
||
|
|
Two
|
||
|
|
</ToggleButton>
|
||
|
|
</span>
|
||
|
|
</Tooltip>
|
||
|
|
<Tooltip title="tooltip">
|
||
|
|
<span>
|
||
|
|
<ToggleButton value="three" disabled>
|
||
|
|
Three
|
||
|
|
</ToggleButton>
|
||
|
|
</span>
|
||
|
|
</Tooltip>
|
||
|
|
</ToggleButtonGroup>
|
||
|
|
|
||
|
|
{/* Single button */}
|
||
|
|
<ToggleButtonGroup value="one">
|
||
|
|
<ToggleButton value="one">One</ToggleButton>
|
||
|
|
</ToggleButtonGroup>
|
||
|
|
|
||
|
|
{/* Conditional elements */}
|
||
|
|
<ToggleButtonGroup value="one">
|
||
|
|
<ToggleButton value="one">One</ToggleButton>
|
||
|
|
<ToggleButton value="two">Two</ToggleButton>
|
||
|
|
{falsyCondition ? <ToggleButton value="three">Three</ToggleButton> : undefined}
|
||
|
|
</ToggleButtonGroup>
|
||
|
|
</Stack>
|
||
|
|
);
|
||
|
|
}
|