Angular Material පදනම මත නවතම UI අත්දැකීමක් ගෙන එන Mat Expressive නමැති ලයිබ්රරිය දැන් නිකුත් කර ඇත. මෙය Angular Material හි පවත්නා MatButton, MatFab වැනි කොම්පොනන්ට්වලට M3 Expressive ශෛලියක් එක්කරන, සම්පූර්ණයෙන්ම වෙනස් කිරීමක් නොවන, නව ස්ටයිල්, ඩිරෙක්ටිව් සහ අලුත් කොම්පොනන්ට් එකතුවක් වේ.
Mat Expressive එකේ ප්රධාන ලක්ෂණ තුනකි:
- SCSS mixin මගින් පළලේ Material token overrides සහ CSS variable භාවිතයෙන් පවතින කොම්පොනන්ට්වලට M3 Expressive ශෛලිය ලබා දීම.
- ඩිරෙක්ටිව් – CSS එකෙන් පසු නොහැකි shape morphing වැනි ක්රියාකාරකම් සඳහා.
- නව කොම්පොනන්ට් – loading indicator, FAB menu, split button වැනි M3 Expressive නිර්දේශිත පේටර්න සඳහා.
ඇතුළත් කරගත් සජීවී ඇනීමේ (motion) ක්රියාකාරකම් GSAP spring physics මත පදනම්ව ඇති අතර, prefers‑reduced‑motion සැකසුමට අනුකූලව ක්රියා කරයි. එමෙන්ම SSR (Server‑Side Rendering) සමඟ පූර්ණයෙන්ම අනුකූල වේ, එබැවින් SEO හෝ ප්රදර්ශන කාලය ගැන සැලකිල්ලක් නැත.
ලයිබ්රරිය ස්ථාපනය කිරීම සරල – ng add @ngm-dev/mat-exp කමාන්ඩ් එකක් පමණයි. පසුබැසීමේ (global) ස්ටයිල් එකතු කිරීම සඳහා styles.scss ෆයිලයේ @use '@ngm-dev/mat-exp' as mat‑exp; ලෙස ඇතුළත් කර, අවශ්ය mixin එකක් (උදා: @include mat‑exp.mat‑exp‑button‑styles();) කැඳවන්න.
ශ්රී ලංකාවට ඇති වැදගත්කම
Mat Expressive නවතම UI ප්රවණතා සමඟ ශ්රී ලංකාවේ සංවර්ධකයින්, සිසුන් හා ව්යාපාරිකයන්ට විශාල වාසි ගෙන දෙයි.
- සිසුන් – නවතම Material 3 Expressive නිර්දේශයන්ගෙන් පළපුරුදු වීම, ජාත්යන්තර UI/UX ප්රවණතා සමඟ සමානව ඉගෙනීමට අවස්ථාව.
- සංවර්ධකයින් – Angular Material එකේ පවත්නා කොඩ් බේස් එකම තබා, නව ශෛලියක් එක් කිරීමෙන් කාලය ඉතිරි කර, කාර්යක්ෂම UI නිර්මාණය කළ හැක.
- ව්යාපාරිකයන් – SSR‑අනුකූල, අඩු පරීක්ෂණ කාලයක්, සහ අලංකාර, ප්රතිචාරශීලී UI මගින් පාරිභෝගික අත්දැකීම වැඩි කර, වෙබ් අඩවි සහ ඇප්ස් වල පරිවර්තන අනුපාතය ඉහළ දැමිය හැක.
අවසානයේ, Mat Expressive Angular Material පදනමට අතිරේක ශක්තියක් එක් කරමින්, සංවර්ධකයින්ට අඩු කේතයෙහි වැඩි ප්රතිඵල ලබා දීමට උපකාරී වේ. ඔබේ ව්යාපෘතියේ UI අලුත් කර ගැනීමට මේ ලයිබ්රරිය අත්හදා බලන්න.
