Чому Salesforce не п?дтриму? HTML теги та як з цим впоратися?
Цього тижня на просторах Трейлблейзер ком'юн?т? натрапив на ц?каве питання:
?Salesforce LWC не п?дтриму? html теги h1-h6??
З одного боку, ми зна?мо, що LWC – це, по сут?, по?днання фронт-енду та бек-енду в одному.
HTML, JS та CSS в?дпов?дають за фронт-енд частину, а Apex Class викону? роль бек-ендово? частини.
? по ц?й лог?ц? все повинно працювати без проблем, тим б?льше, що теги h1 та под?бн? до них – це загальноприйнят? теги. Але не в цьому випадку.
Оск?льки Salesforce ма? строг? вимоги до дизайну, все, що в?дбува?ться в рамках Salesforce org, повинно в?дпов?дати цим правилам. Проте ?нод? нам потр?бно внести корективи, ? тод? доводиться знаходити альтернативн? р?шення.
Це нагаду? ситуац?ю, коли у всесв?т? д?ють закони класично? ф?зики, але на р?вн? квантово? механ?ки все в?дбува?ться за ?ншими законами.
В?н був проведений Томасом Юнгом у 1801 роц?, ? став одним ?з найважлив?ших доказ?в хвильово? природи св?тла. У сучасн?й ф?зиц? цей експеримент проводиться з використанням фотон?в, електрон?в ? нав?ть атом?в, щоб продемонструвати квантов? властивост? частинок, зокрема принцип суперпозиц?? ? ?нтерференц?ю.
Результат експерименту показу?, що коли фотони проходять через дв? щ?лини, вони створюють ?нтерференц?йну картину на екран?, що св?дчить про хвильову природу св?тла. Однак, коли спостер?га?ться за шляхом фотон?в (як за класичними частинками), ?нтерференц?я зника?, ? вони поводяться як частинки.
Повернемося до Salesforce.
Я створив LWC, який просто виводив на стор?нку HTML теги в?д h1 до h6.
Результат:
Д?йсно, ми бачимо, що незалежно в?д того, який тег використову?ться, система виводить ?х ус? з однаковим виглядом, п?д один стандарт.
Але тут нам на допомогу приходить CSS – якщо Salesforce не хоче грати за нашими правилами, ми напишемо сво? власн?.
Додамо класам h-тег?в в?дпов?дн? стил?, прописавши для кожного класу св?й розм?р ? стиль шрифту.
Результат:
Чудово! Тепер ми бачимо заголовки з в?дпов?дними розм?рами та ?вагою? тексту.
Але ви, можливо, запита?те: нав?що ст?льки мороки, коли в нас ? в?дпов?дн? класи в SLDS для заголовк?в, як? вже вид?ляють текст?
Salesforce Lightning Design System (SLDS) — це наб?р стандарт?в, компонент?в та ?нструмент?в, що дозволя? розробникам створювати ?нтерфейси користувача, як? в?дпов?дають дизайну та вимогам Salesforce. SLDS допомага? створювати ?нту?тивно зрозум?л?, адаптивн? та консистентн? користувацьк? ?нтерфейси в межах Salesforce, збер?гаючи узгоджен?сть з дизайн-системою Salesforce.
? це справд? так. Ось к?лька таких клас?в:
Як бачимо, можна об?йтися ? базовими класами SLDS, але коли ситуац?я вимага? б?льшо? гнучкост?, кращим вар?антом буде використання CSS.
Окр?м h-тег?в, у LWC також не п?дтримуються теги, як-от <button> чи <table>.
Salesforce дода? сво? аналоги або перепису? ?х стил?. Тому в SLDS ? в?дпов?дн? аналоги:
Наприклад:
Висновок
Salesforce ма? строг? правила в?дносно стил?в ? оформлення, ? це лог?чно та правильно, оск?льки без правил настав би хаос. Однак, платформа також да? свободу в реал?зац?? функц?оналу, розум?ючи, що ?нколи потр?бен певний в?дступ в?д стандарт?в, що ? чудовим!
З ум?нням роботи з CSS та знанням властивостей SLDS можна створювати потужн? та гнучк? р?шення.
Корисн? посилання