Skip to content

Commit 0daa852

Browse files
committed
IMP: docs
1 parent 7adf8e2 commit 0daa852

File tree

1 file changed

+15
-15
lines changed

1 file changed

+15
-15
lines changed

README.md

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -73,25 +73,25 @@ The `noscroll` modifier prevents scrolling on the background page while the dial
7373
</div>
7474
```
7575

76-
#### `closeby`
76+
### `closeby`
7777

78-
The `closeby` modifier allows you to control which events trigger the close action
79-
defined in the `x-htmldialog` value (backdrop click and/or Escape key press).
78+
The `closeby` option gives you fine-grained control over how the dialog can be dismissed. The plugin polyfills this behavior for browsers that do not yet support it natively.
8079

81-
This mimics the upcoming native `closeby` behavior of the `<dialog>` element.
80+
You can set this option in two ways:
8281

83-
Available options for the `closeby` modifier:
84-
85-
- `.auto` (Same as `.closerequest`). Only triggers the close action on the Escape key press.
86-
- `.none` Disables all automatic close triggers (backdrop click and Escape key).
87-
- `.closerequest` Only triggers the close action on the Escape key press.
88-
- `.any` (Default behavior if no `closeby` modifier is present).
89-
Triggers the close action on both backdrop clicks and Escape key presses.
90-
91-
Example, for disable all automatic closing:
82+
**1. As an attribute on the `<dialog>` element:**
83+
```html
84+
<dialog closeby="any" ...>
85+
```
9286

87+
**2. As a modifier on the `x-htmldialog` directive:**
9388
```html
94-
<dialog x-show="open" x-htmldialog.closeby.none="open = false">...</dialog>
89+
<dialog x-htmldialog.closeby.any ...>
9590
```
9691

97-
This way you can keep the close trigger for form submissions and prevent any other close triggers.
92+
#### Available Options
93+
94+
* **`any`**: The dialog can be closed by any user action, such as pressing the `ESC` key or clicking on the backdrop.
95+
* **`closerequest`**: (Default) The dialog can be dismissed via the `ESC` key or a "close request" (e.g., a form submission with `method="dialog"`). It will not close when the backdrop is clicked.
96+
* **`none`**: The user cannot close the dialog. It must be closed programmatically.
97+

0 commit comments

Comments
 (0)