color フィールド

カラーコードを選択する入力欄を作成します。

このフィールドは、 Broccoli v0.3.16 で追加されました。

モジュール実装例

{
    "interface": {
        "fields": {
            "colorfieldsample": {
                "fieldType": "input",
                "type": "color",
                "label": "色を選択"
            }
        }
    }
}

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

<!-- template.html.twig の実装例 -->
<div style="color:{{ colorfieldsample }};">
    <p>文字色を指定された段落</p>
</div>

旧Broccoli標準記法での実装例

<!-- template.html の実装例 -->
<div style="color:{&{"input":{
    "type": "color",
    "name": "colorfieldsample",
    "label": "色を選択"
}}&}">
    <p>文字色を指定された段落</p>
</div>

データ型

選択されたカラーコードが格納されます。

{
    "src": "#ffffff"
}

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

バリデーション

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