Material Design Lite (MDL) একটি জনপ্রিয় ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা গুগলের Material Design নীতির উপর ভিত্তি করে তৈরি। MDL-এর Spinner Component ব্যবহারকারীকে একটি লোডিং বা প্রসেসিং স্টেটের মাধ্যমে নির্দেশ দেয়, যখন কোনো ডেটা বা কন্টেন্ট লোড হচ্ছে বা একটি অ্যাকশন সম্পন্ন হচ্ছে। এটি সাধারণত ব্যবহারকারীকে দেখানোর জন্য ব্যবহৃত হয় যে, সিস্টেম কোনো কাজ করছে এবং এটি শেষ হতে কিছুটা সময় নেবে।
MDL এর Spinner সাধারণত একটি ছোট এবং আকর্ষণীয় অ্যানিমেটেড বাটন বা রিং হয়ে থাকে, যা লোডিং স্টেট দেখানোর জন্য ব্যবহার করা হয়।
MDL Spinner Component কী?
Spinner বা Progress Spinner হল একটি গেটার বা রিং শেপ যা ইন্টারঅ্যাকটিভ ওয়েব অ্যাপ্লিকেশনের মধ্যে সাধারণত ব্যবহারকারীদের কাছে লোডিং বা প্রগ্রেস দেখানোর জন্য ব্যবহৃত হয়। MDL-এ Spinner ব্যবহার করা খুবই সহজ এবং এর জন্য কোনো অতিরিক্ত কনফিগারেশন প্রয়োজন হয় না। MDL mdl-spinner ক্লাস ব্যবহার করে আপনি একটি স্পিনার তৈরি করতে পারেন।
MDL Spinner এর বেসিক ব্যবহার
MDL Spinner সাধারণত ডেটা লোডিং বা কোনো অ্যাকশন সম্পন্ন হতে সময় নিলে ব্যবহারকারীকে প্রদর্শন করতে ব্যবহৃত হয়। এটি সাধারণত একটি বাটনের উপরে অথবা নির্দিষ্ট জায়গায় প্রদর্শিত হয়। MDL-এ Spinner ব্যবহার করতে হলে আপনাকে HTML এবং CSS ক্লাস ব্যবহার করতে হবে।
বেসিক MDL Spinner উদাহরণ:
<!-- Button to trigger spinner -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="showSpinner">
Show Spinner
</button>
<!-- MDL Spinner -->
<div class="mdl-spinner mdl-js-spinner is-active"></div>
<!-- MDL JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
<script>
// Get the spinner element
var spinner = document.querySelector('.mdl-spinner');
// Get the button that triggers the spinner
var showSpinnerButton = document.querySelector('#showSpinner');
// Show the spinner when the button is clicked
showSpinnerButton.addEventListener('click', function() {
spinner.classList.add('is-active');
});
</script>
এখানে:
- mdl-spinner: এটি স্পিনার তৈরি করতে ব্যবহৃত ক্লাস।
- is-active: এই ক্লাসটি স্পিনারকে অ্যাক্টিভ বা প্রদর্শনযোগ্য করে তোলে।
- mdl-js-spinner: MDL এর স্পিনার কম্পোনেন্টে ব্যবহৃত ক্লাস।
এটি একটি বেসিক MDL Spinner তৈরি করবে। যখন ব্যবহারকারী "Show Spinner" বাটনে ক্লিক করবেন, তখন স্পিনারটি প্রদর্শিত হবে।
MDL Spinner কাস্টমাইজেশন
MDL Spinner এর আকার, রঙ এবং অ্যানিমেশন পরিবর্তন করতে কিছু সহজ কাস্টমাইজেশন করতে পারবেন। নিচে কিছু কাস্টমাইজেশন দেখানো হলো।
১. Spinner এর আকার পরিবর্তন করা
MDL Spinner এর আকার পরিবর্তন করার জন্য আপনি mdl-spinner--single-color বা mdl-spinner--size- ক্লাস ব্যবহার করতে পারেন। এর মাধ্যমে আপনি স্পিনারের সাইজ কাস্টমাইজ করতে পারবেন।
উদাহরণ:
<!-- Small Spinner -->
<div class="mdl-spinner mdl-js-spinner is-active mdl-spinner--size-1"></div>
<!-- Large Spinner -->
<div class="mdl-spinner mdl-js-spinner is-active mdl-spinner--size-3"></div>
এখানে, mdl-spinner--size-1 ছোট স্পিনার তৈরি করবে এবং mdl-spinner--size-3 বড় স্পিনার তৈরি করবে।
২. Spinner এর রঙ কাস্টমাইজ করা
MDL Spinner এর রঙ পরিবর্তন করতে আপনি mdl-spinner--multi-color বা mdl-spinner--single-color ক্লাস ব্যবহার করতে পারেন।
উদাহরণ:
<!-- Multi-color Spinner -->
<div class="mdl-spinner mdl-js-spinner is-active mdl-spinner--multi-color"></div>
<!-- Single-color Spinner -->
<div class="mdl-spinner mdl-js-spinner is-active mdl-spinner--single-color"></div>
এখানে, mdl-spinner--multi-color একাধিক রঙের স্পিনার তৈরি করবে, এবং mdl-spinner--single-color একক রঙের স্পিনার তৈরি করবে।
MDL Spinner এর ব্যবহার এবং সুবিধা
MDL Spinner ব্যবহার করার কিছু গুরুত্বপূর্ণ সুবিধা হলো:
১. ইন্টারঅ্যাকটিভ ব্যবহারকারীর অভিজ্ঞতা
MDL Spinner ব্যবহারকারীকে লোডিং বা প্রগ্রেস স্টেট প্রদর্শন করতে সহায়তা করে, যা ওয়েবসাইট বা অ্যাপ্লিকেশন ব্যবহারের সময় ব্যবহৃত কার্যকলাপের জন্য একটি ইন্টারঅ্যাকটিভ অনুভূতি তৈরি করে।
২. স্বচ্ছ এবং আকর্ষণীয় ডিজাইন
MDL Spinner-এর ডিজাইন খুবই পরিষ্কার, আকর্ষণীয় এবং গুগলের Material Design নীতির অনুসরণ করে। এটি সিস্টেমের লোডিং স্টেটগুলো পরিষ্কারভাবে প্রদর্শন করে এবং ব্যবহারকারীকে ইনফরমেশন প্রক্রিয়া সম্পর্কে অবহিত রাখে।
৩. সহজ কাস্টমাইজেশন
MDL Spinner খুব সহজে কাস্টমাইজ করা যায়। আপনি স্পিনার সাইজ, রঙ এবং অ্যানিমেশন টাইপ পরিবর্তন করে আপনার প্রয়োজন অনুযায়ী এটি কাস্টমাইজ করতে পারেন।
৪. রেসপন্সিভ ডিজাইন
MDL Spinner রেসপন্সিভ ডিজাইন সমর্থন করে, যা মোবাইল, ট্যাবলেট এবং ডেস্কটপে সমানভাবে কাজ করে।
সারাংশ
Material Design Lite (MDL) এর Spinner Component ব্যবহারকারীর জন্য একটি কার্যকরী টুল যা ওয়েবসাইট বা অ্যাপ্লিকেশনের লোডিং বা প্রসেসিং স্টেট দেখাতে ব্যবহৃত হয়। MDL-এ Spinner খুবই সহজে তৈরি এবং কাস্টমাইজ করা যায়। আপনি স্পিনার সাইজ, রঙ, এবং অ্যানিমেশন পরিবর্তন করে এটিকে আপনার ডিজাইন এবং প্রয়োজন অনুযায়ী তৈরি করতে পারেন। MDL Spinner এর মাধ্যমে আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনের ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সহায়তা করা যায়।
Read more
