分段控件 Vue 组件

分段组件
分段道具
SegmentedButton 道具
示例

分段控件是一组线性排列的两个或多个片段（按钮），每个片段充当互斥的按钮。在控件中，所有按钮的宽度相等。分段控件通常用于显示不同的视图（切换选项卡）。

分段组件

包含以下组件

Segmented - 用于按钮的分段包装器
SegmentedButton - 单个分段按钮

分段道具

名称	类型	默认值	描述
colors	对象		包含 Tailwind CSS 颜色类别的对象
colors.borderIos	字符串	'border-primary'
colors.borderMaterial	字符串	'border-md-light-outline dark:border-md-dark-outline'
colors.divideIos	字符串	'divide-primary'
colors.divideMaterial	字符串	'divide-md-light-outline dark:divide-md-dark-outline'
colors.strongBgIos	字符串	'bg-black bg-opacity-5 dark:bg-white dark:bg-opacity-10'
colors.strongBgMaterial	字符串	'bg-md-light-surface-variant dark:bg-md-dark-surface-variant'
component	字符串	'div'	组件的 HTML 元素
outline	布尔值	false	使分段轮廓
raised	布尔值	false	使分段升起
rounded	布尔值	false	使分段圆角
strong	布尔值	false	使分段坚固

SegmentedButton 道具

SegmentedButton 组件扩展了 Button 组件，它支持所有 Button 道具以及以下附加道具

名称	类型	默认值	描述
active	布尔值	false	突出显示按钮为活动状态
component	字符串	'button'	组件的 HTML 元素
rounded	布尔值	false	使分段按钮圆角（应在 `<Segmented rounded>` 中使用）
strong	布尔值	false	使分段按钮坚固（应在 `<Segmented strong>` 中使用）

示例

SegmentedControl.vue

<template>
  <k-page>
    <k-navbar title="Segmented Control" />

    <k-block-title>Default Segmented</k-block-title>
    <k-block strong-ios outline-ios class="space-y-4">
      <k-segmented>
        <k-segmented-button
          :active="activeSegmented === 1"
          @click="() => (activeSegmented = 1)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          :active="activeSegmented === 2"
          @click="() => (activeSegmented = 2)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          :active="activeSegmented === 3"
          @click="() => (activeSegmented = 3)"
        >
          Button
        </k-segmented-button>
      </k-segmented>

      <k-segmented rounded>
        <k-segmented-button
          :active="activeSegmented === 1"
          @click="() => (activeSegmented = 1)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          :active="activeSegmented === 2"
          @click="() => (activeSegmented = 2)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          :active="activeSegmented === 3"
          @click="() => (activeSegmented = 3)"
        >
          Button
        </k-segmented-button>
      </k-segmented>
    </k-block>

    <k-block-title>Raised Segmented</k-block-title>
    <k-block strong-ios outline-ios class="space-y-4">
      <k-segmented raised>
        <k-segmented-button
          :active="activeSegmented === 1"
          @click="() => (activeSegmented = 1)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          :active="activeSegmented === 2"
          @click="() => (activeSegmented = 2)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          :active="activeSegmented === 3"
          @click="() => (activeSegmented = 3)"
        >
          Button
        </k-segmented-button>
      </k-segmented>
      <k-segmented raised rounded>
        <k-segmented-button
          :active="activeSegmented === 1"
          @click="() => (activeSegmented = 1)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          :active="activeSegmented === 2"
          @click="() => (activeSegmented = 2)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          :active="activeSegmented === 3"
          @click="() => (activeSegmented = 3)"
        >
          Button
        </k-segmented-button>
      </k-segmented>
    </k-block>

    <k-block-title>Outline</k-block-title>
    <k-block strong-ios outline-ios class="space-y-4">
      <k-segmented outline>
        <k-segmented-button
          :active="activeSegmented === 1"
          @click="() => (activeSegmented = 1)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          :active="activeSegmented === 2"
          @click="() => (activeSegmented = 2)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          :active="activeSegmented === 3"
          @click="() => (activeSegmented = 3)"
        >
          Button
        </k-segmented-button>
      </k-segmented>
      <k-segmented rounded outline>
        <k-segmented-button
          :active="activeSegmented === 1"
          @click="() => (activeSegmented = 1)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          :active="activeSegmented === 2"
          @click="() => (activeSegmented = 2)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          :active="activeSegmented === 3"
          @click="() => (activeSegmented = 3)"
        >
          Button
        </k-segmented-button>
      </k-segmented>
    </k-block>

    <k-block-title>Strong Segmented</k-block-title>
    <k-block strong-ios outline-ios class="space-y-4">
      <k-segmented strong>
        <k-segmented-button
          strong
          :active="activeSegmented === 1"
          @click="() => (activeSegmented = 1)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          strong
          :active="activeSegmented === 2"
          @click="() => (activeSegmented = 2)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          strong
          :active="activeSegmented === 3"
          @click="() => (activeSegmented = 3)"
        >
          Button
        </k-segmented-button>
      </k-segmented>

      <k-segmented strong rounded>
        <k-segmented-button
          strong
          rounded
          :active="activeSegmented === 1"
          @click="() => (activeSegmented = 1)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          strong
          rounded
          :active="activeSegmented === 2"
          @click="() => (activeSegmented = 2)"
        >
          Button
        </k-segmented-button>
        <k-segmented-button
          strong
          rounded
          :active="activeSegmented === 3"
          @click="() => (activeSegmented = 3)"
        >
          Button
        </k-segmented-button>
      </k-segmented>
    </k-block>
  </k-page>
</template>
<script>
  import { ref } from 'vue';
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kSegmented,
    kSegmentedButton,
    kBlock,
    kBlockTitle,
  } from 'konsta/vue';

  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kSegmented,
      kSegmentedButton,
      kBlock,
      kBlockTitle,
    },
    setup() {
      const activeSegmented = ref(1);
      return {
        activeSegmented,
      };
    },
  };
</script>