Komponentenbibliothek · v1.0

Gängige UI-Komponenten

Die Bausteine der Kashew-App, gestaltet aus den System-Tokens — Graustufenflächen, ein goldener Akzent nur dort, wo Aufmerksamkeit verdient ist, SF Pro für Wörter, SF Mono für Geld. Schalte das Theme um, um beide Modi zu prüfen.

01

Buttons & Aktionen

HierarchieButtonStyle

Primär = goldene Fläche + Ink-Label. Ein Primär pro Screen.

Icon & Zustände.controlSize
Größenskalamin-height · pt
XL · 56pt
Groß · 50pt
Mittel · 44pt
Klein · 36pt
XS · 28pt

Primäre Aktionen liegen im komfortablen Bereich von 50–56pt. 44pt (Mittel) ist Apples Mindestmaß zum Antippen.

Tap-Ziel vs. visuelle Größe≥ 44×44pt hit area

Gestrichelt = unsichtbarer 44pt-Trefferbereich um eine kleinere Glyphe.

Unter 44pt den sichtbaren Button kompakt halten, aber den antippbaren Bereich auf 44pt auspolstern. Benachbarte kleine Bedienelemente ≥ 8pt auseinander platzieren, um Fehltaps zu vermeiden.

02

Eingaben & Felder

TextfeldTextField
Validierung & Suche.foregroundStyle
Ungültige Kontonummer
Betragseingabe.amount font
50.00

Geldeingaben nutzen die SF Mono / Tabellenschrift.

03

Auswahl & Schalter

SegmentiertPicker .segmented
Benachrichtigungen
Aufrundungen
AuswahlToggle / Picker
Sofortüberweisung
Standard (1–2 Tage)
Meine Daten speichern
StepperStepper
3

Eine Rechnung zwischen Personen teilen.

04

Chips, Tags & Badges

Filter-Chipsselectable
AlleEssenTransportRechnungenFreizeit
Status-Tags & BadgesLabel / overlay
+2.4%−12%AusstehendGeplant3
05

Karten & Flächen

Kontokarteelevation-2
Gesamtsaldo
€ 4,820.17
•••• 4291
Statistik-Kartenflat surface
Diesen Monat ausgegeben
€ 1,240
8 % unter Budget
Info / Calloutaccent bar

Aufrundungen sind an

Das Kleingeld aus jedem Einkauf wandert in deinen Reise-Topf.

06

Listenzeilen

TransaktionenList row
Whole Foods
Lebensmittel · Heute
42.18
Gehalt
Einnahme · 28. Mai
2,400.00
Reise-Topf
Sparen · 26. Mai
100.00
Einstellungen & NavigationNavigationLink
Konto
Persönliche Daten
Sicherheit
Benachrichtigungen
07

Sheets & Dialoge

Sheet & Dialog.sheet / .alert

Sende 120,00 €

An Jordan Lee · kommt sofort an

Diesen Topf löschen?

Das Guthaben von 100 € geht zurück auf dein Hauptkonto.
08

Feedback & Status

Toasts & Banner+ icon, never color alone
Überweisung erfolgreich gesendet
Du bist nahe an deinem Monatslimit
Nicht genügend Guthaben
Leerer ZustandContentUnavailableView

Noch keine Transaktionen

Wenn du Geld ausgibst oder bekommst, erscheint es hier.

Lade-Skelette.redacted(reason:) · shimmer
Saldokarte
Transaktionszeilen
Karten & Text

Skelette spiegeln das echte Layout, damit Inhalte ohne Sprung einrücken. Passe Form und Größe des finalen Elements an; das Schimmern pausiert bei reduzierter Bewegung. In SwiftUI ist .redacted(reason: .placeholder) auf der echten View der native Weg.

09

Fortschritt & Daten

Budget-BalkenProgressView
Lebensmittel€ 320 / 400
Essen gehen€ 210 / 180
SparzielGauge
65%
€ 1.300 von 2.000
Ausgabenaufteilungsegmented
EssenTransportRechnungenSonstiges
10

Avatare, Kategorien & Tastenfeld

Avatareinitials / image
AMJL
Kategorie-Tokenstinted fill
Numerisches Tastenfeldcustom input