🔥 認識我們的新專案 t0ggles - 您終極的專案管理工具！ 🔥

分段控制 Vue 元件

分段控制是一組線性排列的兩個或多個分段（按鈕），每個分段都作為一個互斥的按鈕。在控制項中，所有按鈕的寬度都相等。分段控制通常用於顯示不同的視圖（切換標籤）。

分段元件

包含以下元件

  • Segmented - 按鈕的分段包裝器
  • SegmentedButton - 單個分段按鈕

分段 Props

名稱類型預設值描述
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

布林值

使分段顯示為凸起布林值false

rounded

使分段顯示為圓角布林值false

strong

使分段顯示為強烈樣式

SegmentedButton Props

名稱類型預設值描述
SegmentedButton 元件擴展了 Button 元件，它支援所有 Button props 和以下額外 props布林值false

active

component字串將按鈕標示為啟用狀態

元件的 HTML 元素

使分段顯示為凸起布林值false

'button'

使分段顯示為圓角布林值false

使分段按鈕顯示為圓角（應在 <Segmented rounded> 中使用）

使分段按鈕顯示為強烈樣式（應在 <Segmented strong> 中使用）

範例
<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>
Material 程式碼依據.
MIT 授權 nolimits4web.