Details
Synonyms: Disclosure, Collapse, Summary Detail
With the help of the Detail component, further information can initially be displayed with a short introductory text, which is only available after clicking can be expanded by the user to a full-size arrow icon.
By default, the Detail component appears as a single-line layout element consisting of an arrow icon and a subsequent, short introductory text is formed. The actual content of the component is only opened downwards after clicking on the header area. The arrow icon changes its orientation from right to bottom. In the same way, the component can also be closed again and the contents can be hidden.
Construction
Code
<kol-details _label="Nach Laden der Seite geschlossen">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
</kol-details>
Example
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
Usage
Show Open
Use the _open attribute to represent the component open.
Introductory text
Use the _label attribute to define the text to display as a heading.
Best practices
- Use the Detail component to arrange supplementary content on a main topic to save space.
- The Detail component is well suited for realizing an FAQ page, where the question can be output via the
_labelattribute and the answer in the content area. - Avoid displaying important information, such as legal aspects, in a hidden area. There is no guarantee that the user will read this information safely.
- Avoid using too many Detail components, as the clarity of the page may suffer.
Use cases
Details component within a body of text
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
Accessibility
- The Details component is ideal for implementing context-sensitive help for accessibility.
Keyboard controls
| button | Function |
|---|---|
Tab | Focuses the Details component. |
Enter | Opens or closes the contents of the component. |
Links and references
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
kolFocus
kolFocus() => Promise<void>
Sets focus on the internal element.
Returns
Type: Promise<void>
Slots
| Slot | Description |
|---|---|
| Der Inhalt, der in der Detailbeschreibung angezeigt wird. |