Pickles 2

select フィールド

selectフィールドは、選択式の入力欄を作成します。

モジュール実装例

select フィールドには、特別な設定値 options が定義されています。 options には、プロパティに valuelabel を持ったオブジェクトを配列に格納して設定します。

{
    "interface": {
        "fields": {
            "selectfieldsample": {
                "fieldType": "input",
                "type":"select",
                "label":"テキスト寄せ",
                "display":"select",
                "options":[
                    {"value":"left", "label":"左寄せ"},
                    {"value":"center", "label":"中央寄せ"},
                    {"value":"right", "label":"右寄せ"}
                ]
            }
        }
    }
}

テンプレートの実装例は次のようになります。

この例は、CSSの text-align プロパティの値を、 leftcenterright の中から選ぶ使い方を想定したものです。

<!-- template.html.twig の実装例 -->
<div style="text-align:{{ selectfieldsample }};">inner html.</div>

displayradio を設定すると、ラジオボタンの形式に変更することができます。省略時は select になります。

旧Broccoli標準記法での実装例

<!-- 実装例 -->
<div style="text-align:{&{"input":{
    "type":"select",
    "name":"selectfieldsample",
    "label":"テキスト寄せ",
    "display":"select",
    "options":[
        {"value":"left", "label":"左寄せ"},
        {"value":"center", "label":"中央寄せ"},
        {"value":"right", "label":"右寄せ"}
    ]
}}&};">inner html.</div>

データ型

"選択されたオプションの value 値"

バリデーション

validatorjs が定義するバリデーションルールが設定できます。