スマートセレクトVueコンポーネント

    Smart Selectを使うと、通常のフォームセレクトを、グループ化されたラジオ入力を持つダイナミックなページに簡単に変換することができます。このような機能は、多くのネイティブアプリで見ることができます。

    これは独立したVueコンポーネントではなく、<f7-list><f7-list-item>コンポーネントをFramework7のSmart Selectコンポーネントで使用した特殊なケースに過ぎません。

    スマートセレクトのプロパティ

    PropTypeDefaultDescription
    <f7-list-item> properties
    smart-selectbooleanスマートセレクトの動作を有効にする
    smart-select-paramsobjectスマートセレクトのパラメータを持つオブジェクト。

    Examples

    <template>
    <f7-page>
      <f7-navbar title="Smart Select"></f7-navbar>
      <f7-list>
        <f7-list-item title="Fruit" smart-select>
          <select name="fruits">
            <option value="apple" selected>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>
        </f7-list-item>
        <f7-list-item title="Car" smart-select :smart-select-params="{openIn: 'popup', searchbar: true, searchbarPlaceholder: 'Search car'}">
          <select name="car" multiple>
            <optgroup label="Japanese">
              <option value="honda" selected>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" selected>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" selected>Ford</option>
            </optgroup>
          </select>
        </f7-list-item>
        <f7-list-item title="Mac or Windows" smart-select :smart-select-params="{openIn: 'sheet'}">
          <select name="mac-windows">
            <option value="mac" selected>Mac</option>
            <option value="windows">Windows</option>
          </select>
        </f7-list-item>
        <f7-list-item title="Super Hero" smart-select :smart-select-params="{openIn: 'popover'}">
          <select name="superhero" multiple>
            <option value="Batman" selected>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>
        </f7-list-item>
      </f7-list>
    </f7-page>
    </template>