Skip to content

Commit 4ab40f5

Browse files
aTTiCuZ-CodingPageaTTiCuZ-CodingPage
committed
373 (toaster) add mdx-file on i18n/en
1 parent ac0d9ca commit 4ab40f5

File tree

5 files changed

+109
-206
lines changed

5 files changed

+109
-206
lines changed

‎docs/30-components/toaster.mdx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ tags:
1010

1111
import Readme from '../../readmes/toaster/readme.md';
1212
import { ExampleLink } from '@site/src/components/ExampleLink';
13-
import { ToasterOption } from '@site/src/components/ToasterOption';
1413

1514
# Toaster
1615

@@ -76,7 +75,20 @@ const closeToast = toaster.enqueue({
7675

7776
### Anzeige-Option des Toast
7877

79-
<ToasterOption />
78+
In KoliBri unterscheiden wir drei Ebenen:
79+
80+
- **`_type`** → definiert die **semantische Bedeutung** oder logische Funktion einer Komponente.
81+
*Beispiel*: Bei `kol-button`: `"button" | "submit" | "reset"`, bei `kol-alert`: `"info" | "success" | "warning" | "error"`.
82+
83+
- **`_variant`** → steuert das **visuelle Erscheinungsbild**, z. B. `"primary"`, `"secondary"`, `"ghost"`.
84+
85+
- **`_behavior`** → bestimmt das **Interaktionsverhalten** der Komponente.
86+
*Beispiel*: Bei `kol-tabs`: `"select-automatic"` vs. `"select-manual"`.
87+
88+
👉 Kurz gesagt:
89+
- `_type` = Bedeutung & Logik
90+
- `_variant` = Look & Styling
91+
- `_behavior` = Interaktion & Verhalten
8092

8193
<Readme />
8294

‎i18n/de/code.json‎

Lines changed: 0 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -389,62 +389,5 @@
389389
},
390390
"property.msg.value.message": {
391391
"message": "{_type: 'success', _description: 'Erfolgs-Meldung'}"
392-
},
393-
"toaster.diff.level": {
394-
"message": "In KoliBri unterscheiden wir drei Ebenen:"
395-
},
396-
"toaster.level.type.prefix": {
397-
"message": "→ definiert die "
398-
},
399-
"toaster.level.type.bold": {
400-
"message": "semantische Bedeutung"
401-
},
402-
"toaster.level.type.suffix": {
403-
"message": " oder logische Funktion einer Komponente."
404-
},
405-
"toaster.type.example.label": {
406-
"message": "Beispiel:"
407-
},
408-
"toaster.type.example.firstFor": {
409-
"message": "Bei"
410-
},
411-
"toaster.type.example.secondFor": {
412-
"message": "bei"
413-
},
414-
"toaster.level.variant.prefix": {
415-
"message": "→ steuert das "
416-
},
417-
"toaster.level.variant.bold": {
418-
"message": "visuelle Erscheinungsbild"
419-
},
420-
"toaster.level.variant.suffix": {
421-
"message": ", z. B. "
422-
},
423-
"toaster.level.behavior.prefix": {
424-
"message": "→ bestimmt das "
425-
},
426-
"toaster.level.behavior.bold": {
427-
"message": "Interaktionsverhalten"
428-
},
429-
"toaster.level.behavior.suffix": {
430-
"message": " der Komponente."
431-
},
432-
"toaster.behavior.example.label": {
433-
"message": "Beispiel:"
434-
},
435-
"toaster.behavior.example.for": {
436-
"message": "Bei"
437-
},
438-
"toaster.short": {
439-
"message": "👉 Kurz gesagt:"
440-
},
441-
"toaster.short.type": {
442-
"message": "= Bedeutung & Logik"
443-
},
444-
"toaster.short.variant": {
445-
"message": "= Look & Styling"
446-
},
447-
"toaster.short.behavior": {
448-
"message": "= Interaktion & Verhalten"
449392
}
450393
}

‎i18n/en/code.json‎

Lines changed: 0 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -389,62 +389,5 @@
389389
},
390390
"property.msg.value.message": {
391391
"message": "{_type: 'success', _description: 'Success message'}"
392-
},
393-
"toaster.diff.level": {
394-
"message": "In KoliBri we distinguish three levels:"
395-
},
396-
"toaster.level.type.prefix": {
397-
"message": "→ defines the "
398-
},
399-
"toaster.level.type.bold": {
400-
"message": "semantic meaning"
401-
},
402-
"toaster.level.type.suffix": {
403-
"message": " or logical function of a component."
404-
},
405-
"toaster.type.example.label": {
406-
"message": "Example:"
407-
},
408-
"toaster.type.example.firstFor": {
409-
"message": "For"
410-
},
411-
"toaster.type.example.secondFor": {
412-
"message": "for"
413-
},
414-
"toaster.level.variant.prefix": {
415-
"message": "→ controls the "
416-
},
417-
"toaster.level.variant.bold": {
418-
"message": "visual appearance"
419-
},
420-
"toaster.level.variant.suffix": {
421-
"message": ", e.g. "
422-
},
423-
"toaster.level.behavior.prefix": {
424-
"message": "→ determines the "
425-
},
426-
"toaster.level.behavior.bold": {
427-
"message": "interaction behavior"
428-
},
429-
"toaster.level.behavior.suffix": {
430-
"message": " of the component."
431-
},
432-
"toaster.behavior.example.label": {
433-
"message": "Example:"
434-
},
435-
"toaster.behavior.example.for": {
436-
"message": "For"
437-
},
438-
"toaster.short": {
439-
"message": "👉 In short:"
440-
},
441-
"toaster.short.type": {
442-
"message": "= meaning & logic"
443-
},
444-
"toaster.short.variant": {
445-
"message": "= look & styling"
446-
},
447-
"toaster.short.behavior": {
448-
"message": "= interaction & behavior"
449392
}
450393
}

‎i18n/en/docusaurus-plugin-content-docs/current/30-components/toaster.mdx‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
---
2+
title: Toaster
3+
description: Beschreibung, Spezifikation und Beispiele für die Toast-Komponente.
4+
tags:
5+
- Toast
6+
- Beschreibung
7+
- Spezifikation
8+
- Beispiele
9+
---
10+
11+
import Readme from '/readmes/toaster/readme.md';
12+
import { ExampleLink } from '@site/src/components/ExampleLink';
13+
14+
# Toaster
15+
16+
Synonyms: Notification, Snackbar
17+
18+
With the **Toast** service, you provide visual feedback to users. It is displayed at the top of the browser window
19+
until it is closed. If multiple toasts are opened without the previous ones being closed, they are displayed one below the other.
20+
21+
## Construction
22+
23+
The Toast components are not used directly, but are always constructed via the ToasterService.
24+
25+
### Code
26+
27+
```js
28+
import { ToasterService } from '@public-ui/components';
29+
30+
// Get the toaster instance for the current HTML document.
31+
const toaster = ToasterService.getInstance(document, {
32+
defaultVariant: 'msg', // Standard: 'card'
33+
});
34+
35+
// Enqueue a new toast to the toaster to display:
36+
toaster.enqueue({
37+
label: 'This is the title',
38+
description: 'Magna eu sit adipisicing cillum amet esse in aute quis in dolore.',
39+
type: 'info',
40+
variant: 'msg', // Standard: 'card'
41+
});
42+
```
43+
44+
### Other service methods
45+
46+
- `closeAll`: Closes all toasts
47+
- `dispose`: Removes the Toast container. The Toaster instance can no longer be used.
48+
49+
## Usage
50+
51+
### Headline
52+
53+
Use the **`_label`** attribute to specify the toast's title.
54+
55+
### Content
56+
57+
Use the **`_description`** attribute to specify the text content of the toast.
58+
59+
As an alternative to the static description, you can define your own render function using the **`_render`** attribute. This is called with a reference
60+
to the HTML element of the Toast component. An object is also passed that provides a `close`-function for closing the Toast.
61+
62+
```ts
63+
const closeToast = toaster.enqueue({
64+
render: (element: HTMLElement, { close }) => {
65+
element.textContent = 'Mein Inhalt';
66+
const customCloseButton = document.createElement('button');
67+
customCloseButton.textContent = 'Toast schließen';
68+
element.appendChild(customCloseButton);
69+
customCloseButton.addEventListener('click', close, { once: true });
70+
},
71+
});
72+
73+
/* Optional: Close Toast again with `closeToast()` */
74+
```
75+
76+
### Toast display option
77+
78+
In KoliBri we distinguish three levels:
79+
80+
- **`_type`** → defines the **semantic meaning** or logical function of a component.
81+
*Example*: For `kol-button`: `"button" | "submit" | "reset"`, for `kol-alert`: `"info" | "success" | "warning" | "error"`.
82+
83+
- **`_variant`** → controls the **visual appearance**, e.g. `"primary"`, `"secondary"`, `"ghost"`.
84+
85+
- **`_behavior`** → determines the **interaction behavior** of the component.
86+
*Example*: For `kol-tabs`: `"select-automatic"` vs. `"select-manual"`.
87+
88+
👉 In short:
89+
- `_type` = meaning & logic
90+
- `_variant` = look & styling
91+
- `_behavior` = interaction & behavior
92+
93+
<Readme />
94+
95+
<ExampleLink component="toast" />

‎src/components/ToasterOption.tsx‎

Lines changed: 0 additions & 90 deletions
This file was deleted.

0 commit comments

Comments
 (0)