UNPKG

@public-ui/components

Version:

Contains all web components that belong to KoliBri - The accessible HTML-Standard.

public-ui.github.io

public-ui/kolibri

91 lines (42 loc) • 3.33 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
# kol-modal <!-- Auto Generated Below --> > **[DEPRECATED]** Use `kol-dialog` instead. ## Overview The **Modal** component has been superseded by `kol-dialog`, which provides improved accessibility and conforms to the HTML dialog specification. It is still available in version 2 for backwards compatibility. ## Properties | Property | Attribute | Description | Type | Default | | --------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` | | `_on` | -- | Defines the modal callback functions. | `undefined \| ({ onCancel?: ((event: Event) => void) \| undefined; onClose?: (() => void) \| undefined; onToggle?: ((open: boolean) => void) \| undefined; })` | `undefined` | | `_variant` | `_variant` | Defines the variant of the modal. | `"blank" \| "card" \| undefined` | `'blank'` | | `_width` | `_width` | Defines the width of the modal. (max-width: 100%) | `string \| undefined` | `'100%'` | ## Methods ### `close() => Promise<void>` Closes the modal dialog. #### Returns Type: `Promise<void>` ### `closeModal() => Promise<void>` <span class="text-red-500">**[DEPRECATED]**</span> Use close() instead.<br/><br/>Closes the modal dialog. #### Returns Type: `Promise<void>` ### `openModal() => Promise<void>` <span style="color:red">**[DEPRECATED]**</span> Use showModal() instead.<br/><br/>Opens the modal dialog. #### Returns Type: `Promise<void>` ### `show(modal?: boolean) => Promise<void>` Opens the dialog. Pass true to open as a modal dialog. #### Parameters | Name | Type | Description | | ------- | --------- | ----------- | | `modal` | `boolean` | | #### Returns Type: `Promise<void>` ### `showModal() => Promise<void>` Opens the dialog as a modal. #### Returns Type: `Promise<void>` ## Slots | Slot | Description | | ---- | --------------------- | | | The modal's contents. | ----------------------------------------------