SwitchAnahtar

스위치 컴포넌트는 단일 옵션의 켜짐 또는 꺼짐 상태를 전환하는 데 사용되며, 직관적인 상호 작용 디자인을 통해 사용자가 설정을 쉽게 조정할 수 있습니다.

사용법

컴포넌트 가져오기:

import 'mdui/components/switch.js';

컴포넌트의 TypeScript 타입 가져오기:

import type { Switch } from 'mdui/components/switch.js';

사용 예시:

<mdui-switch></mdui-switch>

예시

선택 상태

스위치가 선택되면 checked 속성값이 true가 됩니다. checked 속성을 추가하여 스위치가 기본적으로 선택된 상태가 되도록 할 수도 있습니다.

<mdui-switch checked></mdui-switch>

Kaynak Kodu

비활성화 상태

disabled 속성을 추가하면 스위치 컴포넌트를 비활성화할 수 있습니다.

<mdui-switch disabled></mdui-switch>
<mdui-switch disabled checked></mdui-switch>

Kaynak Kodu

아이콘

unchecked-icon 속성으로 미선택 상태의 Material Icons 아이콘을 설정하고, checked-icon 속성으로 선택 상태의 Material Icons 아이콘을 설정할 수 있습니다. unchecked-icon 및 checked-icon 슬롯을 통해 미선택 및 선택 상태의 아이콘 요소를 사용자 정의할 수도 있습니다.

<mdui-switch unchecked-icon="remove_moderator" checked-icon="verified_user"></mdui-switch>
<mdui-switch>
  <mdui-icon slot="unchecked-icon" name="remove_moderator"></mdui-icon>
  <mdui-icon slot="checked-icon" name="verified_user"></mdui-icon>
</mdui-switch>

Kaynak Kodu

API

Özellikler

Öznitelik	Özellik	Tür	Varsayılan
`disabled`	`disabled`	`boolean`	`false`
비활성화할지 여부를 설정합니다.
`checked`	`checked`	`boolean`	`false`
선택됨 여부를 설정합니다.
	`defaultChecked`	`boolean`	`false`
기본 선택 상태입니다. 폼을 재설정할 때 이 상태로 재설정됩니다. 이 프로퍼티는 JavaScript 프로퍼티로만 설정할 수 있습니다.
`unchecked-icon`	`uncheckedIcon`	`string`	-
선택되지 않은 상태의 Material Icons 아이콘 이름입니다. `slot="unchecked-icon"`을 통해서도 설정할 수 있습니다.
`checked-icon`	`checkedIcon`	`string`	-
선택됨 상태의 Material Icons 아이콘 이름입니다. `slot="checked-icon"`을 통해서도 설정할 수 있습니다. 기본값은 `check` 아이콘입니다. 빈 문자열을 전달하여 기본 아이콘을 제거할 수 있습니다.
`required`	`required`	`boolean`	`false`
폼 제출 시 이 스위치가 필수인지 여부를 설정합니다.
`form`	`form`	`string`	-
연결된 `<form>` 요소입니다. 이 속성 값은 동일한 페이지에 있는 `<form>` 요소의 `id`여야 합니다. 이 속성을 지정하지 않으면 이 요소는 `<form>` 요소의 자식 요소여야 합니다. 이 속성을 사용하면 요소를 `<form>` 요소의 자식뿐만 아니라 페이지의 어느 곳에나 배치할 수 있습니다.
`name`	`name`	`string`	`''`
스위치의 이름이며, 폼 데이터와 함께 제출됩니다.
`value`	`value`	`string`	`'on'`
스위치의 값이며, 폼 데이터와 함께 제출됩니다.
	`validity`	`ValidityState`	-
폼 유효성 검사 상태 객체입니다. 자세한 내용은 `ValidityState`를 참조하십시오.
	`validationMessage`	`string`	-
폼 유효성 검사를 통과하지 못하면 오류 메시지가 포함되고, 통과하면 빈 문자열입니다.
`autofocus`	`autofocus`	`boolean`	`false`
페이지 로드 후 자동으로 포커스를 받을지 여부를 지정합니다.
`tabindex`	`tabIndex`	`number`	-
Tab 키를 사용하여 포커스를 이동할 때 요소의 순서를 지정합니다.

Yöntemler

Ad	Parametreler	Dönüş Değeri
`checkValidity`		`boolean`
폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 `false`를 반환하고 `invalid` 이벤트를 트리거합니다. 통과하면 `true`를 반환합니다.
`reportValidity`		`boolean`
폼 필드가 유효성 검사를 통과하는지 확인합니다. 통과하지 못하면 `false`를 반환하고 `invalid` 이벤트를 트리거합니다. 통과하면 `true`를 반환합니다. 유효성 검사를 통과하지 못하면 컴포넌트에 유효성 검사 실패 메시지가 표시됩니다.
`setCustomValidity`	`message: string`	`void`
사용자 정의 오류 메시지 텍스트를 설정합니다. 이 텍스트가 비어 있지 않으면 필드가 유효성 검사를 통과하지 못했음을 나타냅니다.
`click`		`void`
마우스 클릭을 시뮬레이션합니다.
`focus`	`options: FocusOptions` (İsteğe Bağlı)	`void`
현재 요소에 포커스를 설정합니다. 객체를 인자로 전달할 수 있으며, 객체의 속성은 다음과 같습니다: `preventScroll`: 기본적으로 요소가 포커스를 받으면 페이지가 스크롤되어 해당 요소가 화면에 표시됩니다. 페이지 스크롤을 방지하려면 이 속성을 `true`로 설정하십시오.
`blur`		`void`
현재 요소에서 포커스를 제거합니다.

Olaylar

Ad
`focus`
포커스를 얻었을 때 발생합니다.
`blur`
포커스를 잃었을 때 발생합니다.
`change`
선택 상태가 변경될 때 발생합니다.
`input`
선택 상태가 변경될 때 발생합니다.
`invalid`
폼 필드 유효성 검사를 통과하지 못했을 때 발생합니다.

Slots

Ad
`unchecked-icon`
선택되지 않은 상태의 요소
`checked-icon`
선택됨 상태의 요소

CSS Parts

Ad
`track`
트랙
`thumb`
아이콘 컨테이너
`unchecked-icon`
선택되지 않은 상태의 아이콘
`checked-icon`
선택됨 상태의 아이콘

CSS Custom Property

Ad
`--shape-corner`
컴포넌트 트랙의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
`--shape-corner-thumb`
컴포넌트 아이콘 컨테이너의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.

Önceki Bölüm

Snackbar Snackbar

Sonraki Bölüm

Tabs Sekme