Segmented 分段控制器 ​

<template>
  <w-title>基础用法：通过 size 设置尺寸</w-title>
  <div class="flex items-start gap-4 mb-4">
    <w-segmented v-model="value" :options="options" size="default" />
  </div>
  <div class="flex items-start gap-4 flex-wrap">
    <w-segmented v-model="value" :options="options" size="small" />
    <w-segmented v-model="value" :options="options" size="mini" />
    <w-segmented v-model="value" :options="options" size="large" />
  </div>
  <w-divider />
  <w-title>禁用状态</w-title>
  <w-segmented v-model="value" :options="options" disabled />
  <w-divider />
  <w-title>Block 分段选择器：设置block为true以适应父元素的宽度</w-title>
  <w-segmented v-model="value" :options="options" block />
</template>

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

const value = ref('一周内')

const options = ['一周内', '一个月内', '三个月内', '六个月内', '一年内']
</script>

<template>
  <div>
    <w-segmented
      v-model="size"
      :options="sizeOptions"
      style="margin-bottom: 1rem"
    />
    <br />
    <w-segmented
      v-model="value"
      :options="options"
      direction="vertical"
      :size="size"
    >
      <template #default="scope">
        <div :class="['flex', 'items-center', 'flex-col', 'm-2']">
          <w-icon size="20">
            <component :is="scope.item.icon" />
          </w-icon>
          <div class="mt-2">{{ scope.item.label }}</div>
        </div>
      </template>
    </w-segmented>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Excel, Folder, Pdf, Ppt, Word } from '@win-design-next/icons-vue'
import type { SegmentedProps } from 'win-design-next'

const value = ref('Excel')
const size = ref<SegmentedProps['size']>('default')

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

const options = [
  {
    label: 'Excel',
    value: 'Excel',
    icon: Excel,
  },
  {
    label: 'Folder',
    value: 'Folder',
    icon: Folder,
    disabled: true,
  },
  {
    label: 'Pdf',
    value: 'Pdf',
    icon: Pdf,
  },
  {
    label: 'Ppt',
    value: 'Ppt',
    icon: Ppt,
  },
  {
    label: 'Word',
    value: 'Word',
    icon: Word,
  },
]
</script>

<template>
  <div class="custom-style">
    <w-segmented v-model="value" :options="options" />
  </div>
</template>

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

const value = ref('Delicacy')

const options = ['Delicacy', 'Desserts&Drinks', 'Fresh foods', 'Supermarket']
</script>

<style scoped>
.custom-style .w3-segmented {
  --w3-segmented-item-selected-color: var(--w3-color-white);
  --w3-segmented-item-selected-bg-color: #2d5afa;
  --w3-border-radius-base: 16px;
}
</style>

<template>
  <div>
    <w-segmented v-model="value" :options="options">
      <template #default="scope">
        <div class="flex flex-col items-center gap-2 p-2">
          <w-icon size="20">
            <component :is="scope.item.icon" />
          </w-icon>
          <div>{{ scope.item.label }}</div>
        </div>
      </template>
    </w-segmented>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Excel, Folder, Pdf, Ppt, Word } from '@win-design-next/icons-vue'

const value = ref('Excel')

const options = [
  {
    label: 'Excel',
    value: 'Excel',
    icon: Excel,
  },
  {
    label: 'Folder',
    value: 'Folder',
    icon: Folder,
  },
  {
    label: 'Pdf',
    value: 'Pdf',
    icon: Pdf,
  },
  {
    label: 'Ppt',
    value: 'Ppt',
    icon: Ppt,
  },
  {
    label: 'Word',
    value: 'Word',
    icon: Word,
    disabled: true,
  },
]
</script>