@conciso/design-system-angular 2.3.0 → 2.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -11,6 +11,44 @@ nur deren CSS-Klassen zusammen und liefern **kein eigenes CSS**.
|
|
|
11
11
|
> und importiert ausschließlich von hier
|
|
12
12
|
> ([ADR-0002](../../../docs/adr/0002-topologie-und-quelle-der-wahrheit.md)).
|
|
13
13
|
|
|
14
|
+
## Komponenten (Auswahl)
|
|
15
|
+
|
|
16
|
+
Jede Komponente ist ein schmaler Wrapper, der nur die passende Klassenkombination
|
|
17
|
+
der CSS-Schicht erzeugt. Die Tabelle zeigt eine Auswahl; vollständig sind die Exporte
|
|
18
|
+
in `src/public-api.ts` bzw. in der Storybook-Sidebar.
|
|
19
|
+
|
|
20
|
+
Die meisten Komponenten haben einen Element-Selektor (`cds-*`). Einige tragen
|
|
21
|
+
stattdessen einen Attributselektor (z. B. `cdsIconCard`, `cdsSection`, `cdsFeature`,
|
|
22
|
+
`cdsCtaBand`, `cdsAvatar`, `cdsAuthorCard`), weil das Host-Element sonst Layout oder
|
|
23
|
+
Tag der CSS-Basis bricht — begründet je Komponente per JSDoc, siehe
|
|
24
|
+
[ADR-0008](../../../docs/adr/0008-selektortyp-der-wrapper-komponenten.md).
|
|
25
|
+
|
|
26
|
+
| Angular-Selector | CSS-Basis (in `../../../css/components.css`) |
|
|
27
|
+
| --- | --- |
|
|
28
|
+
| `<cds-button>` | `.btn` + Varianten/Bereiche |
|
|
29
|
+
| `<cds-status-badge>` | `.badge` + `.badge-{ok\|warn\|err\|neu}` (Status-Ton) |
|
|
30
|
+
| `<cds-area-badge>` | `.badge` + `[data-area]` (Bereichs-Zuordnung) |
|
|
31
|
+
| `<cds-chip>` | `.chip` (aria-pressed Toggle **oder** statischer `t-*`-Tag) |
|
|
32
|
+
| `<cds-card>` | `.card` (Bereichs-Glyphe aus `../../../icons`) |
|
|
33
|
+
| `<cds-stat-card>` | `.card-stat` |
|
|
34
|
+
| `<cds-stat-strip>` | `.card-stat-strip` + `.card-stat-flat` |
|
|
35
|
+
| `<cds-testimonial>` | `.testimonial` |
|
|
36
|
+
| `<cds-team-voice>` | `.team-voice` (editoriale Zitat-Reihe mit Foto) |
|
|
37
|
+
| `<cds-text-field>` / `<cds-textarea-field>` / `<cds-select-field>` | `.field` (input/select/textarea, A11y-verdrahtet) |
|
|
38
|
+
| `<cds-blockquote>` | `.bq` (bereichsgefärbtes Zitat) |
|
|
39
|
+
| `<cds-area-tabs>` | `.area-tabs` / `.atab` (interaktive Tab-Leiste) |
|
|
40
|
+
| `<cds-faq>` | `.ep-faq` (natives `details`/`summary`) |
|
|
41
|
+
| `<cds-snackbar>` | `.snack` (Statusmeldung, Töne def/ok/err) |
|
|
42
|
+
| `<cds-slider>` | `.field-slider` / `.slider` (Range mit Live-Ausgabe) |
|
|
43
|
+
| `<cds-download-cta>` | `.cta-dl` (Download-Block) |
|
|
44
|
+
| `<cds-code-block>` | `.cb-wrap` (Code/Terminal, Kopier-Button) |
|
|
45
|
+
| `<cds-footer>` | `.footer` (Zwei-Band-Footer) |
|
|
46
|
+
| `<cds-carousel>` | `.img-slider` (Bild-Crossfade, Prev/Next/Dots, Hero) |
|
|
47
|
+
| `<cds-logo-carousel>` | `.logo-carousel` (Autoplay-Crossfade, pausierbar) |
|
|
48
|
+
| `<cds-topnav>` | `.ep-topnav` (Nav + Submenüs + Suche + Theme-Toggle) |
|
|
49
|
+
| `a[cdsIconCard]` / `div[cdsIconCard]` | `.ep-card` (Attributselektor, ADR-0008 Fall 1: Grid-Kind) |
|
|
50
|
+
| `section[cdsSection]` / `div[cdsSection]` | `.ep-section` (Attributselektor, ADR-0008 Fall 2: Fläche am Host) |
|
|
51
|
+
|
|
14
52
|
## Installation von npmjs.org
|
|
15
53
|
|
|
16
54
|
Der empfohlene Weg: Beide Pakete (`@conciso/design-system-angular` **und**
|