Web Components

shield-divider

Dezente Trennlinie fuer visuelle Gruppierung von Inhalten, horizontal oder vertikal.

Verwendung

Fuer visuelle Trennung zwischen Inhaltsgruppen nutzen.
Vertikale Variante nur in Layouts mit definierter Hoehe einsetzen.

Storybook Story

Eingebettete Storybook-Story mit Controls.

HTMLAngular

Divider Horizontal (HTML)

Default-Variante fuer Trennlinien zwischen Sektionen.

Oberer Block

Unterer Block

Code

<div style="display:grid; gap:12px;">
  <span>Oberer Block</span>
  <shield-divider orientation="horizontal"></shield-divider>
  <span>Unterer Block</span>
</div>

Divider Horizontal (Angular Island)

Gleiche Demo mit Angular-Wrapper.

Oberer Block

Unterer Block

Code

import { Component } from '@angular/core';
import { ShieldDivider, ShieldDividerOrientation } from '@shield/angular';

@Component({
  standalone: true,
  imports: [ShieldDivider],
  template: `
    <div style="display:grid; gap:12px;">
      <span>Oberer Block</span>
      <shield-divider [orientation]="Orientation.HORIZONTAL"></shield-divider>
      <span>Unterer Block</span>
    </div>
  `
})
export class AngularDividerHorizontalDemoComponent {
  readonly Orientation = ShieldDividerOrientation;
}

HTMLAngular

Divider Vertical (HTML)

Vertikale Trennung fuer horizontale Layoutgruppen.

Links

Rechts

Code

<div style="display:flex; align-items:center; gap:12px; min-height:40px;">
  <span>Links</span>
  <shield-divider orientation="vertical"></shield-divider>
  <span>Rechts</span>
</div>

Divider Vertical (Angular Island)

Vertikale Trennung mit Angular-Wrapper.

Links

Rechts

Code

import { Component } from '@angular/core';
import { ShieldDivider, ShieldDividerOrientation } from '@shield/angular';

@Component({
  standalone: true,
  imports: [ShieldDivider],
  template: `
    <div style="display:flex; align-items:center; gap:12px; min-height:40px;">
      <span>Links</span>
      <shield-divider [orientation]="Orientation.VERTICAL"></shield-divider>
      <span>Rechts</span>
    </div>
  `
})
export class AngularDividerVerticalDemoComponent {
  readonly Orientation = ShieldDividerOrientation;
}