x
1
2
3
4
5
6
7
8
9
<button type="button" class="btn" commandfor="sheet" command="show-modal">Open sheet</button><dialog id="sheet" class="sheet sheet--right" data-controller="dialog" data-action="click->dialog#closeOnClickOutside" aria-labelledby="sheet_label" aria-describedby="sheet_desc"> <div class="sheet__content"> <h3 class="font-medium leading-none mbe-1" id="sheet_label">No Close Button</h3> <p class="text-sm text-subtle" id="sheet_desc"> This sheet doesn't have a close button in the top-right corner. Click outside to close. </p> </div></dialog>1
2
3
4
5
6
7
8
9
10
<button type="button" class="btn" commandfor="sheet" command="show-modal">Open sheet</button><dialog id="sheet" class="sheet sheet--right" data-controller="dialog" data-action="click->dialog#closeOnClickOutside" aria-labelledby="sheet_label" aria-describedby="sheet_desc"> <div class="sheet__content"> <h3 class="font-medium leading-none mbe-1" id="sheet_label">No Close Button</h3> <p class="text-sm text-subtle" id="sheet_desc"> This sheet doesn't have a close button in the top-right corner. Click outside to close. </p> </div></dialog>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
.sheet { background-color: var(--color-surface); block-size: var(--size-full); border-inline-width: var(--sheet-border); box-shadow: var(--shadow-lg); color: var(--color-text); inline-size: var(--sheet-size, var(--size-3-4)); margin-inline: var(--sheet-margin-inline); max-block-size: none; &::backdrop { backdrop-filter: var(--blur-xs); } /* Setup transition */ transition-behavior: allow-discrete; transition-duration: var(--time-200); transition-property: display, overlay, opacity, transform; transition-timing-function: var(--ease-out-3); &::backdrop { transition-behavior: allow-discrete; transition-duration: var(--time-150); transition-property: display, overlay, opacity; transition-timing-function: var(--ease-out-3); } /* Exit stage to */ & { opacity: 0; transform: var(--sheet-transform); } &::backdrop { opacity: 0; } /* On stage */ &[open] { opacity: 1; transform: translateX(0); } &[open]::backdrop { opacity: 1; } /* Enter stage from */ @starting-style { &[open] { opacity: 0; transform: var(--sheet-transform); } &[open]::backdrop { opacity: 0; } } @supports (-webkit-hyphens: none) { transition-behavior: normal; } @media (width >= 40rem) { max-inline-size: var(--sheet-size, var(--max-i-sm)); }}.sheet--left { --sheet-border: 0 1px; --sheet-margin-inline: 0 auto; --sheet-transform: translateX(-2.5rem);}.sheet--right { --sheet-border: 1px 0; --sheet-margin-inline: auto 0; --sheet-transform: translateX(2.5rem);}.sheet__content { block-size: inherit; padding: var(--size-4);}.sheet__close { inset-block-start: var(--size-3); inset-inline-end: var(--size-3); position: absolute;}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { Controller } from "@hotwired/stimulus"export default class extends Controller { show() { this.element.show() } showModal() { this.element.showModal() } close() { this.element.close() } closeOnClickOutside({ target }) { target.nodeName === "DIALOG" && this.close() }}No notes provided.