README

使用灵活性和控制创建自定义颜色调色板。

为 Craft CMS 4+ 开发的颜色样本插件

Color Swatches 不是提供完整的颜色选择器，而是一个可配置的字段类型，允许管理员为用户提供一组颜色供选择。这允许您创建具有现成类名的品牌颜色调色板。

要求

此插件需要 Craft CMS 4.0.0 或更高版本。

安装

要安装插件，请按照以下说明操作。

打开您的终端并转到您的 Craft 项目
```
 cd /path/to/project
```

然后告诉 Composer 加载插件

 composer require percipiolondon/craft-colour-swatches

在控制面板中，转到设置 → 插件，并点击颜色样本的“安装”按钮。

配置颜色样本

使用字段设置

创建颜色样本字段，并提供标签和十六进制值选项。通过逗号分隔可以设置多个颜色。

使用字段设置时使用颜色样本

您可以在模板中访问标签和颜色。默认情况下，标签将显示

    {{ fieldName }}
    {{ fieldName.label }}
    {{ fieldName.color }}

    {% for color in fieldName.color %}
        {{ color.color }}
    {% endfor %}

如果您想对颜色调色板有更细致的控制，请使用下面的配置文件选项。

使用配置文件

您可以使用 config/colour-swatches.php 配置文件来预定义可能的颜色，定义不同的调色板，并为颜色添加标签、类名或其他属性。

请参阅此存储库中的配置文件示例。

return [

    // Custom  palettes, fixed options [label, default (boolean), colour (array(colour, customOptions)) ]
    'palettes' => [
        'Tailwind' => [  // custom label (required)
            [
                'label'   => 'Red', // custom label (required)
                'default' => true,  // default could be true/false (option is required)
                'color'   =>  [
                    [
                        'color'             => '#ef4444',               // the colour shown in the fieldtype (required)
                        'background'        => 'bg-red-500',            // optional / custom attribute
                        'backgroundHover'   => 'hover:bg-red-700',      // optional / custom attribute
                        'text'              => 'text-white',            // optional / custom attribute
                        'textHover'         => 'hover:text-zinc-200'    // optional / custom attribute
                    ]
                ]
            ],
            [
                'label'   => 'Amber',
                'default' => false,
                'color'   =>  [
                    [
                        'color'             => '#f59e0b',               
                        'background'        => 'bg-amber-500',
                        'backgroundHover'   => 'hover:bg-amber-700',
                        'text'              => 'text-white',
                        'textHover'         => 'hover:text-zinc-200'
                    ]
                ]
            ],
            [
                'label'   => 'Green',
                'default' => false,
                'color'   =>  [
                    [
                        'color'             => '#22c55e',              
                        'background'        => 'bg-green-500',
                        'backgroundHover'   => 'hover:bg-green-700',
                        'text'              => 'text-white',
                        'textHover'         => 'hover:text-zinc-200'
                    ]
                ]
            ],
            [
                'label'   => 'Blue',
                'default' => false,
                'color'   =>  [
                    [
                        'color'             => '#3b82f6',              
                        'background'        => 'bg-blue-500',
                        'backgroundHover'   => 'hover:bg-blue-700',
                        'text'              => 'text-white',
                        'textHover'         => 'hover:text-zinc-200'
                    ]
                ]
            ],
            [
                'label'   => 'Purple',
                'default' => false,
                'color'   =>  [
                    [
                        'color'             => '#a855f7',              
                        'background'        => 'bg-purple-500',
                        'backgroundHover'   => 'hover:bg-purple-700',
                        'text'              => 'text-white',
                        'textHover'         => 'hover:text-zinc-200'
                    ]
                ]
            ],
            [
                'label'   => 'Yellow/Emerald',
                'default' => false,
                'color'   =>  [
                    [
                        'color'             => '#eab308',              
                        'background'        => 'bg-yellow-500',
                        'backgroundHover'   => 'hover:bg-yellow-700',
                        'text'              => 'text-white',
                        'textHover'         => 'hover:text-zinc-200'
                    ],
                    [
                        'color'             => '#059669',               
                        'background'        => 'bg-emerald-600',
                        'backgroundHover'   => 'hover:bg-emerald-800',
                        'text'              => 'text-white',
                        'textHover'         => 'hover:text-zinc-200'
                    ]
                ]
            ],
            [
                'label'   => 'Red/Amber',
                'default' => false,
                'color'   =>  [
                    [
                        'color'             => '#a855f7',              
                        'background'        => 'bg-red-500',
                        'backgroundHover'   => 'hover:bg-red-700',
                        'text'              => 'text-white',
                        'textHover'         => 'hover:text-zinc-200'
                    ],
                    [
                        'color'             => '#f59e0b',               
                        'background'        => 'bg-amber-500',
                        'backgroundHover'   => 'hover:bg-amber-700',
                        'text'              => 'text-white',
                        'textHover'         => 'hover:text-zinc-200'
                    ]
                ]
            ],
            [
                'label'   => 'Sky/Rose',
                'default' => false,
                'color'   =>  [
                    [
                        'color'             => '#0ea5e9',               
                        'background'        => 'bg-sky-500',
                        'backgroundHover'   => 'hover:bg-sky-700',
                        'text'              => 'text-white',
                        'textHover'         => 'hover:text-zinc-200'
                    ],
                    [
                        'color'             => '#e11d48',               
                        'background'        => 'bg-rose-600',
                        'backgroundHover'   => 'hover:bg-rose-800',
                        'text'              => 'text-white',
                        'textHover'         => 'hover:text-zinc-200'
                    ]
                ]
            ],
        ]
    ]

];

然后您可以在字段设置中选择使用预定义的颜色。

修改配置文件

如果您使用颜色样本有条目，并且修改了配置文件，您需要重新保存条目，以便从配置文件中提取新信息到条目数据中。

您可以在命令行中运行 Crafts ./craft resave/entries，您的条目将根据您的 colour-swatches.php 配置文件中的任何更改进行更新。颜色样本使用 label 值来映射条目中的更改，因此请确保您的标签值是唯一的/非空的。

使用颜色样本

您可以在模板中访问标签和颜色。默认情况下，标签将显示

    {{ fieldName }}
    {{ fieldName.label }}
    {{ fieldName.color }}
    {{ fieldName.customAttribute }}

如果您使用多个颜色，您需要遍历您的颜色数组

    {% for field in fieldName.color %}
        {{ field.color }}
        {{ field.customAttribute }}
    {% endfor %}

GraphQL

颜色样本带有 GraphQL 支持，您可以根据以下方式构建查询

fieldName {
        label
        class
        color
      }

如果您使用配置文件，这将给出以下结果

"fieldName": {
          "label": "Black/White",
          "class": "",
          "color": [
            "{\"color\":\"#000000\",\"background\":\"bg-black\"}",
            "{\"color\":\"#ffffff\",\"text\":\"text-white\"}"
          ]
        },

或者，如果您通过设置添加了单个值，您将看到

"fieldName": {
          "label": "Black",
          "class": "",
          "color": [
            "#000000"
          ]
        },

由 Percipio 提供

percipioglobal / craft-colour-swatches

维护者

详细信息