SummaryList

Eine Schlüssel- und Werteliste: die Eigenschaften einer einzelnen Sache, um auf einen Blick zu lesen und das Notwendige zu ändern.

Auf dieser Seite

Playground

Name: Pflanzen gießen
Wann: Jeden Dienstag, 9 Uhr
Benachrichtigen per: Discord, e-mail

Ändern

Hintergrund

HTML

<dl class="feitio-summary-list"><div><dt>Name</dt><dd>Pflanzen gießen</dd></div><div><dt>Wann</dt><dd>Jeden Dienstag, 9 Uhr</dd></div><div><dt>Benachrichtigen per</dt><dd>Discord, e-mail</dd></div></dl>

Wann verwenden

Um eine Konfiguration oder Details eines Artikels anzuzeigen: ein Profil, ein Zeitplan, die Einstellungen.
Auf der Detailseite eines Elements, neben den Aktionen.

Wann nicht verwenden

Viele Elemente desselben Typs: Tabelle.
Alles auf einmal bearbeiten: das ist ein Formular; die Liste dient zum Lesen.

Beispiele

Name: Pflanzen gießen; Ändern
Wenn: Jeden Dienstag, 9 Uhr; Ändern
Benachrichtigen durch: Discord, E-Mail; Ändern

Details einer Erinnerung

Jede Zeile enthält Schlüssel, Wert und „Ändern", das zum Bearbeiten nur dieser Zeile führt. Auf dem Handy stapeln sich alle drei übereinander.

Code anzeigen

HTML

<dl class="feitio-summary-list">
  <div>
    <dt>Quando</dt>
    <dd>Toda terça, às 9h</dd>
    <dd class="change"><a class="feitio-link" href="/lembretes/1/quando">Alterar<span class="feitio-visually-hidden"> quando</span></a></dd>
  </div>
</dl>

Anatomie

Wenn: Jeden Dienstag, 9 Uhr; Ändern

Schlüssel: der Name der Eigenschaft, fett gedruckt.
Wert: wie es aktuell ist.
Änderung, optional: bearbeitet nur diese Zeile.

Do and don't

Zeitzone: São Paulo (UTC−3)
Sprache: Portugiesisch

Eine Sache, mehrere Merkmale: von oben nach unten lesen.

Don’t

Zeitzone	Sprache
São Paulo (UTC−3)	Portugiesisch

Eine Einzeiler-Tabelle: ein Header für einen Artikel, der auf dem Handy nicht passt.

Schreiben

Schlüssel: der kurze Name, identisch mit dem Label des Feldes, das ihn bearbeitet.
Leerer Wert: so sagen ("Nicht festgelegt"), nie leer lassen.
"Änderung" mit dem Namen der Zeile für Screenreader unsichtbar machen.

Es ist eine Definitionliste (<dl>): Screenreader lesen Schlüssel und Wert als Paare aus.

Attribute

Attribut	Werte	Zum Zweck
`class="feitio-summary-list"`	auf dem `<dl>`	Schlüssel, Wert und Änderung in Spalten mit Strichen.
`class="change"`	auf dem Links `<dd>`	""Change" rechts; auf Mobilgeräten darunter.