lux‐link‐plain v18

LUX-Link-Plain

• LUX-Link-Plain
  • Overview / API
    • Allgemein
    • @Input
    • @Output
  • Beispiele
    • 1. Normale Links
    • 2. Links mit Icons
    • 3. Links mit Custom-Class

Overview / API

Allgemein

Name	Beschreibung
import	LuxActionModule
selector	lux-link-plain

@Input

Name	Typ	Beschreibung
luxHref	string	Der Href-Inhalt (z.B. http://www.ihk-gfi.de). Wenn der luxHref ohne http beginnt, navigiert der LuxLink innerhalb der Angular-Applikation (also auf andere Components).
luxBlank	boolean	Ermöglicht es, externe Links in einem neuen Tab zu öffnen.
luxLabel	string	Bestimmt das Label, welches in dieser Component angezeigt werden soll.
luxIconName	string	Ein LUX-Iconname.
luxIconShowRight	boolean	Gibt an, ob das Icon rechts angezeigt wird.
luxTagId	string	LUX-Tag-Id für die automatischen Tests.
luxDisabled	boolean	Gibt an, ob das Element deaktiviert ist.
luxCustomClass	string	Mit dieser Property kann ein individueller Klassename der Komponente mitgegeben werden.

@Output

Name	Typ	Beschreibung
luxClicked	EventEmitter <Event>	Event welches beim Klick auf den Button ausgelöst wird und einen Clicked-Event als Parameter enthält.

Beispiele

1. Normale Links

Html

<p>
  Lorem ipsum dolor sit amet,
  <lux-link-plain
    luxLabel="consetetur"
    luxHref="http://www.ihk-gfi.de"
  ></lux-link-plain>
  sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
  magna aliquyam erat, sed diam voluptua.
</p>

2. Links mit Icons

Html

<p>
  Lorem ipsum dolor sit amet, &nbsp;<lux-link-plain
    luxLabel="consetetur"
    luxHref="http://www.ihk-gfi.de"
    luxIconName="lux-interface-link"
  ></lux-link-plain>
  sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
  magna aliquyam erat, sed diam voluptua.
</p>
<p>
  Lorem ipsum dolor sit amet, &nbsp;<lux-link-plain
    luxLabel="consetetur"
    luxHref="http://www.ihk-gfi.de"
    luxIconName="lux-interface-link"
    [luxIconShowRight]="true"
  ></lux-link-plain>
  sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
  magna aliquyam erat, sed diam voluptua.
</p>

3. Links mit Custom-Class

Html

Dies ist ein<lux-link-plain
  luxLabel="Beispiel-Link"
  luxHref="http://www.ihk-gfi.de"
  luxCustomClass="my-custom-class"
></lux-link-plain
>im Fließtext.

scss

.my-custom-class {
  color: var(--lux-theme-accent-color);
  font-weight: 600;
  font-size: larger;
  font-style: italic;
  font-family: Georgia, "Times New Roman", Times, serif;
  margin: 0 0.5em;
}