スマートセレクト

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

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

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

<div class="list">
  <ul>
    <!-- スマートセレクトアイテム -->
    <li>
      <!-- 追加の "smart-select "クラス -->
      <a href="#" class="item-link smart-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>
    <!-- 他のスマートセレクトやリストビュー要素 -->
    ...
  </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 テーマがアクティブな場合にのみ適用されます。
• data-option-icon-aurora - data-option-icon と同じですが、Aurora テーマがアクティブな場合にのみ適用されます。

例：

• <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 material-icons">home</i> のリストアイテムが生成されます。
  • <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>

複数選択とlt;optgroup>

を使って、複数のセレクトやグループオプションを使うこともできます。そこで、セレクトに multiple` 属性を追加すると、スマートセレクトページのラジオボタンが自動的にチェックボックスに変換されます。

<li>
  <a href="#" class="item-link smart-select">
    <!-- "multiple" attribute for multiple select-->
    <select name="car" multiple>
      <!-- optgroup" タグでグループ化されたオプション-->
      <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 -->
    <!-- 3つ以上のアイテムを選択することはできません。 -->
    <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>
  <!-- smart-select-initクラスの追加 -->
  <a href="#" class="item-link smart-select smart-select-init">
    <!-- セレクト -->
    <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');

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

<li>
  <!-- パラメータをケバケバのデータ属性で渡す -->
  <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 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 Variables

Below is the list of related CSS variables (CSS custom properties).

: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="list">
      <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>