分段控制 Svelte 組件

分段組件
分段屬性
分段按鈕屬性
範例

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

分段組件

包含以下組件

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'
outline	布林值	false	使分段呈現外框
raised	布林值	false	使分段呈現凸起效果
rounded	布林值	false	使分段呈現圓角效果
strong	布林值	false	使分段呈現強烈效果

分段按鈕屬性

SegmentedButton 組件擴展了 Button 組件，它支援所有 Button 屬性和以下額外屬性

名稱	類型	預設值	描述
active	布林值	false	將按鈕標示為啟用狀態
rounded	布林值	false	使分段按鈕呈現圓角（應在 `<Segmented rounded>` 中使用）
strong	布林值	false	使分段按鈕呈現強烈效果（應在 `<Segmented strong>` 中使用）
onClick	函數(e)		`click` 事件處理程序

範例

SegmentedControl.svelte

<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Segmented,
    SegmentedButton,
    Block,
    BlockTitle,
  } from 'konsta/svelte';

  let activeSegmented = 1;
</script>

<Page>
  <Navbar title="Segmented Control" />

  <BlockTitle>Default Segmented</BlockTitle>
  <Block strongIos outlineIos class="space-y-4">
    <Segmented>
      <SegmentedButton
        active={activeSegmented === 1}
        onClick={() => (activeSegmented = 1)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 2}
        onClick={() => (activeSegmented = 2)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 3}
        onClick={() => (activeSegmented = 3)}
      >
        Button
      </SegmentedButton>
    </Segmented>

    <Segmented rounded>
      <SegmentedButton
        active={activeSegmented === 1}
        onClick={() => (activeSegmented = 1)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 2}
        onClick={() => (activeSegmented = 2)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 3}
        onClick={() => (activeSegmented = 3)}
      >
        Button
      </SegmentedButton>
    </Segmented>
  </Block>

  <BlockTitle>Raised Segmented</BlockTitle>
  <Block strongIos outlineIos class="space-y-4">
    <Segmented raised>
      <SegmentedButton
        active={activeSegmented === 1}
        onClick={() => (activeSegmented = 1)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 2}
        onClick={() => (activeSegmented = 2)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 3}
        onClick={() => (activeSegmented = 3)}
      >
        Button
      </SegmentedButton>
    </Segmented>
    <Segmented raised rounded>
      <SegmentedButton
        active={activeSegmented === 1}
        onClick={() => (activeSegmented = 1)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 2}
        onClick={() => (activeSegmented = 2)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 3}
        onClick={() => (activeSegmented = 3)}
      >
        Button
      </SegmentedButton>
    </Segmented>
  </Block>

  <BlockTitle>Outline</BlockTitle>
  <Block strongIos outlineIos class="space-y-4">
    <Segmented outline>
      <SegmentedButton
        active={activeSegmented === 1}
        onClick={() => (activeSegmented = 1)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 2}
        onClick={() => (activeSegmented = 2)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 3}
        onClick={() => (activeSegmented = 3)}
      >
        Button
      </SegmentedButton>
    </Segmented>
    <Segmented rounded outline>
      <SegmentedButton
        active={activeSegmented === 1}
        onClick={() => (activeSegmented = 1)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 2}
        onClick={() => (activeSegmented = 2)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 3}
        onClick={() => (activeSegmented = 3)}
      >
        Button
      </SegmentedButton>
    </Segmented>
  </Block>

  <BlockTitle>Strong Segmented</BlockTitle>
  <Block strongIos outlineIos class="space-y-4">
    <Segmented strong>
      <SegmentedButton
        strong
        active={activeSegmented === 1}
        onClick={() => (activeSegmented = 1)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        strong
        active={activeSegmented === 2}
        onClick={() => (activeSegmented = 2)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        strong
        active={activeSegmented === 3}
        onClick={() => (activeSegmented = 3)}
      >
        Button
      </SegmentedButton>
    </Segmented>

    <Segmented strong rounded>
      <SegmentedButton
        strong
        rounded
        active={activeSegmented === 1}
        onClick={() => (activeSegmented = 1)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        strong
        rounded
        active={activeSegmented === 2}
        onClick={() => (activeSegmented = 2)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        strong
        rounded
        active={activeSegmented === 3}
        onClick={() => (activeSegmented = 3)}
      >
        Button
      </SegmentedButton>
    </Segmented>
  </Block>
</Page>