14.3.5 • Published 8 months ago

@rmwc/segmented-button v14.3.5

Weekly downloads
-
License
MIT
Repository
github
Last release
8 months ago

Segmented Button

Segmented buttons allow users to toggle the selected states of grouped buttons.

  • Module @rmwc/segmented-button
  • Import styles:
    • Using CSS Loader
      • import '@rmwc/segmented-button/styles';
    • Or include stylesheets
      • '@material/segmented-button/dist/mdc.segmented-button.css'
      • '@rmwc/@rmwc/icon/icon.css'
      • '@material/ripple/dist/mdc.ripple.css'
  • MDC Docs: https://material.io/develop/web/components/segmented-button/
function Example() {
  const [selected, setSelected] = React.useState({
    cookies: false,
    pizza: false,
    icecream: false
  });
  const toggleSelected = (key) =>
    setSelected({ ...selected, [key]: !selected[key] });
  return (
    <SegmentedButton>
      <Segment
        icon="favorite"
        value="cookies"
        onClick={() => toggleSelected('cookies')}
        selected={selected.cookies}
      />
      <Segment
        label="Button"
        value="pizza"
        onClick={() => toggleSelected('pizza')}
        selected={selected.pizza}
      />
      <Segment
        icon="favorite"
        label="Button"
        value="icecream"
        onClick={() => toggleSelected('icecream')}
        selected={selected.icecream}
      />
    </SegmentedButton>
  );
}
function Example() {
  const [selected, setSelected] = React.useState('icecream');
  return (
    <SegmentedButton selectType="single">
      <Segment
        icon="favorite"
        value="cookies"
        onClick={(evt) => setSelected(evt.currentTarget.value)}
        selected={selected === 'cookies'}
      />
      <Segment
        label="Button"
        value="pizza"
        onClick={(evt) => setSelected(evt.currentTarget.value)}
        selected={selected === 'pizza'}
      />
      <Segment
        icon="favorite"
        label="Button"
        value="icecream"
        onClick={(evt) => setSelected(evt.currentTarget.value)}
        selected={selected === 'icecream'}
      />
    </SegmentedButton>
  );
}
<>
  {/** Wrapping a button in TouchTargetWrapper will automatically set its `touch` prop to true. */}
  <TouchTargetWrapper>
    <Segment>Touch Accessible</Segment>
  </TouchTargetWrapper>
</>

SegmentedButton

Props

NameTypeDescription
selectType"multiple" \| "single"Determines whether the user is able to select multiple or a single button at a time. Default to multiple.
14.3.5

8 months ago

14.3.4

9 months ago

14.3.3

10 months ago

14.2.7

1 year ago

14.2.8

1 year ago

14.2.9

1 year ago

14.3.0

12 months ago

14.3.1

12 months ago

14.3.2

11 months ago

14.2.5

1 year ago

14.2.6

1 year ago

14.2.2

1 year ago

14.2.0

1 year ago

14.2.1

1 year ago

14.1.5

1 year ago

14.1.4

1 year ago

14.1.3

1 year ago

14.1.2

1 year ago

14.1.1

1 year ago

14.1.0

1 year ago

14.0.12

1 year ago

14.0.11

1 year ago

14.0.10

1 year ago

14.0.9

1 year ago

14.0.8

1 year ago

14.0.7

1 year ago

14.0.6

1 year ago

14.0.5

2 years ago

14.0.4

2 years ago

14.0.3

2 years ago

14.0.2

2 years ago

14.0.1

2 years ago

14.0.0

2 years ago

14.0.2-alpha.7

2 years ago

14.0.2-alpha.6

2 years ago

14.0.2-alpha.5

2 years ago

14.0.2-alpha.4

2 years ago

14.0.2-alpha.3

2 years ago

14.0.2-alpha.1

2 years ago

14.0.2-alpha.0

2 years ago

14.0.1-alpha.0

2 years ago

14.0.0-alpha.0

2 years ago