Chytrá komponenta
Taby
Několik panelů na jednom místě, vidět je vždy jen jeden. Na telefonu je lišta tabů posuvná do strany, na desktopu jsou taby pod sebou vlevo.
Jen HTML a CSS. V náhledu vidíte desktop, začneme na telefonu.
Struktura
Radio buttony a panely
Každý tab je radio button input type="radio" s popiskem label. Radio buttony se stejným name tvoří skupinu, a tak může být vybraný vždy jen jeden. Přesně tak se chovají taby.
for u popisku odkazuje na id radio buttonu. Kliknutím na text „HTML“ se tak vybere jeho radio button.
Přepínání
Ukázat jen vybraný panel
Všechny panely schováme. Pak ukážeme ten, jehož radio button je zaškrtnutý. Selektor :has() se ptá: „obsahují taby zaškrtnutý radio button HTML?“ Pokud ano, ukáže panel HTML.
Klepněte v náhledu na jiný radio button. Panel se vymění bez jediného řádku JavaScriptu.
Styl
Taby místo koleček
Kolečka radio buttonů schováme a popisky nastylujeme jako taby. Vybraný tab má červenou čáru pod sebou.
Radio buttony schováváme průhledností, ne pomocí display: none. Zůstanou tak ovladatelné klávesnicí: Tab skočí na taby a šipky mezi nimi přepínají.
Telefon
Lišta, která se posouvá do strany
Pět tabů se na šířku telefonu nevejde a zalamují se na dva řádky. Lištu proto necháme v jednom řádku a dovolíme ji posouvat prstem do strany.
Posunout se dá jen lišta, stránka zůstane v klidu. Uříznutý poslední tab napoví, že jich je víc.
Styl
Obsah panelu
Panel dostane padding od lišty a klidnější typografii.
Automatika
Na desktopu taby pod sebou
Na široké obrazovce je místa dost. Od 700 pixelů výš dáme taby do sloupce vlevo a panel vedle nich. Červená čára se přesune z podtržení na pravou stranu.
HTML se nezměnilo. Stejné radio buttony jsou na telefonu vodorovná lišta a na desktopu svislé menu.
Recept
Taby v kostce
- radio buttony se stejným
name: vybraný vždy jen jeden :has()ukáže panel vybraného tabu- radio buttony schovat průhledností, ne
display: none - na telefonu posuvná lišta, na desktopu svislé taby
Screen reader ohlásí tyhle taby jako skupinu radio buttonů. Plnohodnotné taby (s rolí tab) potřebují JavaScript, ukážeme je v části JavaScript.