分段控制 React 元件

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

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

分段元件

包含以下元件

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 元件延伸自 Button 元件，它支援所有 Button 屬性和以下額外屬性

名稱	類型	預設值	描述
active	布林值	false	將按鈕標示為啟用
component	字串	'button'	元件的 HTML 元素
rounded	布林值	false	使分段按鈕圓角（應在 `<Segmented rounded>` 內使用）
strong	布林值	false	使分段按鈕具有強烈樣式（應在 `<Segmented strong>` 內使用）

範例

SegmentedControl.jsx

import React, { useState } from 'react';

import {
  Page,
  Navbar,
  NavbarBackLink,
  Segmented,
  SegmentedButton,
  Block,
  BlockTitle,
} from 'konsta/react';

export default function SegmentedControlPage() {
  const [activeSegmented, setActiveSegmented] = useState(1);
  return (
    <Page>
      <Navbar
        title="Segmented Control"
        />

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

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

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

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

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

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