• LUX-App-Footer
  • Overview / API
    • Allgemein
    • @Input
    • @ViewChild
  • Services
    • LuxAppFooterButtonService
    • LuxAppFooterLinkService
    • LuxAppFooterFixedService
  • Classes / Interfaces
    • LuxAppFooterButtonInfo
    • LuxAppFooterLinkInfo
  • Beispiele
    • 1. Footerbuttons definieren
    • 2. Zentrierter Inhalt des App-Footers
    • 3. Footer nicht fixiert

Dieser Service bietet die Möglichkeit Buttons rechtsbündig eine Reihe von LuxButtonComponents darzustellen. Der Service nimmt einzelne Objekte bzw. Arrays von LuxAppFooterButtonInfo entgegen.

!!! In der ngOnDestroy-Methode muss zwingend die Subscription gelöst und ggf. die Buttons zurückgesetzt werden.

ngOnDestroy() {
  this.buttonService.buttonInfos = [];
  this.buttonSubscription.unsubscribe();
}

Dieser Service bietet die Möglichkeit Links linksbündig eine Reihe von LuxLinkComponents darzustellen. darzustellen. Der Service nimmt einzelne Objekte bzw. Arrays von LuxAppFooterLinkInfo entgegen.

Wichtig! Bitte den Hinweis im Abschnitt 3. Footer nicht fixiert beachten.

Die Buttons können über den LuxAppFooterButtonService hinzugefügt werden. Der Service nimmt Objekte der Klasse LuxAppFooterButtonInfo (implementiert das Interface ILuxAppFooterButtonInfo) entgegen und generiert daraus das Button-Menü im Footer.

Die Klasse bietet über die statische generateInfo-Methode eine Factory-Methode für die Erzeugung an.

Links können über den LuxAppFooterLinkService hinzugefügt werden. Der Service nimmt Objekte der Klasse LuxAppFooterLinkInfo (implementiert das Interface ILuxAppFooterLinkInfo) entgegen und generiert daraus das Button-Menü im Footer. Ein Beispiel ist in dem Blueprint zu sehen. Der Link-Service nimmt Objekte der Klasse LuxAppFooterLinkInfo (implementiert das Interface ILuxAppFooterLinkInfo) entgegen und generiert aus jedem einzelnen Objekt einen Link, der zu einer Seite der Webanwendung führt. Ist das Browserfenster klein, so werden ab einer gewissen Breite nur noch die Links gezeigt, die das alwaysVisible Flag gesetzt haben.

Die Klasse bietet über die statische generateInfo-Methode eine Factory-Methode für die Erzeugung an.

Ts

  delegateTaskBtn = LuxAppFooterButtonInfo.generateInfo({
    label: 'Delegieren',
    cmd: 'delegateTask',
    alwaysVisible: false,
    onClick: this.onDelegateTask.bind(this)
  });

  finishTaskBtn = LuxAppFooterButtonInfo.generateInfo({
    label: 'Abschließen',
    cmd: 'finishTask',
    color: 'primary',
    disabled: false,
    alwaysVisible: true,
    onClick: this.onFinishTask.bind(this)
  });

  cancelTaskBtn = LuxAppFooterButtonInfo.generateInfo({
    label: 'Abbrechen',
    cmd: 'cancelTask',
    color: 'warn',
    onClick: this.onCancelTask.bind(this)
  });

  constructor(private buttonService: LuxAppFooterButtonService, private router: Router, private linkService: LuxAppFooterLinkService, private themeService: LuxThemeService) {
    themeService.loadTheme();
    router.initialNavigation();
  }

  ngOnInit(): void {
    this.linkService.linkInfos = [
      new LuxAppFooterLinkInfo('Datenschutz', 'datenschutz', true),
      new LuxAppFooterLinkInfo('Impressum', 'impressum')
    ];

    // Button manipulieren
    this.cancelTaskBtn.disabled = true;

    // Direkt hinzufügen
    this.buttonService.buttonInfos = [this.cancelTaskBtn, this.delegateTaskBtn];

    // Später hinzufügen
    this.buttonService.pushButtonInfos(this.finishTaskBtn);
  }

  ngOnDestroy() {
    this.buttonService.buttonInfos = [];
  }

  onCancelTask() {
    console.log('cancelTask clicked');
  }

  onDelegateTask() {
    console.log('delegateTask clicked');
  }

  onFinishTask() {
    console.log('finishTask clicked');
  }

Html

<div class="lux-app-container">
  <lux-app-header></lux-app-header>
  <lux-app-content></lux-app-content>
  <lux-app-footer></lux-app-footer>
</div>

Empfehlung: Die Werte für luxCenteredView und luxCenteredWidth über eine Config-Datei zu setzen vgl.. Damit werden die selben Parameter auch beim App-Header-Ac gesetzt. Die centeredWidth kann optional verändert werden (default=1500px). Aufgrund der unterschiedlichen Möglichkeiten der App-Gestaltung, muss in allen Fällen der Content-Bereich selbstständig angepasst werden. Dazu kann die layout-Klasse "lux-container" verwendet werden und z.B. dem Host-Element als Attribut übergeben werden.

Bei der Verwendung von Mediaquerries, lux-tabs und lux-table ist das gewünschte Responsive Verhalten zu testen und gegebenenfalls anzupassen.

Ts

const myConfiguration: LuxComponentsConfigParameters = {
 
  viewConfiguration: {
    centerdView: true,
    centeredWidth: '1000px',
  }
};

app.module.ts:

const luxComponentsConfig: LuxComponentsConfigParameters = {
  appFooter: {
    fixedDesktop: false,
    fixedMobile: false
  }
};

app.components.ts:

constructor(public fixedFooterService: LuxAppFooterFixedService)

app.components.html:

<lux-app-content luxAriaRoleMainLabel="">
  <lux-app-footer *ngIf="this.luxAppFooter !== 'none' && ((fixedFooterService.fixedModeAsObservable | async) === false)" luxVersion="{{luxVersion}}"></lux-app-footer>
</lux-app-content>
<lux-app-footer *ngIf="this.luxAppFooter !== 'none' && ((fixedFooterService.fixedModeAsObservable | async) === true)" luxVersion="{{luxVersion}}"></lux-app-footer>

Wichtig!

Wenn der Footer nicht fixiert ist, kann es auf Seiten mit wenig Inhalt dazu kommen, dass der Footer hoch rutscht (siehe Abbildung unten). D.h. alle Seiten sollten so gebaut werden, dass der Footer auf Seiten mit wenig Inhalt trotzdem am unteren Rand angezeigt wird.