README

这是一个基于jQuery Spectrum插件的Craft CMS颜色选择器。

需求

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

安装

您可以通过Craft插件商店安装此插件。

概述

此插件添加以下字段类型

• LJ 颜色选择器

截图

快速开始

默认行为是显示一个迷你选择器，显示当前选定的颜色。例如

点击迷你选择器将显示完整界面。

或者，您可以使用flat: true将完整界面直接嵌入到页面中。

示例

将以下示例之一复制到上面的参数字段中。

简单示例

allowEmpty: true,
preferredFormat: "hex",
showButtons: false

显示输入

allowEmpty: true,
preferredFormat: "hex",
showButtons: false,
showInput: true

显示透明度

allowEmpty: true,
preferredFormat: "rgb",
showButtons: false,
showInput: true,
showAlpha: true

显示调色板

allowEmpty: true,
showButtons: false,
showPalette: true,
palette: [
    ['black', 'white', 'blanchedalmond'],
    ['rgb(255, 128, 0);', 'hsv 100 70 50', 'lightyellow']
]

仅显示调色板

showPaletteOnly: true,
showPalette:true,
palette: [
    ['black', 'white', 'blanchedalmond',
    'rgb(255, 128, 0);', 'hsv 100 70 50'],
    ['red', 'yellow', 'green', 'blue', 'violet']
]

Twig逻辑

{% set colors = ['black', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'] %}
{% set palette %}
	[
	{% for row in colors|batch(2) %}
		{{ loop.index > 1 ? ',' }}
	    [
        {% for color in row %}
        	{{ loop.index > 1 ? ',' }}
            '{{ color }}'
        {% endfor %}
	    ]
	{% endfor %}
	]
{% endset %}

showPaletteOnly: true,
showPalette:true,
palette: {{ palette }}

外部文件中的参数

(相对于/templates文件夹)

{% include '_colorPickerParams.json' ignore missing %}

更多示例

有关更多示例，请参阅原始的jQuery Spectrum插件。

此插件基于jQuery Spectrum插件，感谢原始开发者。

由Lewis Jenkins提供。