lux‐accordion v14

LUX-Accordion

• LUX-Accordion
  • Overview / API
    • Allgemein
    • @Input
  • Components
    • LuxPanelComponent
      • Allgemein
      • @Input
      • @Output
    • LuxPanelHeaderTitleComponent
    • LuxPanelHeaderDescriptionComponent
    • LuxPanelContentComponent
    • LuxPanelActionComponent
  • Beispiele
    • 1. Accordion
    • 2. Panel
  • Zusatzinformationen

Overview / API

Allgemein

Name	Beschreibung
import	LuxLayoutModule
selector	lux-accordion

@Input

Name	Typ	Beschreibung
luxMode	LuxModeType (default | flat)	Gibt an, ob es Abstände zwischen den Panels gibt. default = mit Gap flat = ohne Gap
luxMulti	boolean	Gibt an, ob mehrere Panels aufgeklappt sein können.
luxHideToggle	boolean	Gibt an, ob das Toggle-Icon ausgeblendet werden soll.
luxDisabled	boolean	Gibt an, ob das Accordion deaktiviert ist.
luxCollapsedHeaderHeight	string (z.B. 20px oder 1em)	Gibt an, wie hoch die Panelheader im eingeklappten Zustand sind.
luxExpandedHeaderHeight	string (z.B. 20px oder 1em)	Gibt an, wie hoch die Panelheader im ausgeklappten Zustand sind.

Components

LuxPanelComponent

Eine LuxPanelComponent stellt einen ein- und ausklappbaren Bereich dar. Es gibt einen Titel, einen Inhaltsbereich und eine Actionzeile (z.B. für Buttons).

Allgemein

Name	Beschreibung
selector	lux-panel

@Input

Name	Typ	Beschreibung
luxDisabled	boolean	Gibt an, ob das Panel deaktiviert ist.
luxExpanded	boolean	Gibt an, ob das Panel aufgeklappt ist. (Two-Way-Binding möglich)
luxHideToggle	boolean	Gibt an, ob das Toggle-Icon ausgeblendet werden soll.
luxCollapsedHeaderHeight	string (z.B. 20px oder 1em)	Gibt an, wie hoch der Header im eingeklappten Zustand ist.
luxExpandedHeaderHeight	string (z.B. 20px oder 1em)	Gibt an, wie hoch der Header im ausgeklappten Zustand ist.

@Output

Name	Typ	Beschreibung
luxOpened	EventEmitter <void>	Das Event wird geworfen, nachdem das Panel ausgeklappt wurde.
luxClosed	EventEmitter <void>	Das Event wird geworfen, nachdem das Panel eingelappt wurde.
luxExpandedChange	EventEmitter <boolean>	Das Event wird geworfen, wenn das Panel ein- oder ausgeklappt wurde.

LuxPanelHeaderTitleComponent

Diese Komponente enthält den Titel des Panels.

Name	Beschreibung
selector	lux-panel-header-title

LuxPanelHeaderDescriptionComponent

Diese Komponente kann einen beschreibenden Text rechts neben dem LuxPanelHeaderTitle darstellen.

Name	Beschreibung
selector	lux-panel-header-description

LuxPanelContentComponent

Diese Komponente enthält den Inhalt des Panels. Der Inhalt wird nur dargestellt, wenn das Panel aufgeklappt ist.

Name	Beschreibung
selector	lux-panel-content

LuxPanelActionComponent

Diese Komponente kann Buttons oder Links beinhalten, die unterhalb des Inhalts angezeigt werden.

Name	Beschreibung
selector	lux-panel-action

Beispiele

1. Accordion

Html

<lux-accordion luxMode="default" [luxMulti]="true">
  <lux-panel>
    <lux-panel-header-title>Antrag 4711</lux-panel-header-title>
    <lux-panel-header-description
      >Lorem ipsum dolor sit amet, consetetur sadipscing elitr
    </lux-panel-header-description>
    <lux-panel-content>
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
        amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
        rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
        ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
        elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
        aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus
        est Lorem ipsum dolor sit amet.
      </p>
    </lux-panel-content>
    <lux-panel-action>
      <lux-button
        luxLabel="Details"
        luxColor="primary"
        [luxRaised]="true"
      ></lux-button>
    </lux-panel-action>
  </lux-panel>
  <lux-panel>
    <lux-panel-header-title>Antrag 2012</lux-panel-header-title>
    <lux-panel-header-description
      >Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
      suscipit</lux-panel-header-description
    >
    <lux-panel-content></lux-panel-content>
    <lux-panel-action>
      <lux-button
        luxLabel="Details"
        luxColor="primary"
        [luxRaised]="true"
      ></lux-button>
    </lux-panel-action>
  </lux-panel>
  <lux-panel [luxHideToggle]="true" [luxDisabled]="true">
    <lux-panel-header-title>Antrag 1234</lux-panel-header-title>
    <lux-panel-header-description
      >Duis autem vel eum iriure dolor in
      hendrerit</lux-panel-header-description
    >
    <lux-panel-content>Hier steht der Inhalt.</lux-panel-content>
  </lux-panel>
</lux-accordion>

2. Panel

Html

<lux-panel>
  <lux-panel-header-title>Antrag 4711</lux-panel-header-title>
  <lux-panel-header-description
    >Lorem ipsum dolor sit amet, consetetur sadipscing elitr
  </lux-panel-header-description>
  <lux-panel-content>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
      sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
      diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
      erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
      dolor sit amet.
    </p>
  </lux-panel-content>
  <lux-panel-action>
    <lux-button
      luxLabel="Details"
      luxColor="primary"
      [luxRaised]="true"
    ></lux-button>
  </lux-panel-action>
</lux-panel>

Zusatzinformationen

Die LuxAccordionComponent bietet die Möglichkeit, mehrere LuxPanelComponents zusammenzufassen und zu steuern. Die LuxPanelComponents sind auch alleinstehend funktionsfähig und benötigen kein umgebenes LuxAccordion.