Din första komponent

En snygg pricing-tabell från prompt.

5 minLovable – bygg utan att koda
Illustration för lektionen Din första komponent

Vad du bygger

En stilren och modern pristabell för tre olika paket eller produkter, där det mellersta paketet är tydligt markerat som det mest populära valet. Tabellen anpassar sig automatiskt efter både dator- och mobilskärmar och är redo att användas på din hemsida.

Innan du börjar

  • Ett kostnadsfritt konto på v0 by Vercel. Du loggar enkelt in med exempelvis ett Google-konto eller GitHub-konto.
  • Inga förkunskaper i kodning behövs.

Steg för steg

  1. Öppna verktyget – Starta webbläsaren och gå till v0 by Vercel. Klicka på logga in-knappen i det övre högra hörnet och registrera dig snabbt om du är ny användare.

  2. Hitta inmatningsfältet – Klicka i det stora textfältet mitt på skärmen där texten "What can I help you build today?" syns. Det är här du skriver dina instruktioner.

  3. Skriv din instruktion – Besriv din tänkta tabell på svenska. Du kan använda vårt exempel nedan för att få en bra grund.

Skapa en modern och stilren pristabell med tre olika prispaket på svenska. Det mellersta paketet ska vara markerat som "Mest populär" med en röd eller blå färg på knappen. Lägg till bockar för funktioner som ingår i varje paket och gör designen ren och luftig.

  1. Starta genereringen – Klicka på den lilla skicka-knappen (en rund ikon med en pil) till höger i textfältet, eller tryck på Enter på tangentbordet.

  2. Se designen skapas – Vänta några sekunder. Du ser nu hur verktyget snabbt bygger upp din tabell i realtid på höger sida av skärmen.

  3. Förhandsgranska ditt verktyg – Klicka på fliken Preview högst upp i förhandsvisningen för att testa tabellen som en vanlig besökare. Du kan ändra storlek på fönstret för att se hur den krymper och växer på ett snyggt sätt.

Byggloftets tips

  • Skriv på svenska – Du behöver inte skriva på engelska. Det går utmärkt att ge instruktioner på svenska, och verktyget förstår ofta att även texterna i tabellen ska översättas automatiskt.
  • Bygge tipsar om finjusteringar – Vår isbjörn Bygge påminner om att du kan ändra detaljer i efterhand. Om du vill byta färg på en knapp, klicka bara på Edit-knappen, markera den del av tabellen du vill ändra och skriv vad som ska hända.
  • Fokusera på utseendet – Låt dig inte stressas av koden som syns under fliken Code. Det viktiga är att det ser bra ut i förhandsvisningen under fliken Preview.

Vanliga fel

  • "Tabellen ser konstig ut på mobilen": Du har antagligen bett om för många detaljer i sidled. Skriv en följdinstruktion i textfältet där du ber verktyget att stapla paketen under varandra på mindre skärmar.
  • "Genereringen har fastnat": Om sidan laddar väldigt länge beror det oftast på hög belastning hos Vercel. Prova att uppdatera webbläsaren och klicka på skicka igen. Din historik sparas så du förlorar ingenting.

Du är klar när…

Du ser en elegant pristabell med tre prydliga paket framför dig och kan hålla muspekaren över knapparna och se hur de ändrar färg.

Steg för steg i bild

Öppna verktyget – Starta webbläsaren och gå till [v0 by Verc
1. Öppna verktyget – Starta webbläsaren och gå till [v0 by Verc
Hitta inmatningsfältet – Klicka i det stora textfältet mitt
2. Hitta inmatningsfältet – Klicka i det stora textfältet mitt
Skriv din instruktion – Besriv din tänkta tabell på svenska
3. Skriv din instruktion – Besriv din tänkta tabell på svenska

Det finns en videoversion av den här lektionen för medlemmar. Texten ovan är komplett.