Navigering och tema

De fyra skärmarna finns, men den som loggar in i appen har inget sätt att nå dem: navigeringen saknas. Den här etappen är kort och ändrar allt — i slutet har appen meny, logotyp, egna färger och är redo att tala mer än ett språk.

Tre olika saker, tre olika ställen:

Vad	Var det görs
Navigeringen — menyn man rör sig i appen med	Panelen UI ▸ Navigering
Temat — färger, hörn och typografi	Appens inställningar ▸ Tema
Språken — språken och fraserna	Appens inställningar ▸ Översättningar

#Navigeringseditorn

1. I panelen UI, klicka på Navigering, precis ovanför avsnittet Skärmar. En flik med editorn öppnas.
2. Editorn är en modell av appens list: du drar menyer mellan zonerna (vänster, mitten, höger) och ser resultatet direkt.
3. De tre enhetsknapparna högst upp — Webb (1280px), Surfplatta (768px), Mobil (390px) — byter design. Börja på Webb.

#Skapa de tre menyerna

1. Klicka på + i den vänstra zonen. Ett nytt objekt dyker upp och panelen Valt objekt visas till höger.
2. Välj Meny — typen som leder till en skärm.
3. Fyll i Menyns namn, välj Ikon och, i Skärm, målskärmen.
4. Upprepa för alla tre.

Menyns namn	Ikon	Skärm
Start	layout-dashboard	Início
Konton	building-2	Contas
Affärsmöjligheter	target	Oportunidades

Lägg märke till vad som inte står i listan: Ficha de Conta. Det är med flit — dit kommer man genom att klicka på en rad i kontotabellen, inte via en meny. En skärm utan meny går fortfarande att nå via rutten och från koden; navigeringen är bara ytterdörren.

5. I övre högra hörnet, välj Startmeny: Start. Det är skärmen som öppnas när någon går in i appen utan att ange någon rutt.
6. Klicka på Spara — ”Navigeringen har sparats.”

#Användarmenyn

På listens högra sida finns ett särskilt objekt: Användarmeny. Det är där den som använder appen ser sitt namn och loggar ut. Markera det och finjustera:

• Visa namnet och Visa användarnamnet (inloggning) — det som visas bredvid avataren. Utan ikon visar avataren initialerna i namnet.
• Alternativet ”Logga ut” — låt Systemets (översatt) stå kvar, om du inte vill ha en annan text.

#Appens logotyp

Logotypen bor i listen, längst till vänster. Innan du väljer den måste den laddas upp till appen:

1. I panelen UI, i avsnittet Assets, klicka på Ladda upp filer och välj din logotyp. En SVG är det bästa valet: den blir skarp i alla storlekar och är det enda formatet som går att rama in.
2. Gå tillbaka till fliken Navigering och klicka på logotypen i modellen (Redigera appens logotyp).
3. I Ikon eller bild, välj filen du laddade upp.
4. Slå på Visa appens namn om du vill ha namnet skrivet bredvid symbolen.
5. I Inramning i listen, dra bilden för att placera den och använd Skala och Rutans bredd för att dimensionera den — ”SVG-filen förblir intakt — beskärningen är bara visuell och går att ångra.” Anpassa till rutan gör jobbet åt dig; Ingen inramning börjar om från början.
6. Stäng med Klart och Spara.

#Varje enhet har sin navigering

Gå tillbaka högst upp i editorn och klicka på Mobil (390px). Lägg märke till att designen är en annan — och att en ny väljare dyker upp, Läge:

Läge	Vad det ger
Topplist	Samma list som på webben, hopkrympt.
Hamburgarmeny	En knapp som öppnar menyn i en sidopanel. Det är det vanligaste på mobil.
Åtgärdsfält	En list längst ned på skärmen, med upp till 5 objekt — mobilappernas standard.

Bygg samma tre menyer i Mobil (Start, Konton, Affärsmöjligheter), välj det Läge du föredrar och spara. Startmeny är också per enhet — du kan öppna dashboarden på datorn och kontolistan på mobilen.

#Temat — att måla appen

Tema målar den byggda appen, utan att röra en enda skärm.

1. Högst upp i appens list, klicka på kugghjulsikonen (Appens inställningar).
2. I gruppen Utseende, välj Tema.
3. Till vänster ligger färggrupperna; till höger panelen Förhandsvisning — ”Exempel med de aktuella tokens — uppdateras direkt”. Varje färg du ändrar dyker upp där på ögonblicket.

Grupp	Vad den målar
Bas	Appens bakgrund och text, kantlinjer, fält och fokusringen.
Ytor	Kort och popovers (menyer, listrutor, verktygstips).
Färger	De semantiska färgerna — Primär, Sekundär, Destruktiv, Accent, Dämpad — och texten ovanpå var och en.
Navigering	Appens navigeringslister. Som standard följer de ytorna; det är här den grafiska profilen tillämpas.

För Kundhantering räcker det att ändra två saker:

1. I Färger, sätt Primär till ditt varumärkes färg. Det är färgen på åtgärdsknapparna, länkarna och det aktiva tillståndet.
2. I Navigering, bestäm om listen ska vara ljus (och följa ytorna, som är utgångsläget) eller få varumärkets färg. Om du målar den, justera också Listernas text — en mörk list med mörk text går inte att läsa.

Varje färg har en visuell väljare och ett hexadecimalt fält (#rrggbb) — att skriva eller välja ger samma resultat. Sist i listan ligger Form och typografi:

• Hörnradie — från Inga rundade hörn (0) till Maximal (1rem), i fem steg.
• Aviseringarnas position — i vilket hörn notiserna visas (de som keplin.ui.toast() från förra etappen visar).
• Teckensnitt (sans) — appens teckensnittsstack.

Spara med Spara. För att gå tillbaka till ursprungsfärgerna, Återställ standard — den återställer i editorn, och blir slutgiltig först när du sparar.

#Språken

Den sista biten i den här etappen är avsnittet Översättningar, i gruppen Lokalisering i inställningarna. Det är en matris: en rad per fras, en kolumn per språk.

I en nybyggd app är den tom, och det är normalt: texterna du skrev i widgetarna bor i skärmarna. Översättningarna är till för de texter som koden skriver — och för att ge appen ett andra språk.

Lägga till ett språk:

1. Klicka på + i matrisens rubrik.
2. Välj språket i välj språk… och bekräfta med Lägg till språk. Den nya kolumnen föds tom.

Skapa en fras:

1. Skriv på sista raden, som alltid står och väntar (”skriv för att skapa…”).
2. Frasens Nyckel ”(kommer från frasen)” — det är själva texten på basspråket som identifierar den.
3. Fyll i de andra kolumnerna med översättningen.

I skärmarnas händelser används frasen via texten:

keplin.ui.toast(keplin.i18n.t("Kontot har sparats"));

För att sätta in ett värde mitt i en fras, skriv det inom måsvingar: {n} konton ger 3 konton, och värdet kommer från koden — keplin.i18n.t("{n} konton", { n: 3 }). En gul cell varnar för att den översättningen har tappat en måsvinge som originalet har: i det språket skulle värdet aldrig visas.

Avsluta med Spara — ”Översättningarna har sparats och kompilerats.”

#Varför inte…?

• Varför syns inte min skärm i menyns skärmlista? Väljaren Skärm listar appens vanliga skärmar. Systemskärmar (login, återställning, registrering) hamnar inte i menyer — plattformen serverar dem själv.
• Varför fortsätter appen att öppnas på fel skärm? Startmeny är per enhet. Kontrollera den på den enhet du testar med.
• Varför visas min logotyp beskuren? Använd Anpassa till rutan eller öka Rutans bredd. Och kom ihåg: inramningen är bara tillgänglig för SVG-filer.
• Varför ändrades inte temat i appen? Spara saknades — Förhandsvisning uppdateras direkt, men den byggda appen får temat först när du sparar.
• Varför struntade en widget i den nya färgen? Den har en handskriven färg i kategorin Utseende. Byt den mot en token från temat.

Appen är byggd och målad. Nästa etapp: logik och automatisering.