Navigation und Theme

Die vier Bildschirme existieren, aber wer die App betritt, hat keinen Weg zu ihnen: Es fehlt die Navigation. Diese Etappe ist kurz und ändert alles — am Ende hat die App ein Menü, ein Logo, eigene Farben und ist bereit, mehr als eine Sprache zu sprechen.

Drei verschiedene Dinge, drei verschiedene Orte:

Was	Wo man es macht
Die Navigation — das Menü, über das man sich in der App bewegt	Panel UI ▸ Navigation
Das Theme — Farben, Ecken und Typografie	Einstellungen der App ▸ Theme
Die Sprachen — die Sprachen und die Sätze	Einstellungen der App ▸ Übersetzungen

#Der Editor der Navigation

1. Klicken Sie im Panel UI auf Navigation, direkt über dem Abschnitt Bildschirme. Es öffnet sich ein Tab mit dem Editor.
2. Der Editor ist ein Modell der Leiste der App: Sie ziehen Menüs zwischen den Zonen (links, Mitte, rechts) und sehen das Ergebnis sofort.
3. Die drei Geräte-Buttons oben — Web (1280px), Tablet (768px), Mobil (390px) — wechseln das Design. Beginnen Sie beim Web.

#Die drei Menüs erstellen

1. Klicken Sie auf das + der linken Zone. Es erscheint ein neuer Eintrag und rechts das Panel Ausgewählter Eintrag.
2. Wählen Sie Menü — den Typ, der zu einem Bildschirm führt.
3. Füllen Sie Name des Menüs aus, wählen Sie das Symbol und unter Bildschirm den Zielbildschirm.
4. Wiederholen Sie es für alle drei.

Name des Menüs	Symbol	Bildschirm
Início	layout-dashboard	Início
Contas	building-2	Contas
Oportunidades	target	Oportunidades

Achten Sie darauf, was nicht auf der Liste steht: die Ficha de Conta. Das ist Absicht — man kommt dorthin, indem man auf eine Zeile der Tabelle der Konten klickt, nicht über ein Menü. Ein Bildschirm ohne Menü bleibt über die Route und über den Code erreichbar; die Navigation ist nur die Vordertür.

5. Wählen Sie in der oberen rechten Ecke das Startmenü: Início. Das ist der Bildschirm, der sich öffnet, wenn jemand die App betritt, ohne eine Route anzugeben.
6. Klicken Sie auf Speichern — „Navigation gespeichert.“

#Das Benutzermenü

Auf der rechten Seite der Leiste gibt es einen besonderen Eintrag: das Benutzermenü. Dort sieht, wer die App nutzt, seinen Namen und meldet sich ab. Wählen Sie es aus und stimmen Sie es ab:

• Namen anzeigen und Benutzernamen anzeigen (Login) — was neben dem Avatar erscheint. Ohne Symbol zeigt der Avatar die Initialen des Namens.
• Option „Abmelden“ — lassen Sie Die des Systems (übersetzt), außer Sie wollen einen anderen Text.

#Das Logo der App

Das Logo lebt in der Leiste, ganz links. Bevor Sie es wählen können, muss es in die App hochgeladen werden:

1. Klicken Sie im Panel UI, im Abschnitt Assets, auf Dateien hochladen und wählen Sie Ihr Logo. Ein SVG ist die beste Wahl: Es bleibt in jeder Größe scharf und ist das einzige Format, das einen Ausschnitt erlaubt.
2. Kehren Sie zum Tab Navigation zurück und klicken Sie auf das Logo im Modell (Logo der App bearbeiten).
3. Wählen Sie unter Symbol oder Bild die Datei, die Sie hochgeladen haben.
4. Schalten Sie Namen der App anzeigen ein, wenn Sie den Namen neben dem Symbol geschrieben haben möchten.
5. Ziehen Sie unter Ausschnitt in der Leiste das Bild, um es zu positionieren, und nutzen Sie die Skalierung und die Breite der Box, um es zu dimensionieren — „Die SVG-Datei bleibt unangetastet — der Zuschnitt ist rein visuell und umkehrbar.“ An die Box anpassen erledigt die Arbeit für Sie; Kein Ausschnitt geht zum Anfang zurück.
6. Schließen Sie mit Fertig und Speichern.

#Jedes Gerät hat seine Navigation

Gehen Sie zurück an den oberen Rand des Editors und klicken Sie auf Mobil (390px). Beachten Sie, dass das Design ein anderes ist — und dass ein neuer Selektor erscheint, Modus:

Modus	Was er gibt
Obere Leiste	Dieselbe Leiste wie im Web, geschrumpft.
Hamburger-Menü	Ein Button, der das Menü in einem Seitenpanel öffnet. Das ist auf dem Handy das Üblichste.
Aktionsleiste	Eine Leiste am unteren Rand des Bildschirms, mit bis zu 5 Einträgen — der Standard mobiler Apps.

Bauen Sie in Mobil dieselben drei Menüs (Início, Contas, Oportunidades), wählen Sie den Modus, den Sie bevorzugen, und speichern Sie. Auch das Startmenü ist pro Gerät — Sie können am Computer das Dashboard und auf dem Handy die Liste der Konten öffnen.

#Das Theme — die App streichen

Das Theme streicht die gebaute App, ohne einen einzigen Bildschirm anzufassen.

1. Klicken Sie oben in der Leiste der App auf das Zahnradsymbol (Einstellungen der App).
2. Wählen Sie in der Gruppe Aussehen den Punkt Theme.
3. Links stehen die Gruppen von Farben; rechts das Panel Vorschau — „Beispiel mit den aktuellen Tokens — aktualisiert sich live.“ Jede Farbe, die Sie ändern, erscheint dort im selben Moment.

Gruppe	Was sie streicht
Basis	Hintergrund und Text der App, Rahmen, Felder und den Fokusring.
Oberflächen	Karten und Popover (Menüs, Dropdowns, Tooltips).
Farben	Die semantischen Farben — Primär, Sekundär, Destruktiv, Akzent, Gedämpft (muted) — und den Text auf jeder davon.
Navigation	Die Navigationsleisten der App. Standardmäßig folgen sie den Oberflächen; hier wird das Branding angewendet.

Für die Kundenverwaltung reicht es, zwei Dinge anzufassen:

1. Setzen Sie unter Farben die Primär-Farbe auf die Farbe Ihrer Marke. Es ist die Farbe der Aktions-Buttons, der Links und des aktiven Zustands.
2. Entscheiden Sie unter Navigation, ob die Leiste hell bleibt (den Oberflächen folgend, so ist es ab Werk) oder die Farbe der Marke bekommt. Wenn Sie sie streichen, passen Sie auch den Text der Leisten an — eine dunkle Leiste mit dunklem Text liest sich nicht.

Jede Farbe hat einen visuellen Selektor und ein Hexadezimalfeld (#rrggbb) — schreiben oder auswählen läuft auf dasselbe hinaus. Am Ende der Liste steht Form und Typografie:

• Radius der Ecken — von Keine Rundung (0) bis Maximal (1rem), in fünf Stufen.
• Position der Hinweise — in welcher Ecke die Hinweise erscheinen (die, die das keplin.ui.toast() der vorigen Etappe zeigt).
• Schrift (Sans) — der Schrift-Stack der App.

Speichern Sie mit Speichern. Um zu den Farben ab Werk zurückzukehren, Standards zurücksetzen — es stellt sie im Editor wieder her und wird erst endgültig, wenn Sie speichern.

#Die Sprachen

Der letzte Teil dieser Etappe ist der Abschnitt Übersetzungen, in der Gruppe Lokalisierung der Einstellungen. Es ist eine Matrix: eine Zeile pro Satz, eine Spalte pro Sprache.

In einer gerade gebauten App ist sie leer, und das ist normal: Die Texte, die Sie in die Widgets geschrieben haben, leben in den Bildschirmen. Die Übersetzungen dienen den Texten, die der Code schreibt — und dazu, der App eine zweite Sprache zu geben.

Eine Sprache hinzufügen:

1. Klicken Sie auf das + in der Kopfzeile der Matrix.
2. Wählen Sie die Sprache unter Sprache auswählen… und bestätigen Sie mit Sprache hinzufügen. Die neue Spalte entsteht leer.

Einen Satz anlegen:

1. Schreiben Sie in die letzte Zeile, die immer wartet („tippen, um anzulegen…“).
2. Der Schlüssel des Satzes „(kommt aus dem Satz)“ — es ist der Text in der Basissprache selbst, der ihn identifiziert.
3. Füllen Sie die übrigen Spalten mit der Übersetzung.

In den Ereignissen der Bildschirme wird der Satz über den Text verwendet:

keplin.ui.toast(keplin.i18n.t("Konto gespeichert"));

Um einen Wert mitten in einen Satz zu setzen, schreiben Sie ihn in geschweifte Klammern: {n} Konten ergibt 3 Konten, und der Wert kommt aus dem Code — keplin.i18n.t("{n} Konten", { n: 3 }). Eine gelbe Zelle warnt Sie davor, dass diese Übersetzung eine geschweifte Klammer verloren hat, die das Original hat: In dieser Sprache würde der Wert nicht erscheinen.

Am Ende Speichern — „Übersetzungen gespeichert und kompiliert.“

#Warum nicht…?

• Warum erscheint mein Bildschirm nicht in der Liste der Bildschirme des Menüs? Der Selektor Bildschirm listet die normalen Bildschirme der App. Systembildschirme (Login, Wiederherstellung, Registrierung) kommen nicht in Menüs — die Plattform liefert sie selbst aus.
• Warum öffnet die App weiterhin den falschen Bildschirm? Das Startmenü gilt pro Gerät. Prüfen Sie es auf dem Gerät, auf dem Sie testen.
• Warum erscheint mein Logo abgeschnitten? Nutzen Sie An die Box anpassen oder vergrößern Sie die Breite der Box. Und denken Sie daran: Der Ausschnitt ist nur für SVG-Dateien verfügbar.
• Warum hat sich das Theme in der App nicht geändert? Es fehlte Speichern — die Vorschau aktualisiert sich live, aber die gebaute App bekommt das Theme erst, wenn Sie speichern.
• Warum hat ein Widget die neue Farbe ignoriert? Es hat eine von Hand geschriebene Farbe in der Kategorie Aussehen. Tauschen Sie sie gegen ein Token des Themes.

Die App ist zusammengebaut und gestrichen. Nächste Etappe: Logik und Automatisierung.