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

セグメントコンポーネント
セグメントプロパティ
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'
outline	真偽値	false	セグメントをアウトラインにする
raised	真偽値	false	セグメントを隆起させる
rounded	真偽値	false	セグメントを角丸にする
strong	真偽値	false	セグメントを強調する

SegmentedButton プロパティ

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>