分段控制 React 组件

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

分段控制是两个或多个段（按钮）的线性集合，每个段都充当互斥按钮。在控制内，所有按钮的宽度相等。分段控制通常用于显示不同的视图（切换标签）。

分段组件

以下组件已包含在内

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

分段道具

名称	类型	默认值	描述
颜色	对象		包含 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'
组件	字符串	'div'	组件的 HTML 元素
轮廓	布尔值	假	使分段轮廓
提高	布尔值	假	使分段升高
圆形	布尔值	假	使分段圆形
强壮	布尔值	假	使分段更强

SegmentedButton 道具

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

名称	类型	默认值	描述
激活	布尔值	假	突出显示按钮为活动状态
组件	字符串	'button'	组件的 HTML 元素
圆形	布尔值	假	使分段按钮圆形（应在 `<Segmented rounded>` 内使用）
强壮	布尔值	假	使分段按钮更强（应在 `<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>
  );
}