005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import * as React from 'react';
|
|
import Box from '@mui/joy/Box';
|
|
import Radio from '@mui/joy/Radio';
|
|
import RadioGroup from '@mui/joy/RadioGroup';
|
|
import Typography from '@mui/joy/Typography';
|
|
|
|
export default function ExampleSegmentedControls() {
|
|
const [justify, setJustify] = React.useState('flex-start');
|
|
return (
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
|
<Typography
|
|
id="segmented-controls-example"
|
|
sx={{ fontWeight: 'lg', fontSize: 'sm' }}
|
|
>
|
|
Justify:
|
|
</Typography>
|
|
<RadioGroup
|
|
orientation="horizontal"
|
|
aria-labelledby="segmented-controls-example"
|
|
name="justify"
|
|
value={justify}
|
|
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
|
|
setJustify(event.target.value)
|
|
}
|
|
sx={{
|
|
minHeight: 48,
|
|
padding: '4px',
|
|
borderRadius: '12px',
|
|
bgcolor: 'neutral.softBg',
|
|
'--RadioGroup-gap': '4px',
|
|
'--Radio-actionRadius': '8px',
|
|
}}
|
|
>
|
|
{['flex-start', 'center', 'flex-end'].map((item) => (
|
|
<Radio
|
|
key={item}
|
|
color="neutral"
|
|
value={item}
|
|
disableIcon
|
|
label={item}
|
|
variant="plain"
|
|
sx={{ px: 2, alignItems: 'center' }}
|
|
slotProps={{
|
|
action: ({ checked }) => ({
|
|
sx: {
|
|
...(checked && {
|
|
bgcolor: 'background.surface',
|
|
boxShadow: 'sm',
|
|
'&:hover': {
|
|
bgcolor: 'background.surface',
|
|
},
|
|
}),
|
|
},
|
|
}),
|
|
}}
|
|
/>
|
|
))}
|
|
</RadioGroup>
|
|
</Box>
|
|
);
|
|
}
|