Skip to content

Commit ea61a30

Browse files
mdomdo
authored
Merge pull request #42826 from twbs/docs/invoker-commands-dialog-drawer
Document Invoker Commands for Dialog and Drawer
2 parents 6bfd670 + 973ad08 commit ea61a30

3 files changed

Lines changed: 49 additions & 1 deletion

File tree

‎site/src/content/docs/components/dialog.mdx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,31 @@ Toggle a dialog by clicking the button below. The dialog uses the native `showMo
4545
</div>
4646
</dialog>`} />
4747

48+
## Without JavaScript
49+
50+
Supported browsers can open and close a dialog with the [Invoker Commands API](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API)—no Bootstrap JavaScript required. Set `commandfor` to the dialog’s `id`, use `command="show-modal"` to open, and `command="close"` to dismiss.
51+
52+
<Callout type="warning">
53+
The Invoker Commands API is not supported in all browsers. For guaranteed support, use the `data-bs-toggle` examples above when you need our plugin options, events, or animated close.
54+
</Callout>
55+
56+
<Example code={`<button type="button" class="btn-solid theme-primary" commandfor="invokerDialog" command="show-modal">
57+
Open dialog
58+
</button>
59+
60+
<dialog class="dialog" id="invokerDialog">
61+
<div class="dialog-header">
62+
<h1 class="dialog-title">Invoker Commands</h1>
63+
<button type="button" class="btn-close" commandfor="invokerDialog" command="close" aria-label="Close"></button>
64+
</div>
65+
<div class="dialog-body">
66+
<p>This dialog opens with <code>command="show-modal"</code> and closes with <code>command="close"</code>. No Bootstrap JavaScript is involved.</p>
67+
</div>
68+
<div class="dialog-footer">
69+
<button type="button" class="btn-solid theme-secondary" commandfor="invokerDialog" command="close">Close</button>
70+
</div>
71+
</dialog>`} />
72+
4873
## Dark dialog
4974

5075
To make a dialog dark, add `data-bs-theme="dark"` to the `<dialog>` element.

‎site/src/content/docs/components/drawer.mdx‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,28 @@ Use the buttons below to show and hide a drawer element via JavaScript. You can
7272
</div>
7373
</dialog>`} />
7474

75+
### Without JavaScript
76+
77+
Supported browsers can open and close a drawer with the [Invoker Commands API](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API)—no Bootstrap JavaScript required. Set `commandfor` to the drawer’s `id`, use `command="show-modal"` to open, and `command="close"` to dismiss.
78+
79+
<Callout type="warning">
80+
The Invoker Commands API is not supported in all browsers. For guaranteed support, use the `data-bs-toggle` examples above when you need our plugin options, events, swipe to dismiss, or animated close.
81+
</Callout>
82+
83+
<Example code={`<button type="button" class="btn-solid theme-primary" commandfor="invokerDrawer" command="show-modal">
84+
Open drawer
85+
</button>
86+
87+
<dialog class="drawer drawer-start" tabindex="-1" id="invokerDrawer" aria-labelledby="invokerDrawerLabel">
88+
<div class="drawer-header">
89+
<h5 class="drawer-title" id="invokerDrawerLabel">Invoker Commands</h5>
90+
<button type="button" class="btn-close" commandfor="invokerDrawer" command="close" aria-label="Close"></button>
91+
</div>
92+
<div class="drawer-body">
93+
<p>This drawer opens with <code>command="show-modal"</code> and closes with <code>command="close"</code>. No Bootstrap JavaScript is involved.</p>
94+
</div>
95+
</dialog>`} />
96+
7597
### Body scrolling
7698

7799
Scrolling the `<body>` element is disabled when a drawer and its backdrop are visible. Use the `data-bs-scroll` attribute to enable `<body>` scrolling.
@@ -88,7 +110,7 @@ Scrolling the `<body>` element is disabled when a drawer and its backdrop are vi
88110
</div>
89111
</dialog>`} />
90112

91-
### Body scrolling and backdrop
113+
### Body scrolling & backdrop
92114

93115
You can also enable `<body>` scrolling with a visible backdrop.
94116

‎site/src/content/docs/getting-started/browsers-devices.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ These features sit above our floors, so v6 cannot use them without a fallback. F
9494
| --- | --- |
9595
| Relative color syntax, `rgb(from …)` | Chrome 131, Firefox 133 |
9696
| View transitions | Firefox 144 |
97+
| Invoker Commands API (`command` / `commandfor`) | Chrome 135, Firefox 144, Safari 26.2 |
9798
| `@scope` | Firefox 146 |
9899
| Anchor positioning | Firefox 147, Safari 26 |
99100
| Style container queries | Firefox 151 |

0 commit comments

Comments
 (0)