UNPKG

@public-ui/components

Version:

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

public-ui.github.io

public-ui/kolibri

60 lines (31 loc) • 2.94 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
# kol-details <!-- Auto Generated Below --> ## Overview The **Details** component allows additional information to be initially shown with a short introductory text, which is only fully expanded after the user clicks on an arrow icon. By default, the **Details** component is displayed as a single-line layout element consisting of an arrow icon followed by a short introductory text. The actual content is revealed below after clicking the header area. The arrow icon changes its orientation from **_right_** to **_down_**. The component can also be closed again to hide the content. ## Properties | Property | Attribute | Description | Type | Default | | --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | ----------- | | `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \| undefined` | `false` | | `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` | | `_level` | `_level` | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| undefined` | `0` | | `_on` | -- | Defines the callback functions for details. | `undefined \| { onToggle?: EventValueOrEventCallback<MouseEvent, boolean> \| undefined; }` | `undefined` | | `_open` | `_open` | Opens/expands the element when truthy, closes/collapses when falsy. | `boolean \| undefined` | `false` | ## Methods ### `click() => Promise<void>` Triggers a click on the summary/toggle button. #### Returns Type: `Promise<void>` ### `focus() => Promise<void>` Sets focus on the internal element. #### Returns Type: `Promise<void>` ## Slots | Slot | Description | | ---- | ------------------------------------------------ | | | The content displayed in the detail description. | ----------------------------------------------