UNPKG

@public-ui/components

Version:

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

public-ui.github.io

public-ui/kolibri

56 lines (27 loc) • 3.54 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
# kol-accordion <!-- Auto Generated Below --> ## Overview The **Accordion** component is a collapsible menu. Clicking the header area — consisting of an icon and a heading — expands the content to reveal additional information. It is an interactive navigation element designed to present extensive content in a space-saving manner. Accordions are used whenever content associated with a thematic heading needs to be shown or hidden. They allow more detailed information for a heading than would normally be practical, leaving it to the users to decide whether to view that information. ## 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` | -- | Gibt die EventCallback-Funktionen an. | `undefined \| { onClick?: EventValueOrEventCallback<MouseEvent, boolean> \| 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 trigger button of the first section. #### Returns Type: `Promise<void>` ### `focus() => Promise<void>` Sets focus on the internal element. #### Returns Type: `Promise<void>` ## Slots | Slot | Description | | ---- | ---------------------------------------------------------------------------- | | | Allows arbitrary HTML to be inserted into the content area of the accordion. | ----------------------------------------------