Neaktivní tlačítka

Vedle karty Mourka jsme přidali kartu Luny. Luna je rezervovaná: přijde se na ni podívat jedna rodina, takže její tlačítko zatím říká „Rezervováno“ a nemá nic dělat. Je to kopie tlačítka Mourka se všemi třídami z této lekce. (Pokud je karta Luny pod kartou Mourka, je váš náhled na dvě karty vedle sebe příliš úzký. To nevadí.)

V HTML se tlačítko vypíná atributem disabled (anglicky vypnutý). Nemá žádnou hodnotu: stačí ho napsat do otevíracího tagu, stejně jako atribut required z kurzu HTML. Na neaktivní tlačítko nejde kliknout a klávesa Tab ho přeskočí.

<button disabled>Rezervováno</button>

Prohlížeče neaktivní tlačítka zobrazují šedě, ale Preflight a naše třídy to přepíšou, takže by tlačítko Luny pořád vypadalo stejně jako tlačítko Mourka. Návštěvníci by na něj zkoušeli klikat a divili by se, proč se nic neděje. K tomu slouží varianta disabled:, která použije třídu jen u prvku s atributem disabled (v CSS pseudotřída :disabled). Obvyklé jsou tyto dvě třídy:

• disabled:opacity-50: tlačítko je napůl průhledné, takže vypadá vybledle,
• disabled:cursor-not-allowed: ukazatel myši se nad tlačítkem změní v přeškrtnuté kolečko.

Má to ještě jeden háček: variantám hover: a active: je jedno, jestli je tlačítko neaktivní, takže by tlačítko Luny pořád ztmavlo, když na něj najedete myší nebo ho stisknete. Pomůže spojit dvě varianty: enabled:hover:bg-orange-600 platí, jen když tlačítko není vypnuté (v CSS :enabled) a zároveň je nad ním ukazatel myši. Varianty takto můžete řetězit vždy, když má třída platit, jen pokud platí několik podmínek najednou.