Components Summary Zusammenfassung
Verwenden Sie die Zusammenfassungsliste, um Informationen zusammenzufassen, wie die Antworten eines Benutzers am Ende eines Formulars.
Wann soll diese Komponente verwenden werden
Verwenden Sie die Zusammenfassungslistenkomponente, um Paare zusammengehöriger Informationen, sogenannte Schlüssel-Wert-Paare, in einer Liste darzustellen. Der Schlüssel ist eine Beschreibung oder Bezeichnung einer Information, wie „Name“, und der Wert ist die Information selbst, wie „John Smith“.
Sie können es verwenden, um die Antworten eines Benutzers am Ende eines Formulars wie das Muster „Antworten überprüfen“ zusammenzufassen.
Wann diese Komponente nicht verwenden werden sollte
Die Zusammenfassungsliste verwendet das HTML-Element der Beschreibungsliste (<dl>), also verwenden Sie es nur, um Informationen darzustellen, die einen Schlüssel und mindestens einen Wert haben.
Verwenden Sie es nicht für tabellarische Daten oder eine einfache Liste von Informationen oder Aufgaben, wie z. B. eine Aufgabenliste.
Verwenden Sie für diese eine <table>, <ul> oder <ol>.
Wie es funktioniert
Die Darstellung der Zusammenfassungsliste sind in zwei Ausführungen möglich, Inline- und Blockweise.
Mit angabe der entsprechenden css Klasse wird die Darstellung gewählt, für Inline: summary-list__row und für Block: summary-list__col.
Bei kleineren Bildschirmen wir auf Block-Darstellung umgeschaltet, Responsive.
Inline Bsp.
- Name
- Max
- Vorname
- Mustermann
- dasisteinesehrlangeemailadressevonmaxmustermann@unternehmen.xy
Personendaten
- Straße, Nr
- Billstraße, 87
- PLZ, Ort
- 22222, Hamburg
Anschrift
- Sachkundigen vor Ort
-
- Berger Ernst
- Müller, Hans
- Sagmeister, Petra
- Pan, Peter
- Anzahl der Mitarbeiter
- 12
- Ansprechpartner vor Ort
- Müller Hans, 0172 526817
Mitarbeiter die mit Asbest umgehen
Personendaten
- Name
- Max
- Vorname
- Mustermann
- dasisteinesehrlangeemailadressevonmaxmustermann@unternehmen.xy
- Sachkundigen vor Ort
- Berger Ernst
- Müller, Hans
- Sagmeister, Petra
- Pan, Peter
Block Bsp.
- Warum kann die Tätigkeit nur an einem Sonntag oder Feiertag durchgeführt werden
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam fringilla fringilla lobortis.
- Welche Tätigkeiten werden am Sonntag oder Feiertag durchgeführt
- Ut finibus felis consectetur ullamcorper consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Welchen wirtschaftlichen Schaden entsteht, sollten die Arbeiten am gewünschten Sonn- oder Feiertag nicht stattfinden.
- Cras lacus purus, molestie et quam eget, condimentum finibus enim.
- Nachweise
- Dokument_01.doc
Begründung der Sonntagsarbeit
Begründung der Sonntagsarbeit
- Warum kann die Tätigkeit nur an einem Sonntag oder Feiertag durchgeführt werden
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam fringilla fringilla lobortis.
- Welche Tätigkeiten werden am Sonntag oder Feiertag durchgeführt
- Ut finibus felis consectetur ullamcorper consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Welchen wirtschaftlichen Schaden entsteht, sollten die Arbeiten am gewünschten Sonn- oder Feiertag nicht stattfinden.
- Cras lacus purus, molestie et quam eget, condimentum finibus enim.
- Nachweise
- Dokument_01.doc
Bsp. für Checkbox und Radio Darstellung
Einzelne Checkboxes kann auch als Toggle dargestellt werden.
Mehr als eine Checkbox werden immer in fieldset mit Legende dargestellt.
Radios werden immer in fieldset mit Legende dargestellt.
- Einzelne Checkbox mit Label
- Nein
- Einzelne Toggle mit Label
- Ja
- Legende für Checkbox Liste
-
- Checkbox Item 1
- Checkbox Item 2
- Legende für Radio-Button Liste
- Radio Item 3
Zusammenfassung für Checkbox und Radio Darstellung
Zusammenfassung für Checkbox und Radio Darstellung
- Einzelne Checkbox mit Label
- Nein
- Einzelne Toggle mit Label
- Ja
- Legende für Checkbox Liste
- Checkbox Item 1
- Checkbox Item 2
- Legende für Radio-Button Liste
- Radio Item 3