Toggle Button
Toggle Button (토글 버튼)
Toggle Button은 관련된 옵션들을 그룹으로 묶는 데 사용할 수 있어요.
관련된 Toggle Button 그룹을 강조하려면, 그룹이 공통 컨테이너를 공유해야 해요.
ToggleButtonGroup은 자체 value prop이 주어지면 하위 버튼들의 선택 상태를 제어해요.
출처: 문서
본문
단일 선택 (Exclusive selection)
단일(exclusive) 선택에서는 하나의 옵션을 선택하면 다른 옵션은 선택이 해제돼요.
이 예시에서 텍스트 정렬 토글 버튼은 왼쪽, 가운데, 오른쪽, 완전 양쪽 맞춤(disabled) 옵션을 제시하며, 한 번에 하나만 선택할 수 있어요.
Note: 단일 선택은 버튼이 반드시 활성화되어야 한다는 것을 강제하지 않아요. 그 효과는 값 집합 강제를 참고하세요.
import * as React from 'react';
import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
export default function ToggleButtons() {
const [alignment, setAlignment] = React.useState<string | null>('left');
const handleAlignment = (
event: React.MouseEvent<HTMLElement>,
newAlignment: string | null,
) => {
setAlignment(newAlignment);
};
return (
<ToggleButtonGroup
value={alignment}
exclusive
onChange={handleAlignment}
aria-label="text alignment"
>
<ToggleButton value="left" aria-label="left aligned">
<FormatAlignLeftIcon />
</ToggleButton>
<ToggleButton value="center" aria-label="centered">
<FormatAlignCenterIcon />
</ToggleButton>
<ToggleButton value="right" aria-label="right aligned">
<FormatAlignRightIcon />
</ToggleButton>
<ToggleButton value="justify" aria-label="justified" disabled>
<FormatAlignJustifyIcon />
</ToggleButton>
</ToggleButtonGroup>
);
}
다중 선택 (Multiple selection)
다중 선택은 bold, italic, underline 같은 논리적으로 그룹화된 옵션들이 여러 개 선택될 수 있게 해요.
import * as React from 'react';
import FormatBoldIcon from '@mui/icons-material/FormatBold';
import FormatItalicIcon from '@mui/icons-material/FormatItalic';
import FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined';
import FormatColorFillIcon from '@mui/icons-material/FormatColorFill';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
export default function ToggleButtonsMultiple() {
const [formats, setFormats] = React.useState(() => ['bold', 'italic']);
const handleFormat = (
event: React.MouseEvent<HTMLElement>,
newFormats: string[],
) => {
setFormats(newFormats);
};
return (
<ToggleButtonGroup
value={formats}
onChange={handleFormat}
aria-label="text formatting"
>
<ToggleButton value="bold" aria-label="bold">
<FormatBoldIcon />
</ToggleButton>
<ToggleButton value="italic" aria-label="italic">
<FormatItalicIcon />
</ToggleButton>
<ToggleButton value="underlined" aria-label="underlined">
<FormatUnderlinedIcon />
</ToggleButton>
<ToggleButton value="color" aria-label="color" disabled>
<FormatColorFillIcon />
<ArrowDropDownIcon />
</ToggleButton>
</ToggleButtonGroup>
);
}
크기 (Size)
더 크거나 작은 버튼이 필요하다면 size prop을 사용해요.
import * as React from 'react';
import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';
import Stack from '@mui/material/Stack';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
export default function ToggleButtonSizes() {
const [alignment, setAlignment] = React.useState('left');
const handleChange = (
event: React.MouseEvent<HTMLElement>,
newAlignment: string,
) => {
setAlignment(newAlignment);
};
const children = [
<ToggleButton value="left" key="left">
<FormatAlignLeftIcon />
</ToggleButton>,
<ToggleButton value="center" key="center">
<FormatAlignCenterIcon />
</ToggleButton>,
<ToggleButton value="right" key="right">
<FormatAlignRightIcon />
</ToggleButton>,
<ToggleButton value="justify" key="justify">
<FormatAlignJustifyIcon />
</ToggleButton>,
];
const control = {
value: alignment,
onChange: handleChange,
exclusive: true,
};
return (
<Stack spacing={2} sx={{ alignItems: 'center' }}>
<ToggleButtonGroup size="small" {...control} aria-label="Small sizes">
{children}
</ToggleButtonGroup>
<ToggleButtonGroup {...control} aria-label="Medium sizes">
{children}
</ToggleButtonGroup>
<ToggleButtonGroup size="large" {...control} aria-label="Large sizes">
{children}
</ToggleButtonGroup>
</Stack>
);
}
색상 (Color)
import * as React from 'react';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
export default function ColorToggleButton() {
const [alignment, setAlignment] = React.useState('web');
const handleChange = (
event: React.MouseEvent<HTMLElement>,
newAlignment: string,
) => {
setAlignment(newAlignment);
};
return (
<ToggleButtonGroup
color="primary"
value={alignment}
exclusive
onChange={handleChange}
aria-label="Platform"
>
<ToggleButton value="web">Web</ToggleButton>
<ToggleButton value="android">Android</ToggleButton>
<ToggleButton value="ios">iOS</ToggleButton>
</ToggleButtonGroup>
);
}
세로 버튼 (Vertical buttons)
orientation prop을 "vertical"로 설정하면 버튼을 세로로 쌓을 수 있어요.
import * as React from 'react';
import ViewListIcon from '@mui/icons-material/ViewList';
import ViewModuleIcon from '@mui/icons-material/ViewModule';
import ViewQuiltIcon from '@mui/icons-material/ViewQuilt';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
export default function VerticalToggleButtons() {
const [view, setView] = React.useState('list');
const handleChange = (event: React.MouseEvent<HTMLElement>, nextView: string) => {
setView(nextView);
};
return (
<ToggleButtonGroup
orientation="vertical"
value={view}
exclusive
onChange={handleChange}
>
<ToggleButton value="list" aria-label="list">
<ViewListIcon />
</ToggleButton>
<ToggleButton value="module" aria-label="module">
<ViewModuleIcon />
</ToggleButton>
<ToggleButton value="quilt" aria-label="quilt">
<ViewQuiltIcon />
</ToggleButton>
</ToggleButtonGroup>
);
}
값 집합 강제 (Enforce value set)
적어도 하나의 버튼이 활성화되어야 한다는 것을 강제하고 싶다면 handleChange 함수를 조정할 수 있어요.
const handleAlignment = (event, newAlignment) => {
if (newAlignment !== null) {
setAlignment(newAlignment);
}
};
const handleDevices = (event, newDevices) => {
if (newDevices.length) {
setDevices(newDevices);
}
};
import * as React from 'react';
import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
import LaptopIcon from '@mui/icons-material/Laptop';
import TvIcon from '@mui/icons-material/Tv';
import PhoneAndroidIcon from '@mui/icons-material/PhoneAndroid';
import Stack from '@mui/material/Stack';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
export default function ToggleButtonNotEmpty() {
const [alignment, setAlignment] = React.useState('left');
const [devices, setDevices] = React.useState(() => ['phone']);
const handleAlignment = (
event: React.MouseEvent<HTMLElement>,
newAlignment: string | null,
) => {
if (newAlignment !== null) {
setAlignment(newAlignment);
}
};
const handleDevices = (
event: React.MouseEvent<HTMLElement>,
newDevices: string[],
) => {
if (newDevices.length) {
setDevices(newDevices);
}
};
return (
<Stack direction="row" spacing={4}>
<ToggleButtonGroup
value={alignment}
exclusive
onChange={handleAlignment}
aria-label="text alignment"
>
<ToggleButton value="left" aria-label="left aligned">
<FormatAlignLeftIcon />
</ToggleButton>
<ToggleButton value="center" aria-label="centered">
<FormatAlignCenterIcon />
</ToggleButton>
<ToggleButton value="right" aria-label="right aligned">
<FormatAlignRightIcon />
</ToggleButton>
</ToggleButtonGroup>
<ToggleButtonGroup
value={devices}
onChange={handleDevices}
aria-label="device"
>
<ToggleButton value="laptop" aria-label="laptop">
<LaptopIcon />
</ToggleButton>
<ToggleButton value="tv" aria-label="tv">
<TvIcon />
</ToggleButton>
<ToggleButton value="phone" aria-label="phone">
<PhoneAndroidIcon />
</ToggleButton>
</ToggleButtonGroup>
</Stack>
);
}
독립형 토글 버튼 (Standalone toggle button)
import * as React from 'react';
import CheckIcon from '@mui/icons-material/Check';
import ToggleButton from '@mui/material/ToggleButton';
export default function StandaloneToggleButton() {
const [selected, setSelected] = React.useState(false);
return (
<ToggleButton
value="check"
selected={selected}
onChange={() => setSelected((prevSelected) => !prevSelected)}
>
<CheckIcon />
</ToggleButton>
);
}
커스터마이즈 (Customization)
다음은 컴포넌트를 커스터마이즈하는 예시예요. 이에 대해 더 자세히 알아보려면 overrides documentation page에서 확인할 수 있어요.
import * as React from 'react';
import { styled } from '@mui/material/styles';
import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';
import FormatBoldIcon from '@mui/icons-material/FormatBold';
import FormatItalicIcon from '@mui/icons-material/FormatItalic';
import FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined';
import FormatColorFillIcon from '@mui/icons-material/FormatColorFill';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import Divider from '@mui/material/Divider';
import Paper from '@mui/material/Paper';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup, {
toggleButtonGroupClasses,
} from '@mui/material/ToggleButtonGroup';
const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
[`& .${toggleButtonGroupClasses.grouped}`]: {
margin: theme.spacing(0.5),
border: 0,
borderRadius: theme.shape.borderRadius,
[`&.${toggleButtonGroupClasses.disabled}`]: {
border: 0,
},
},
[`& .${toggleButtonGroupClasses.middleButton},& .${toggleButtonGroupClasses.lastButton}`]:
{
marginLeft: -1,
borderLeft: '1px solid transparent',
},
}));
export default function CustomizedDividers() {
const [alignment, setAlignment] = React.useState('left');
const [formats, setFormats] = React.useState(() => ['italic']);
const handleFormat = (
event: React.MouseEvent<HTMLElement>,
newFormats: string[],
) => {
setFormats(newFormats);
};
const handleAlignment = (
event: React.MouseEvent<HTMLElement>,
newAlignment: string,
) => {
setAlignment(newAlignment);
};
return (
<div>
<Paper
elevation={0}
sx={(theme) => ({
display: 'flex',
border: `1px solid ${theme.palette.divider}`,
flexWrap: 'wrap',
})}
>
<StyledToggleButtonGroup
size="small"
value={alignment}
exclusive
onChange={handleAlignment}
aria-label="text alignment"
>
<ToggleButton value="left" aria-label="left aligned">
<FormatAlignLeftIcon />
</ToggleButton>
<ToggleButton value="center" aria-label="centered">
<FormatAlignCenterIcon />
</ToggleButton>
<ToggleButton value="right" aria-label="right aligned">
<FormatAlignRightIcon />
</ToggleButton>
<ToggleButton value="justify" aria-label="justified" disabled>
<FormatAlignJustifyIcon />
</ToggleButton>
</StyledToggleButtonGroup>
<Divider flexItem orientation="vertical" sx={{ mx: 0.5, my: 1 }} />
<StyledToggleButtonGroup
size="small"
value={formats}
onChange={handleFormat}
aria-label="text formatting"
>
<ToggleButton value="bold" aria-label="bold">
<FormatBoldIcon />
</ToggleButton>
<ToggleButton value="italic" aria-label="italic">
<FormatItalicIcon />
</ToggleButton>
<ToggleButton value="underlined" aria-label="underlined">
<FormatUnderlinedIcon />
</ToggleButton>
<ToggleButton value="color" aria-label="color" disabled>
<FormatColorFillIcon />
<ArrowDropDownIcon />
</ToggleButton>
</StyledToggleButtonGroup>
</Paper>
</div>
);
}
간격 (Spacing)
아래 데모들은 가로 및 세로 방향에서 토글 버튼 사이의 간격을 조정하는 방법을 보여줘요.
가로 간격 (Horizontal Spacing)
import * as React from 'react';
import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';
import ToggleButton, { toggleButtonClasses } from '@mui/material/ToggleButton';
import ToggleButtonGroup, {
toggleButtonGroupClasses,
} from '@mui/material/ToggleButtonGroup';
import { styled } from '@mui/material/styles';
const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
gap: '2rem',
[`& .${toggleButtonGroupClasses.firstButton}, & .${toggleButtonGroupClasses.middleButton}`]:
{
borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
},
[`& .${toggleButtonGroupClasses.lastButton}, & .${toggleButtonGroupClasses.middleButton}`]:
{
borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`,
},
[`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled}, & .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]:
{
borderLeft: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`,
},
}));
export default function HorizontalSpacingToggleButton() {
const [alignment, setAlignment] = React.useState<string | null>('left');
const handleAlignment = (
event: React.MouseEvent<HTMLElement>,
newAlignment: string | null,
) => {
setAlignment(newAlignment);
};
return (
<StyledToggleButtonGroup
value={alignment}
exclusive
onChange={handleAlignment}
aria-label="text alignment"
>
<ToggleButton value="left" aria-label="left aligned">
<FormatAlignLeftIcon />
</ToggleButton>
<ToggleButton value="center" aria-label="centered">
<FormatAlignCenterIcon />
</ToggleButton>
<ToggleButton value="right" aria-label="right aligned">
<FormatAlignRightIcon />
</ToggleButton>
<ToggleButton value="justify" aria-label="justified" disabled>
<FormatAlignJustifyIcon />
</ToggleButton>
</StyledToggleButtonGroup>
);
}
세로 간격 (Vertical Spacing)
import * as React from 'react';
import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';
import ToggleButton, { toggleButtonClasses } from '@mui/material/ToggleButton';
import ToggleButtonGroup, {
toggleButtonGroupClasses,
} from '@mui/material/ToggleButtonGroup';
import { styled } from '@mui/material/styles';
const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
gap: '2rem',
[`& .${toggleButtonGroupClasses.firstButton}, & .${toggleButtonGroupClasses.middleButton}`]:
{
borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
},
[`& .${toggleButtonGroupClasses.lastButton}, & .${toggleButtonGroupClasses.middleButton}`]:
{
borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
borderTop: `1px solid ${(theme.vars || theme).palette.divider}`,
},
[`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled}, & .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]:
{
borderTop: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`,
},
}));
export default function VerticalSpacingToggleButton() {
const [alignment, setAlignment] = React.useState<string | null>('left');
const handleAlignment = (
event: React.MouseEvent<HTMLElement>,
newAlignment: string | null,
) => {
setAlignment(newAlignment);
};
return (
<StyledToggleButtonGroup
value={alignment}
exclusive
onChange={handleAlignment}
aria-label="text alignment"
orientation="vertical"
>
<ToggleButton value="left" aria-label="left aligned">
<FormatAlignLeftIcon />
</ToggleButton>
<ToggleButton value="center" aria-label="centered">
<FormatAlignCenterIcon />
</ToggleButton>
<ToggleButton value="right" aria-label="right aligned">
<FormatAlignRightIcon />
</ToggleButton>
<ToggleButton value="justify" aria-label="justified" disabled>
<FormatAlignJustifyIcon />
</ToggleButton>
</StyledToggleButtonGroup>
);
}
접근성 (Accessibility)
ARIA
- ToggleButtonGroup은
role="group"을 가져요.aria-label="label",aria-labelledby="id"또는<label>로 접근 가능한 라벨을 제공해야 해요. - ToggleButton은 버튼 상태에 따라
aria-pressed="<bool>"을 설정해요. 각 버튼을aria-label로 라벨링해야 해요.
키보드 (Keyboard)
그룹은 단일 탭 정지(tab stop)를 사용해요. 가로 그룹에서 포커스를 이동하려면 왼쪽/오른쪽 화살표 키를, 세로 그룹에서는 위/아래 화살표 키를 사용해요. Home 및 End 키는 포커스를 첫 번째와 마지막 활성 버튼으로 이동해요. 포커스 이동은 순환하며, 비활성 버튼은 건너뛰고, 선택된 값을 변경하지 않아요. Space 또는 Enter를 눌러 포커스된 버튼을 토글해요.
ToggleButton API
데모 (Demos)
이 React 컴포넌트의 사용에 관한 예제와 자세한 내용은 컴포넌트 데모 페이지를 방문하세요:
Import
import ToggleButton from '@mui/material/ToggleButton';
// or
import { ToggleButton } from '@mui/material';
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| value | any |
- | Yes | |
| children | node |
- | No | |
| classes | object |
- | No | 컴포넌트에 적용되는 스타일을 오버라이드하거나 확장해요. |
| color | 'standard' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | string |
'standard' |
No | |
| disabled | bool |
false |
No | |
| disableFocusRipple | bool |
false |
No | |
| disableRipple | bool |
false |
No | |
| fullWidth | bool |
false |
No | |
| onChange | function(event: React.MouseEvent<HTMLElement>, value: any) => void |
- | No | |
| onClick | function(event: React.MouseEvent<HTMLElement>, value: any) => void |
- | No | |
| selected | bool |
- | No | |
| size | 'small' | 'medium' | 'large' | string |
'medium' |
No | |
| sx | Array<func | object | bool> | func | object |
- | No | 시스템 오버라이드 및 추가 CSS 스타일을 정의할 수 있게 해주는 시스템 prop이에요. |
Note:
ref는 루트 요소(HTMLButtonElement)로 전달돼요.
제공된 다른 모든 props는 루트 요소(ButtonBase)로 전달돼요.
상속 (Inheritance)
위에 명시적으로 문서화되지는 않았지만, ButtonBase 컴포넌트의 props는 ToggleButton에서도 사용할 수 있어요.
테마 기본 props (Theme default props)
MuiToggleButton을 사용해 테마로 이 컴포넌트의 기본 props를 변경할 수 있어요.
CSS
규칙 이름 (Rule name)
| Global class | Rule name | Description |
|---|---|---|
.Mui-disabled |
- | disabled={true}일 때 루트 요소에 적용되는 상태 클래스예요. |
| - | fullWidth | fullWidth={true}일 때 루트 요소에 적용되는 스타일이에요. |
| - | primary | color="primary"일 때 루트 요소에 적용되는 상태 클래스예요. |
| - | root | 루트 요소에 적용되는 스타일이에요. |
| - | secondary | color="secondary"일 때 루트 요소에 적용되는 상태 클래스예요. |
.Mui-selected |
- | selected={true}일 때 루트 요소에 적용되는 상태 클래스예요. |
| - | sizeLarge | size="large"일 때 루트 요소에 적용되는 스타일이에요. |
| - | sizeMedium | size="medium"일 때 루트 요소에 적용되는 스타일이에요. |
| - | sizeSmall | size="small"일 때 루트 요소에 적용되는 스타일이에요. |
| - | standard | color="standard"일 때 루트 요소에 적용되는 상태 클래스예요. |
소스 코드 (Source code)
이 페이지에서 정보를 찾지 못했다면, 더 자세한 내용을 위해 컴포넌트 구현을 살펴보세요.
ToggleButtonGroup API
데모 (Demos)
이 React 컴포넌트의 사용에 관한 예제와 자세한 내용은 컴포넌트 데모 페이지를 방문하세요:
Import
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
// or
import { ToggleButtonGroup } from '@mui/material';
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| children | node |
- | No | |
| classes | object |
- | No | 컴포넌트에 적용되는 스타일을 오버라이드하거나 확장해요. |
| color | 'standard' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | string |
'standard' |
No | |
| disabled | bool |
false |
No | |
| exclusive | bool |
false |
No | |
| fullWidth | bool |
false |
No | |
| onChange | function(event: React.MouseEvent<HTMLElement>, value: any) => void |
- | No | |
| orientation | 'horizontal' | 'vertical' |
'horizontal' |
No | |
| size | 'small' | 'medium' | 'large' | string |
'medium' |
No | |
| sx | Array<func | object | bool> | func | object |
- | No | 시스템 오버라이드 및 추가 CSS 스타일을 정의할 수 있게 해주는 시스템 prop이에요. |
| value | any |
- | No |
Note:
ref는 루트 요소(HTMLDivElement)로 전달돼요.
제공된 다른 모든 props는 루트 요소(네이티브 요소)로 전달돼요.
테마 기본 props (Theme default props)
MuiToggleButtonGroup을 사용해 테마로 이 컴포넌트의 기본 props를 변경할 수 있어요.
CSS
규칙 이름 (Rule name)
| Global class | Rule name | Description |
|---|---|---|
.Mui-disabled |
- | disabled={true}일 때 루트 요소에 적용되는 상태 클래스예요. |
| - | firstButton | 토글 버튼 그룹의 첫 번째 버튼에 적용되는 스타일이에요. |
| - | fullWidth | fullWidth={true}일 때 루트 요소에 적용되는 스타일이에요. |
| - | grouped | children에 적용되는 스타일이에요. |
| - | horizontal | orientation="horizontal"일 때 루트 요소에 적용되는 스타일이에요. |
| - | lastButton | 토글 버튼 그룹의 마지막 버튼에 적용되는 스타일이에요. |
| - | middleButton | 토글 버튼 그룹의 중간에 있는 버튼들에 적용되는 스타일이에요. |
| - | root | 루트 요소에 적용되는 스타일이에요. |
.Mui-selected |
- | selected={true}일 때 루트 요소에 적용되는 상태 클래스예요. |
| - | vertical | orientation="vertical"일 때 루트 요소에 적용되는 스타일이에요. |
소스 코드 (Source code)
이 페이지에서 정보를 찾지 못했다면, 더 자세한 내용을 위해 컴포넌트 구현을 살펴보세요.