Skip to main content

blocs/blocs: 入力インターフェース(ai-* クラス)

blocs/blocs: 入力インターフェース(ai-* クラス)

入力フォームに ai-* クラスを指定すると、機能が自動的に拡張されます。

ai-* クラス一覧

クラス 役割
ai-datepicker 日付選択用カレンダー入力
ai-timepicker 日付と時間の入力
ai-phone 電話番号の自動区切り
ai-select2 検索機能付きプルダウンメニュー
ai-upload ファイルアップロード入力

サンプルコード

<input type="text" id="date" name="date" class="form-control ai-datepicker">
<input type="text" id="date_time" name="date_time" class="form-control ai-timepicker">
<input type="text" id="phone" name="phone" class="form-control ai-phone">

独自の ai-* クラスの作成

resources/views/admin/autoinclude に、ai-* クラス名に対応した .html テンプレートを追加します(ai-datepickerdatepicker.html)。テンプレート内では data-bloc を使わず、内容がそのまま挿入される形式にします。

QA

検索できるプルダウンを作成したい

ai-select2 クラスを使用します。addOption で選択肢を動的に追加することも可能です。

複数選択できるプルダウンを作成したい

ai-select2 クラスに multiple 属性を追加し、namepulldown[] のように記述します。