14.2.2 • Published 16 days ago
@rmwc/segmented-button v14.2.2
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'
- Using CSS Loader
- 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
Name | Type | Description |
---|---|---|
selectType | "multiple" \| "single" | Determines whether the user is able to select multiple or a single button at a time. Default to multiple. |
14.2.2
16 days ago
14.2.0
23 days ago
14.2.1
23 days ago
14.1.5
24 days ago
14.1.4
1 month ago
14.1.3
2 months ago
14.1.2
2 months ago
14.1.1
2 months ago
14.1.0
2 months ago
14.0.12
2 months ago
14.0.11
3 months ago
14.0.10
3 months ago
14.0.9
4 months ago
14.0.8
4 months ago
14.0.7
4 months ago
14.0.6
4 months ago
14.0.5
4 months ago
14.0.4
5 months ago
14.0.3
5 months ago
14.0.2
5 months ago
14.0.1
6 months ago
14.0.0
6 months ago
14.0.2-alpha.7
6 months ago
14.0.2-alpha.6
6 months ago
14.0.2-alpha.5
6 months ago
14.0.2-alpha.4
7 months ago
14.0.2-alpha.3
7 months ago
14.0.2-alpha.1
7 months ago
14.0.2-alpha.0
8 months ago
14.0.1-alpha.0
8 months ago
14.0.0-alpha.0
9 months ago