„ х-екран ” класа у Таилвинд-у се користи за додељивање висине прозора за приказ ХТМЛ елементу. Виевпорт је само друго име за величину екрана клијента. Програмер може лако да изабере цео оквир за приказ уз помоћ овог „ х-екран ” а затим примените неколико класа Таилвинд у складу са тим.
Овај чланак ће пружити процедуру за додавање висине прозора за приказ елементу у Таилвинд помоћу „ х-екран ' класа.
Како подесити висину прозора за приказ елемента користећи класу „х-сцреен“ у Таилвинд-у?
Ако је елементу додељена висина прозора помоћу „ х-екран ” аутоматски ће прилагодити својство висине према екрану клијента. Да бисте користили висину прозора у Таилвинд-у, пратите доле наведене конвенције:
< див класа = 'х-екран' > Здраво < / див >
Из горње демонстрације јасно је да је „ х-екран ” се користи у атрибуту класе елемента заједно са разним другим Таилвинд класама за дизајнирање распореда.
Хајде да направимо лажну контролну таблу и дамо висину прозора за приказ бочној траци екрана контролне табле.
< див класа = 'флек' >
< див класа = 'в-56 х-сцреен роундед-лг бг-блуе-600 тект-центер тект-циан-50 пи-6 тект-2кл фонт-болд' > Дасхбоард
< ул класа = 'текст-лг пи-8 спаце-и-7' >
< то >Тим< / то >
< то >Пројекти< / то >
< то >Извештаји< / то >
< то >Документи< / то >
< / ул >
< / див >
< див класа = 'тект-центер тект-3кл пи-8 пс-5' >Добро дошли на контролну таблу!< / див >
< / див >
Објашњење кода:
- Прво, „ див ” елемент је креиран са класом „ флек “, ова класа поравнава постојеће ставке у хоризонталној линији.
- Затим креирајте још један „ див ” са 8 пиксела горњих и доњих паддинга користећи „ пи-2 ” класе и доделите јој фиксну ширину користећи „ в-56 ' класа. Затим поставите висину елемента на висину прозора за приказ помоћу „ х-екран ' класа. Углови контејнера су заобљени.
- „ бг-{цолор}-{нумбер} ” класа се користи да обезбеди боју позадине контејнеру. „ текстуални центар ” класа поравнава садржај текста са средиштем. Тежина фонта за текст је подешена на „ одважан “, а величина фонта је „ 2кл ”.
- Затим, неуређена листа „< ул >” се креира са великом величином фонта и „ 48пк ” маргин-топ користећи класу „спаце-и” таилвинд.
- Затим се креирају четири ставке листе помоћу „< то >” ознаке.
- Други ' див ” елемент је креиран са 32пк од врха до дна и 20пк у инлине-старт паддингу користећи „ пи” и „пс ” класе.
Излаз за горе објашњени код је следећи:
Из горњег излаза, јасно је да бочна трака контролне табле има висину екрана. То је све о сврси „ х-екран ” час у Таилвинд.
Закључак
„ х-екран ” класа у Таилвинд-у се користи за додељивање висине прозора за приказ елементу, тј. висини екрана клијента. Помоћу ' х-екран ” елемент ће аутоматски наследити висину екрана. Да бисте користили висину прозора у Таилвинд-у, „ х-екран ” својство мора бити прослеђено као вредност за „ класа ” атрибут попут „< див цласс= „х-екран ”>”. Овај чланак је дао процедуру за коришћење „ х-екран ” час у Таилвинд.