threadi/react-dialog

为WordPress前端提供简单的由React驱动的对话框。

维护者

详细信息

github.com/threadi/react-dialog

源代码

问题

安装次数: 14

依赖关系: 0

建议者: 0

安全: 0

星标: 0

关注者: 1

分支: 0

开放问题: 0

语言:JavaScript

1.0.2 2024-08-16 16:00 UTC

GPL-3.0-or-later f108153ff8ac11acb44820a4d4cb5fd980ca6487

  • Thomas Zwirner <info.woop@thomaszwirner.de>

This package is auto-updated.

Last update: 2024-09-16 16:13:54 UTC

README

需求

  • 使用composer安装此包。
  • 使用npm编译脚本。
  • 使用WordPress插件、主题或代码片段插件将它们嵌入到您的项目中。

安装

  1. composer require threadi/react-dialog
  2. 切换到 vendor/thread/react-dialog
  3. 运行 npm i 安装依赖项。
  4. 运行 npm run build 编译脚本。
  5. 将 doc/embed.php 中的代码添加到您的WordPress项目中（插件或主题）。

配置

每个对话框都使用以下选项作为数组进行配置

  • className
    • 字符串，指定对话框应成为以设置单独的样式
  • title
    • 表示标题的单个文本
  • hide_title
    • 将值设置为 true 以隐藏标题
  • texts
    • 对话框的文本数组
    • 每个条目包含单个字符串
  • buttons
    • 对话框的按钮数组
    • 每个条目是一个包含以下设置的数组
      • action
        • 点击时运行的JavaScript字符串
      • variant
        • 定义按钮样式的字符串
        • 可能值
          • primary
          • secondary
        • 此设置是可选的
      • text
        • 按钮文本的字符串

用法

PHP

$dialog = array(
	'title' => 'My title',
	'texts' => array(
		'<p>My text</p>'
	),
	'buttons' => array(
		array(
			'action' => 'alert("ok");',
			'variant' => 'primary',
			'text' => 'Click here'
		),
	)
);
echo '<a href="#" class="react-dialog" data-dialog="'.esc_attr(wp_json_encode($dialog)).'">Some link</a>';

JavaScript

let dialog = array(
	'title' => 'My title',
	'texts' => array(
		'<p>My text</p>'
	),
	'buttons' => array(
		array(
			'action' => 'alert("ok");',
			'variant' => 'primary',
			'text' => 'Click here'
		),
	)
);
document.body.dispatchEvent(new CustomEvent("react-dialog", config));

自定义样式

您可以使用自定义CSS自定义对话框的输出。

例如。

body.react-dialog-on-body.wp-core-ui .components-modal__frame.react-dialog {
 background-color: red;
}

常见问题解答

是否可以在一个屏幕上创建多个对话框？

不行，这不可能。

如何在点击对话框按钮后打开新的对话框？

调用您的自己的函数作为按钮的回调。

示例

'action' => 'open_new_dialog()',

function open_new_dialog() {
 /* define your new dialog */
}