𝗧𝗵𝗶𝘀 𝗜𝘀 𝗔 𝗚𝗼𝗼𝗱 𝗘𝗫𝗮𝗺𝗽𝗹𝗲

இது ஒரு சிறந்த உதாரணம்

உங்கள் திட்டங்களை எளிமையாக்க நீங்கள் இயல்பான HTML கூறுகளைப் பயன்படுத்தலாம். ஒரு நூலகத்தை (library) நிறுவுவதற்குப் பதிலாக நீங்கள் பயன்படுத்தக்கூடிய 8 கூறுகள் இதோ:

• மோடல்களுக்கு (modals) <dialog>
• அக்கார்டியன்களுக்கு (accordions) <details> மற்றும் <summary>
• பேனல்களுக்கு (panels) popover attribute
• டிராப்டவுன்கள் (dropdowns) மற்றும் ஆட்டோகம்ப்ளீட்டிற்கு (autocomplete) <select> மற்றும் <datalist>
• ஸ்லைடர்களுக்கு (sliders) <input type="range">
• கலர் பிக்கர்களுக்கு (color pickers) <input type="color">
• டேட் பிக்கர்களுக்கு (date pickers) <input type="date">
• லேசி லோடிங்கிற்கு (lazy loading) loading="lazy"

இந்தக் கூறுகள் நீங்கள் குறைவான குறியீடுகளை (code) உருவாக்கவும், பராமரிப்பைக் குறைக்கவும் உதவும். இவை இலவசமாக அணுகல்தன்மை (accessibility) அம்சங்களையும் வழங்குகின்றன.

ஒரு நூலகத்தை நிறுவாமலேயே பொதுவான UI கூறுகளை உருவாக்க இந்த கூறுகளைப் பயன்படுத்தலாம். உதாரணமாக, ஒரு focus trap மற்றும் ஸ்டைல் செய்யக்கூடிய backdrop கொண்ட modal விண்டோவை உருவாக்க நீங்கள்