Sveltejs Academy · Lektion

Reservinnehåll för slots

Rendera standardinnehåll i en när den överordnade komponenten inte tillhandahåller något.

Lektion 3 av 413 steg

Reservinnehåll för slots är en gratis lektion i Sveltejs Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Sveltejs Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.

Standardinnehåll i sloten

Innehåll som placeras inuti <slot>-taggen visas när den överordnade komponenten inte tillhandahåller något.

<button>
  <slot>Click me</slot>
</button>

Bra standardvärden

Tillhandahåll rimliga standardvärden som fungerar i de flesta fall utan inblandning från den överordnade komponenten.

Reservinnehåll för namngivna slots

Namngivna slots stöder också reservinnehåll.

<slot name="title">Default Title</slot>

Strategi per slot

Olika slots kan ha olika strategier för reservinnehåll. Kombinera dem efter behov.

Ersätts när sloten fylls

Om den överordnade komponenten tillhandahåller innehåll ersätts reservinnehållet helt.

Användbart för headless-komponenter

Headless UI-komponenter har ofta minimalt reservinnehåll; den som använder komponenten anpassar allt.

Undvik omfattande reservinnehåll

Håll standardvärdena små. Omfattande reservinnehåll gör oanvända komponenter onödigt stora.

Ikoner och etiketter

Det här är vanligt för ikonknappar: reservinnehållet visar en generell ikon om ingen ikon tillhandahålls.

Kombinera med villkor

Reservinnehåll fungerar bra tillsammans med kontroller av $$slots i mer avancerade mönster.

Är markup inte tillåten?

Reservinnehåll kan innehålla valfri markup, inklusive andra komponenter.

Visuellt test

Förhandsgranska alltid komponenten utan slot-innehåll för att se reservinnehållet.

Snabbkontroll

När visas reservinnehållet i en slot?

Sammanfattning

Placera standardinnehåll mellan <slot>-taggarna för att tillhandahålla reservinnehåll när den överordnade komponenten utelämnar innehåll.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
41
Lektioner
163

Vanliga frågor

Är lektionen ”Reservinnehåll för slots” gratis?

Ja – hela texten till ”Reservinnehåll för slots” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Sveltejs Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Reservinnehåll för slots”?

Rendera standardinnehåll i en när den överordnade komponenten inte tillhandahåller något. Ni övar på Sveltejs Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Sveltejs Academy?

Du behöver inga förkunskaper. Utbildningen i Sveltejs Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Reservinnehåll för slots”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Sveltejs Academy-lektionen?

Ja. Varje Sveltejs Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. Standard-slots för innehållsprojektion
  2. Namngivna slots med slot="name"
  3. Reservinnehåll för slots
  4. Kontrollera slot-innehåll med $$slots
← Tillbaka till Sveltejs Academy