Skip to content

Commit 171213d

Browse files
laske185laske185
authored
Update component events documentation (#269)
The A11y and PO reviews will only take place after all other DoD steps have been completed by the Developer: - [x] Meaningful pull request title for the release notes - [x] Pull request is linked to an issue and all changes relate to the issue - [x] Tests to protect this code implemented (if applicable) - [x] Manual test performed successfully (if applicable) - [x] Documentation or migration has been updated (if applicable)
2 parents 66fb9a7 + a0cbe34 commit 171213d

32 files changed

+333
-269
lines changed

‎docs/20-concepts/03-events.mdx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
title: Events
3+
description: Behandelung von KoliBri-Events über DOM-Events mit Listenern oder Callback-Funktionen über die Eigenschaft _on.
4+
tags:
5+
- Events
6+
- Callbacks
7+
---
8+
9+
Events in KoliBri can be processed as DOM Events or as Callbacks.
10+
11+
### DOM Events
12+
13+
The component's events can be handled using event listeners, which may be called with a `details` parameter:
14+
15+
```js
16+
kolibriElement.addEventListener('kolFocus', (event) => {
17+
/* Do something on focus */
18+
});
19+
20+
kolibriElement.addEventListener('kolInput', (event, { detail: value }) => {
21+
/* Do something with value or event */
22+
});
23+
```
24+
25+
26+
### Callbacks
27+
28+
The component's callbacks can be handled using an `_on` property, which consists of an object with various callback functions:
29+
30+
```js
31+
kolibriElement._on = {
32+
onFocus: (event) => {
33+
/* Do something on focus */
34+
},
35+
onInput: (event, value) => {
36+
/* Do something with value or event */
37+
}
38+
};
39+
```

‎docs/30-components/accordion.mdx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,14 @@ Accordions kommen immer dann zum Einsatz, wenn einem thematischen Oberbegriff zu
4646
</div>
4747
```
4848

49+
### Events
50+
51+
Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="../concepts/events" />.
52+
53+
| Event | Auslöser | Value |
54+
|---------|-------------------------|-------|
55+
| `click` | Element wird angeklickt | - |
56+
4957
### Beispiel
5058

5159
<div class="grid gap-2">

‎docs/30-components/alert.mdx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,14 @@ Die **Alert**-Komponente gibt ein optisches Feedback an die Nutzer:innen. Sie be
2727
<kol-alert _label="Überschrift im Alert" _level="2" _type="info" _variant="card">Textbereich im Alert</kol-alert>
2828
```
2929

30+
### Events
31+
32+
Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="../concepts/events" />.
33+
34+
| Event | Auslöser | Value |
35+
|---------|-----------------------------|-------|
36+
| `close` | Komponente wird geschlossen | - |
37+
3038
### Beispiel
3139

3240
<kol-alert _label="Überschrift im Alert" _level="1" _type="success" >Textbereich im Alert</kol-alert>

‎docs/30-components/badge.mdx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,15 @@ KoliBri bietet neben der Angabe der Hintergrundfarbe und automatischer Berechnun
2727
<kol-badge _label="Beispieltext" _color="#0c8703" _icons="codicon codicon-home"></kol-badge>
2828
```
2929

30+
### Events
31+
32+
Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="../concepts/events" />.
33+
34+
| Event | Auslöser | Value |
35+
|---------------|----------------------------------------------------------------------------------------------------------|-------|
36+
| `click` | Smart Button wird angeklickt | - |
37+
| `onMouseDown` | Eine Taste eines Zeigegeräts wird gedrückt, während der Zeiger sich innerhalb des Smart Buttons befindet | - |
38+
3039
### Beispiel
3140

3241
<kol-badge _label="Beispieltext" _color="#b7e4b4" _icons="codicon codicon-home"></kol-badge>

‎docs/30-components/button-link.mdx

Lines changed: 5 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -35,26 +35,12 @@ Da der Link, nicht wie der Button, in mehrere Varianten (`primary` oder `seconda
3535

3636
### Events
3737

38-
Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:
39-
40-
```js
41-
kolibriElement._on = {
42-
onFocus: (event) => {
43-
/* Do something on focus */
44-
},
45-
onClick: (event, value) => {
46-
/* Do something with value or event */
47-
},
48-
// ...
49-
};
50-
```
38+
Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="../concepts/events" />.
5139

52-
| Event | Auslöser | Value |
53-
| ----------- | -------------------------------------------------------------- | -------------------- |
54-
| onFocus | Element wird fokussiert | - |
55-
| onMouseDown | Element wird angeklickt (entspricht nativem `mouseDown`-Event) | - |
56-
| onClick | Element wird angeklickt (entspricht nativem `click`-Event) | Definierter `_value` |
57-
| onBlur | Element verliert Fokus | - |
40+
| Event | Auslöser | Value |
41+
|---------------|-----------------------------------------------------------------------------------------------------|-------------------|
42+
| `click` | Element wird angeklickt | `_value`-Property |
43+
| `onMouseDown` | Eine Taste eines Zeigegeräts wird gedrückt, während der Zeiger sich innerhalb des Elements befindet | - |
5844

5945
### Beispiel
6046

‎docs/30-components/button.mdx

Lines changed: 5 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -31,26 +31,12 @@ import { ExampleLink } from '@site/src/components/ExampleLink';
3131

3232
### Events
3333

34-
Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:
35-
36-
```js
37-
kolibriElement._on = {
38-
onFocus: (event) => {
39-
/* Do something on focus */
40-
},
41-
onClick: (event, value) => {
42-
/* Do something with value or event */
43-
},
44-
// ...
45-
};
46-
```
34+
Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="../concepts/events" />.
4735

48-
| Event | Auslöser | Value |
49-
| ----------- | -------------------------------------------------------------- | -------------------- |
50-
| onFocus | Element wird fokussiert | - |
51-
| onMouseDown | Element wird angeklickt (entspricht nativem `mouseDown`-Event) | - |
52-
| onClick | Element wird angeklickt (entspricht nativem `click`-Event) | Definierter `_value` |
53-
| onBlur | Element verliert Fokus | - |
36+
| Event | Auslöser | Value |
37+
|---------------|-----------------------------------------------------------------------------------------------------|-------------------|
38+
| `click` | Element wird angeklickt | `_value`-Property |
39+
| `onMouseDown` | Eine Taste eines Zeigegeräts wird gedrückt, während der Zeiger sich innerhalb des Elements befindet | - |
5440

5541
### Beispiel
5642

‎docs/30-components/card.mdx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,14 @@ Der **Titel-Bereich** wird in einer größeren Schrift dargestellt. Der **Inhalt
3636
</kol-card>
3737
```
3838

39+
### Events
40+
41+
Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="../concepts/events" />.
42+
43+
| Event | Auslöser | Value |
44+
|---------|-----------------------------|-------|
45+
| `close` | Komponente wird geschlossen | - |
46+
3947
### Beispiel
4048

4149
<kol-card _label="Testtitel">

‎docs/30-components/combobox.mdx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,18 @@ Die **Combobox**-Komponente erzeugt eine Auswahlliste, die ein Eingabefeld mit e
2828
<kol-combobox _suggestions="['Herr','Frau','Firma']" _label="Anrede" _value="Herr"></kol-combobox>
2929
```
3030

31+
### Events
32+
33+
Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="../concepts/events" />.
34+
35+
| Event | Auslöser | Value |
36+
|----------|----------------------------------|---------------------------------|
37+
| `click` | Eingabefeld wird angeklickt | - |
38+
| `focus` | Eingabefeld wird fokussiert | - |
39+
| `blur` | Eingabefeld verliert Fokus | - |
40+
| `input` | Wert wird durch Eingabe geändert | Aktueller Wert des Eingabefelds |
41+
| `change` | Eingabe wurde abgeschlossen | Aktueller Wert des Eingabefelds |
42+
3143
### Beispiel
3244

3345
<kol-combobox _suggestions="['Herr','Frau','Firma']" _label="Anrede" _value="Herr"></kol-combobox>

‎docs/30-components/input-checkbox.mdx

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -37,26 +37,15 @@ Der Input-Typ **_Checkbox_** generiert eine rechteckige Box, die durch Anklicken
3737

3838
### Events
3939

40-
Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:
41-
42-
```js
43-
kolibriElement._on = {
44-
onFocus: (event) => {
45-
/* Do something on focus */
46-
},
47-
onInput: (event, value) => {
48-
/* Do something with value or event */
49-
},
50-
// ...
51-
};
52-
```
40+
Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="../concepts/events" />.
5341

5442
| Event | Auslöser | Value |
55-
| -------- | ------------------------------------------------------------------- | --------------------------------------------------- |
56-
| onFocus | Element wird fokussiert | - |
57-
| onInput | Checkbox wird an- oder abgehakt (entspricht nativem `input`-Event) | Definierter `_value` wenn aktiv, andernfalls `null` |
58-
| onChange | Checkbox wird an- oder abgehakt (entspricht nativem `change`-Event) | Definierter `_value` wenn aktiv, andernfalls `null` |
59-
| onBlur | Element verliert Fokus | - |
43+
|----------|---------------------------------------------------------------------|-----------------------------------------------------|
44+
| `focus` | Eingabefeld wird fokussiert | - |
45+
| `click` | Eingabefeld wird angeklickt | - |
46+
| `input` | Checkbox wird an- oder abgehakt (entspricht nativem `input`-Event) | Definierter `_value` wenn aktiv, andernfalls `null` |
47+
| `change` | Checkbox wird an- oder abgehakt (entspricht nativem `change`-Event) | Definierter `_value` wenn aktiv, andernfalls `null` |
48+
| `blur` | Eingabefeld verliert Fokus | - |
6049

6150
## Verwendung
6251

‎docs/30-components/input-color.mdx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,18 @@ Der Input-Typ **Color** erzeugt ein Auswahlfeld für die Definition einer belieb
2525
<kol-input-color _value="#d4fcf4" _label="Hintergrundfarbe" _icons='{"right": "codicon codicon-symbol-color"}'></kol-input-color>
2626
```
2727

28+
### Events
29+
30+
Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="../concepts/events" />.
31+
32+
| Event | Auslöser | Value |
33+
|----------|----------------------------------|---------------------------------|
34+
| `click` | Eingabefeld wird angeklickt | - |
35+
| `focus` | Eingabefeld wird fokussiert | - |
36+
| `blur` | Eingabefeld verliert Fokus | - |
37+
| `input` | Wert wird durch Eingabe geändert | Aktueller Wert des Eingabefelds |
38+
| `change` | Eingabe wurde abgeschlossen | Aktueller Wert des Eingabefelds |
39+
2840
### Beispiel
2941

3042
<kol-input-color _value="#d4fcf4" _label="Hintergrundfarbe" _icons='{"right": "codicon codicon-symbol-color"}'></kol-input-color>

‎docs/30-components/input-date.mdx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,18 @@ Der Input-Typ **Date** erzeugt ein Eingabefeld für Datumswerte. Diese können k
2727
<kol-input-date _type="date" _label="Erstellungsdatum" _icons='{"right": "codicon codicon-calendar"}'></kol-input-date>
2828
```
2929

30+
### Events
31+
32+
Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="../concepts/events" />.
33+
34+
| Event | Auslöser | Value |
35+
|----------|----------------------------------|---------------------------------|
36+
| `click` | Eingabefeld wird angeklickt | - |
37+
| `focus` | Eingabefeld wird fokussiert | - |
38+
| `blur` | Eingabefeld verliert Fokus | - |
39+
| `input` | Wert wird durch Eingabe geändert | Aktueller Wert des Eingabefelds |
40+
| `change` | Eingabe wurde abgeschlossen | Aktueller Wert des Eingabefelds |
41+
3042
### Beispiel
3143

3244
<kol-input-date _type="date" _label="Erstellungsdatum" _icons='{"right": "codicon codicon-calendar"}'></kol-input-date>

‎docs/30-components/input-email.mdx

Lines changed: 9 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -31,27 +31,15 @@ Der Input-Typ **E-Mail** erzeugt ein Eingabefeld für E-Mails.
3131

3232
### Events
3333

34-
Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:
35-
36-
```js
37-
kolibriElement._on = {
38-
onFocus: (event) => {
39-
/* Do something on focus */
40-
},
41-
onInput: (event, value) => {
42-
/* Do something with value or event */
43-
},
44-
// ...
45-
};
46-
```
47-
48-
| Event | Auslöser | Value |
49-
| -------- | -------------------------------------------------------------------------------------------- | ---------------------------- |
50-
| onFocus | Element wird fokussiert | - |
51-
| onClick | Element wird angeklickt | - |
52-
| onInput | Eine Eingabe erfolgt (entspricht nativem `input`-Event) | Eingegebener Wert als String |
53-
| onChange | Eingabe ist abgeschlossen und Eingabefeld verliert Fokus (entspricht nativem `change`-Event) | Eingegebener Wert als String |
54-
| onBlur | Element verliert Fokus | - |
34+
Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="../concepts/events" />.
35+
36+
| Event | Auslöser | Value |
37+
|----------|----------------------------------|---------------------------------|
38+
| `click` | Eingabefeld wird angeklickt | - |
39+
| `focus` | Eingabefeld wird fokussiert | - |
40+
| `blur` | Eingabefeld verliert Fokus | - |
41+
| `input` | Wert wird durch Eingabe geändert | Aktueller Wert des Eingabefelds |
42+
| `change` | Eingabe wurde abgeschlossen | Aktueller Wert des Eingabefelds |
5543

5644
## Verwendung
5745

‎docs/30-components/input-file.mdx

Lines changed: 7 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -29,27 +29,15 @@ Der Input-Typ **File** erzeugt ein Eingabefeld für zum Beispiel Uploads. Es kö
2929

3030
### Events
3131

32-
Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:
33-
34-
```js
35-
kolibriElement._on = {
36-
onFocus: (event) => {
37-
/* Do something on focus */
38-
},
39-
onInput: (event, value) => {
40-
/* Do something with value or event */
41-
},
42-
// ...
43-
};
44-
```
32+
Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="../concepts/events" />.
4533

4634
| Event | Auslöser | Value |
47-
| -------- | ------------------------------------------------------------------------------- | ------------------------------- |
48-
| onFocus | Element wird fokussiert | - |
49-
| onClick | Element wird angeklickt | - |
50-
| onInput | Eine oder mehrere Dateien werden ausgewählt (entspricht nativem `input`-Event) | Ausgwählte Dateien als FileList |
51-
| onChange | Eine oder mehrere Dateien werden ausgewählt (entspricht nativem `change`-Event) | Ausgwählte Dateien als FileList |
52-
| onBlur | Element verliert Fokus | - |
35+
|----------|---------------------------------------------------------------------------------|---------------------------------|
36+
| `focus` | Eingabefeld wird fokussiert | - |
37+
| `click` | Eingabefeld wird angeklickt | - |
38+
| `input` | Eine oder mehrere Dateien werden ausgewählt (entspricht nativem `input`-Event) | Ausgwählte Dateien als FileList |
39+
| `change` | Eine oder mehrere Dateien werden ausgewählt (entspricht nativem `change`-Event) | Ausgwählte Dateien als FileList |
40+
| `blur` | Eingabefeld verliert Fokus | - |
5341

5442
### Beispiel
5543

‎docs/30-components/input-number.mdx

Lines changed: 9 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -27,27 +27,15 @@ Der Input-Typ **Number** erzeugt ein Eingabefeld für Zahlen.
2727

2828
### Events
2929

30-
Events der Komponente können über eine `_on`-Property behandelt werden, die aus einem Objekt mit verschiedenen Callback-Funktionen besteht:
31-
32-
```js
33-
kolibriElement._on = {
34-
onFocus: (event) => {
35-
/* Do something on focus */
36-
},
37-
onInput: (event, value) => {
38-
/* Do something with value or event */
39-
},
40-
// ...
41-
};
42-
```
43-
44-
| Event | Auslöser | Value |
45-
| -------- | -------------------------------------------------------------------------------------------- | ---------------------------- |
46-
| onFocus | Element wird fokussiert | - |
47-
| onClick | Element wird angeklickt | - |
48-
| onInput | Eine Eingabe erfolgt (entspricht nativem `input`-Event) | Eingegebener Wert als String |
49-
| onChange | Eingabe ist abgeschlossen und Eingabefeld verliert Fokus (entspricht nativem `change`-Event) | Eingegebener Wert als String |
50-
| onBlur | Element verliert Fokus | - |
30+
Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="../concepts/events" />.
31+
32+
| Event | Auslöser | Value |
33+
|----------|----------------------------------|---------------------------------|
34+
| `click` | Eingabefeld wird angeklickt | - |
35+
| `focus` | Eingabefeld wird fokussiert | - |
36+
| `blur` | Eingabefeld verliert Fokus | - |
37+
| `input` | Wert wird durch Eingabe geändert | Aktueller Wert des Eingabefelds |
38+
| `change` | Eingabe wurde abgeschlossen | Aktueller Wert des Eingabefelds |
5139

5240
### Beispiel
5341

0 commit comments

Comments
 (0)