HUA Docs - The Syntax of Emotion

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Switch } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

기본 스위치

알림

설명 포함

자동 저장

작업 내용을 자동으로 저장합니다

클라우드 동기화

기기 간 데이터를 동기화합니다

제어됨

값:

꺼짐

다크 모드

변형

default

Default variant

outline

Outline variant

filled

Filled variant

glass

Glass variant

크기

Small switch

Medium switch

Large switch

상태

Normal state

Error state

Success state

Disabled state

Disabled on

Props

이름	타입	기본값	설명
`variant`	`"default" \| "outline" \| "filled" \| "glass"`	`"default"`	시각적 스타일 변형
`size`	`"sm" \| "md" \| "lg"`	`"md"`	스위치 크기
`label`	`string`	-	스위치 레이블 텍스트
`description`	`string`	-	도움말 설명 텍스트
`error`	`boolean`	`false`	에러 상태 표시
`success`	`boolean`	`false`	성공 상태 표시
`checked`	`boolean`	-	제어되는 체크 상태
`defaultChecked`	`boolean`	-	Initial checked state (uncontrolled)
`disabled`	`boolean`	`false`	스위치 비활성화

코드 예시

기본 사용법

import { Switch } from '@hua-labs/ui';

<Switch label="Enable notifications" />

설명 포함

<Switch
  label="Auto Save"
  description="Automatically save your work"
/>

제어 모드

const [enabled, setEnabled] = useState(false);

<Switch
  checked={enabled}
  onChange={(e) => setEnabled(e.target.checked)}
  label="Dark Mode"
/>

Switch

설치

라이브 데모

기본 스위치

설명 포함

제어됨

변형

크기

상태

Props

코드 예시

접근성