Segmented React Component

There are following components included:

Segmented - segmented wrapper for buttons

Button Properties

Button component has almost the same properties as the Link component but with few additional button-specific properties:

Prop	Type	Default	Description
<Segmented> properties
raised	boolean	false	Makes segmented raised
raisedIos	boolean	false	Makes segmented raised only in iOS theme
raisedMd	boolean	false	Makes segmented raised only in MD theme
round	boolean	false	Makes segmented round
roundIos	boolean	false	Makes segmented round only in iOS theme
roundMd	boolean	false	Makes segmented round only in MD theme
strong	boolean	false	Makes strong segmented
strongIos	boolean	false	Makes strong segmented only in iOS theme
strongMd	boolean	false	Makes strong segmented only in MD theme
tag	string	div	Tag used to render Segmented element

Examples

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

Improve this Doc

On this page

Button Properties
Examples