UNPKG

@alaskaairux/auro-interruption

Version:

Auro custom auro-interruption element

github.com/AlaskaAirlines/auro-interruption

AlaskaAirlines/auro-interruption

92 lines (69 loc) • 5.13 kB
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
# auro-dialog ## Attributes | Attribute | Type | Description | |-----------|-----------|--------------------------------------------------| | `fixed` | `Boolean` | Uses fixed pixel values for element shape | | `md` | `Boolean` | Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile. | | `onDark` | `Boolean` | Sets close icon to white for dark backgrounds | | `sm` | `Boolean` | Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile. | ## Properties | Property | Attribute | Type | Default | Description | |------------------|---------------|---------------|---------|--------------------------------------------------| | `modal` | `modal` | `Boolean` | false | Modal dialog restricts the user to take an action (no default close actions) | | `open` | `open` | `Boolean` | | Sets state of dialog to open | | `triggerElement` | | `HTMLElement` | | The element to focus when the dialog is closed. If not set, defaults to the value of document.activeElement when the dialog is opened. | | `unformatted` | `unformatted` | `Boolean` | false | Unformatted dialog window, edge-to-edge fill for content | ## Events | Event | Description | |----------|----------------------------------------| | `toggle` | Event fires when the element is closed | ## Slots | Name | Description | |-----------|--------------------------------------------| | `content` | Injects content into the body of the modal | | `footer` | Used for action options, e.g. buttons | | `header` | Text to display as the header of the modal | ## CSS Shadow Parts | Part | Description | |------------------|--------------------------------------------------| | `close-button` | adjust position of the close X icon in the dialog window | | `dialog` | apply CSS to the entire dialog | | `dialog-content` | apply CSS to the content of the dialog | | `dialog-footer` | apply CSS to the footer of the dialog | | `dialog-header` | apply CSS to the header of the dialog | | `dialog-overlay` | apply CSS on the overlay of the dialog | # auro-drawer ## Attributes | Attribute | Type | Description | |-----------|-----------|--------------------------------------------------| | `fixed` | `Boolean` | Uses fixed pixel values for element shape | | `left` | `Boolean` | Sets dialog box to open from the left | | `md` | `Boolean` | Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile. | | `onDark` | `Boolean` | Sets close icon to white for dark backgrounds | | `sm` | `Boolean` | Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile. | ## Properties | Property | Attribute | Type | Default | Description | |------------------|---------------|---------------|---------|--------------------------------------------------| | `modal` | `modal` | `Boolean` | false | Modal dialog restricts the user to take an action (no default close actions) | | `open` | `open` | `Boolean` | | Sets state of dialog to open | | `triggerElement` | | `HTMLElement` | | The element to focus when the dialog is closed. If not set, defaults to the value of document.activeElement when the dialog is opened. | | `unformatted` | `unformatted` | `Boolean` | false | Unformatted dialog window, edge-to-edge fill for content | ## Events | Event | Description | |----------|----------------------------------------| | `toggle` | Event fires when the element is closed | ## Slots | Name | Description | |-----------|--------------------------------------------| | `content` | Injects content into the body of the modal | | `footer` | Used for action options, e.g. buttons | | `header` | Text to display as the header of the modal | ## CSS Shadow Parts | Part | Description | |------------------|--------------------------------------------------| | `close-button` | adjust position of the close X icon in the dialog window | | `dialog` | apply CSS to the entire dialog | | `dialog-content` | apply CSS to the content of the dialog | | `dialog-footer` | apply CSS to the footer of the dialog | | `dialog-header` | apply CSS to the header of the dialog | | `dialog-overlay` | apply CSS on the overlay of the dialog |