スマートセレクト

スマートセレクトを使用すると、通常のフォームのセレクトを、グループ化されたラジオボタンまたはチェックボックスの入力を持つ動的なページに簡単に変換できます。この機能は多くのネイティブiOSアプリで見られます。

スマートセレクトレイアウト

スマートセレクトのレイアウトは非常にシンプルです。これは、<select>を内部に持ち、item-linkにsmart-selectクラスを追加した、よく知られているリストビューのリンクです。

<div class="list">
  <ul>
    <!-- Smart select item -->
    <li>
      <!-- Additional "smart-select" class -->
      <a href="#" class="item-link smart-select">
        <!-- select -->
        <select name="fruits">
          <option value="apple" selected>Apple</option>
          <option value="pineapple">Pineapple</option>
          ...
        </select>
        <div class="item-content">
          <div class="item-inner">
            <!-- Select label -->
            <div class="item-title">Fruit</div>
            <!-- Selected value, not required -->
            <div class="item-after">Apple</div>
          </div>
        </div>
      </a>
    </li>
    <!-- Another smart selects or list view elements -->
    ...
  </ul>
</div>

カスタムオプションアイコン

<option>要素にdata-option-icon属性を使用することで、スマートセレクトページのリストビュー（オプション）のアイコンを指定できます。

• data-option-icon - 単なる文字列の場合、このクラスを持つアイコンが作成されます。f7:icon_nameの形式の場合、F7-Iconsアイコンが作成されます。md:icon_nameの形式の場合、Material Iconsアイコンが作成されます。
• data-option-icon-ios - data-option-iconと同じですが、iOSテーマがアクティブな場合にのみ適用されます。
• data-option-icon-md - data-option-iconと同じですが、MDテーマがアクティブな場合にのみ適用されます。

例

• <option data-option-icon="my-icon"> は、<i class="icon my-icon"></i>のリストアイテムアイコンを生成します。
• <option data-option-icon="f7:house_fill"> は、<i class="icon f7-icons">house_fill</i>のリストアイテムアイコンを生成します。
• <option data-option-icon="material:home"> は、<i class="icon material-icons">home</i>のリストアイテムアイコンを生成します。
• <option data-option-icon-ios="f7:house" data-option-icon-md="material:home"> は以下を生成します。
  • <i class="icon f7-icons">house</i> - iOSテーマがアクティブな場合
  • <i class="icon material-icons">home</i> - MDテーマがアクティブな場合

カスタムオプションの色と画像

スマートセレクトページのリストビュー要素の画像または色も指定できます。スマートセレクトの<select>にdata-option-image属性を追加するか（すべてのオプションにデフォルトの画像を設定する場合）、<option>に画像やアイコンを単一のオプションに設定する必要があります。

単一のオプションの場合、data-option-color属性とdata-option-class属性を使用して、特定のオプションの色や、追加のスタイリングのためのCSSクラスを追加することもできます。

<li>
  <a href="#" class="item-link smart-select">
    <select name="fruits">
      <option value="apple" selected data-option-image="https://cdn.framework7.io/placeholder/abstract-29x29-1.jpg">Apple</option>
      <option value="pineapple" data-option-image="https://cdn.framework7.io/placeholder/abstract-29x29-2.jpg">Pineapple</option>
      <option value="pear" data-option-color="orange" data-option-image="https://cdn.framework7.io/placeholder/abstract-29x29-3.jpg">Pear</option>
      ...
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Fruit</div>
      </div>
    </div>
  </a>
</li>

複数選択と<optgroup>

複数選択と<optgroup>を使用したグループオプションも使用できます。したがって、selectにmultiple属性を追加すると、スマートセレクトページのラジオボタンは自動的にチェックボックスに変換されます。

<li>
  <a href="#" class="item-link smart-select">
    <!-- "multiple" attribute for multiple select-->
    <select name="car" multiple>
      <!-- options grouped within "optgroup" tag-->
      <optgroup label="Japanese">
        <option value="honda" selected>Honda</option>
        <option value="lexus">Lexus</option>
        ...
      </optgroup>
      <optgroup label="German">
        <option value="audi" selected>Audi</option>
        <option value="bmw">BMW</option>
        ...
      </optgroup>
      <optgroup label="American">
        <option value="cadillac">Cadillac</option>
        <option value="chrysler">Chrysler</option>
        ...
      </optgroup>
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Car</div>
      </div>
    </div>
  </a>
</li>

複数選択とmaxlength

複数選択では、選択可能なアイテム数を制限するためにmaxlength属性を使用することもできます。

<li>
  <a href="#" class="item-link smart-select">
    <!-- "maxlength" attribute to limit number of possible selected items -->
    <!-- we won't allow to select more than 3 items -->
    <select name="car" multiple maxlength="3">
      <optgroup label="Japanese">
        <option value="honda" selected>Honda</option>
        <option value="lexus">Lexus</option>
        ...
      </optgroup>
      <optgroup label="German">
        <option value="audi">Audi</option>
        <option value="bmw">BMW</option>
        ...
      </optgroup>
      <optgroup label="American">
        <option value="cadillac">Cadillac</option>
        <option value="chrysler">Chrysler</option>
        ...
      </optgroup>
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Car</div>
      </div>
    </div>
  </a>
</li>

異なる表示値

オプションにdata-display-as属性を使用すると、選択された値を別の方法で表示できます。

<li>
  <a href="#" class="item-link smart-select">
    <select name="days">
      <option value="monday" selected data-display-as="Mon">Monday</option>
      <option value="tuesday" data-display-as="Tue">Tuesday</option>
      <option value="wednesday" data-display-as="Wed">Wednesday</option>
      <option value="thursday" data-display-as="Thu">Thursday</option>
      <option value="friday" data-display-as="Fri">Friday</option>
      <option value="saturday" data-display-as="Sat">Saturday</option>
      <option value="sunday" data-display-as="Sun">Sunday</option>
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Day</div>
      </div>
    </div>
  </a>
</li>

スマートセレクトアプリのメソッド

スマートセレクトを操作するための関連するアプリメソッドを見てみましょう。

スマートセレクトパラメータ

スマートセレクトを作成するために必要な、利用可能なパラメータのリストを見てみましょう。

<div class="block searchbar-not-found">{{appendSearchbarNotFound}}</div>

<div class="block searchbar-not-found">Nothing found</div>

var smartSelect = app.smartSelect.create({
  ...
  on: {
    opened: function () {
      console.log('Smart select opened')
    }
  }
})

var app = new Framework7({
  smartSelect: {
    pageTitle: 'Select Option',
    openIn: 'popup',
  }
});

スマートセレクトのメソッドとプロパティ

スマートセレクトを作成するには、次のように呼び出す必要があります。

var smartSelect = app.smartSelect.create({ /* parameters */ })

その後、便利なメソッドとプロパティを持つ初期化されたインスタンス（上記の例のsmartSelect変数など）があります。

スマートセレクトイベント

スマートセレクトは、スマートセレクト要素で次のDOMイベントを発生させ、アプリとスマートセレクトインスタンスでイベントを発生させます。

DOMイベント

アプリとスマートセレクトインスタンスのイベント

スマートセレクトインスタンスは、インスタンス自身とアプリインスタンスの両方でイベントを発生させます。アプリインスタンスのイベントには、同じ名前の前にsmartSelectが付いています。

スマートセレクトの自動初期化

スマートセレクトAPIを使用する必要がなく、スマートセレクトがページの内部にあり、ページ初期化時にDOMに表示されている場合は、追加のsmart-select-initクラスを追加するだけで自動的に初期化できます。

<li>
  <!-- Add smart-select-init class -->
  <a href="#" class="item-link smart-select smart-select-init">
    <!-- select -->
    <select name="fruits">
      <option value="apple" selected>Apple</option>
      <option value="pineapple">Pineapple</option>
      ...
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Fruit</div>
        <div class="item-after">Apple</div>
      </div>
    </div>
  </a>
</li>

この場合、作成されたスマートセレクトインスタンスにアクセスする必要がある場合は、app.smartSelect.getアプリメソッドを使用できます。

var smartSelect = app.smartSelect.get('.smart-select');

自動初期化を使用する場合、追加のパラメーターを渡す必要がある場合があります。この場合、スマートセレクト要素のdata-属性を使用してすべての追加パラメーターを渡すことができます。

<li>
  <!-- Pass parameters as kebab-case data attributes -->
  <a href="#" class="item-link smart-select smart-select-init" data-open-in="popup" data-virtual-list="true" data-page-back-link-text="Go back">
    <!-- select -->
    <select name="fruits">
      <option value="apple" selected>Apple</option>
      <option value="pineapple">Pineapple</option>
      ...
    </select>
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Fruit</div>
        <div class="item-after">Apple</div>
      </div>
    </div>
  </a>
</li>

CSS変数

以下は、関連するCSS変数（CSSカスタムプロパティ）のリストです。

:root {
  /*
  --f7-smart-select-sheet-bg: var(--f7-list-bg-color);
  --f7-smart-select-sheet-toolbar-border-color: var(--f7-bars-border-color);
  */
}

例

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Smart Select</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      Framework7 allows you to easily convert your usual form selects to dynamic pages with radios:
    </div>
    <div class="list list-strong-ios list-outline-ios list-dividers-ios">
      <ul>
        <li>
          <a class="item-link smart-select smart-select-init">
            <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>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Fruit</div>
              </div>
            </div>
          </a>
        </li>
        <li>
          <a class="item-link smart-select smart-select-init" data-open-in="popup" data-searchbar="true"
            data-searchbar-placeholder="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>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Car</div>
              </div>
            </div>
          </a>
        </li>
        <li>
          <a class="item-link smart-select smart-select-init" data-open-in="sheet">
            <select name="mac-windows">
              <option value="mac" selected>Mac</option>
              <option value="windows">Windows</option>
            </select>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Mac or Windows</div>
              </div>
            </div>
          </a>
        </li>
        <li>
          <a class="item-link smart-select smart-select-init" data-open-in="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>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Super Hero</div>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>