Segmented 세그먼트 선택기

상호 배타적인 옵션 전환, 뷰 전환기 시나리오.

기본 사용법

기본 사용법

<script setup>
import { ref } from 'vue'
const view = ref('목록')
</script>

<template>
  <LhSegmented v-model="view" :options="['목록', '카드', '표']" />
</template>

<script>
export default {
  data() {
    return { view: '목록' }
  },
}
</script>

<template>
  <LhSegmented v-model="view" :options="['목록', '카드', '표']" />
</template>

비활성화 항목과 block

비활성화 항목

<script setup>
import { ref } from 'vue'
const seg = ref('day')
</script>

<template>
  <LhSegmented
    v-model="seg"
    block
    :options="[{ label: '일', value: 'day' }, { label: '주', value: 'week' }, { label: '월', value: 'month', disabled: true }]"
  />
</template>

<script>
export default {
  data() {
    return { seg: 'day' }
  },
}
</script>

<template>
  <LhSegmented
    v-model="seg"
    block
    :options="[{ label: '일', value: 'day' }, { label: '주', value: 'week' }, { label: '월', value: 'month', disabled: true }]"
  />
</template>

컴포넌트 수준의 disabled로 선택기 전체를 비활성화합니다.

전체 그룹 비활성화

<script setup>
import { ref } from 'vue'
const segDisabled = ref('갑')
</script>

<template>
  <LhSegmented
    v-model="segDisabled"
    disabled
    :options="['갑', '을', '병']"
  />
</template>

<script>
export default {
  data() {
    return { segDisabled: '갑' }
  },
}
</script>

<template>
  <LhSegmented
    v-model="segDisabled"
    disabled
    :options="['갑', '을', '병']"
  />
</template>

API

LhSegmented Props

프로퍼티	설명	타입	기본값
modelValue	현재 값(제어되는 v-model)	string | number	—
options	옵션(문자열 간편 표기 또는 객체)	[LhSegmentedInput](#type-LhSegmentedInput)[]	—
disabled	전체 그룹 비활성화	boolean	false
block	컨테이너 꽉 채우기	boolean	false
sx	sx 빠른 레이아웃 속성	LhSxProps	—

Events

이벤트	설명	콜백 매개변수
update:modelValue	선택 항목이 변경될 때 발생, v-model과 함께 사용	(value: string | number)
change	선택 항목이 변경될 때 발생(클릭과 방향키 모두 발생)	(value: string | number)

접근성

• role="radiogroup" + 옵션 role="radio" + aria-checked
• roving tabindex: 방향키 이동(비활성화 항목 건너뛰기, 양끝 순환), 포커스 위치에서만 Tab 가능
• 선택 배경색은 CSS 변수 전환으로 처리

타입 정의

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

LhSegmentedProps

export interface LhSegmentedProps {
  /** 현재 값(제어되는 v-model) */
  modelValue?: LhSegmentedValue
  /** 옵션(문자열 간편 표기 또는 객체) */
  options: LhSegmentedInput[]
  disabled?: boolean
  /** 컨테이너 꽉 채우기 */
  block?: boolean
  /** 빠른 레이아웃 속성 */
  sx?: LhSxProps
}

LhSegmentedValue _{(출처: @lh-ui/share/core/segmented)}

/** 옵션 값 타입 */
export type LhSegmentedValue = string | number

LhSegmentedInput _{(출처: @lh-ui/share/core/segmented)}

/** 입력 옵션(문자열 간편 표기 또는 객체) */
export type LhSegmentedInput = LhSegmentedValue | LhSegmentedOption

LhSegmentedOption _{(출처: @lh-ui/share/core/segmented)}

/** 옵션 객체 형태 */
export interface LhSegmentedOption {
  label: string
  value: LhSegmentedValue
  disabled?: boolean
}