Segmented 세그먼트 선택기

세그먼트 컨트롤러입니다. 옵션은 문자열 간편 표기와 { value, label, disabled } 객체 표기를 지원하며, block으로 컨테이너 너비를 가득 채울 수 있습니다.

세그먼트 선택기

<template>
  <div class="demo-col" style="gap: 20px">
    <LhSegmented v-model="view" :options="['목록', '그리드', '갤러리']" />
    <p class="demo-note">문자열 배열 간편 표기: {{ view }}</p>
    <LhSegmented v-model="dynasty" :options="options" />
    <p class="demo-note">객체 표기 (disabled 항목 포함): {{ dynasty }}</p>
    <LhSegmented v-model="view" :options="['목록', '그리드', '갤러리']" disabled />
    <LhSegmented v-model="view" :options="['목록', '그리드', '갤러리']" block />
    <p class="demo-note">block이 컨테이너 너비를 가득 채움</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    view: '목록',
    dynasty: 'tang',
    options: [
      { value: 'tang', label: '당' },
      { value: 'song', label: '송' },
      { value: 'yuan', label: '원' },
      { value: 'ming', label: '명', disabled: true },
    ],
  }),
}
</script>

Props

프로퍼티	설명	타입	기본값
v-model	현재 값 (model: modelValue/input)	string \| number	—
options	옵션 (문자열 또는 객체, 필수)	(string \| number \| { value, label, disabled? })[]	—
disabled	전체 비활성화	boolean	false
block	컨테이너 너비를 가득 채움	boolean	false
sx	sx 레이아웃 단축 속성	—	—

이벤트

input(v-model, 매개변수 (val)), change (val).

접근성

루트 요소는 role="radiogroup", 각 항목은 role="radio" + aria-checked이며, 키보드 ←/→로 전환합니다.