14.3.5 • Published 8 months ago
@rmwc/segmented-button v14.3.5
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.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