වෙබ් අතුරුමුහුණතක් නිර්මාණය කරන වෙලාවේ, අයිකන (icons) සහ ලේබල් (labels) අතර සම්මුඛ ගැලපීම සරල නොවේ. SVG පදනම් අයිකන වලට අකුරු වැනි ස්ථිර baseline එකක්, ascender හෝ descender එකක් නොමැති නිසා, බ්රව්සරයේ පෙරනිමි සැකසුම් පාවිච්චි කරන විට අයිකනය පදයේ ඉහලට හෝ පහළට පෙනෙන ගැටලුවක් ඇතිවේ.
මෙම ලිපිය තුළ, GeoIcons නම් ලයිබ්රරියෙන් ලබාගත් රටවල් සිතියම් අයිකන උදාහරණයක් ලෙස ගෙන, Tailwind CSS හි flexbox සහ sizing utility ගොඩනැගීමෙන් මෙම ගැටලුව කෙලින්ම විසඳීමට හැකි ක්රම විස්තර කරයි. Flexbox භාවිතයෙන් අයිකනය සහ පෙළ එකම container එකේ items-center ලෙස සකස් කිරීමෙන්, දෙකේම මධ්යස්ථානය එකම තැනට ලගා වේ. එමෙන්ම gap-2 utility එකෙන් සමගාමී අවකාශයක් ලබා දිය හැක.
අයිකනයේ උස (height) පදයේ line-height එකට ගැලපෙන පරිදි සකස් කිරීමත් අත්යවශ්ය වේ. Tailwind හි text-base (16px font-size, 24px line-height) භාවිතා කරන විට, අයිකනය 20px (h-5 w-5) ලෙස සකස් කළහොත්, පදය හා අයිකනය අතර සම්මුඛ ගැලපීම නිරවුල් වේ. එසේ නොවී text-sm (20px line-height) සඳහා 16px (h-4 w-4) අයිකනය යොදා ගත යුතුය.
ශ්රී ලංකාවට ඇති වැදගත්කම
ශ්රී ලංකාවේ බොහෝ සංවර්ධකයන්, UI/UX වැඩසටහන්, e‑commerce වෙබ් අඩවි, සහ අධ්යාපනික පළපුරුදු වෙබ් ඇප්ලිකේෂන් නිර්මාණය කරන විට Tailwind CSS භාවිතා කරයි. ඉහත සඳහන් alignment ක්රමය අනුගමනය කිරීමෙන්:
- අදාල UI එකේ පාරිභෝගික අත්දැකීම වැඩි වේ – අයිකන සහ පෙළ එකට ගැලපී ඇති නිසා පෙනුම වඩාත් සරල සහ වෘත්තීයමය වේ.
- කේත ලිවීමේ වේගය වැඩිවේ – flexbox සහ utility classes භාවිතයෙන් CSS කේතය අඩු කර, අඩු maintenance අවශ්ය වේ.
- ඉගෙනුම් වගුවේ ප්රතිලාභ – දේශීය විශ්වවිද්යාල සහ bootcamp පාඨමාලා වල Tailwind CSS අංශයක් ලෙස මෙම පියවරන් ඇතුළත් කිරීමෙන්, නව තාක්ෂණික කුසලතා ඉක්මනින් පසුබැසීමක් නොවී ඉගැන්විය හැක.
ඉහත ක්රමයන් නිවැරදිව අනුගමනය කළහොත්, ශ්රී ලංකාවේ තාක්ෂණික ව්යාපාරිකයන්ට UI ගුණාත්මකත්වය ඉහළ යාමෙන් පාරිභෝගික රැඳවුම් වැඩිවීම, සහ සංවර්ධකයන්ට කාලය හා වියදම ඉතිරි වීමේ වාසි ලැබේ.
අවසන් වශයෙන්, Tailwind CSS හි flexbox, sizing, හා translate utilities භාවිතා කිරීම අයිකන-පෙළ සම්මුඛ ගැලපීමේ ගැටලුවට සරල හා පවතින විසඳුමක් වේ. ඔබේ ඊළඟ ව්යාපෘතියේ UI එකට මේ ක්රම අත්හදා බලන්න; අඩු කේතයක්, උසස් පෙනුමක්, සහ වඩා හොඳ පරිශීලක අත්දැකීමක් ඔබේ අතේ ඇත.
