分段式 React 组件

包含以下组件

Segmented - 用于按钮的分段式包装器

按钮属性

按钮组件与链接组件具有几乎相同的属性，但有一些额外的按钮特定属性

属性	类型	默认值	描述
<Segmented> 属性
raised	布尔值	false	使分段式升起
raisedIos	布尔值	false	仅在 iOS 主题中使分段式升起
raisedMd	布尔值	false	仅在 MD 主题中使分段式升起
round	布尔值	false	使分段式圆形
roundIos	布尔值	false	仅在 iOS 主题中使分段式圆形
roundMd	布尔值	false	仅在 MD 主题中使分段式圆形
strong	布尔值	false	使分段式变强
strongIos	布尔值	false	仅在 iOS 主题中使分段式变强
strongMd	布尔值	false	仅在 MD 主题中使分段式变强
tag	字符串	div	用于渲染分段式元素的标签

示例

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

改进此文档

在本页上

按钮属性
示例