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

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

Segmented - ボタン用のセグメント化されたラッパー

ボタンのプロパティ

ボタンコンポーネントは、リンクコンポーネントとほぼ同じプロパティを持ちますが、いくつかの追加のボタン固有のプロパティがあります。

プロパティ	型	デフォルト	説明
<Segmented> プロパティ
raised	boolean	false	セグメントを立体的にします。
raisedIos	boolean	false	iOSテーマでのみセグメントを立体的にします。
raisedMd	boolean	false	MDテーマでのみセグメントを立体的にします。
round	boolean	false	セグメントを丸くします。
roundIos	boolean	false	iOSテーマでのみセグメントを丸くします。
roundMd	boolean	false	MDテーマでのみセグメントを丸くします。
strong	boolean	false	セグメントを強調します。
strongIos	boolean	false	iOSテーマでのみセグメントを強調します。
strongMd	boolean	false	MDテーマでのみセグメントを強調します。
tag	string	div	Segmented要素をレンダリングするために使用されるタグ。`div`または`p`にすることができます。

例

segmented.svelte

<script>
  import { Page, Navbar, Block, Segmented, Button } from 'framework7-svelte';

  let activeStrongButton = 0;
</script>

<!-- svelte-ignore a11y-invalid-attribute -->
<Page>
  <Navbar title="Segmented" />

  <Block strong outlineIos>
    <Segmented tag="p">
      <Button>Button</Button>
      <Button>Button</Button>
      <Button active>Active</Button>
    </Segmented>
    <Segmented strong tag="p">
      <Button active={activeStrongButton === 0} onClick={() => (activeStrongButton = 0)}
        >Button</Button
      >
      <Button active={activeStrongButton === 1} onClick={() => (activeStrongButton = 1)}
        >Button</Button
      >
      <Button active={activeStrongButton === 2} onClick={() => (activeStrongButton = 2)}
        >Button</Button
      >
    </Segmented>
    <Segmented raised tag="p">
      <Button>Button</Button>
      <Button>Button</Button>
      <Button active>Active</Button>
    </Segmented>
    <Segmented tag="p">
      <Button outline>Outline</Button>
      <Button outline>Outline</Button>
      <Button outline active>Active</Button>
    </Segmented>
    <Segmented raised round tag="p">
      <Button round>Button</Button>
      <Button round>Button</Button>
      <Button round active>Active</Button>
    </Segmented>
    <Segmented round tag="p">
      <Button round outline>Outline</Button>
      <Button round outline>Outline</Button>
      <Button round outline active>Active</Button>
    </Segmented>
  </Block>
</Page>

このドキュメントを改善する

このページについて

ボタンのプロパティ
例