Sichtbarkeit von Elementen an Komponenten koppeln

Das visibility-Attribut blendet beliebige HTML-Elemente automatisch mit ws-search-result, ws-suggest-result oder ws-filter ein und aus.

Das Attribut visibility verknüpft die Sichtbarkeit eines beliebigen HTML-Elements mit der Sichtbarkeit einer Komponente. Wird die referenzierte Komponente ein- oder ausgeblendet, folgt das Element automatisch - oder zeigt mit :inverse das Gegenteil. Typischer Anwendungsfall ist das Ein-/Ausblenden von Überschriften, Tab-Buttons oder Container-Bereichen in Abhängigkeit von ws-search-result.

Das Attribut kann auf jedem HTML-Element gesetzt werden.

​

Voraussetzung

• JavaScript-Bundle ws-search-component-x.x.x.js ab Version 1.9.1

​

Syntax

In den folgenden Schreibweisen steht komponente für den Namen der referenzierten Komponente, source für eine einzelne Quelle einer Multi-Source-Komponente und name für den Namen eines Filters:

Schreibweise	Verhalten
visibility="komponente"	Element folgt dem Sichtbarkeitsstatus der Komponente.
visibility="komponente:inverse"	Element zeigt das Gegenteil: sichtbar, wenn die Komponente versteckt ist.
visibility="komponente-source"	Bei Multi-Source-Komponenten wird eine einzelne Quelle referenziert, beispielsweise ws-search-result-product.
visibility="ws-filter-name"	Bei Filtern wird der Filtername referenziert, beispielsweise ws-filter-brand.

Als Komponenten-Referenz verfügbar sind: ws-search-result, ws-suggest-result und ws-filter.

​

Beispiele

ws-search-result

<div visibility="ws-search-result">
  Wird gezeigt, wenn ein ws-search-result sichtbar ist
</div>

<div visibility="ws-search-result:inverse">
  Wird gezeigt, wenn alle ws-search-result versteckt sind
</div>

<div visibility="ws-search-result-product">
  Wird gezeigt, wenn ws-search-result[source="product"] sichtbar ist
</div>

<div visibility="ws-search-result-product:inverse">
  Wird gezeigt, wenn ws-search-result[source="product"] versteckt ist
</div>

ws-suggest-result

Die Verwendung mit ws-suggest-result erfolgt analog zu ws-search-result, beispielsweise visibility="ws-suggest-result-category".

ws-filter

<div visibility="ws-filter-brand">
  Wird gezeigt, wenn ws-filter[name="brand"] sichtbar ist
</div>

<div visibility="ws-filter-brand:inverse">
  Wird gezeigt, wenn ws-filter[name="brand"] versteckt ist
</div>

Bezieht sich visibility auf eine Komponente mit mehreren Sources (beispielsweise visibility="ws-search-result" ohne Source-Zusatz), gilt: Das Element ist sichtbar, wenn mindestens eine Source sichtbar ist, und wird nur dann versteckt, wenn alle Sources versteckt sind.

​

Abgelöste Attribute und Workarounds

visibility ersetzt die bisherigen Mechanismen zur Sichtbarkeitssteuerung. Diese funktionieren weiterhin, sollten aber in neuen Projekten nicht mehr verwendet werden:

• hide-with (deprecated): verhält sich wie visibility="komponente", unterstützt aber kein :inverse.
• filter-container und suggest-container: Workarounds, die durch visibility ersetzt werden, aber weiterhin nutzbar sind.