Framework7-forms-smart-select

Framework7-スマートセレクト

説明

スマート選択は、チェックボックスとラジオ入力のグループを使用して、フォーム選択を動的ページに変更する簡単な方法です。

以下の表に指定されているように、さまざまなタイプでスマートセレクトを使用できます-

S.No	Type & Description
1	Smart Select Layout スマート選択レイアウトは、_smart-select_クラスを使用して、_select_要素内のリストビューを定義します。
2	Smart Select with Search Bar スマートセレクトは、_search bar_を使用して要素を検索し、_data-searchbar_クラスをtrueに設定することで有効にします。
3	Custom Page Title and Back Link Text _data-page-title_および_data-back-text_属性を使用して、スマートページのカスタムページタイトルとバックリンクを設定できます。
4	Open in Popup _popup_の_data-open-in_属性を使用して、スマートセレクトをポップアップとして開くことができます。
5	Open in Picker _data-open-in_属性を_picker_に設定することにより、スマート選択をピッカーモーダルとして表示できます。
6	Custom Icons, Colors and Images data-option-icon _、 data-option-color 、 data-option-image_属性をそれぞれ使用して、スマートセレクトでカスタムアイコン、色、または画像を定義できます。
7	Multiple Select and Optgroup スマートセレクトでは、_multiple_および_optgroup_属性を使用して、複数の選択およびグループオプションを使用できます。
8	Multiple Select and Maxlength スマート選択では、_maxlength_属性を使用して、限られた数のアイテムを選択できます。

以下の表にリストされているように、さまざまなシナリオで使用できるスマートセレクトのいくつかのタイプを持つことができます-

S.No	Type & Description	Attribute
1	Close Smart Select On User Select ユーザーがオプションを選択すると、スマートセレクトを閉じることができます。	data-back-on-select = "true"
2	Smart Select With Virtual List 多数のオプションがある場合、仮想リストはスマートセレクトで使用できます。	data-virtual-list = "true"
3	Smart Select Color Themes スマート選択ページでフォームとnavbarのカラーテーマを指定できます。 a	data-form-theme = "color" data-navbar-theme = "色"
4	Set Smart Select Value By Option Text オプション値を使用して、スマートセレクトの値を設定できます。	smart-select-value
5	Open Smart Select Using JavaScript JavaScriptメソッドを使用してスマートセレクトを開くことができます。 a	myApp.smartSelectOpen（smartSelect） smartSelect -指定されたスマートセレクトを開くために使用されるHTMLElementまたは文字列パラメーターです。
6	Adding Options Dynamically オプションが既に開かれている場合でも、スマートセレクトに動的にオプションを追加できます。 a	myApp.smartSelectAddOption（select、optionHTML、index） smartSelect -指定されたスマートセレクトを開くために使用されるHTMLElementまたは文字列パラメーターです。 * optionHTML -HTMLオプションを追加するために使用できる必須の文字列要素です。 * インデックス-新しいオプションのインデックス番号を指定します。