select フィールド

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

モジュール実装例

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

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

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

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

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

display に radio を設定すると、ラジオボタンの形式に変更することができます。省略時は 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>

データ型

{
    "src": "選択されたオプションの value 値"
}

このデータ型は Broccoli v0.4.0 で、 現在の {"src": src} に変更されました。 Broccoli v0.3 系までは、文字列型のデータを直接格納していました。

バリデーション

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

多言語対応

select フィールドでは、 language.csv に定義を追加することで、オプションのラベルを多言語に対応することができます。

キー(一番左の列)の一覧は次の通りです。

• fields.{$fieldname}:options.{$index}.label: {$index} 番目のオプションのラベルを表します。
• subModule.{$fieldname}.{submodname:label}:options.{$index}.label: サブモジュールの場合の例です。{$index} 番目のオプションのラベルを表します。

{$index} は 0 から数えます。