Smart Select React Component
Smart Select allows you to easily convert your usual form selects to dynamic pages with grouped radio inputs. You can see such feature in many native apps.
It is not a separate React component, but just a particular case of using and
Smart Select Properties
Prop | Type | Default | Description |
---|---|---|---|
<ListItem> properties | |||
smartSelect | boolean | Enables Smart Select behavior | |
smartSelectParams | object | Object with Smart Select Parameters |
Access To Smart Select Instance
You can access Smart Select initialized instance by accessing .f7SmartSelect
property of <ListItem>
component.
Examples
<List>
<ListItem
title="Fruit"
smartSelect
>
<select name="fruits" defaultValue="apple">
<option value="apple">Apple</option>
<option value="pineapple">Pineapple</option>
<option value="pear">Pear</option>
<option value="orange">Orange</option>
<option value="melon">Melon</option>
<option value="peach">Peach</option>
<option value="banana">Banana</option>
</select>
</ListItem>
<ListItem
title="Car"
smartSelect
smartSelectParams={{openIn: 'popup', searchbar: true, searchbarPlaceholder: 'Search car'}}
>
<select name="car" multiple defaultValue={['honda', 'audi', 'ford']}>
<optgroup label="Japanese">
<option value="honda">Honda</option>
<option value="lexus">Lexus</option>
<option value="mazda">Mazda</option>
<option value="nissan">Nissan</option>
<option value="toyota">Toyota</option>
</optgroup>
<optgroup label="German">
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
<option value="mercedes">Mercedes</option>
<option value="vw">Volkswagen</option>
<option value="volvo">Volvo</option>
</optgroup>
<optgroup label="American">
<option value="cadillac">Cadillac</option>
<option value="chrysler">Chrysler</option>
<option value="dodge">Dodge</option>
<option value="ford">Ford</option>
</optgroup>
</select>
</ListItem>
<ListItem
title="Mac or Windows"
smartSelect
smartSelectParams={{openIn: 'sheet'}}
>
<select name="mac-windows" defaultValue="mac">
<option value="mac">Mac</option>
<option value="windows">Windows</option>
</select>
</ListItem>
<ListItem
title="Super Hero"
smartSelect
smartSelectParams={{openIn: 'popover'}}
>
<select name="superhero" multiple defaultValue={['Batman']}>
<option value="Batman">Batman</option>
<option value="Superman">Superman</option>
<option value="Hulk">Hulk</option>
<option value="Spiderman">Spiderman</option>
<option value="Ironman">Ironman</option>
<option value="Thor">Thor</option>
<option value="Wonder Woman">Wonder Woman</option>
</select>
</ListItem>
</List>
当前内容版权归 Framework7 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 Framework7 .