Vorsicht

Dies ist die Dokumentation des aktuellen Entwicklungszweigs der CometVisu. Es besteht daher die Möglichkeit, dass einige der hier beschriebenen Features mit dem aktuellsten Release der CometVisu nicht genutzt werden können.

Das Link Widget

Autor: Tobias Bräutigam

Verfügbar seit: 2022

Beschreibung

Das Link-Widget öffnet eine URL in einem neuen Tab oder der selbe Seite. Es besteht aus einem Icon und einem optionalen Text.

<cv-link href="https://www.google.de">
    <cv-icon slot="icon">ri-google-fill</cv-icon>
    <span slot="label">Google</span>
</cv-link>

Als alternative kann auch ein Bild verwendet werden:

<cv-link href="https://www.google.de">
    <cv-image slot="icon" src="resources/config/media/image.png" />
    <span slot="label">Google</span>
</cv-link>

Erlaubte Attribute

Element	Attribut
	Name	Inhalt	Beschreibung
cv-link	size	button, 0.5x0.5, 1x0.5, 1x1, 2x1, 2x1.5, 1x2, 2x2, 2x4 oder 4x2	Größe der Kachel in {Spalten}x{Zeilen}, 1x1 ist die Standardgröße.
	href	anyURI	URL des Links.
	target	_blank oder _self	Steuert wo der Link geöffnet werden soll). _blank: In neuem Fenster, _self: im selben Fenster (default: _blank).
	visible-on	mobile oder desktop	Steuert die Sichtbarkeit dieses Elements anhand der Bildschirmgröße.
	class	Text	Füge dieses Attribut der CSS Klasse hinzu, so dass das Widget durch ein eigenes Stylesheet zusätzlich formatiert werden kann.
	style	Text	Individuelle CSS style Regeln für dieses Widget.

Erlaubte Kind-Elemente und deren Attribute

Element	Attribut
Struktur	Name	Inhalt	Beschreibung
cv-link cv-image	src	Text
	refresh	Zahl	Zeitintervall in Sekunden in dem dieses Widget aktualisiert wird.
	visible-on	mobile oder desktop	Steuert die Sichtbarkeit dieses Elements anhand der Bildschirmgröße.
	class	Text	Füge dieses Attribut der CSS Klasse hinzu, so dass das Widget durch ein eigenes Stylesheet zusätzlich formatiert werden kann.
	style	Text	Individuelle CSS style Regeln für dieses Widget.
	proxy	true oder false	Proxy im Backend benutzen, um Ladefehler zu vermeiden oder Zugangsdaten aus den versteckten Konfiguration zu nutzen.
	auth-type	basic oder bearer	Art der Authentifizierung, falls erforderlich.
	config-section	Text	Uri und Zugangsdaten aus dieser Sektion der versteckten Konfiguration verwenden.
	username	Text	Benutzername für die Authentifizierung (oder token für auth-type=bearer).
	password	Text	Passwort für die Authentifizierung.
	self-signed	true oder false	Zertifikatsprüfung deaktivieren, um Seiten mit selbst-signierten Zertifikaten laden zu können..
cv-link cv-image cv-address	transform	Text	Umwandlung des Bus-System Wertes um angezeigt werden zu können.
	mode	disable, read, write oder readwrite	„disable“ deaktiviert die Kommunikation, bei „read“ wird nur vom Backend gelesen, bei „write“ wird nur geschrieben und „readwrite“ wird die Adresse zum Lesen und zum Schreiben verwendet.
	variant	Text
	format-pos	Zahl	Position für Format-String wenn mehrere Adressen gleichzeitig genutzt werden.
	selector	Text	Nur MQTT: JSON Selektor
	qos	Zahl	Nur MQTT: QoS
	retain	true oder false	Nur MQTT: retain Flag
	ignore-error	true oder false	Nur MQTT: ignoriere Dekodierfehler.
cv-link cv-image cv-address #text		Text	Die Gruppenadresse (z.B: 12/0/7) bei KNX-Backends, der Item-Name beim openHAB-Backend oder das Topic bei MQTT.

Element	Attribut
Struktur	Name	Inhalt	Beschreibung
cv-link cv-icon	size	small, large, x-large, xx-large oder xxx-large	Legt die Größe des Icons fest.
	color	Text	Farbe des Icons.
	visible-on	mobile oder desktop	Steuert die Sichtbarkeit dieses Elements anhand der Bildschirmgröße.
	class	Text	Füge dieses Attribut der CSS Klasse hinzu, so dass das Widget durch ein eigenes Stylesheet zusätzlich formatiert werden kann.
	style	Text	Individuelle CSS style Regeln für dieses Widget.
cv-link cv-icon #text		Text

Element	Attribut
Struktur	Name	Inhalt	Beschreibung
cv-link span	slot	Text
	tr	true oder false	Legt fest, dass der Text-Inhalt dieses Elements übersetzt werden soll.
cv-link span #text		Text