README

此控件扩展了control-react-colorful。

安装

要安装此软件包，请使用composer

composer require kirki-framework/control-color:dev-nightly

注意：如果您遇到软件包依赖项错误，请首先运行以下操作

composer require kirki-framework/control-react-colorful:dev-nightly

在Kirki v4.0发布之前，一些这些依赖项可能没有发布标签，因此在同时，上述内容将允许您安装和使用所有内容。 new \Kirki\Field\Color( [ 'settings' => 'my_control_setting_id', 'label' => esc_html__( 'My Color Control', 'textdomain' ), 'description' => esc_html__( 'A description here.', 'kirki' ), 'section' => 'my_section_id', 'default' => '#ff0000', 'choices' => [ 'alpha' => true, ], ] );

使用方法

此软件包包含控件本身以及通过composer依赖项系统安装的WordPress自定义器简化API。

使用简化API

new \Kirki\Field\Color(
	[
		'settings'    => 'my_control_setting_id',
		'label'       => esc_html__( 'My Color Control', 'textdomain' ),
		'description' => esc_html__( 'A description here.', 'kirki' ),
		'section'     => 'my_section_id',
		'default'     => '#ff0000',
		'choices'     => [
			'alpha' => true,
		],
	]
);

使用自定义器API

/**
 * Register customizer settings and controls.
 *
 * @param \WP_Customize_Manager $wp_customize The Customizer object.
 */
function my_customize_register_function( $wp_customize ) {

	// Add setting.
	$wp_customize->add_setting(
		'my_control_setting_id',
		[
			'type'              => 'theme_mod',
			'capability'        => 'edit_theme_options',
			'default'           => '#0000ff',
			'transport'         => 'refresh', // Or 'postMessage'.
			'sanitize_callback' => [ '\Kirki\Field\ReactColorful', 'sanitize' ],
		]
	);

	// Add control.
	$wp_customize->add_control(
		new \Kirki\Control\Color(
			$wp_customize,
			'my_control_setting_id',
			[
				'label'       => esc_html__( 'My Color Control', 'textdomain' ),
				'description' => esc_html__( 'A description here.', 'kirki' ),
				'section'     => 'my_section_id',
				'choices'     => [
					'alpha' => true,
				],
			]
		)
	);

	// Add more settings...

	// Add more controls...

}
add_action( 'customize_register', 'my_customize_register_function' );

参数

模式

您几乎不需要使用这个参数。目前可能的设置是'mode' => 'hue'，即将颜色选择器设置为仅使用色调模式。

选择

参数choices可以包含以下值

alpha (布尔值) — 如果定义了form_component，则将被忽略
save_as (布尔值) — 如果定义了form_component，则将被忽略
trigger_style (字符串)
button_text (字符串) — 只有当trigger_style值为button时才应用
form_component (字符串) — 有关更多详细信息，请参阅form_component选择

选择

alpha (布尔值)

默认值被视为false。如果您想显示alpha通道，则在choices参数中使用'alpha' => 'true'。例如

'choices' => [
	'alpha' => true
]

如果您在choices参数中定义了form_component，则此alpha选择将被忽略。

save_as (字符串)

从v4版本开始，这是一个新的选择。接受 'string'（默认）或 'array'。如果您想将值保存为数组，可以使用 'save_as' => 'array'。

用法示例

'choices' => [
	'save_as' => 'array'
]

结果示例

[
	'r' => 255,
	'g' => 255,
	'b' => 50,
	'a' => '0.7'
]

如果在 choices 参数内部定义了 form_component，则将忽略 save_as 选择。

trigger_style（字符串）

trigger_style 选择的默认值是 input。如果您想使用按钮作为触发器，请将 trigger_style 选择设置为 button。用法示例

'choices' => [
	'trigger_type' => 'button'
]

button_text（字符串）

只有当 trigger_syle 的值为 button 时，才会实现 button_text 选择。
用法示例

'choices' => [
	'trigger_type' => 'button',
	'button_text'  => 'Select Color'
]

form_component

您可以通过控制中的 choices 参数向 react-colorful 组件传递参数。这里唯一的必需参数是 form_component。

在 form_component 参数中，您可以使用以下之一定义您想要的控件类型

HexColorPicker
RgbColorPicker
RgbStringColorPicker
RgbaColorPicker
RgbaStringColorPicker
HslColorPicker
HslStringColorPicker
HslaColorPicker
HslaStringColorPicker
HsvColorPicker
HsvStringColorPicker
HsvaColorPicker
HsvaStringColorPicker

它们的值将保存为数据库中的数组或字符串（取决于 form_component 的值）。有关您可以使用哪些参数的详细信息，请参阅 react-colorful 文档。

开发

如果您想修改此控件，可以编辑 src 文件夹中的 JS 文件。

如果您尚未安装包，则运行 npm install
编辑完成后，运行 npm run build

许可

MIT 许可证

kirki-framework / control-color

维护者

详细信息