Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Oprettelse og Styling af Knapper | Opbygning af Grundlæggende Komponenter
Tailwind CSS til Webudvikling

bookOprettelse og Styling af Knapper

Knapper er grundlæggende interaktive elementer i webdesign. Tailwind CSS tilbyder en række værktøjer til effektivt at style knapper og håndtere deres forskellige tilstande, såsom hover, fokus og aktiv.

Grundlæggende knap-styling

For at style en grundlæggende knap kan du bruge værktøjer til baggrundsfarve, tekstfarve, polstring, kant-radius og skrifttypevægt.

index.html

index.html

copy

Forklaring

  1. bg-yellow-500: Indstiller baggrundsfarven til en blå nuance;
  2. text-white: Indstiller tekstfarven til hvid;
  3. font-bold: Gør teksten fed;
  4. py-2: Tilføjer lodret polstring (0.5rem eller 8px);
  5. px-4: Tilføjer vandret polstring (1rem eller 16px);
  6. rounded: Tilføjer små afrundede hjørner.

Hover-tilstand

For at ændre udseendet af en knap, når brugeren holder musen over den, kan du bruge præfikset hover: sammen med enhver hjælpeklasse.

index.html

index.html

copy

hover:bg-blue-700: Ændrer baggrundsfarven til mørkeblå, når knappen holdes over med musen.

Fokus-tilstand

For at style en knap, når den er i fokus (f.eks. når den vælges med tastaturet), kan du bruge præfikset focus: sammen med enhver hjælpeklasse.

index.html

index.html

copy

I dette eksempel ændres knappen til blå, når du holder musen over den. Hvis du bruger Tab-tasten, bliver knappen rød.

Aktive og deaktiverede tilstande

Aktive og deaktiverede tilstande bruges sjældnere. Dog bør vi også tage dem i betragtning.

For at style en knap, når den er aktiv (f.eks. når den bliver klikket på), kan du bruge præfikset active: sammen med enhver hjælpeklasse.

For at style en knap, når den er deaktiveret (f.eks. når den ikke kan interageres med), kan du bruge præfikset disabled: sammen med enhver hjælpeklasse.

index.html

index.html

copy

Forklaring

  1. active:bg-green-800: Ændrer baggrundsfarven til en mørkere grøn nuance, når knappen er aktiv (trykket);
  2. opacity-50: Reducerer knappens opacitet for at få den til at se deaktiveret ud;
  3. cursor-not-allowed: Ændrer markøren for at indikere, at knappen ikke er klikbar;
  4. disabled attribut: Gør den ikke-interaktiv.

Eksempel på alle tilstande

Kombination af alle tilstande i ét eksempel

index.html

index.html

copy

Forklaring

  1. bg-blue-500: Angiver standard baggrundsfarve;
  2. hover:bg-blue-700: Ændrer baggrundsfarven ved hover;
  3. focus:outline-none: Fjerner standardfokusrammen;
  4. focus:ring-2: Tilføjer en fokusring med en bredde på 2 pixels;
  5. focus:ring-blue-600: Angiver farven på fokusringen;
  6. focus:ring-opacity-50: Angiver opaciteten på fokusringen;
  7. active:bg-blue-800: Ændrer baggrundsfarven, når knappen er aktiv;
  8. text-white: Angiver tekstfarven til hvid;
  9. font-bold: Gør teksten fed;
  10. py-2: Tilføjer lodret polstring;
  11. px-4: Tilføjer vandret polstring;
  12. rounded: Tilføjer små afrundede hjørner.

Bemærk

Hvis du har behov for at fordybe dig yderligere i Tailwind Button-komponenten, findes der et link til den officielle dokumentation.

1. Hvordan ændres baggrundsfarven på en knap, når den holdes over med musen?

2. Hvilken hjælpeklasse fjerner standardfokus-omridset fra en knap?

3. Hvilken hjælpeklasse ændrer baggrundsfarven på en knap, når den er aktiv (trykket)?

question mark

Hvordan ændres baggrundsfarven på en knap, når den holdes over med musen?

Select the correct answer

question mark

Hvilken hjælpeklasse fjerner standardfokus-omridset fra en knap?

Select the correct answer

question mark

Hvilken hjælpeklasse ændrer baggrundsfarven på en knap, når den er aktiv (trykket)?

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 3. Kapitel 1

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Suggested prompts:

Can you explain how to combine multiple states for a button in Tailwind?

What are some best practices for accessible button design with Tailwind?

Can you show more examples of custom button styles using Tailwind?

Awesome!

Completion rate improved to 3.57

bookOprettelse og Styling af Knapper

Stryg for at vise menuen

Knapper er grundlæggende interaktive elementer i webdesign. Tailwind CSS tilbyder en række værktøjer til effektivt at style knapper og håndtere deres forskellige tilstande, såsom hover, fokus og aktiv.

Grundlæggende knap-styling

For at style en grundlæggende knap kan du bruge værktøjer til baggrundsfarve, tekstfarve, polstring, kant-radius og skrifttypevægt.

index.html

index.html

copy

Forklaring

  1. bg-yellow-500: Indstiller baggrundsfarven til en blå nuance;
  2. text-white: Indstiller tekstfarven til hvid;
  3. font-bold: Gør teksten fed;
  4. py-2: Tilføjer lodret polstring (0.5rem eller 8px);
  5. px-4: Tilføjer vandret polstring (1rem eller 16px);
  6. rounded: Tilføjer små afrundede hjørner.

Hover-tilstand

For at ændre udseendet af en knap, når brugeren holder musen over den, kan du bruge præfikset hover: sammen med enhver hjælpeklasse.

index.html

index.html

copy

hover:bg-blue-700: Ændrer baggrundsfarven til mørkeblå, når knappen holdes over med musen.

Fokus-tilstand

For at style en knap, når den er i fokus (f.eks. når den vælges med tastaturet), kan du bruge præfikset focus: sammen med enhver hjælpeklasse.

index.html

index.html

copy

I dette eksempel ændres knappen til blå, når du holder musen over den. Hvis du bruger Tab-tasten, bliver knappen rød.

Aktive og deaktiverede tilstande

Aktive og deaktiverede tilstande bruges sjældnere. Dog bør vi også tage dem i betragtning.

For at style en knap, når den er aktiv (f.eks. når den bliver klikket på), kan du bruge præfikset active: sammen med enhver hjælpeklasse.

For at style en knap, når den er deaktiveret (f.eks. når den ikke kan interageres med), kan du bruge præfikset disabled: sammen med enhver hjælpeklasse.

index.html

index.html

copy

Forklaring

  1. active:bg-green-800: Ændrer baggrundsfarven til en mørkere grøn nuance, når knappen er aktiv (trykket);
  2. opacity-50: Reducerer knappens opacitet for at få den til at se deaktiveret ud;
  3. cursor-not-allowed: Ændrer markøren for at indikere, at knappen ikke er klikbar;
  4. disabled attribut: Gør den ikke-interaktiv.

Eksempel på alle tilstande

Kombination af alle tilstande i ét eksempel

index.html

index.html

copy

Forklaring

  1. bg-blue-500: Angiver standard baggrundsfarve;
  2. hover:bg-blue-700: Ændrer baggrundsfarven ved hover;
  3. focus:outline-none: Fjerner standardfokusrammen;
  4. focus:ring-2: Tilføjer en fokusring med en bredde på 2 pixels;
  5. focus:ring-blue-600: Angiver farven på fokusringen;
  6. focus:ring-opacity-50: Angiver opaciteten på fokusringen;
  7. active:bg-blue-800: Ændrer baggrundsfarven, når knappen er aktiv;
  8. text-white: Angiver tekstfarven til hvid;
  9. font-bold: Gør teksten fed;
  10. py-2: Tilføjer lodret polstring;
  11. px-4: Tilføjer vandret polstring;
  12. rounded: Tilføjer små afrundede hjørner.

Bemærk

Hvis du har behov for at fordybe dig yderligere i Tailwind Button-komponenten, findes der et link til den officielle dokumentation.

1. Hvordan ændres baggrundsfarven på en knap, når den holdes over med musen?

2. Hvilken hjælpeklasse fjerner standardfokus-omridset fra en knap?

3. Hvilken hjælpeklasse ændrer baggrundsfarven på en knap, når den er aktiv (trykket)?

question mark

Hvordan ændres baggrundsfarven på en knap, når den holdes over med musen?

Select the correct answer

question mark

Hvilken hjælpeklasse fjerner standardfokus-omridset fra en knap?

Select the correct answer

question mark

Hvilken hjælpeklasse ændrer baggrundsfarven på en knap, når den er aktiv (trykket)?

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 3. Kapitel 1
some-alt