Sichtweite

Steuern Sie die Sichtbarkeit von Elementen mit Sichtbarkeitsdienstprogrammen, ohne ihre Anzeige zu ändern.

Legen Sie die visibilityElemente mit unseren Sichtbarkeitsdienstprogrammen fest. Diese Hilfsklassen ändern den displayWert überhaupt nicht und wirken sich nicht auf das Layout aus – .invisibleElemente nehmen weiterhin Platz auf der Seite ein.

Elemente mit der .invisibleKlasse werden sowohl visuell als auch für Benutzer von Hilfstechnologien/Screenreadern ausgeblendet.

Bewerben .visibleoder .invisiblenach Bedarf.

<div class="visible">...</div>
<div class="invisible">...</div>

// Class
.visible {
  visibility: visible !important;
}
.invisible {
  visibility: hidden !important;
}

Sass

Dienstprogramme-API

Sichtbarkeits-Utilities werden in unserer Utilities-API in deklariert scss/_utilities.scss. Erfahren Sie, wie Sie die Utilities-API verwenden.

    "visibility": (
      property: visibility,
      class: null,
      values: (
        visible: visible,
        invisible: hidden,
      )
    )