Tento článek poskytuje postup pro použití vlastnosti minimální výšky pro umístění kurzoru, zaostření a další stavy v Tailwindu.
Poznámka: Chcete-li se dozvědět více o minimálních výškových třídách v Tailwindu, přečtěte si toto článek na našem webu.
Jak ve službě Tailwind použít vlastnost minimální výšky pro umístění kurzoru, kurzor a další stavy?
Tailwind poskytuje výchozí varianty stavu, které lze poskytnout s vlastnostmi návrhu. Tyto varianty stavu zahrnují „hover“, „focus“ a „active“. Popis těchto stavových variant je následující:
- „ vznášet se ” se spustí vždy, když kurzor myši najede na prvek.
- ' soustředit se ” stav se spustí vždy, když je prvek zaostřený.
- ' aktivní ” stav se spustí vždy, když je prvek aktivován nebo na něj kliknuto.
Použijme vlastnost minimální výšky pro každý z těchto stavů jeden po druhém.
Použití vlastnosti minimální výšky se stavem přechodu
Chcete-li použít „ minimální výška ” s variantou stavu přechodu v Tailwindu, je použita následující syntaxe:
< div třída = 'hover:min-h-{velikost}...' > < / div >
Použijme výše definovanou syntaxi v demonstraci. V tomto příkladu zvýšíme minimální výšku prvku vždy, když kurzor myši najede na prvek.
< div třída = 'min-h-fit rounded-md bg-blue-700 text-center text-white hover:min-h-screen' >Najetím kurzorem zvýšíte minimum výška < / div >Vysvětlení výše uvedeného kódu je následující:
- ' min-w-fit ” class nastavuje minimální limit výšky na výšku požadovanou elementem div, aby se vešel jeho obsahu.
- ' hover:min-w-screen Třída ” poskytne minimální výškový limit rovný 100 % velikosti obrazovky.
- ' zaoblené-md ',' bg-{barva}-{číslo} ',' textové centrum ', a ' text-bílý třídy jsou zodpovědné za zaoblené rohy, barvu pozadí, text zarovnaný na střed a bílou barvu textu prvku div. rohy prvku div zaoblené.
Výstup:
Z níže uvedeného výstupu je zřejmé, že minimální výška prvku se zvyšuje na 100 % velikosti obrazovky, když nad ním najedete kurzorem myši.
Použití vlastnosti minimální výšky se stavem zaostření
Chcete-li použít „ minimální výška ” se stavem fokusu v Tailwindu se používá následující syntaxe:
< div třída = 'focus:min-h-{velikost}...' > < / div >Použijme výše definovanou syntaxi v demonstraci. V tomto příkladu se minimální výška vstupního pole zvýší, když se na něj uživatel zaměří.
< vstup zástupný symbol = 'Zaměřte se na toto vstupní pole' třída = 'min-h-0 h-fit w-48 rounded-md bg-grey-200 text-center focus:min-h-[35%]' < / vstup >Vysvětlení výše uvedeného kódu je následující:
- ' vstup ” je vytvořeno s nějakým textem v atributu zástupného symbolu.
- Je poskytován minimální limit výšky 0px pomocí „ min-h-0 “třída. Vývojář tedy nastavil výchozí výšku prvku rovnou výšce potřebné k přizpůsobení obsahu pomocí „ h-fit “třída.
- ' zaostření:min-h-[35%] ” třída zvýší minimální výškový limit vstupního pole, když se na něj uživatel zaměří.
Výstup:
Z níže uvedeného výstupu je zřejmé, že výška vstupního pole se zvyšuje, jak se na něj uživatel zaměřuje. Důvodem je, že limit minimální výšky se zvyšuje z 0 pixelů na 35 % výšky obrazovky.
Použití vlastnosti minimální výšky s aktivním stavem ve službě Tailwind
Chcete-li použít „ minimální výška ” s variantou aktivního stavu v Tailwindu se používá následující syntaxe:
< div třída = 'active:min-h-{size}...' > < / div >Použijme výše definovanou syntaxi v demonstraci. V tomto příkladu se minimální výška tlačítka zvýší, když na něj uživatel aktivně klikne.
< knoflík třída = 'min-h-0 h-fit w-48 rounded-md bg-blue-300 text-center active:min-h-[35%]' > Kliknutím zvětšíte Výška < / knoflík >Tlačítko je vytvořeno s minimálním limitem výšky 0px. Nicméně pomocí „ aktivní:min-h-[35%] ” minimální výškový limit se zvýší z 0px na 35% velikosti obrazovky při každém kliknutí na tlačítko.
Výstup:
V následujícím výstupu je vidět, že minimální výška tlačítka se zvyšuje, když na něj uživatel klikne.
To je vše o použití vlastnosti minimální výšky na umístění kurzoru Tailwind, zaměření a další stavy v Tailwindu.
Závěr
Varianty stavu, jako je umístění kurzoru, zaměření a aktivní v Tailwindu, umožňují uživatelům vytvářet dynamická rozvržení návrhu. Chcete-li použít minimální výškovou třídu s variantami stavu v Tailwind, „ hover:min-h-{value} ',' focus:min-h-{value} ', a ' aktivní:min-h-{value} “ používají se třídy. Tento článek poskytuje postup pro použití umístění kurzoru, zaostření a dalších stavů s minimální třídou výšky v Tailwindu.