Како користити статичке услужне програме у Таилвинд-у?

Kako Koristiti Staticke Usluzne Programe U Tailvind U



Таилвинд је добро познати оквир који нуди колекцију услужних класа за стилизовање ХТМЛ елемената. Међутим, понекад ће програмери можда морати да користе нека прилагођена ЦСС својства или вредности које нису доступне у подразумеваној конфигурацији Таилвинд-а. У овој ситуацији, они могу да користе статичке услужне програме за креирање сопствених услужних класа са прилагођеним ЦСС правилима.

Овај чланак ће објаснити начин коришћења статичких услужних програма у Таилвинд ЦСС-у.

Како користити статичке услужне програме у Таилвинд-у?

Да бисте користили статичке услужне програме у Таилвинд-у, додајте „ аддУтилитиес() ” у датотеци „таилвинд.цонфиг.јс” и конфигуришите жељене статичке услужне програме. Затим користите статичке услужне програме у ХТМЛ програму и уверите се да статички услужни програми исправно раде када гледате ХТМЛ веб страницу.







Хајде да истражимо следеће кораке:



Корак 1: Конфигуришите статичке услужне програме у датотеци „таилвинд.цонфиг.јс“.
Отвори ' таилвинд.цонфиг.јс ” датотеку и додајте „ додаци ” одељак. Затим користите „ аддУтилитиес() ” функција за конфигурисање жељених статичких услужних програма. На пример, конфигурисали смо следеће статичке услужне програме:



цонст плугин = рекуире('таилвиндцсс/плугин')

модуле.екпортс = {
садржај: ['./индек.хтмл'],
додаци: [
плугин(фунцтион({ аддУтилитиес }) {
аддУтилитиес({

'.цонтент-ауто': {
'цонтент-висибилити': 'ауто',
},

'.цонтент-хидден': {
'цонтент-висибилити': 'хидден',
},

'.бг-цорал': {
позадина: 'корал'
},

'.скев-5дег': {
трансформисати: 'скевИ(-5дег)',
},

})
})
]
};

овде:





  • аддУтилитиес() ” функција региструје прилагођене статичке услужне програме обезбеђујући објекат који садржи класе услужних програма и њихове одговарајуће стилове.
  • .цонтент-ауто ” услужна класа поставља својство видљивости садржаја на ауто.
  • .садржај-скривен ” услужна класа поставља својство видљивости садржаја на скривено.
  • .бг-цорал ” услужна класа поставља боју корала у позадину.
  • .скев-5дег ” услужна класа поставља својство трансформације на скевИ(-5дег).

Корак 2: Користите статичке услужне програме у ХТМЛ програму
Сада користите жељене статичке услужне програме у ХТМЛ програму:

< тело >

< див класа = 'х-сцреен бг-цорал' >
< стр класа = 'аутоматски садржај' >Здраво< / стр >
< стр класа = 'садржај-скривен' >Добродошли овде< / стр >
< стр класа = 'косо-5 степени' >Трансформисање текста< / стр >
< / див >

< / тело >

Корак 3: Проверите излаз
Коначно, покрените ХТМЛ програм да бисте били сигурни да статички услужни програми исправно раде:



Горњи излаз указује да статички услужни програми функционишу исправно у складу са којим су дефинисани.

Закључак

Да бисте користили статичке услужне програме у Таилвинд-у, потребно је да користите „ аддУтилитиес() ” у датотеци „таилвинд.цонфиг.јс” и конфигуришите жељене статичке услужне програме. Функција „аддУтилитиес()“ и додајте услужне класе које се могу применити директно у ХТМЛ програму. Овај чланак је објаснио метод коришћења статичких услужних програма у Таилвинд ЦСС-у.