Details

Das Pattern Details besteht aus einem Aufklapp-Element. Sollten mehrere zusammengehörige Aufklapp-Elemente benötigt werden, ist das Pattern Akkordeon zu verwenden.

Achtung, SEO-relevant: Eingeklappte Inhalte werden von Google als weniger relevant eingestuft.

Varianten

Details

Vorschau

Beschreibung

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minima dignissimos ullam ut minus aut ipsa rerum quibusdam expedita necessitatibus magni voluptatum, laborum iure perspiciatis cum velit voluptas quod? Ipsa, facilis. velit voluptas quod? Ipsa, facilis

Code

<wm-details>
  <span slot="label">Beschreibung</span>
  <div slot="content">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minima dignissimos ullam ut minus aut ipsa rerum quibusdam expedita necessitatibus magni voluptatum, laborum iure perspiciatis cum velit voluptas quod? Ipsa, facilis. velit voluptas quod? Ipsa, facilis</div>
</wm-details>

Details in Event-Feed

Vorschau

Michael Niavarani
- Ronacher
- 02.04.
- Beschreibung
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium suscipit vel libero odio repudiandae quasi corrupti cumque iure nihil necessitatibus dolorem obcaecati deleniti repellendus iste culpa veritatis, sed consequuntur! Facere.
Michael Niavarani
- Ronacher
- 02.04.
- Beschreibung
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium suscipit vel libero odio repudiandae quasi corrupti cumque iure nihil necessitatibus dolorem obcaecati deleniti repellendus iste culpa veritatis, sed consequuntur! Facere.

Code

<wm-list type="row" clean>
  <ul>
    <li>
      <div>
        <strong><a href="#">Michael Niavarani</a></strong>

        <wm-list clean gap="xxs">
          <ul>
            <li>
              <wm-icon iconid="pin"></wm-icon>
              Ronacher
            </li>
            <li>
              <wm-icon iconid="clock"></wm-icon>
              02.04.
            </li>
            <li>
              <wm-icon iconid="info"></wm-icon>
              <wm-details>
                <span slot="label">Beschreibung</span>
                <p slot="content">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium suscipit vel libero odio repudiandae quasi corrupti cumque iure nihil necessitatibus dolorem obcaecati deleniti repellendus iste culpa veritatis, sed consequuntur! Facere.</p>
              </wm-details>
            </li>
          </ul>
        </wm-list>
      </div>
    </li>
    <li>
      <div>
        <strong><a href="#">Michael Niavarani</a></strong>
        <wm-list clean gap="xxs">
          <ul>
            <li>
              <wm-icon iconid="pin"></wm-icon>
              Ronacher
            </li>
            <li>
              <wm-icon iconid="clock"></wm-icon>
              02.04.
            </li>
            <li>
              <wm-icon iconid="info"></wm-icon>
              <wm-details>
                <span slot="label">Beschreibung</span>
                <p slot="content">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium suscipit vel libero odio repudiandae quasi corrupti cumque iure nihil necessitatibus dolorem obcaecati deleniti repellendus iste culpa veritatis, sed consequuntur! Facere.</p>
              </wm-details>
            </li>
          </ul>
        </wm-list>
      </div>
    </li>
  </ul>
</wm-list>

Dev

Interaktive Demo

Vorschau

Beschreibung

Der Wiener Gemeinderat beschließt den neuen Flächenwidmungs- und Bebauungsplan. Das Widmungsverfahren ist damit abgeschlossen. Das Plandokument kann in der Servicestelle Stadtentwicklung eingesehen beziehungsweise online abgerufen werden.

Code

<wm-details data-demo-pattern="wm-details-preview">
  <strong slot="label">Beschreibung</strong>
  <div slot="content">Der Wiener Gemeinderat beschließt den neuen Flächenwidmungs- und Bebauungsplan. Das Widmungsverfahren ist damit abgeschlossen. Das Plandokument kann in der Servicestelle Stadtentwicklung eingesehen beziehungsweise online abgerufen werden.</div>
</wm-details>

API

Abhängigkeiten

HTML

<script src="https://assets.wien.gv.at/theme/latest/js/components/Details/Details.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/latest/js/components/Button/Button.js" type="module"></script>

JavaScript

import { Details } from './wienermelange/assets/js/components/Details/Details.js';
    import { Button } from './wienermelange/assets/js/components/Button/Button.js';

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`full`	Über die volle Breite anzeigen.	`Boolean`	`false`
`open`	Offen oder nicht	`Boolean`	`false`
`min`	Wenn erst ab einer bestimmten Viewportbreite getoggelt werden soll, zum Beispiel 48em, 64em.	`String`	leer
`selectable`	Text kann ausgewählt werden. Wenn false, ist die ganze Fläche klickbar.	`Boolean`	`false`

Slots

Name	Beschreibung
`label`	Bezeichnung
`content`	Inhalt

Methoden

Eigenschaft	Optionen	Argumente
`toggleDetails`	Sichtbarkeit umschalten	/

CSS API

Property	Beschreibung
`--details-border`	Rahmen
`--details-icon`	Dropdown Icon
`--details-padding`	Innenabstand
`--details-padding-button`	Innenabstand im Button
`--details-padding-content`	Innenabstand im Inhalt
`--details-font-variation-settings`	Schriftstärke für WM Variablefont
`--details-font-weight`	Standard-Schriftstärke

Kontakt

Haben Sie noch Fragen, Feedback oder brauchen Sie ein Element, das die Pattern Library noch nicht bietet?

handbuch@ma53.wien.gv.at