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

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

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

ボタンのプロパティ

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

プロパティ	型	デフォルト	説明
<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要素のレンダリングに使用されるタグ

例

segmented.jsx

import React, { useState } from 'react';
import { Navbar, Page, Block, Button, Segmented } from 'framework7-react';

export default () => {
  const [activeStrongButton, setActiveStrongButton] = useState(0);

  return (
    <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={() => setActiveStrongButton(0)}>
            Button
          </Button>
          <Button active={activeStrongButton === 1} onClick={() => setActiveStrongButton(1)}>
            Button
          </Button>
          <Button active={activeStrongButton === 2} onClick={() => setActiveStrongButton(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>
  );
};

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

このページについて

ボタンのプロパティ
例