Navigatie en thema

De vier schermen bestaan, maar wie de app binnenkomt heeft geen manier om er te komen: de navigatie ontbreekt. Deze etappe is kort en verandert alles — aan het einde heeft de app een menu, een logo, eigen kleuren en is zij klaar om meer dan één taal te spreken.

Drie verschillende dingen, drie verschillende plekken:

Wat	Waar u het doet
De navigatie — het menu waarmee u door de app loopt	Paneel UI ▸ Navigatie
Het thema — kleuren, hoeken en typografie	Instellingen van de app ▸ Thema
De talen — de talen en de zinnen	Instellingen van de app ▸ Vertalingen

#De navigatie-editor

1. Klik in het paneel UI op Navigatie, net boven de sectie Schermen. Er opent een tabblad met de editor.
2. De editor is een maquette van de balk van de app: u sleept menu's tussen de zones (links, midden, rechts) en ziet het resultaat meteen.
3. De drie apparaatknoppen bovenaan — Web (1280 px), Tablet (768 px), Mobiel (390 px) — wisselen van ontwerp. Begin bij Web.

#De drie menu's aanmaken

1. Klik op de + van de zone links. Er verschijnt een nieuw item en rechts het paneel Geselecteerd item.
2. Kies Menu — het type dat naar een scherm leidt.
3. Vul Naam van het menu in, kies het Icoon en, bij Scherm, het doelscherm.
4. Herhaal dit voor alle drie.

Naam van het menu	Icoon	Scherm
Início	layout-dashboard	Início
Contas	building-2	Contas
Oportunidades	target	Oportunidades

Let op wat er niet in de lijst staat: de Ficha de Conta. Dat is met opzet — daar komt u door op een rij van de accountstabel te klikken, niet via een menu. Een scherm zonder menu blijft bereikbaar via de route en via de code; de navigatie is alleen de voordeur.

5. Kies rechtsboven het Beginmenu: Início. Dat is het scherm dat opent wanneer iemand de app binnenkomt zonder een route op te geven.
6. Klik op Opslaan — "Navigatie opgeslagen."

#Het gebruikersmenu

Aan de rechterkant van de balk staat een bijzonder item: het Gebruikersmenu. Daar ziet wie de app gebruikt zijn naam en meldt hij zich af. Selecteer het en stel het af:

• De naam tonen en De gebruikersnaam (login) tonen — wat er naast de avatar verschijnt. Zonder icoon toont de avatar de initialen van de naam.
• Optie «Afmelden» — laat Die van het systeem (vertaald) staan, tenzij u een andere tekst wilt.

#Het logo van de app

Het logo leeft in de balk, helemaal links. Voordat u het kiest, moet u het naar de app uploaden:

1. Klik in het paneel UI, in de sectie Assets, op Bestanden uploaden en kies uw logo. Een SVG is de beste keuze: het blijft scherp op elk formaat en is het enige formaat waarmee u kunt uitsnijden.
2. Ga terug naar het tabblad Navigatie en klik op het logo van de maquette (Het logo van de app bewerken).
3. Kies bij Icoon of afbeelding het bestand dat u hebt geüpload.
4. Zet De naam van de app tonen aan als u de naam naast het symbool geschreven wilt hebben.
5. Sleep bij Uitsnede in de balk de afbeelding om haar te plaatsen en gebruik de Schaal en de Breedte van het kader om haar te dimensioneren — "Het SVG-bestand blijft intact — de uitsnede is alleen visueel en omkeerbaar." Aan het kader aanpassen doet het werk voor u; Geen uitsnede brengt u terug bij het begin.
6. Sluit af met Voltooid en Opslaan.

#Elk apparaat heeft zijn eigen navigatie

Ga terug naar de bovenkant van de editor en klik op Mobiel (390 px). Merk op dat het ontwerp anders is — en dat er een nieuwe keuzelijst verschijnt, Modus:

Modus	Wat die geeft
Bovenbalk	Dezelfde balk als op het web, ingekrompen.
Hamburgermenu	Een knop die het menu in een zijpaneel opent. Dat is het meest gebruikelijk op de telefoon.
Actiebalk	Een balk onderaan het scherm, met maximaal 5 items — het patroon van mobiele apps.

Bouw in Mobiel dezelfde drie menu's op (Início, Contas, Oportunidades), kies de Modus die u het liefst hebt en sla op. Ook het Beginmenu is per apparaat — u kunt op de computer het dashboard openen en op de telefoon de lijst met accounts.

#Het thema — de app schilderen

Het Thema schildert de gebouwde app, zonder ook maar één scherm aan te raken.

1. Klik boven in de balk van de app op het tandwielicoon (Instellingen van de app).
2. Kies in de groep Uiterlijk Thema.
3. Links staan de kleurgroepen; rechts het paneel Voorbeeld — "Voorbeeld met de huidige tokens — wordt live bijgewerkt." Elke kleur die u wijzigt, verschijnt daar op slag.

Groep	Wat die schildert
Basis	Achtergrond en tekst van de app, randen, velden en de focusring.
Oppervlakken	Kaarten en popovers (menu's, dropdowns, tooltips).
Kleuren	De semantische kleuren — Primair, Secundair, Destructief, Accent, Gedempt — en de tekst op elk daarvan.
Navigatie	De navigatiebalken van de app. Standaard volgen zij de oppervlakken; hier past u de huisstijl toe.

Voor Klantenbeheer volstaat het om aan twee dingen te draaien:

1. Zet bij Kleuren de Primair op de kleur van uw merk. Het is de kleur van de actieknoppen, de links en de actieve status.
2. Beslis bij Navigatie of de balk licht blijft (in navolging van de oppervlakken, zoals hij van huis uit is) of de kleur van het merk krijgt. Schildert u hem, pas dan ook de Tekst van de balken aan — een donkere balk met donkere tekst leest niet.

Elke kleur heeft een visuele kiezer en een hexadecimaal veld (#rrggbb) — typen of kiezen komt op hetzelfde neer. Onderaan de lijst staat Vorm en typografie:

• Hoekstraal — van Geen afronding (0) tot Maximum (1rem), in vijf stappen.
• Positie van de meldingen — in welke hoek de meldingen verschijnen (die welke de keplin.ui.toast() van de vorige etappe toont).
• Lettertype (sans) — de lettertypestack van de app.

Sla op met Opslaan. Om terug te keren naar de oorspronkelijke kleuren: Standaardwaarden herstellen — dat herstelt ze in de editor, en het wordt pas definitief wanneer u opslaat.

#De talen

Het laatste onderdeel van deze etappe is de sectie Vertalingen, in de groep Lokalisatie van de instellingen. Het is een matrix: één rij per zin, één kolom per taal.

In een net gebouwde app is zij leeg, en dat is normaal: de teksten die u in de widgets hebt geschreven, leven in de schermen. De vertalingen dienen voor de teksten die de code schrijft — en om de app een tweede taal te geven.

Een taal toevoegen:

1. Klik op de + in de kop van de matrix.
2. Kies de taal bij taal kiezen… en bevestig met Taal toevoegen. De nieuwe kolom wordt leeg geboren.

Een zin aanmaken:

1. Schrijf op de laatste rij, die altijd staat te wachten ("typ om aan te maken…").
2. De Sleutel van de zin "(komt uit de zin)" — het is de tekst zelf in de basistaal die haar identificeert.
3. Vul de andere kolommen met de vertaling.

In de gebeurtenissen van de schermen gebruikt u de zin via de tekst:

keplin.ui.toast(keplin.i18n.t("Account opgeslagen"));

Om een waarde midden in een zin te zetten, schrijft u haar tussen accolades: {n} accounts geeft 3 accounts, en de waarde komt via de code binnen — keplin.i18n.t("{n} accounts", { n: 3 }). Een gele cel waarschuwt u dat die vertaling een accolade kwijt is die het origineel wel heeft: in die taal zou de waarde niet verschijnen.

Tot slot: Opslaan — "Vertalingen opgeslagen en gecompileerd."

#Waarom niet…?

• Waarom verschijnt mijn scherm niet in de schermenlijst van het menu? De keuzelijst Scherm toont de gewone schermen van de app. Systeemschermen (aanmelden, herstel, registratie) komen niet in menu's — het platform serveert ze zelf.
• Waarom blijft de app op het verkeerde scherm openen? Het Beginmenu is per apparaat. Controleer het op het apparaat waarop u aan het testen bent.
• Waarom verschijnt mijn logo afgesneden? Gebruik Aan het kader aanpassen of vergroot de Breedte van het kader. En onthoud: de uitsnede is alleen beschikbaar voor SVG-bestanden.
• Waarom is het thema in de app niet veranderd? Er ontbrak Opslaan — het Voorbeeld wordt live bijgewerkt, maar de gebouwde app krijgt het thema pas wanneer u opslaat.
• Waarom heeft een widget de nieuwe kleur genegeerd? Hij heeft een met de hand geschreven kleur in de categorie Uiterlijk. Vervang die door een token van het thema.

De app is opgebouwd en geschilderd. Volgende etappe: logica en automatisering.