Fylgja - AlpineJS 对话框
将Alpine.js的力量和简洁带入本地的 HTML <dialog> 键.
现场德莫: https://alpinejs-dialog.netlify.app/ (中文(简体) )
安装
您可以使用此插件, 要么使用国家防范机制安装, 要么从CDN 中包含 .
国家预防机制
你可以从国家防范机制安装,并将其纳入你的捆绑:
npm install @fylgja/alpinejs-dialog
import Alpine from 'alpinejs';
import dialog from '@fylgja/alpinejs-dialog';
window.Alpine = Alpine;
Alpine.plugin(dialog);
Alpine.start();
维娅 CDN
您可以将此插件的 CDN 版本包含为 <script> 标签,
一定要在阿尔平杰斯之前列入.
<script defer src="https://unpkg.com/@fylgja/alpinejs-dialog/dist/index.min.js"></script>
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
使用量
利用 x-htmldialog 插件,将指令添加到 HTML <dialog> 也由 x-show。 。 。 .
<div x-data="{ open: false }">
<button @click="open = !open">Open</button>
<dialog x-show="open" x-htmldialog="open = false">..</dialog>
</div>
当 x-htmldialog 指令存在于 x-show 元素 :
- 它能防止
x-show从直接显示样式. - 相反,它使用当地人
el.showModal()函数以显示对话框. - 提供给
x-htmldialog(例如,"open = false"已执行 当对话框关闭时,按下 Escape 键或单击对话框(背景)外.
修改器
这个 x-htmldialog 指令支持修饰者进一步自定义其行为.
noscroll
这个 noscroll 修改器在对话框打开时防止在背景页面上滚动 .
<div x-data="{ open: false }">
<button @click="open = !open">Open</button>
<dialog x-show="open" x-htmldialog.noscroll="open = false">..</dialog>
</div>
closeby
这个 closeby 选项可以让您对对话框如何解析进行精细控制。 插件为尚未在本地支持它的浏览器填充此行为 .
您可以以两种方式设置此选项:
1. 构成国际法的属性 <dialog> 元素 :
<dialog closeby="any" ...>
2. 作为修改案文 x-htmldialog 指令 :
<dialog x-htmldialog.closeby.any ...>
可用选项
any:对话框可以通过任何用户动作关闭,例如按下ESC键或点击背景.closerequest: (默认) 对话框可以通过ESC键或“近端请求”(例如,提交表与method="dialog") (中文(简体) ). 点击背景不会关闭.none:用户无法关闭对话框 。 它必须在方案上关闭.
modeless
这个 modeless 修改器打开对话框作为非模式对话框,使用 el.show() 改为 el.showModal()。这意味着它不会阻断与页面其余部分的互动,也不会造成背景.
<dialog x-htmldialog.modeless ...>