Narzędzia wysokości

Narzędzia wysokości w Tailwind odzwierciedlają system szerokości. Prefiks h-* określa wysokość elementu, a wartości pochodzą z tej samej skali odstępów, rozmiarów ułamkowych i słów kluczowych o znaczeniu semantycznym, które znają Państwo już z w-*. W przeciwieństwie do szerokości wysokości zachowują się w CSS inaczej, ponieważ elementy blokowe są domyślnie zazwyczaj tak wysokie jak ich zawartość — dlatego narzędzia jawnie określające wysokość stosuje się bardziej wybiórczo.

Stałe wysokości korzystają z tej samej skali odstępów co szerokości — 4 px na jednostkę. h-4 oznacza 16 px, h-12 — 48 px, a h-96 — 384 px. Typowe zastosowania to wysokości przycisków (h-10 lub h-12), rozmiary awatarów (h-8 w-8) oraz linie rozdzielające (h-px dla linii o grubości 1 px). Połączenie h-* i w-* o tej samej wartości pozwala uzyskać idealne kwadraty.

h-full ustawia wysokość elementu na 100% wysokości elementu nadrzędnego. Aby to zadziałało, element nadrzędny musi mieć jawnie określoną wysokość. Jest to często używane w przypadku przyklejanych pasków bocznych, obrazów sekcji hero lub kart w wierszu flex, które mają rozciągać się do tej samej wysokości. Bez jawnie określonej wysokości elementu nadrzędnego h-full nie daje efektu, ponieważ wysokości procentowe wymagają elementu nadrzędnego o określonym rozmiarze.

h-screen ustawia wysokość na 100vh (100% wysokości obszaru widoku), co sprawdza się w przypadku pełnoekranowych sekcji hero i szkieletów aplikacji. W mobilnych przeglądarkach pasek adresu może powodować, że 100vh wyjdzie poza ekran. Nowoczesnym rozwiązaniem jest h-dvh (100dvh — dynamiczna wysokość obszaru widoku), obsługiwane przez Tailwind w wersji 3.4 i nowszych, które automatycznie uwzględnia zwijane elementy interfejsu przeglądarki.

h-auto przywraca elementowi naturalną wysokość zależną od zawartości, gdy wcześniej w mniejszym punkcie przerwania ustawiono wysokość stałą lub procentową. Na przykład h-48 md:h-auto nadaje karcie stałą wysokość na urządzeniach mobilnych (co dobrze sprawdza się w przypadku miniatur obrazów w siatce), ale na komputerach pozwala jej dopasować się naturalnie do zawartości, której długość może się zmieniać bez nieestetycznego efektu.

h-px ustawia wysokość dokładnie na 1 px, dzięki czemu idealnie nadaje się do poziomych separatorów i linii rozdzielających. W połączeniu z w-full bg-gray-200 tworzy przejrzysty separator pasujący do systemu projektowego, bez potrzeby definiowania niestandardowej klasy CSS. Można również użyć h-0.5, aby uzyskać linię o grubości 2 px, gdy 1 px wydaje się zbyt cienkie na ekranach o dużej gęstości pikseli.

Podobnie jak ich odpowiedniki dotyczące szerokości, h-fit dopasowuje rozmiar elementu do jego zawartości, h-min używa minimalnej wysokości zawartości, a h-max — jej maksymalnej wysokości. Są one potrzebne rzadziej niż odpowiedniki dotyczące szerokości, ponieważ wysokość zazwyczaj i tak zależy od zawartości. Najważniejsze zastosowanie pojawia się wtedy, gdy elementowi nadano stałą lub procentową wysokość i trzeba powrócić do rozmiaru zależnego od zawartości w określonym punkcie przerwania.

Podobnie jak szerokości, wysokości mogą korzystać z wartości ułamkowych: h-1/2, h-1/3, h-2/3, h-1/4 i h-3/4. Są to wartości procentowe odnoszące się do wysokości kontenera nadrzędnego. Dobrze sprawdzają się w kontenerach o stałej wysokości, takich jak karta, panel lub sekcja szkieletu aplikacji, gdy elementy podrzędne mają zajmować określoną część dostępnej przestrzeni w pionie.

Gdy zawartość jest wyższa niż określona wysokość, domyślnie wystaje poza element. Połącz narzędzia wysokości z overflow-hidden, aby przyciąć zawartość, z overflow-y-auto, aby dodać pasek przewijania tylko w razie potrzeby, lub z overflow-y-scroll, aby zawsze go wyświetlać. Jest to niezbędne w przypadku przewijanych pasków bocznych, okien czatu i bloków kodu o stałej wysokości.

Użyj min-h-*, aby zagwarantować, że element nigdy nie będzie niższy od określonej wartości, a max-h-*, aby ograniczyć jego maksymalną wysokość. min-h-screen to często stosowany wzorzec w układach obejmujących całą stronę, które powinny wypełniać obszar widoku nawet wtedy, gdy zawartość jest krótka. max-h-64 wraz z overflow-y-auto to standardowe rozwiązanie dla menu rozwijanych i list wyboru, które nie powinny nadmiernie rosnąć.

Oto praktyczny komponent karty pokazujący narzędzia wysokości w działaniu. Karta ma miniaturę o stałej wysokości, elastyczny obszar zawartości oraz stopkę o stałej wysokości z przyciskiem akcji. Ten wzorzec jest często stosowany na listach produktów i stronach indeksów blogów, gdzie kluczowa jest spójność wizualna kart o zawartości różnej długości.

W tej lekcji poznali Państwo: stałe narzędzia h-* korzystają z tej samej skali odstępów co w-*, h-screen wypełnia wysokość obszaru widoku, a h-dvh jest nowoczesną alternatywą bezpieczną na urządzeniach mobilnych oraz min-h-screen wraz z flex-col i flex-1 tworzy układy ze stopką przyklejoną do dołu. Następnie omówimy narzędzia ograniczające minimalny i maksymalny rozmiar zarówno szerokości, jak i wysokości.