Demo Controls

Shield + Astro Start

Diese Beispielseite zeigt die neue Astro-App mit eurem Theme, Utility-CSS und Web Components.

Loslegen Doku ansehen Beispiel öffnen

Badge-Komponente (Web Component Beispiel):

Theme wird zwischen @shield/tokens/shield-theme.css und @shield/tokens/horizon-theme.css umgeschaltet. Utilities kommen aus @shield/css-utils und UI-Elemente aus @shield/webcomponents.

Stack & Links

Aktuell eingesetzte Software in dieser Demo:

Astro: 5.17.2

Stencil: 4.43.0

Theme/Utilities: @shield/tokens + @shield/css-utils

Node: v22.22.0

npm/pnpm: 10.9.4 / 9.15.0

Git: unknown (unknown)

Storybook öffnen Shield CDN öffnen React Demo öffnen React CDN Demo öffnen Angular Demo öffnen Angular CDN Demo öffnen

Astro + React/Angular Output

Beide Demos nutzen shield-text-input mit State-Synchronisierung direkt in Astro Islands.

React Output in Astro

Implementierung in diesem Beispiel: 

import { useState } from 'react';
import { ShieldTextInput } from '@shield/react';
const [value, setValue] = useState('Hallo aus React in Astro');
<ShieldTextInput
  label="React in Astro (Two-Way Binding)"
  placeholder="Schreib was..."
  value={value}
  onValueChange={(event) => setValue(event.detail ?? '')}
/>

Angular Output in Astro

Aktueller Angular-State: Hallo aus Angular in Astro

Implementierung in diesem Beispiel: 

import { Component } from '@angular/core';
import { ShieldTextInput } from '@shield/angular';
@Component({
  standalone: true,
  imports: [ShieldTextInput],
  template: `
    <shield-text-input
      label="Angular in Astro (Two-Way Binding)"
      placeholder="Schreib was..."
      [value]="value"
      (valueChange)="onValueChange($event)"
    ></shield-text-input>
  `
})
export class AngularTextInputDemoComponent {
  value = 'Hallo aus Angular in Astro';
  onValueChange(event: CustomEvent<string>) {
    this.value = event.detail ?? '';
  }
}