Smart Select React 元件

Smart Select 讓你可以輕鬆地將你平常的表單選項轉換成具有分組無線電輸入的動態頁面。你可以在許多原生應用程式中看到此功能。

它不是一個獨立的 React 元件，而只是使用 <List> 和 <ListItem> 元件搭配 Framework7 的 Smart Select 元件的一個特殊案例。

Smart Select 屬性

屬性	類型	說明
<ListItem> 屬性
smartSelect	布林值	啟用 Smart Select 行為
smartSelectParams	物件	包含 Smart Select 參數的物件

範例

smart-select.jsx

import React from 'react';
import { Navbar, Page, List, Block, ListItem } from 'framework7-react';

export default () => (
  <Page>
    <Navbar title="Smart Select"></Navbar>
    <Block>
      Framework7 allows you to easily convert your usual form selects to dynamic pages with radios:
    </Block>
    <List strongIos outlineIos dividersIos>
      <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>
  </Page>
);

改善此文件

在此頁面

Smart Select 屬性
範例