Segmented (세그먼트)

Segmented (세그먼트)

여러 옵션을 표시하고 사용자가 단일 옵션을 선택할 수 있게 하는 컴포넌트예요.

출처: 문서

본문

기본 사용법 (Basic Usage)

v-model을 선택된 옵션 값으로 설정해요.

import { ref } from 'vue'

const value = ref('Mon')

const options = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

방향 사용법 (Direction Usage) 2.8.7

vertical을 설정해서 방향을 바꿔요.

import { ref } from 'vue'
import {
  Apple,
  Cherry,
  Grape,
  Orange,
  Pear,
  Watermelon,
} from '@element-plus/icons-vue'

import type { SegmentedProps } from 'element-plus'

const value = ref('Apple')
const direction = ref('horizontal')
const size = ref('default')

const directionOptions = [
  { label: 'Horizontal', value: 'horizontal' },
  { label: 'Vertical', value: 'vertical' },
]

const sizeOptions = ['large', 'default', 'small']

const options = [
  {
    label: 'Apple',
    value: 'Apple',
    icon: Apple,
  },
  {
    label: 'Cherry',
    value: 'Cherry',
    icon: Cherry,
  },
  {
    label: 'Grape',
    value: 'Grape',
    icon: Grape,
  },
  {
    label: 'Orange',
    value: 'Orange',
    icon: Orange,
  },
  {
    label: 'Pear',
    value: 'Pear',
    icon: Pear,
  },
  {
    label: 'Watermelon',
    value: 'Watermelon',
    icon: Watermelon,
    disabled: true,
  },
]

비활성화 (Disabled)

segmented 또는 option의 disabled를 true로 설정해서 비활성화해요.

import { ref } from 'vue'

const value = ref('Mon')
const options = [
  {
    label: 'Mon',
    value: 'Mon',
    disabled: true,
  },
  {
    label: 'Tue',
    value: 'Tue',
  },
  {
    label: 'Wed',
    value: 'Wed',
    disabled: true,
  },
  {
    label: 'Thu',
    value: 'Thu',
  },
  {
    label: 'Fri',
    value: 'Fri',
    disabled: true,
  },
  {
    label: 'Sat',
    value: 'Sat',
  },
  {
    label: 'Sun',
    value: 'Sun',
  },
]

커스텀 옵션 별칭 (Aliases for custom options) 2.9.8

옵션 형식이 기본 형식과 다르면 props 속성으로 옵션의 별칭을 커스터마이징할 수 있어요.

import { ref } from 'vue'

const value = ref('Mon')
const props = {
  label: 'myLabel',
  value: 'myValue',
  disabled: 'myDisabled',
}
const options = [
  {
    myLabel: 'Mon',
    myValue: 'Mon',
    myDisabled: true,
  },
  {
    myLabel: 'Tue',
    myValue: 'Tue',
  },
  {
    myLabel: 'Wed',
    myValue: 'Wed',
    myDisabled: true,
  },
  {
    myLabel: 'Thu',
    myValue: 'Thu',
  },
  {
    myLabel: 'Fri',
    myValue: 'Fri',
    myDisabled: true,
  },
  {
    myLabel: 'Sat',
    myValue: 'Sat',
  },
  {
    myLabel: 'Sun',
    myValue: 'Sun',
  },
]

블록 (Block)

block을 true로 설정해서 부모 요소의 너비에 맞춰요.

import { ref } from 'vue'

const value = ref('Mon')

const options = [
  'Mon',
  'Tue',
  'Wed',
  'Thu',
  'Fri',
  'Sat',
  'Sunday long long long long long long long',
]

커스텀 내용 (Custom Content)

default 슬롯을 설정해서 커스텀 내용을 렌더링해요.

import { ref } from 'vue'
import {
  Apple,
  Cherry,
  Grape,
  Orange,
  Pear,
  Watermelon,
} from '@element-plus/icons-vue'

const value = ref('Apple')

const options = [
  {
    label: 'Apple',
    value: 'Apple',
    icon: Apple,
  },
  {
    label: 'Cherry',
    value: 'Cherry',
    icon: Cherry,
  },
  {
    label: 'Grape',
    value: 'Grape',
    icon: Grape,
  },
  {
    label: 'Orange',
    value: 'Orange',
    icon: Orange,
  },
  {
    label: 'Pear',
    value: 'Pear',
    icon: Pear,
  },
  {
    label: 'Watermelon',
    value: 'Watermelon',
    icon: Watermelon,
  },
]

커스텀 스타일 (Custom Style)

CSS 변수를 사용해서 커스텀 스타일을 설정해요.

import { ref } from 'vue'

const value = ref('Delicacy')

const options = ['Delicacy', 'Desserts&Drinks', 'Fresh foods', 'Supermarket']

.custom-style .el-segmented {
  --el-segmented-item-selected-color: var(--el-text-color-primary);
  --el-segmented-item-selected-bg-color: #ffd100;
  --el-border-radius-base: 16px;
}

API

Attributes

props

Events

Slots

타입 선언 (Type Declarations)

type Option = Record | string | number | boolean

더 알아보기 (Learn more)

• Statistic 컴포넌트 — 통계
• Affix 컴포넌트 — 고정 요소
• Element Plus 시작하기 — 프로젝트 설정