Open Source UI Components – Free Library for Modern Web Projects

Free Open Source UI Elements for Modern Web Projects
Free Open Source UI Elements for Modern Web Projects

Introduction

இன்று Software Developer பயன்படும் ஒரு இணைய தளத்தை பற்றி பார்க்க இருக்கின்றோம். ui/Ux என்றாலே பல developer கள் கஷ்ட படும் ஒரு பிரிவாகும். உண்மை யும் அதுதான் ஏன் என்றால் பலருக்கு color , style and alignment இவைகளை கையாள்வது கடினம் . அதனால் தான் இந்த சிக்கல் உருவாகின்றது. ஆகவே தான் நாம் இந்த இணைய தளத்தை உங்களுக்கு அறிய தருகின்றோம். so Open Source UI Components இந்த பதிவை பார்வையிட்டு நீங்களும் பாவித்து கொள்ளுங்கள்.

URL for the Website

First of all நீங்கள் இந்த இணையதளம் செல்லுங்கள். https://uiverse.io . இங்கே சென்றால் கீழே உள்ளது போல் அதன் interface தோன்றும்.

image
image

so இங்கே நமக்கு வேண்டிய அனைத்தும் கிடைக்கும் தேடினால்.

Steps of Getting Code

Actually இங்கே Elements என்ற Tab இல் பார்த்தால் அங்கே பல வகையான பிரிவுகளில் அனைத்தும் பிரிக்கப்பட்டுள்ளது. CheckBox, Cards, Input and Forms. என அனைத்தும் இங்கே கிடைக்கும். so நாம் செய்ய வேண்டியது எல்லாம் எந்த Design நமக்கு பிடித்து உள்ளதோ அதை select செய்ய வேண்டும். So next அதன் html and css ஐ Copy Paste செய்ய வேண்டியதுதான். ஏதும் மாற்றம் இருப்பின் அதனை Change பண்ணி கொடுத்தால் நமக்கு தேவையான design ready.

and Dark theme or light theme எது வேண்டுமோ அதனை select பண்ணலாம். also Tailwind or css எந்த style method என்பதை நாம் select பண்ணலாம். அத்துடன் getcode என்பதை click செய்தால் எமக்கு தேவையான source code ஐ download செய்யலாம்.

Example Open Source UI Components

for example நான் Form என்பதை select செய்து அதன் கோட் எடுத்து test பண்ணுவோம்.

image
Sample Form Design

பின்னர் அதன் கீழ் வரும் get code என்பதை click பண்ண வேண்டும்.

image
Design and Codes

and also Dark theme or normal theme என்பதை தெரிவு செய்தால் அதற்க்கு தகுந்தாற் போல் source Code ஐ எடுக்கலாம்.

Join community and conclusion

அத்துடன் Joint Community என்பதன் ஊடாக இந்த community இல் இணைந்து இன்னும் பல ui and ux design பற்றிய பல தகவல்களை பெறலாம். அதே போல் இந்த Code களை நமக்கு தேவையான அடுத்த பிரபல்யமான React , Vue, Svelte and Lit போன்ற JavaScript frameworks/libraries convert பண்ணலாம். அத்துடன் Export பண்ணியும் எடுக்கலாம். பாருங்கள் Modern technologies பாவிப்பதானல் இதுதான் நன்மை. So இந்த பதிவுகள் பிடிதிருந்தால் அடுத்தவர்களுக்கு பயனுள்ளதாக அமைய இதை பகிர்ந்து கொள்ளுங்கள்.

அதே போல் பிப் உடன் எப்படி mysqli database ஐ Connect பண்ணுவது என்பதை அறிய இந்த Connect PHP and MySQL Database click செய்யவும்.

Leave a Reply

Your email address will not be published. Required fields are marked *