Switch 스위치

LhSwitch는 두 대립 상태 사이를 전환하는 데 사용합니다.

기본 사용법

기본 사용법

<script setup lang="ts">
import { ref } from 'vue'

const status = ref(false)
</script>

<template>
  <!-- 기본 스위치 -->
  <LhSwitch v-model="status" />
</template>

<script>
export default {
  data() {
    return { status: false }
  },
}
</script>

<template>
  <!-- 기본 스위치 -->
  <LhSwitch v-model="status" />
</template>

텍스트 라벨

텍스트 라벨

켜짐

<script setup lang="ts">
import { ref } from 'vue'

const notification = ref(true)
</script>

<template>
  <LhSwitch v-model="notification" active-text="켜짐" inactive-text="꺼짐" />
</template>

<script>
export default {
  data() {
    return { notification: true }
  },
}
</script>

<template>
  <LhSwitch v-model="notification" active-text="켜짐" inactive-text="꺼짐" />
</template>

크기

크기

<script setup lang="ts">
import { ref } from 'vue'

const smallVal = ref(false)
const mediumVal = ref(false)
const largeVal = ref(false)
</script>

<template>
  <LhSwitch v-model="smallVal" size="small" />
  <LhSwitch v-model="mediumVal" size="medium" />
  <LhSwitch v-model="largeVal" size="large" />
</template>

<script>
export default {
  data() {
    return {
      smallVal: false,
      mediumVal: false,
      largeVal: false,
    }
  },
}
</script>

<template>
  <LhSwitch v-model="smallVal" size="small" />
  <LhSwitch v-model="mediumVal" size="medium" />
  <LhSwitch v-model="largeVal" size="large" />
</template>

비활성화와 Loading

비활성화와 Loading

<script setup lang="ts">
import { ref } from 'vue'

const disabledVal = ref(true)
const loadingVal = ref(true)
const swName = ref(false)
</script>

<template>
  <LhSwitch v-model="disabledVal" disabled />
  <LhSwitch v-model="loadingVal" loading />
</template>

<script>
export default {
  data() {
    return {
      disabledVal: true,
      loadingVal: true,
    }
  },
}
</script>

<template>
  <LhSwitch v-model="disabledVal" disabled />
  <LhSwitch v-model="loadingVal" loading />
</template>

커스텀 테마

스위치에 커스텀 테마 색상을 적용합니다.

青花瓷 (ceramic blue) 테마

<script setup lang="ts">
import { LhConfigProvider, LhSwitch } from '@lh-ui/vue3'

const cerblueTheme = {
  'primary-color': '#2B4C7C',
  'primary-color-hover': '#3D649E',
  'primary-color-bg': '#E8EDF3',
}
</script>

<template>
  <!-- 청화자 테마 -->
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhSwitch v-model="status" />
  </LhConfigProvider>
</template>

<script>
import { LhConfigProvider, LhSwitch } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhSwitch },
  data() {
    return {
      status: false,
      cerblueTheme: {
        'primary-color': '#2B4C7C',
        'primary-color-hover': '#3D649E',
        'primary-color-bg': '#E8EDF3',
      },
    }
  },
}
</script>

<template>
  <!-- 청화자 테마 -->
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhSwitch v-model="status" />
  </LhConfigProvider>
</template>

다국어

LhConfigProvider로 전역 언어 팩을 구성합니다.

다국어

<script setup lang="ts">
import { ref, computed } from 'vue'
import { LhConfigProvider, LhSwitch, LhButton } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
const messages = computed(() => locale.value === 'zh-CN' ? zhCN : enUS)
const status = ref(false)
</script>

<template>
  <!-- 언어 팩 구성 -->
  <LhConfigProvider :locale="messages">
    <LhSwitch v-model="status" />
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      언어 전환
    </LhButton>
  </LhConfigProvider>
</template>

<script>
import { ref, computed } from 'vue'
import { LhConfigProvider, LhSwitch, LhButton } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhSwitch, LhButton },
  data() {
    return {
      locale: 'zh-CN',
      status: false,
    }
  },
  computed: {
    messages() {
      return this.locale === 'zh-CN' ? zhCN : enUS
    },
  },
}
</script>

<template>
  <!-- 언어 팩 구성 -->
  <LhConfigProvider :locale="messages">
    <LhSwitch v-model="status" />
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      언어 전환
    </LhButton>
  </LhConfigProvider>
</template>

네이티브 name

name은 네이티브 input의 name 속성을 설정합니다 (폼 제출용).

name

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(false)
</script>

<template>
  <LhSwitch v-model="value" name="notifications" />
</template>

<script>
export default {
  data() {
    return { value: false }
  },
}
</script>

<template>
  <LhSwitch v-model="value" name="notifications" />
</template>

API

Props

프로퍼티	설명	타입	기본값
modelValue	현재 상태	boolean	false
disabled	비활성화 여부	boolean	false
loading	로딩 중 여부	boolean	false
name	네이티브 폼 이름	string	''
size	크기	"small" | "medium" | "large" | "mini" | "x-large"	'medium'
activeText	켜짐일 때 텍스트	string	''
inactiveText	꺼짐일 때 텍스트	string	''
sx	sx 빠른 레이아웃 속성	LhSxProps	—

Events

이벤트명	설명	콜백 매개변수
update:modelValue	상태 변경	(value: boolean)
change	상태 변경	(value: boolean)

update:modelValue (새 부울 값)와 change 이벤트를 트리거합니다. 키보드 Enter와 Space로 전환할 수 있습니다.

타입 정의

이 컴포넌트가 외부로 노출하는 TypeScript 타입 구조는 다음과 같습니다 (packages/components/switch/src/types.ts와 @lh-ui/share/core/* 소스에서 자동 추출, 각 항목을 펼쳐 전체 정의를 확인하세요. 프로퍼티 설명은 위쪽 Props 표를 참조하세요):

LhSwitchProps

export interface LhSwitchProps {
  modelValue?: boolean
  disabled?: boolean
  loading?: boolean
  name?: string
  size?: LhComponentSize
  activeText?: string
  inactiveText?: string
  /** sx 빠른 레이아웃 속성 */
  sx?: LhSxProps
}

LhSwitchSize

export type LhSwitchSize = LhComponentSize

LhComponentSize _{(출처: @lh-ui/share/core/shared)}

export type LhComponentSize = (typeof LH_SIZE_CONST)[keyof typeof LH_SIZE_CONST]