Domyślne sloty do projekcji treści
Umieść element wewnątrz komponentu, aby przyjmować dowolną treść komponentów podrzędnych.
Domyślne sloty do projekcji treści to bezpłatna lekcja Sveltejs Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Sveltejs Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Czym są sloty
Sloty pozwalają komponentom nadrzędnym wstawiać znaczniki w określone miejsca komponentu podrzędnego.
Element slot
W komponencie podrzędnym umieść tag <slot /> w miejscu, w którym ma pojawić się zawartość.
<!-- Card.svelte -->
<div class="card">
<slot />
</div>Użycie z komponentu nadrzędnego
Umieść elementy podrzędne wewnątrz tagu komponentu. Pojawią się tam, gdzie znajduje się slot.
<Card>
<p>Hello inside the card!</p>
</Card>Siła kompozycji
Ten wzorzec pozwala tworzyć wielokrotnie używane obudowy układu, takie jak karty, modale i strony.
Wiele elementów podrzędnych
Dowolna liczba elementów może wypełniać domyślny slot.
<Card>
<h1>Title</h1>
<p>Body</p>
</Card>Zwykłe ciągi tekstowe
Jako zawartość slotu można również przekazać zwykły tekst.
<Button>Click me</Button>Zawartość warunkowa
Użyj {#if} w komponencie nadrzędnym, aby wybrać zawartość wstawianą do slotu.
Sloty komponentów
Zawartość slotu może swobodnie zawierać inne komponenty.
<Card>
<Avatar />
<Username />
</Card>Stylowanie
Zawartość wstawiona do slotu zachowuje style komponentu nadrzędnego, w którym została zdefiniowana, a nie komponentu podrzędnego.
Układ a logika
Sloty służą do tworzenia układu i kompozycji, a nie do przekazywania danych. Do danych używaj propsów.
Punkty wstawiania slotów
Komponent może mieć wiele pozycji slotów — domyślną oraz nazwane.
Szybkie sprawdzenie
Gdzie pojawia się zawartość wstawiona do slotu?
Podsumowanie
Użyj <slot /> w komponencie podrzędnym i przekaż elementy podrzędne między tagami komponentu nadrzędnego, aby wstawić zawartość.
Często zadawane pytania
Czy lekcja „Domyślne sloty do projekcji treści” jest bezpłatna?
Tak — pełny tekst „Domyślne sloty do projekcji treści” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Sveltejs Academy, przejdź na CoddyKit PRO. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Domyślne sloty do projekcji treści”?
Umieść element wewnątrz komponentu, aby przyjmować dowolną treść komponentów podrzędnych. Ćwiczysz Sveltejs Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Sveltejs Academy?
Nie wymagamy żadnego doświadczenia. Sveltejs Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Domyślne sloty do projekcji treści”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Sveltejs Academy?
Tak. Każda lekcja Sveltejs Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Domyślne sloty do projekcji treści
- Nazwane sloty z slot="name"
- Zastępcza treść slotu
- Sprawdzanie treści slotów za pomocą $$slots