1.1.0 • Published 4 years ago
@smashing/select-menu v1.1.0
Select Menu
yarn add @smashing/select-menu
Default appearance
<SelectMenu
options={options}
value={singleSelectedOption}
onSelect={changeSingleSelectedOption}
hasFilter
hasTitle
title="Select Item"
/>
Card appearance
<SelectMenu
options={options}
value={singleSelectedOption}
onSelect={changeSingleSelectedOption}
appearance="card"
hasFilter
/>
Minimal appearance and multiselect option
<SelectMenu
options={options}
value={selectedOptions}
placeholderForMultipleSelected={selected => `Items: ${selected.length}`}
onSelect={select}
onDeselect={deselect}
appearance="minimal"
/>
Custom select menu
<SelectMenu
options={options}
value={selectedOptions}
onSelect={select}
onDeselect={deselect}
appearance="primary"
renderItem={(option, click, options, selected) => {
return (
<div key={option.value}>
<Button onClick={click}>{option.label} </Button>
</div>
)
}}
children={props => (
<Button ref={props.getRef} onClick={props.toggle}>
Select
</Button>
)}
/>
Change the height and width
<SelectMenu
width={100}
height={100}
options={options}
value={singleSelectedOption}
onSelect={changeSingleSelectedOption}
/>
Remove title and filter
hasFilter={false}
: to remove the search input filter.hasTitle={false}
: to remove the title from the popover.
1.1.0
4 years ago
1.0.2
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago
0.9.2
4 years ago
0.9.1
4 years ago
0.9.0
4 years ago
0.8.7
4 years ago
0.8.6
4 years ago
0.8.5
4 years ago
0.8.4
4 years ago
0.8.3
4 years ago
0.8.2
4 years ago
0.8.1
4 years ago
0.8.0
4 years ago
0.7.6
4 years ago
0.7.5
4 years ago
0.7.4
4 years ago
0.7.3
4 years ago
0.7.2
4 years ago
0.7.1
4 years ago
0.7.0
4 years ago
0.6.1
4 years ago
0.6.0
4 years ago
0.5.0
4 years ago
0.4.0
4 years ago
0.3.0
4 years ago
0.1.4-alpha.28
5 years ago
0.2.0
5 years ago
0.1.4
5 years ago
0.1.4-alpha.6
5 years ago
0.1.3
5 years ago
0.1.1
5 years ago
0.1.0
5 years ago