セグメント化されたコントロール React コンポーネント

セグメント化されたコンポーネント
セグメントプロパティ
SegmentedButton プロパティ
例

セグメントコントロールとは、相互に排他的な機能を持つ2つ以上のセグメント（ボタン）の線形セットです。コントロール内では、すべてのボタンの幅は同じです。セグメントコントロールは、異なるビューを表示する（タブを切り替える）ためによく使用されます。

セグメント化されたコンポーネント

以下のコンポーネントが含まれています

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.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>
  );
}