스위치

스위치 (Switch)

출처: 문서

본문

두 가지 반대 상태 사이를 전환할 때 사용하는 컴포넌트예요.

기본 사용법 (Basic Usage)

v-model을 Boolean 타입 변수에 바인딩해요. --el-switch-on-color와 --el-switch-off-color CSS 변수가 두 상태에서의 배경 색상을 결정해요.

크기 (Sizes)

텍스트 설명 (Text Description)

active-text와 inactive-text 속성을 추가해서 텍스트를 표시할 수 있어요. inline-prompt 속성을 사용하면 텍스트가 도트 안쪽에 표시되도록 제어할 수 있어요.

커스텀 아이콘 표시 (Display Custom Icons)

TIP active-icon과 inactive-icon 속성으로 아이콘을 추가할 수 있어요. 미리 등록한 컴포넌트 이름을 문자열로 전달하거나, SVG Vue 컴포넌트 자체를 전달할 수 있어요. Element Plus는 icon 문서에서 확인할 수 있는 아이콘 세트를 제공해요.

active-icon과 inactive-icon 속성을 추가해서 아이콘을 표시할 수 있어요. inline-prompt 속성을 사용하면 아이콘이 도트 안쪽에 표시되도록 제어할 수 있어요.

확장된 값 타입 (Extended Value Types)

active-value와 inactive-value 속성을 설정할 수 있어요. 둘 다 Boolean, String 또는 Number 타입 값을 받아요.

비활성화 (Disabled)

disabled 속성을 추가하면 Switch가 비활성화돼요.

로딩 (Loading)

loading 속성을 true로 설정하면 Switch에 로딩 상태가 표시돼요.

전환 방지 (Prevent Switching)

before-change 속성을 설정해요. false가 반환되거나 Promise가 반환된 뒤 reject되면 전환이 멈춰요.

커스텀 액션 아이콘 (Custom Action Icon)

active-action-icon과 inactive-action-icon 속성을 추가해서 아이콘을 표시할 수 있어요.

커스텀 액션 슬롯 (Custom Action Slot)

active-action과 inactive-action 슬롯을 사용해서 액션을 커스텀할 수 있어요.

API

속성 (Attributes)

이벤트 (Events)

Switch 슬롯 (Slots)

Exposes

더 알아보기 (Learn more)