# Tamagui-Designsystem ## Vorschau der Tamagui-Designsystem-Oberfläche Fügen Sie eine Gewohnheit hinzu, markieren Sie den Fortschritt, filtern Sie unerledigte Einträge und wechseln Sie zum blauen Theme. ## Designreferenz für das Tamagui-Designsystem Von @tamagui/config/v5 und @tamagui/themes in Version 2.7.7 exportierte Werte sowie verifizierte Verträge nativer Komponenten. ### v5-Größen-Design-Tokens | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | size.$1 | 20 | Tatsächlicher Konfigurationswert aus v5. Derselbe numerische Tokenname hat bei Größe, Abstand und Radius jeweils eine andere Bedeutung. Behandeln Sie $4 nicht als universellen Pixelwert. | | size.$2 | 28 | Tatsächlicher Konfigurationswert aus v5. Derselbe numerische Tokenname hat bei Größe, Abstand und Radius jeweils eine andere Bedeutung. Behandeln Sie $4 nicht als universellen Pixelwert. | | size.$3 | 36 | Tatsächlicher Konfigurationswert aus v5. Derselbe numerische Tokenname hat bei Größe, Abstand und Radius jeweils eine andere Bedeutung. Behandeln Sie $4 nicht als universellen Pixelwert. | | size.$4 | 44 | Tatsächlicher Konfigurationswert aus v5. Derselbe numerische Tokenname hat bei Größe, Abstand und Radius jeweils eine andere Bedeutung. Behandeln Sie $4 nicht als universellen Pixelwert. | | size.$5 | 52 | Tatsächlicher Konfigurationswert aus v5. Derselbe numerische Tokenname hat bei Größe, Abstand und Radius jeweils eine andere Bedeutung. Behandeln Sie $4 nicht als universellen Pixelwert. | | size.$6 | 64 | Tatsächlicher Konfigurationswert aus v5. Derselbe numerische Tokenname hat bei Größe, Abstand und Radius jeweils eine andere Bedeutung. Behandeln Sie $4 nicht als universellen Pixelwert. | ### v5-Abstands-Design-Tokens | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | space.$1 | 2 | Tatsächlicher Konfigurationswert aus v5. Derselbe numerische Tokenname hat bei Größe, Abstand und Radius jeweils eine andere Bedeutung. Behandeln Sie $4 nicht als universellen Pixelwert. | | space.$1.5 | 4 | Tatsächlicher Konfigurationswert aus v5. Derselbe numerische Tokenname hat bei Größe, Abstand und Radius jeweils eine andere Bedeutung. Behandeln Sie $4 nicht als universellen Pixelwert. | | space.$2 | 7 | Tatsächlicher Konfigurationswert aus v5. Derselbe numerische Tokenname hat bei Größe, Abstand und Radius jeweils eine andere Bedeutung. Behandeln Sie $4 nicht als universellen Pixelwert. | | space.$2.5 | 10 | Tatsächlicher Konfigurationswert aus v5. Derselbe numerische Tokenname hat bei Größe, Abstand und Radius jeweils eine andere Bedeutung. Behandeln Sie $4 nicht als universellen Pixelwert. | | space.$3 | 13 | Tatsächlicher Konfigurationswert aus v5. Derselbe numerische Tokenname hat bei Größe, Abstand und Radius jeweils eine andere Bedeutung. Behandeln Sie $4 nicht als universellen Pixelwert. | | space.$3.5 | 16 | Tatsächlicher Konfigurationswert aus v5. Derselbe numerische Tokenname hat bei Größe, Abstand und Radius jeweils eine andere Bedeutung. Behandeln Sie $4 nicht als universellen Pixelwert. | | space.$4 | 18 | Tatsächlicher Konfigurationswert aus v5. Derselbe numerische Tokenname hat bei Größe, Abstand und Radius jeweils eine andere Bedeutung. Behandeln Sie $4 nicht als universellen Pixelwert. | | space.$5 | 24 | Tatsächlicher Konfigurationswert aus v5. Derselbe numerische Tokenname hat bei Größe, Abstand und Radius jeweils eine andere Bedeutung. Behandeln Sie $4 nicht als universellen Pixelwert. | | space.$6 | 32 | Tatsächlicher Konfigurationswert aus v5. Derselbe numerische Tokenname hat bei Größe, Abstand und Radius jeweils eine andere Bedeutung. Behandeln Sie $4 nicht als universellen Pixelwert. | ### v5-Radius-Design-Tokens | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | radius.0 | 0 | Tatsächlicher Konfigurationswert aus v5. Derselbe numerische Tokenname hat bei Größe, Abstand und Radius jeweils eine andere Bedeutung. Behandeln Sie $4 nicht als universellen Pixelwert. | | radius.1 | 3 | Tatsächlicher Konfigurationswert aus v5. Derselbe numerische Tokenname hat bei Größe, Abstand und Radius jeweils eine andere Bedeutung. Behandeln Sie $4 nicht als universellen Pixelwert. | | radius.2 | 5 | Tatsächlicher Konfigurationswert aus v5. Derselbe numerische Tokenname hat bei Größe, Abstand und Radius jeweils eine andere Bedeutung. Behandeln Sie $4 nicht als universellen Pixelwert. | | radius.3 | 7 | Tatsächlicher Konfigurationswert aus v5. Derselbe numerische Tokenname hat bei Größe, Abstand und Radius jeweils eine andere Bedeutung. Behandeln Sie $4 nicht als universellen Pixelwert. | | radius.4 | 9 | Tatsächlicher Konfigurationswert aus v5. Derselbe numerische Tokenname hat bei Größe, Abstand und Radius jeweils eine andere Bedeutung. Behandeln Sie $4 nicht als universellen Pixelwert. | | radius.5 | 10 | Tatsächlicher Konfigurationswert aus v5. Derselbe numerische Tokenname hat bei Größe, Abstand und Radius jeweils eine andere Bedeutung. Behandeln Sie $4 nicht als universellen Pixelwert. | | radius.6 | 16 | Tatsächlicher Konfigurationswert aus v5. Derselbe numerische Tokenname hat bei Größe, Abstand und Radius jeweils eine andere Bedeutung. Behandeln Sie $4 nicht als universellen Pixelwert. | ### Semantisches light_blue-Theme | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | light_blue.background | hsla(207, 100%, 98%, 1) | Aufgelöste semantische Rolle des blauen Themes in v5. Für Hover-, Drück- oder Aktivzustände kann die Komponente ein spezifischeres untergeordnetes Theme auswählen. | | light_blue.backgroundHover | hsla(210, 100%, 99%, 1) | Aufgelöste semantische Rolle des blauen Themes in v5. Für Hover-, Drück- oder Aktivzustände kann die Komponente ein spezifischeres untergeordnetes Theme auswählen. | | light_blue.backgroundPress | hsla(205, 92%, 95%, 1) | Aufgelöste semantische Rolle des blauen Themes in v5. Für Hover-, Drück- oder Aktivzustände kann die Komponente ein spezifischeres untergeordnetes Theme auswählen. | | light_blue.color | hsla(216, 71%, 23%, 1) | Aufgelöste semantische Rolle des blauen Themes in v5. Für Hover-, Drück- oder Aktivzustände kann die Komponente ein spezifischeres untergeordnetes Theme auswählen. | | light_blue.borderColor | hsla(203, 100%, 92%, 1) | Aufgelöste semantische Rolle des blauen Themes in v5. Für Hover-, Drück- oder Aktivzustände kann die Komponente ein spezifischeres untergeordnetes Theme auswählen. | | light_blue.borderColorFocus | hsla(203, 100%, 92%, 1) | Aufgelöste semantische Rolle des blauen Themes in v5. Für Hover-, Drück- oder Aktivzustände kann die Komponente ein spezifischeres untergeordnetes Theme auswählen. | | light_blue.placeholderColor | hsla(206, 100%, 50%, 1) | Aufgelöste semantische Rolle des blauen Themes in v5. Für Hover-, Drück- oder Aktivzustände kann die Komponente ein spezifischeres untergeordnetes Theme auswählen. | ### Semantisches dark_blue-Theme | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | dark_blue.background | hsla(218, 39%, 11%, 1) | Aufgelöste semantische Rolle des blauen Themes in v5. Für Hover-, Drück- oder Aktivzustände kann die Komponente ein spezifischeres untergeordnetes Theme auswählen. | | dark_blue.backgroundHover | hsla(212, 69%, 16%, 1) | Aufgelöste semantische Rolle des blauen Themes in v5. Für Hover-, Drück- oder Aktivzustände kann die Komponente ein spezifischeres untergeordnetes Theme auswählen. | | dark_blue.backgroundPress | hsla(215, 42%, 9%, 1) | Aufgelöste semantische Rolle des blauen Themes in v5. Für Hover-, Drück- oder Aktivzustände kann die Komponente ein spezifischeres untergeordnetes Theme auswählen. | | dark_blue.color | hsla(205, 100%, 88%, 1) | Aufgelöste semantische Rolle des blauen Themes in v5. Für Hover-, Drück- oder Aktivzustände kann die Komponente ein spezifischeres untergeordnetes Theme auswählen. | | dark_blue.borderColor | hsla(209, 100%, 19%, 1) | Aufgelöste semantische Rolle des blauen Themes in v5. Für Hover-, Drück- oder Aktivzustände kann die Komponente ein spezifischeres untergeordnetes Theme auswählen. | | dark_blue.borderColorFocus | hsla(209, 100%, 19%, 1) | Aufgelöste semantische Rolle des blauen Themes in v5. Für Hover-, Drück- oder Aktivzustände kann die Komponente ein spezifischeres untergeordnetes Theme auswählen. | | dark_blue.placeholderColor | hsla(206, 100%, 50%, 1) | Aufgelöste semantische Rolle des blauen Themes in v5. Für Hover-, Drück- oder Aktivzustände kann die Komponente ein spezifischeres untergeordnetes Theme auswählen. | ### Systemschrift-Rollen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | body.family | -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif | Der System-Stack von v5 benötigt keine externen Schriftart-Anfragen. | | body.$2 | 13px / 20px | Größe und Zeilenhöhe bilden gemeinsam Schriftrollen und sind unabhängig vom Komponentengrößen-Token mit demselben Namen. | | body.$3 | 14px / 21px | Größe und Zeilenhöhe bilden gemeinsam Schriftrollen und sind unabhängig vom Komponentengrößen-Token mit demselben Namen. | | body.$4 | 15px / 23px | Größe und Zeilenhöhe bilden gemeinsam Schriftrollen und sind unabhängig vom Komponentengrößen-Token mit demselben Namen. | | body.$5 | 16px / 24px | Größe und Zeilenhöhe bilden gemeinsam Schriftrollen und sind unabhängig vom Komponentengrößen-Token mit demselben Namen. | | body.$6 | 18px / 27px | Größe und Zeilenhöhe bilden gemeinsam Schriftrollen und sind unabhängig vom Komponentengrößen-Token mit demselben Namen. | | body.$8 | 26px / 38px | Größe und Zeilenhöhe bilden gemeinsam Schriftrollen und sind unabhängig vom Komponentengrößen-Token mit demselben Namen. | ### Verträge für die native Komposition | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | createTamagui | defaultConfig from @tamagui/config/v5 | Eine Konfigurationsinstanz außerhalb von React; getCSS() stellt die Web-Theme-CSS bereit. | | TamaguiProvider | config + defaultTheme | Die Anwendung wählt hell oder dunkel, ohne den Board-Zustand zu verändern. | | Theme | name="blue" | Löst das blaue untergeordnete Theme der aktuellen Darstellung auf. | | Checkbox | checked + onCheckedChange | Das Board zählt nur value === true als erledigt; ein unbestimmter Zustand gilt nicht als erledigt. | | Input | value + onChangeText | Kontrollierter Entwurf, Validierung nach dem Entfernen äußerer Leerzeichen und expliziter Umgang mit Duplikaten. | | Progress | value from 0 to 100 | Die Fortschrittsanzeige wird aus der Anzahl erledigter Einträge geteilt durch die Gesamtzahl der Zeilen abgeleitet. | | YStack / XStack | directional layout with token gap | Halten Sie das Leselayout responsiv, ohne ein separates Imitations-Stylesheet zu verwenden. | ## Vollständiger Leitfaden zum Tamagui-Designsystem Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface. Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen. ## Versionskonfiguration und CSS des Tamagui-Designsystems ### Das benannte v5-Preset verwenden > Dieses Beispiel legt tamagui und @tamagui/config auf Version 2.7.7 fest und importiert defaultConfig aus @tamagui/config/v5. Der Konfigurationsname lautet v5; er bezeichnet nicht die Hauptversion des npm-Pakets. Werden diese beiden Zahlen vermischt, erhält man einen falschen Installationsbefehl. createTamagui wird einmal außerhalb der Komponente aufgerufen. Das erzeugte CSS wird vor dem Rendern des Boards eingefügt, damit Theme-Variablen und native Stile im Web tatsächlich definiert sind. ### Die kleine Konfigurationsüberschreibung explizit angeben Die bereitgestellte Quelle setzt onlyAllowShorthands auf false, da dieses Lehrbeispiel gut lesbare Langformen wie padding und backgroundColor verwendet. Das ist eine Anwendungsentscheidung zusätzlich zum Preset. Die v5-Basis enthält keinen Animationstreiber, und dieses Beispiel erfindet keinen und behauptet auch keine animierten Übergänge. Das einfache Verhalten von Fortschrittsanzeige und Checkbox funktioniert ohne zusätzliche Animationsabhängigkeit. ## Tamagui Designsystem: Größen-, Abstands- und Radius-Tokens ### Verwechseln Sie nicht identische Token-Bezeichnungen In der festgelegten v5-Konfiguration beträgt size $4 44, space $4 18 und radius 4 9. Eine Komponentengröße, ein Layoutabstand und ein Eckenradius lassen sich daher nicht mit einer gemeinsamen Multiplikationsregel umrechnen. Die Referenz führt jede Kategorie separat auf, und das Beispiel verwendet die Werte der jeweiligen Kategorie über tatsächliche Tamagui-Props. Das ist hilfreicher als eine Liste allgemeiner 4px-Schritte, die in der Konfiguration nicht verwendet werden. - size.$4 = 44 - space.$4 = 18 - radius.4 = 9 - Fließtextschriftgröße $4 = 15px bei einer Zeilenhöhe von 23px ### Auch die Schriftgrößenskala separat behandeln Die Fließtextschriftgröße $4 beträgt 15px bei einer Zeilenhöhe von 23px, während die Komponentengröße $4 weiterhin 44 beträgt. Der Systemschriftstapel wird von v5 bereitgestellt und benötigt keine heruntergeladene Schriftart. H1, H2 und Text erhalten ihren nativen Schriftkontext; die expliziten fontSize- und lineHeight-Werte in der Quelle bestimmen die Hierarchie des ursprünglichen Boards. Die äußere Breite von 880px ist eine lokale Layoutentscheidung und kein globales Tamagui-Token. ## Tamagui Designsystem: Semantische Themes und Darstellung ### Helles oder dunkles Theme mit einem blauen Unter-Theme kombinieren TamaguiProvider erhält das ausgewählte defaultTheme, und Theme name="blue" löst ein entsprechendes untergeordnetes Theme auf. Die Quelle verwendet die Rollen background, backgroundHover, color und borderColor, statt im gesamten Komponentenbaum immer wieder hexadezimale Werte einzutragen. Die Tabelle enthält die tatsächlichen Werte von light_blue und dark_blue, damit sich die aufgelöste Konfiguration vergleichen lässt, anstatt von einer festen Markenpalette auszugehen. ### Board-Zustand bei Änderungen der Darstellung beibehalten Das Flag dark ist unabhängig von den Zeilen, dem Eingabeentwurf und dem Filter. Ein Wechsel der Darstellung aktualisiert die nativen Komponenten, ohne das Board zu verändern. Buttons und Checkboxen können eigene Werte für untergeordnete Themes der Komponenten auswählen, sodass ihre berechnete Farbe nicht unbedingt mit dem Hintergrund-Token des übergeordneten Themes übereinstimmt. Prüfen Sie den gerenderten Zustand, bevor Sie die Hierarchie in benutzerdefinierte CSS auflösen. ## Tamagui Designsystem: Checkboxen und abgeleiteter Fortschritt ### Abschlussstatus in einer einzigen Zeilensammlung halten Jede Zeile hat eine stabile ID, einen gut lesbaren Text und einen booleschen Wert done. Checkbox erhält checked und onCheckedChange; nur der tatsächliche Wert true markiert die Zeile als erledigt. Checkbox.Indicator zeigt das Häkchen an. Der benachbarte Text und der zugängliche Name beziehen sich auf dieselbe Gewohnheit, während die Durchstreichung den Abschlusszustand visuell wiederholt. Die Quelle erstellt keinen separaten Zähler, der nicht mehr mit den Zeilen übereinstimmen könnte. ### Fortschritt anhand des gesamten Boards berechnen Die Anzahl erledigter Einträge wird aus allen Zeilen berechnet und anschließend in einen Prozentwert für Progress umgewandelt. Das Filtern unerledigter Einträge ändert nur die angezeigten Inhalte, nicht den Nenner. So wird verhindert, dass die Fortschrittsanzeige zurückgesetzt wird, wenn erledigte Zeilen aus der Ansicht verschwinden. Die Anzahl wird außerdem als lesbarer Text in einem höflichen Live-Bereich angezeigt, sodass der Fortschritt nicht nur durch die Länge des Balkens vermittelt wird. ## Tamagui Designsystem: Validierung von Entwürfen und Wiederherstellung bei Duplikaten ### Ein echtes gesteuertes Eingabefeld hinzufügen Input speichert den aktuellen Entwurf über value und onChangeText. Die Aktion Add habit entfernt überflüssige Leerzeichen und weist leere Werte mit einer sichtbaren Meldung, aria-invalid und einer Fehlerbeschreibung zurück. Nach dem Absenden eines leeren Werts wird der Fokus wieder auf das Eingabefeld gesetzt. Eine Prüfung auf Duplikate ohne Beachtung der Groß- und Kleinschreibung verhindert eine zweite Zeile mit demselben Text und lässt den Entwurf zur Korrektur stehen. Diese Regeln gehören zum ursprünglichen Board, nicht zur Bibliothek selbst. ### Board erst nach einem gültigen Eintrag aktualisieren Ein gültiger Entwurf fügt eine neue, unerledigte Zeile hinzu, leert das Eingabefeld und entfernt den Fehler. Der Nenner für den Fortschritt ändert sich sofort, da er aus der neuen Sammlung abgeleitet wird. Das Hinzufügen einer Gewohnheit richtet keine Erinnerung ein und erstellt kein Konto. Das Board wird bewusst im lokalen Zustand von React gehalten; nach dem erneuten Laden des Dokuments wird wieder das Beispiel angezeigt. ## Tamagui Designsystem: Gefilterte Ansichten und Wiederherstellung bei leeren Ergebnissen ### Den Geltungsbereich des Filters verdeutlichen Show unfinished only blendet erledigte Zeilen aus, lässt sie aber in der Sammlung. Wenn in dieser Ansicht nichts mehr übrig ist, erklärt ein Text für den leeren Zustand, dass die vollständige Liste weiterhin vorhanden ist, und bietet eine direkte Möglichkeit zur Rückkehr. Dieser sinnvolle leere Zustand entsteht durch die Auswahl der Nutzenden – anders als ein dekorativer Schalter, der beliebige Platzhalterkarten austauscht. ### Zurücksetzen und Darstellung getrennt halten Reset sample board stellt die ursprünglichen drei Zeilen wieder her, leert den Entwurf und den Fehler und kehrt zur vollständigen Liste zurück. Die aktuelle Darstellung bleibt unverändert. Da jede Änderung als expliziter Zustand vorliegt, erfordert das Zurücksetzen weder ein erneutes Laden des Dokuments noch das Verwerfen des konfigurierten Providers. Theme- und Inhaltswiederherstellung lassen sich unabhängig voneinander testen. ## Tamagui Designsystem: Responsive Stacks und barrierefreies Lesen ### Die Höhe durch den Inhalt der Stacks bestimmen lassen YStack ordnet den Hauptlesefluss an, während XStack die Steuerelemente der Überschrift, Checkbox-Zeilen und Aktionen ausrichtet. Die Steuerelementgruppen umbrechen, statt eine feste Desktopbreite zu erzwingen. Der äußere Container ist höchstens 880px breit und verwendet das tatsächliche Token space $4 für den Innenabstand. Der Text jeder Zeile kann sich verkleinern und umbrechen, während die Steuerelemente sowohl bei 280px als auch bei größeren Testbreiten verfügbar bleiben. ### Interaktionen nach dem Umbruch testen Bei der Browserprüfung wird eine Gewohnheit hinzugefügt, als erledigt markiert, die Liste gefiltert und die Darstellung gewechselt, bevor der Überlauf gemessen wird. Ein Screenshot des anfänglichen Layouts allein würde nicht zeigen, ob ein Fehler, eine lange Bezeichnung oder ein gefilterter Zustand die schmale Darstellung beeinträchtigt. Die native Semantik der Checkboxen und der sichtbare Text wurden zusammen mit dem abgeleiteten Fortschritt geprüft, statt ihr Vorhandensein lediglich festzustellen und ihre Funktionsfähigkeit vorauszusetzen. ## Tamagui Designsystem: Vollständiger Browser-Build ### Provider, CSS und Build-Definitionen bereitstellen Die drei bereitgestellten Dateien reichen für die lokale Webstudie aus. Die JSX-Datei enthält den Provider, eine Konfiguration, das generierte Theme CSS und das gesamte Board. build.mjs legt das Webziel und die Produktionsumgebung fest und stellt für andere reine Browser-Umgebungsvariablen einen leeren process.env-Fallback bereit. Ohne diese letzte Definition kann dieses einfache Bundle mit „process is not defined“ fehlschlagen, obwohl es kompiliert. 1. Lege tamagui.jsx, build.mjs und index.html im selben Verzeichnis ab. 2. Installiere die festgelegten Pakete React und Tamagui. 3. Erstelle und stelle das lokale Verzeichnis bereit. 4. Teste leere und doppelte Einträge, den Abschluss, Filter, Theme und Zurücksetzen. ### Native und Web getrennt behandeln Das Beispiel setzt tatsächliche Tamagui-Komponenten im Browser zusammen. Es belegt weder einen nativen Build noch die Integration der Navigation oder plattformspezifisches Eingabeverhalten. Eine Produktionsanwendung sollte die unterstützte Einrichtung des gewählten Frameworks verwenden und Anforderungen an Extraktion, serverseitiges Rendering und Animationen gesondert prüfen. Das konkrete lokale Bundle bietet weiterhin eine vollständige Möglichkeit, das hier gezeigte Theme und die Zustandsverträge zu untersuchen. ## Tamagui-Designsystem: Komponentenbeispiele ### tamagui.jsx Konfiguration, generiertes CSS, native Komponenten und vollständiger Board-Zustand. ``` import React,{useState} from 'react';import{createRoot}from'react-dom/client'; import{createTamagui,TamaguiProvider,Theme,YStack,XStack,Text,H1,H2,Button,Input,Checkbox,Progress,Separator}from'tamagui';import{defaultConfig}from'@tamagui/config/v5'; const config=createTamagui({...defaultConfig,settings:{...defaultConfig.settings,onlyAllowShorthands:false}});const sheet=document.createElement('style');sheet.textContent=config.getCSS();document.head.append(sheet); const initial=[{id:1,text:'Read ten pages',done:false},{id:2,text:'Step outside for a break',done:true},{id:3,text:'Write one useful note',done:false}]; function App(){const[dark,setDark]=useState(false),[rows,setRows]=useState(initial),[draft,setDraft]=useState(''),[error,setError]=useState(''),[filter,setFilter]=useState(false);const done=rows.filter(x=>x.done).length;let shown=rows.filter(x=>!filter||!x.done);function add(){let text=draft.trim();if(!text){setError('Write a small habit before adding it.');document.querySelector('#habit-input')?.focus();return}if(rows.some(x=>x.text.toLowerCase()===text.toLowerCase())){setError('That habit is already in this list.');return}setRows([...rows,{id:Date.now(),text,done:false}]);setDraft('');setError('')}return TAMAGUI / ORIGINAL HABIT BOARD

A little progress, every day.

A local board built with Tamagui 2.7.7 and its v5 blue theme. Your changes stay in this page; no account or daily reminder is connected.

Today’s small steps

{done} of {rows.length} complete{shown.length?shown.map(row=>setRows(rows.map(x=>x.id===row.id?{...x,done:value===true}:x))} aria-label={row.text} size="$4">✓{row.text}):Nothing unfinished in this viewAll your habits remain in the full list. You can revisit any completed item.}Add one small habit{setDraft(v);setError('')}} placeholder="For example, stretch for five minutes" aria-describedby={error?'habit-error':undefined} aria-invalid={!!error} onKeyPress={e=>{if(e.nativeEvent.key==='Enter')add()}}/>{error}Native Checkbox, Input, Button and Progress components; original board content and state. Theme changes preserve the current board.} createRoot(document.getElementById('root')).render(); ``` Code-Referenz - Verwende diese drei vollständigen Dateien zusammen. ### build.mjs Definitionen der Browserumgebung, die das getestete Bundle verwendet. ``` import {build} from 'esbuild'; await build({entryPoints:['tamagui.jsx'],bundle:true,minify:true,outfile:'tamagui.bundle.js',define:{'process.env.NODE_ENV':'"production"','process.env.TAMAGUI_TARGET':'"web"','process.env':'{}'}}); ``` Code-Referenz - Verwende diese drei vollständigen Dateien zusammen. ### index.html Eigenständiges Root-Dokument und Bundle-Import. ``` Small habits board
``` Code-Referenz - Verwende diese drei vollständigen Dateien zusammen. ## Tamagui-Designsystem: Einrichtung für AI Agents ### Ausgangspunkt für die Implementierung Speichere zuerst die bereitgestellten Dateien und öffne http://localhost:8000/. Diese Einrichtung ist bewusst auf den Browser ausgerichtet. ``` npm init -y npm install react@19.2.0 react-dom@19.2.0 tamagui@2.7.7 @tamagui/config@2.7.7 npm install --save-dev esbuild node build.mjs python3 -m http.server 8000 ``` ### Ein Prompt für dein Projekt ``` Implementiere das vollständige Tamagui-Habit-Board 2.7.7 für das Web mit dem v5-Preset. Halte die Kategorien der Design-Tokens für Größen, Abstände, Radien und Schriftarten getrennt; bewahre das generierte Theme CSS, die hellen und dunklen blauen Child-Themes, kontrollierte Kontrollkästchen, Validierung durch Trimmen und auf Duplikate, den Fortschrittsnenner mit allen Zeilen, die Wiederherstellung der Ansicht unerledigter Aufgaben und das Zurücksetzen ohne Änderungen am Erscheinungsbild. ``` ## Tamagui-Designsystem: Quellen und Umfang Tatsächliche Tamagui-Webkomponenten 2.7.7 mit dem v5-Preset. Das Habit-Board und die Zustandsregeln sind eigener OpenDesign-Code; es sind keine Konto-, Erinnerungs- oder Funktionen für native Geräte angebunden. - Konfiguration Aufgaben von Provider, Preset und Konfiguration. - Tokens Auflösung von Design-Tokens nach Kategorie. - Kontrollkästchen Kontrollierter Zustand und Aufbau des Indikators. - Fortschritt Zusammensetzung von Fortschrittswert und Indikator. - Offizielle Installationsanleitung Setup-Optionen für Frameworks und Plattformen. ## Tamagui-Designsystem: Weitere Ressourcen ### UIkit UIkit kombiniert ein CSS-Framework, Less-Anpassungen und attributgesteuerte JavaScript-Komponenten. Der Switcher, das Accordion und das responsive Raster greifen im folgenden Workshop-Planer ineinander. So wird deutlich, wo das Verhalten nativer Komponenten endet und der Auswahlzustand der Anwendung beginnt. ### Vant Ein mobiler Ablauf zur Adressauswahl mit Vant 4: echten CSS-Variablen, kontrollierter Adressidentität, Feldvalidierung, Theme-Wechsel und explizitem Speichern ausschließlich lokal. ### Vuestic UI Ein natives Vuestic-Prüfblatt mit anhand der Quellen verifizierten hellen und dunklen Presets, barrierefreien Bewertungsbeschriftungen, Textfeldvalidierung, abgeleitetem Durchschnitt und einem gespeicherten Zustand, der die abgeschlossene Bewertung beibehält. - [Implementierungsreferenz](https://tamagui.dev/docs/core/configuration) - [Quelle](https://cdn.jsdelivr.net/npm/@tamagui/themes@2.7.7/src/v5-tokens.ts) - [Quelle](https://cdn.jsdelivr.net/npm/@tamagui/themes@2.7.7/src/generated-v5.ts) - [Quelle](https://cdn.jsdelivr.net/npm/@tamagui/config@2.7.7/src/v5-fonts.ts) - [Quelle](https://tamagui.dev/docs/core/configuration) - [Code-Referenz](https://tamagui.dev/docs/core/configuration) - [Konfiguration Aufgaben von Provider, Preset und Konfiguration.](https://tamagui.dev/docs/core/configuration) - [Tokens Auflösung von Design-Tokens nach Kategorie.](https://tamagui.dev/docs/core/tokens) - [Kontrollkästchen Kontrollierter Zustand und Aufbau des Indikators.](https://tamagui.dev/ui/checkbox) - [Fortschritt Zusammensetzung von Fortschrittswert und Indikator.](https://tamagui.dev/ui/progress) - [Offizielle Installationsanleitung Setup-Optionen für Frameworks und Plattformen.](https://tamagui.dev/docs/intro/installation)