Komponenten / Framework

Steuerelemente

Buttons mit Ladezustand, Icon-Buttons, Play-Button, Toggle, Switch und Radio-Gruppe.

Button: Ladezustand & volle Breite

Während des Speicherns zeigt der Button einen Spinner, ist gesperrt und meldet aria-busy.

import { Button } from '@rapold/framework-core'

<Button loading={saving} onClick={save}>Entwurf speichern</Button>
<Button fullWidth variant="secondary">Alle Sendungen anzeigen</Button>

IconButton

Reine Icon-Aktionen. aria-label ist Pflicht; die Trefferfläche beträgt immer mindestens 44 px.

import { IconButton } from '@rapold/framework-core'
import { Share2 } from 'lucide-react'

<IconButton aria-label="Teilen" variant="glass" shape="round">
  <Share2 />
</IconButton>

PlayButton

Ein Wiedergabeknopf für alle Ansichten. Zustände idle, loading, playing, paused; Material Glas oder solid. Der Name bleibt fest, der Zustand läuft über aria-pressed und eine Live-Region.

Mini-Player · Zustand: paused

import { PlayButton } from '@rapold/framework-core'

<PlayButton
  label="Morgenjournal abspielen"
  state={state}            // 'idle' | 'loading' | 'playing' | 'paused'
  size="lg"                // sm 36 · md 44 · lg 64 · xl 112
  material="glass"         // oder 'solid'
  onPlay={start}
  onPause={pause}
/>

Toggle & LikeToggle

Zweizustands-Knöpfe mit aria-pressed. LikeToggle ist ein Preset mit Herz, gefüllt wenn aktiv.

import { Toggle, LikeToggle } from '@rapold/framework-core'

<Toggle aria-label="Untertitel anzeigen">Untertitel</Toggle>
<LikeToggle pressed={liked} onPressedChange={setLiked} />

Switch

Für Einstellungen mit sofortiger Wirkung. Die Speicherung der Präferenz bleibt Sache der App.

Transkript mitscrollen

Benachrichtigung bei neuer Folge

Automatische Updates (vom Betrieb gesperrt)

import { Switch, Label } from '@rapold/framework-core'

<Switch id="follow" checked={follow} onCheckedChange={setFollow} />
<Label htmlFor="follow">Transkript mitscrollen</Label>

RadioGroup

Audioqualität

AutomatischPasst die Bitrate an die Verbindung an. Spart mobile Daten.HochImmer die beste verfügbare Qualität, auch unterwegs.Nur WLANBald verfügbar.

DeutschFranzösischItalienisch

import { RadioGroup, RadioGroupOption } from '@rapold/framework-core'

<RadioGroup value={quality} onValueChange={setQuality} aria-label="Audioqualität">
  <RadioGroupOption value="auto" variant="card" label="Automatisch"
    description="Passt die Bitrate an die Verbindung an." />
  <RadioGroupOption value="high" variant="card" label="Hoch" />
</RadioGroup>

Komponenten werden geladen …