Materialize এর Buttons এবং FAB (Floating Action Button)

Materialize CSS এর মাধ্যমে ওয়েবসাইটে ব্যবহারকারীর ইন্টারঅ্যাকশন সহজ এবং কার্যকর করার জন্য Buttons এবং FAB (Floating Action Button) খুবই গুরুত্বপূর্ণ উপাদান। এই উপাদানগুলোর মাধ্যমে আপনি ওয়েবসাইটের ইউজার ইন্টারফেস (UI) আরও আকর্ষণীয় এবং ব্যবহারযোগ্য করতে পারেন। নিচে Materialize এর Buttons এবং FAB এর ব্যবহার বিস্তারিতভাবে আলোচনা করা হলো।

Materialize এর Buttons

Materialize CSS এর Buttons অত্যন্ত সহজে কাস্টমাইজযোগ্য এবং ইউজার-বান্ধব। Materialize এর buttons এর মধ্যে বিভিন্ন স্টাইল এবং ফিচার রয়েছে, যা ওয়েবসাইটে একাধিক ধরণের ইন্টারঅ্যাকশন তৈরি করতে সাহায্য করে। Materialize CSS এর buttons প্রাথমিকভাবে flat design এবং Material Design এর নীতির ওপর ভিত্তি করে তৈরি।

Buttons এর ধরণ:

1. Basic Button: এটি একটি সাধারণ বাটন যা আপনি সহজেই কোনো অ্যাকশন প্রয়োগ করার জন্য ব্যবহার করতে পারেন।

   <a class="btn">Click Me</a>
   

2. Colored Button: আপনি Materialize এর প্রি-ডিফাইন্ড ক্লাস ব্যবহার করে বিভিন্ন রঙের বাটন তৈরি করতে পারেন, যেমন red, blue, green ইত্যাদি।

   <a class="btn red">Red Button</a>
   <a class="btn blue">Blue Button</a>
   

3. Flat Button: Flat button হলো একটি বাটন যা elevation ব্যবহার না করে flat design অনুসরণ করে।

   <a class="btn-flat">Flat Button</a>
   

4. Large এবং Small Button: আপনি চাইলে বাটনের আকার পরিবর্তন করতে পারেন large বা small ক্লাস ব্যবহার করে।

   <a class="btn-large">Large Button</a>
   <a class="btn-small">Small Button</a>
   

5. Disabled Button: কোনো বাটন অকার্যকর (disabled) করতে disabled ক্লাস ব্যবহার করা হয়।

   <a class="btn disabled">Disabled Button</a>
   

Button Group:

Materialize এ একাধিক বাটন একত্রে গ্রুপ আকারে প্রদর্শন করতে button group ব্যবহার করা যেতে পারে।

<div class="btn-group">
  <a class="btn">Option 1</a>
  <a class="btn">Option 2</a>
  <a class="btn">Option 3</a>
</div>

Floating Action Button (FAB)

Floating Action Button (FAB) হলো একটি বিশেষ ধরনের বাটন যা সাধারণত স্ক্রীনের কোনে থাকে এবং এটি একটি গুরুত্বপূর্ণ অ্যাকশন বা ফিচারকে চিহ্নিত করে। এটি Material Design এর একটি মূল উপাদান, যা ইউজারের চোখে পড়ে এবং তাদের একটি নির্দিষ্ট অ্যাকশন গ্রহণে সহায়তা করে।

FAB সাধারণত বড় আকারের এবং circle আকারে থাকে, যা সাধারণ বাটনের তুলনায় আরো আকর্ষণীয় ও সেন্ট্রালাইজড। FAB খুবই কার্যকরী, কারণ এটি কোন নির্দিষ্ট ফিচারের জন্য সহজ এবং দ্রুত প্রবেশযোগ্য একটি অ্যাকশন প্রদানে সহায়ক।

FAB এর ব্যবহার

1. Basic FAB: একটি সাধারণ floating action button ব্যবহার করার উদাহরণ:

   <a class="btn-floating btn-large waves-effect waves-light red">
     <i class="material-icons">add</i>
   </a>
   

   এখানে:

   • btn-floating এর মাধ্যমে FAB স্টাইল অ্যাপ্লাই করা হয়েছে।
   • btn-large FAB এর আকার বড় করে।
   • waves-effect waves-light এর মাধ্যমে এক ধরনের এনিমেশন এবং হালকা রঙের ইফেক্ট যুক্ত করা হয়েছে।
   • material-icons ক্লাস ব্যবহার করা হয়েছে FAB এর মধ্যে একটি আইকন প্রদর্শনের জন্য।

2. Multiple FAB: আপনি একাধিক FAB আইকন ব্যবহার করতে পারেন, যেখানে মূল FAB আইকনের ভিতর থেকে বিভিন্ন অপশন বের হবে।

   <div class="fixed-action-btn">
     <a class="btn-floating btn-large red">
       <i class="large material-icons">mode_edit</i>
     </a>
     <ul>
       <li><a class="btn-floating green"><i class="material-icons">insert_chart</i></a></li>
       <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
       <li><a class="btn-floating blue"><i class="material-icons">publish</i></a></li>
     </ul>
   </div>
   

   এখানে:

   • fixed-action-btn ক্লাস FAB কে স্ক্রীনে fixed অবস্থায় রাখে।
   • ul এর মধ্যে থাকা ছোট FAB আইকনগুলো ড্রপডাউন হিসেবে কাজ করে, যার মধ্যে আলাদা আলাদা অ্যাকশন থাকে।

3. FAB with Tooltip: আপনি FAB এর সাথে tooltip যোগ করে ব্যবহারকারীদের কাছে অ্যাকশনের ব্যাখ্যা দিতে পারেন।

   <a class="btn-floating btn-large waves-effect waves-light red" data-tooltip="Add New Item">
     <i class="material-icons">add</i>
   </a>
   

FAB এবং Buttons এর মধ্যে পার্থক্য

• FAB সাধারণত বড় এবং কেন্দ্রীভূত হয়, এবং এটি প্রধান বা বিশেষ অ্যাকশনকে চিহ্নিত করে। এটি অ্যাপ্লিকেশন বা ওয়েবসাইটের primary action বোঝানোর জন্য ব্যবহৃত হয়।
• Buttons সাধারণত কম গুরুত্বপূর্ণ এবং যেকোনো ধরণের অ্যাকশন বা ফিচারের জন্য ব্যবহার করা যায়। এটি স্ক্রীনের যে কোনো স্থানে রাখা যেতে পারে।

উপসংহার

Materialize CSS এর buttons এবং Floating Action Button (FAB) উভয়ই ওয়েবসাইটের ইউজার ইন্টারফেস (UI) তৈরি করার জন্য অত্যন্ত কার্যকরী এবং ব্যবহারকারী-বান্ধব। Buttons সাধারণ অ্যাকশন প্রদানের জন্য ব্যবহার করা হয়, যখন FAB একটি গুরুত্বপূর্ণ বা প্রাথমিক অ্যাকশনকে চিহ্নিত করে এবং এটি বিশেষ আকর্ষণ তৈরি করে। Materialize CSS এ এই উপাদানগুলোর মাধ্যমে আপনি ওয়েবসাইটে ইন্টারঅ্যাকটিভ ও আকর্ষণীয় ইন্টারফেস ডিজাইন করতে পারেন।

Materialize CSS এর Button স্টাইলিং ওয়েব ডিজাইনে সহজে ব্যবহারযোগ্য এবং আকর্ষণীয় বাটন তৈরি করতে সহায়তা করে। Materialize এর বাটনগুলো Material Design এর নীতির উপর ভিত্তি করে ডিজাইন করা হয়েছে, যা সহজ, সোজাসাপ্টা এবং আধুনিক। এই বাটনগুলো বিভিন্ন সাইজ, রঙ এবং স্টাইলের মাধ্যমে কাস্টমাইজ করা যায়।

Materialize Button এর ধরন

Materialize CSS এ বিভিন্ন ধরনের বাটন ক্লাস রয়েছে, যা আপনি আপনার ওয়েবসাইট বা অ্যাপ্লিকেশন অনুযায়ী ব্যবহার করতে পারবেন। নিচে কিছু সাধারণ button স্টাইলিং ফিচার এবং ক্লাস দেয়া হলো।

1. Primary Button

Primary button হচ্ছে একটি গুরুত্বপূর্ণ বাটন, যা ওয়েবসাইটের প্রধান কার্যকলাপ বা অ্যাকশনের জন্য ব্যবহার করা হয়। এটি সাধারণত আকর্ষণীয় রঙে প্রদর্শিত হয়, যেমন blue।

<a class="btn">Primary Button</a>

এখানে btn ক্লাস ব্যবহার করা হয়েছে, যা বাটনটি প্রাথমিক ডিজাইন দেবে। আপনি blue ক্লাসও যোগ করতে পারেন, যা বাটনটির রঙ নীল করে দিবে।

<a class="btn blue">Primary Button</a>

2. Secondary Button

Secondary button হল একটি কম গুরুত্বপূর্ণ বাটন, যেটি প্রাথমিক বাটনের তুলনায় একটু সাদা বা হালকা রঙের হয়ে থাকে।

<a class="btn grey">Secondary Button</a>

এখানে grey ক্লাস ব্যবহার করা হয়েছে, যা বাটনটির রঙ ধূসর করবে।

3. Flat Button

Flat button হচ্ছে এক ধরনের বাটন, যা কোন বর্ডার বা শেড ছাড়াই ফ্ল্যাট অবস্থায় প্রদর্শিত হয়। এটি সাধারণত সিম্পল এবং ক্লিন লুক প্রদান করে।

<a class="btn-flat">Flat Button</a>

4. Outline Button

Outline button হল একটি বর্ডারসহ বাটন, যা রঙ এবং ব্যাকগ্রাউন্ড ছাড়া শুধুমাত্র বর্ডার প্রদর্শিত হয়। এটি সাধারণত ইন্টেরেক্টিভ কম্পোনেন্টের জন্য ব্যবহার করা হয়।

<a class="btn-outline">Outline Button</a>

5. Floating Action Button (FAB)

Floating Action Button (FAB) হলো একটি সেলফ-প্রোজেক্টেড বাটন, যা সাধারণত স্ক্রীনের নীচে বা কর্নারে প্রদর্শিত হয় এবং এটি প্রধান বা গুরুত্বপূর্ণ অ্যাকশনকে প্রতিনিধিত্ব করে।

<a class="btn-floating btn-large"><i class="material-icons">add</i></a>

এখানে btn-floating ক্লাস দ্বারা বাটনটি floating অবস্থায় প্রদর্শিত হবে এবং btn-large দ্বারা এটি বড় আকারে দেখাবে। আপনি এখানে material-icons এর মাধ্যমে আইকনও যোগ করতে পারেন, যেমন add।

6. Disabled Button

Disabled button হলো এমন একটি বাটন, যা বর্তমানে নিষ্ক্রিয় থাকে এবং ইউজারের ইন্টারঅ্যাকশন বন্ধ করে দেয়।

<a class="btn disabled">Disabled Button</a>

এখানে disabled ক্লাস ব্যবহার করা হয়েছে, যা বাটনটিকে অক্ষম করে দিবে।

7. Button with Icon

আপনি Materialize CSS বাটনগুলোর সাথে আইকন যোগ করতে পারেন, যা একটি অত্যন্ত জনপ্রিয় বৈশিষ্ট্য। এই আইকনগুলো Material Icons লাইব্রেরি থেকে নেওয়া হয়।

<a class="btn"><i class="material-icons">cloud</i>Button with Icon</a>

এখানে cloud আইকন ব্যবহার করা হয়েছে, যা বাটনের সাথে একটি আইকন দেখাবে।

8. Button Size

Materialize CSS এ আপনি বাটনের সাইজ কাস্টমাইজ করতে পারেন। বাটনের সাইজ পরিবর্তন করতে আপনি btn-small, btn-large ইত্যাদি ক্লাস ব্যবহার করতে পারেন।

• Small Button:

  <a class="btn-small">Small Button</a>
  

• Large Button:

  <a class="btn-large">Large Button</a>
  

9. Button Color Variations

Materialize CSS তে অনেক রঙের অপশন রয়েছে, যা আপনি বাটনের জন্য ব্যবহার করতে পারেন। কিছু সাধারণ রঙ ক্লাস হলো:

• blue: btn blue
• red: btn red
• green: btn green
• yellow: btn yellow
• purple: btn purple

এছাড়া আপনি অন্যান্য রঙের সাথে বাটনের স্টাইল কাস্টমাইজ করতে পারেন।

<a class="btn red">Red Button</a>
<a class="btn green">Green Button</a>

10. Hover Effects

Hover effects বাটনের ইন্টারঅ্যাকটিভিটি বাড়ায়। Materialize CSS এর মাধ্যমে আপনি বাটনের ওপর মাউস নিয়ে গেলে এর স্টাইল পরিবর্তন করতে পারেন। এটি স্বয়ংক্রিয়ভাবে Materialize তে প্রয়োগ করা থাকে, কিন্তু আপনি চাইলে কাস্টম CSS ব্যবহার করে এটিকে আরও কাস্টমাইজ করতে পারেন।

উপসংহার

Materialize CSS এর button styling ফিচারটি ওয়েব ডিজাইনারদের জন্য খুবই কার্যকরী। এটি অনেক ধরনের স্টাইল, রঙ, সাইজ এবং ক্লাস প্রদান করে, যা দিয়ে আপনি আপনার প্রয়োজন অনুযায়ী বাটন তৈরি করতে পারেন। Primary button, secondary button, flat button, floating action button (FAB) ইত্যাদি ধরণের বাটন ব্যবহার করে আপনি আপনার ওয়েবসাইটের ইউজার ইন্টারফেসকে আরও আকর্ষণীয় এবং কার্যকরী করতে পারেন।

Materialize CSS একটি জনপ্রিয় ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা Google Material Design এর নীতির ভিত্তিতে তৈরি। এটি icon buttons এবং floating buttons এর মতো বিভিন্ন ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় কম্পোনেন্ট প্রদান করে, যা ওয়েবসাইট বা অ্যাপ্লিকেশনের ইউজার ইন্টারফেসকে আরও আধুনিক এবং ফাংশনাল করে তোলে।

এখানে Icon Buttons এবং Floating Buttons ব্যবহার করার পদ্ধতি এবং তাদের সুবিধাগুলি বিস্তারিতভাবে আলোচনা করা হলো।

Icon Buttons

Icon buttons হলো এমন বাটন, যেগুলোর মধ্যে আইকন থাকে এবং সাধারণত ক্লিক করার জন্য ব্যবহৃত হয়। Materialize CSS-এ এই ধরনের বাটন খুব সহজেই তৈরি করা যায়। Icon buttons ব্যবহার করে আপনি আপনার ওয়েবসাইটে দ্রুত এবং আকর্ষণীয় ইন্টারঅ্যাকশন যোগ করতে পারেন।

Icon Button তৈরি করা

Materialize CSS-এ icon button তৈরি করতে নিচের ধাপগুলি অনুসরণ করুন:

1. আইকন অন্তর্ভুক্ত করা: Materialize CSS Material Icons ব্যবহার করে icon button তৈরি করতে পারবেন। প্রথমে আপনাকে Material Icons এর স্টাইল শীট যোগ করতে হবে।

   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   

2. আইকন বাটন তৈরি করা: এরপর, btn-floating ক্লাস ব্যবহার করে floating button তৈরি করতে হবে এবং এর মধ্যে একটি আইকন নির্ধারণ করতে হবে।

   উদাহরণ:

   <a class="btn-floating waves-effect waves-light red">
     <i class="material-icons">add</i>
   </a>
   

   এখানে:

   • btn-floating: Floating button তৈরি করতে ব্যবহৃত ক্লাস।
   • waves-effect এবং waves-light: Materialize CSS এর ওয়েভ এফেক্ট এবং লাইট ওয়েভ এফেক্ট।
   • red: বাটনের রঙ নির্ধারণ করে।
   • <i class="material-icons">add</i>: আইকনটি এখানে add নামে নির্ধারণ করা হয়েছে।

Icon Buttons এর সুবিধা

• বিস্তারিত ইন্টারফেস: আইকন বাটন ছোট এবং পরিষ্কার থাকে, যা ব্যবহারকারীকে দ্রুত কাজ সম্পন্ন করতে সহায়তা করে।
• ট্রান্সলুসেন্ট স্টাইল: ব্যবহারকারীরা সহজেই বাটনগুলো চিনতে পারে, কারণ এগুলি আধুনিক Material Design স্টাইলের।
• অত্যন্ত কাস্টমাইজেবল: আপনি বিভিন্ন আকার এবং রঙে icon button তৈরি করতে পারবেন।

Floating Buttons

Floating buttons হলো এমন বাটন, যেগুলি পেজের নিচের দিকে, সাধারণত ডান দিকে বা বামে ভাসমান অবস্থায় থাকে। এগুলি সাধারণত প্রধান ক্রিয়া (action) বা গুরুত্বপূর্ণ কনটেন্টের জন্য ব্যবহৃত হয়, যেমন Add, Send, Edit ইত্যাদি। Floating buttons ব্যবহার করে ইউজারদের কাছে সহজ এবং দ্রুত ইন্টারঅ্যাকশন নিশ্চিত করা যায়।

Floating Button তৈরি করা

Materialize CSS-এ floating button তৈরি করতে btn-floating ক্লাস ব্যবহার করা হয়। উদাহরণ:

<a class="btn-floating btn-large waves-effect waves-light red">
  <i class="material-icons">add</i>
</a>

এখানে:

• btn-floating: Floating button তৈরি করার জন্য প্রয়োজনীয় ক্লাস।
• btn-large: বাটনের আকার বড় করার জন্য।
• waves-effect এবং waves-light: বাটনে ওয়েভ এফেক্ট যুক্ত করা।
• red: বাটনের রঙ নির্ধারণ করে।
• <i class="material-icons">add</i>: বাটনে add আইকন যুক্ত করা হয়েছে।

Floating Button-এর বৈশিষ্ট্য

• ফ্লোটিং অবস্থান: ফ্লোটিং বাটন পেজের নিচের দিকে ডান বা বাম দিকে ভাসমান অবস্থায় থাকে, যা ব্যবহারকারীকে গুরুত্বপূর্ণ ক্রিয়া সম্পাদন করতে সহজ করে তোলে।
• স্মার্ট এবং আধুনিক ডিজাইন: Materialize CSS এর floating button ডিজাইনটি খুবই আধুনিক এবং ইন্টারঅ্যাকটিভ, যা Material Design এর নীতির উপর ভিত্তি করে তৈরি।
• কাস্টমাইজেশন: এটি সহজে কাস্টমাইজ করা যায়, যেমন আকার পরিবর্তন, রঙ পরিবর্তন এবং আইকন পরিবর্তন করা।

Multiple Floating Buttons

আপনি একাধিক floating button তৈরি করতে চাইলে floating action button group ব্যবহার করতে পারেন। এটি একটি গ্রুপ আকারে একাধিক বাটন তৈরি করার জন্য ব্যবহৃত হয়। উদাহরণ:

<div class="fixed-action-btn">
  <a class="btn-floating btn-large red">
    <i class="material-icons">mode_edit</i>
  </a>
  <ul>
    <li><a class="btn-floating yellow darken-1"><i class="material-icons">insert_chart</i></a></li>
    <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
    <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
  </ul>
</div>

এখানে:

• fixed-action-btn: এটি বাটন গ্রুপের জন্য ব্যবহৃত হয়।
• বাটনগুলির মধ্যে আইকন এবং রঙ পরিবর্তন করা হয়েছে।

উপসংহার

Icon buttons এবং floating buttons হল Modern UI ডিজাইনে অত্যন্ত গুরুত্বপূর্ণ কম্পোনেন্ট। Materialize CSS এ এই দুটি কম্পোনেন্টের মাধ্যমে আপনি সহজে সুন্দর, ইন্টারঅ্যাকটিভ এবং ফাংশনাল ওয়েবসাইট তৈরি করতে পারবেন। Icon buttons ব্যবহারকারীদের জন্য দ্রুত অ্যাকশন সুবিধা প্রদান করে, আর floating buttons গুরুত্বপূর্ণ কার্যকলাপগুলি সহজে অ্যাক্সেস করার সুযোগ দেয়। Materialize CSS এই বাটনগুলো ব্যবহার করে আপনার ওয়েবসাইটের ডিজাইনকে আরও আধুনিক, আকর্ষণীয় এবং ব্যবহারযোগ্য করে তোলে।

Floating Action Button (FAB) একটি জনপ্রিয় উপাদান যা Material Design এর অংশ, এবং এটি সাধারণত প্রধান অ্যাকশন বা ফিচারকে দ্রুত অ্যাক্সেস করার জন্য ব্যবহার করা হয়। Materialize CSS এ FAB তৈরি করা খুবই সহজ এবং এটি আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করে তোলে। FAB সাধারণত স্ক্রীনের নিচে থাকে এবং একটি আকর্ষণীয় বৃত্তাকার আকারে প্রদর্শিত হয়, যা একটি আইকন বা চিত্র ধারণ করে।

Floating Action Button (FAB) এর বৈশিষ্ট্য

• Position: FAB সাধারণত স্ক্রীনের নিচে, ডান অথবা বাম পাশে থাকে এবং এটি fixed position এ স্থির থাকে।
• Style: FAB সাধারাণত বৃত্তাকার আকারের হয় এবং এতে একটি আইকন থাকে, যা গুরুত্বপূর্ণ অ্যাকশনের প্রতিনিধিত্ব করে (যেমন: যোগ করা, পাঠানো ইত্যাদি)।
• Animation: FAB এ আপনি hover effects এবং transitions ব্যবহার করতে পারেন, যাতে এটি আরো ইন্টারঅ্যাকটিভ হয়।

Materialize এ Floating Action Button (FAB) তৈরি করা

Materialize CSS এ FAB তৈরি করার জন্য, আপনাকে btn-floating এবং waves-effect ক্লাস ব্যবহার করতে হবে। এছাড়া, FAB এর মধ্যে একটি আইকন যোগ করতে হলে, Material Icons ব্যবহার করা হয়।

উদাহরণ: একটি সাধারণ FAB তৈরি করা

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Floating Action Button Example</title>
    <!-- Materialize CSS Link -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
    <!-- Material Icons Link -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>

    <!-- Floating Action Button -->
    <a href="#" class="btn-floating btn-large red">
        <i class="material-icons">add</i>
    </a>

    <!-- Materialize JS Link -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

</body>
</html>

কোড ব্যাখ্যা:

• btn-floating: এই ক্লাসটি FAB কে বৃত্তাকার আকারে তৈরি করে।
• btn-large: এই ক্লাসটি FAB এর আকার বড় করে।
• red: FAB এর রঙ লাল করে।
• material-icons: এখানে Material Icons ব্যবহার করা হয়েছে। এখানে add আইকন ব্যবহার করা হয়েছে, যা একটি প্লাস সাইন দেখায়।
• waves-effect: এই ক্লাসটি FAB এ ওয়েভ প্রভাব যোগ করে, যাতে FAB এর উপর ক্লিক করার সময় একটি সুন্দর এনিমেশন দেখা যায়।

FAB এর অবস্থান কাস্টমাইজ করা

FAB এর অবস্থান পরিবর্তন করার জন্য আপনি CSS এর মাধ্যমে position এবং margin সেট করতে পারেন।

উদাহরণ: FAB স্ক্রীনের নিচে ডানদিকে স্থাপন

<style>
    .fab-position {
        position: fixed;
        bottom: 20px;
        right: 20px;
    }
</style>

<a href="#" class="btn-floating btn-large red fab-position">
    <i class="material-icons">add</i>
</a>

এখানে:

• position: fixed;: FAB কে স্ক্রীনের নির্দিষ্ট জায়গায় স্থির করে দেয়।
• bottom: 20px; এবং right: 20px;: FAB কে স্ক্রীনের নিচের ডানদিকে ২০ পিক্সেল দূরে অবস্থান করায়।

FAB এর সঙ্গে Multiple Actions তৈরি করা

Materialize CSS এর মাধ্যমে আপনি একাধিক FAB তৈরি করতে পারেন, যেখানে FAB গুলি একে অপরের উপরে বা নিচে অবস্থান করবে এবং ক্লিক করার পর নতুন অ্যাকশন প্রদর্শিত হবে।

উদাহরণ: Multiple Floating Action Buttons

<a href="#" class="btn-floating btn-large red">
    <i class="material-icons">add</i>
</a>

<!-- FAB for additional actions -->
<div class="fixed-action-btn horizontal">
    <a class="btn-floating btn-large red">
        <i class="material-icons">menu</i>
    </a>
    <ul>
        <li><a href="#" class="btn-floating yellow"><i class="material-icons">edit</i></a></li>
        <li><a href="#" class="btn-floating green"><i class="material-icons">share</i></a></li>
        <li><a href="#" class="btn-floating blue"><i class="material-icons">delete</i></a></li>
    </ul>
</div>

এখানে, একটি horizontal FAB তৈরি করা হয়েছে, যেখানে বিভিন্ন অ্যাকশন (যেমন: edit, share, delete) দেখানো হয়েছে। FAB ক্লিক করার পর এটি একটি ছোট মেনু হিসেবে প্রদর্শিত হবে।

FAB এর সাথে Animation ব্যবহার করা

FAB এর উপর ক্লিক করলে এনিমেশন যোগ করতে, আপনি Materialize CSS এর floating action button animation ব্যবহার করতে পারেন। এর জন্য আপনাকে floating-action-btn এবং open ক্লাস ব্যবহার করতে হবে, যা FAB এর সাথে ইন্টারঅ্যাকটিভ ট্রানজিশন তৈরি করবে।

Floating Action Button (FAB) ব্যবহার করার মাধ্যমে আপনি আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং ইউজার-বান্ধব করতে পারেন। Materialize CSS FAB তৈরি করার প্রক্রিয়া খুবই সহজ এবং এর মাধ্যমে আপনি গুরুত্বপূর্ণ অ্যাকশনগুলো সহজে উপস্থাপন করতে পারবেন।

Materialize CSS ফ্রেমওয়ার্ক ব্যবহার করে আপনি সহজে Button Groups এবং Disabled Buttons তৈরি করতে পারেন। এগুলো ওয়েব পেজে ব্যবহারকারী ইন্টারঅ্যাকশনের জন্য প্রয়োজনীয় উপাদান। এখানে আমরা Materialize CSS এর মাধ্যমে Button Groups এবং Disabled Buttons কিভাবে ব্যবহার করতে হয়, তা বিস্তারিতভাবে আলোচনা করবো।

Button Groups

Button Groups হলো একাধিক বোতামকে একটি গ্রুপের মধ্যে সাজানোর পদ্ধতি, যেখানে ব্যবহারকারী একাধিক অপশন থেকে নির্বাচন করতে পারে। Materialize CSS এ button groups তৈরি করতে সহজে btn-group ক্লাস ব্যবহার করা হয়।

Materialize এ Button Groups তৈরি

1. Basic Button Group:

   • একাধিক বোতামকে একত্রে সাজাতে btn-group ক্লাস ব্যবহার করুন।

   <div class="btn-group">
     <a href="#" class="btn">বটন ১</a>
     <a href="#" class="btn">বটন ২</a>
     <a href="#" class="btn">বটন ৩</a>
   </div>
   

2. Button Group with Dropdown:

   • আপনি যদি বোতাম গ্রুপের মধ্যে ড্রপডাউন অ্যাড করতে চান, তবে dropdown-button ক্লাস ব্যবহার করতে পারেন।

   <div class="btn-group">
     <a href="#" class="btn">বটন ১</a>
     <a href="#" class="btn">বটন ২</a>
     <a class="btn dropdown-button" href="#" data-activates="dropdown1">বটন ৩</a>
     <ul id="dropdown1" class="dropdown-content">
       <li><a href="#!">অপশন ১</a></li>
       <li><a href="#!">অপশন ২</a></li>
     </ul>
   </div>
   

উদাহরণ HTML কোড

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Group Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>

    <div class="container">
        <div class="btn-group">
            <a href="#" class="btn">বটন ১</a>
            <a href="#" class="btn">বটন ২</a>
            <a href="#" class="btn">বটন ৩</a>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

</body>
</html>

Disabled Buttons

Disabled Buttons হলো এমন বোতাম যা ব্যবহারকারীকে কোনো কাজ করার সুযোগ দেয় না। এটি সাধারণত ইন্টারঅ্যাকশন নিষ্ক্রিয় করার জন্য ব্যবহৃত হয়। Materialize CSS এ disabled buttons তৈরি করতে আপনাকে disabled অ্যাট্রিবিউট ব্যবহার করতে হবে।

Materialize এ Disabled Buttons তৈরি

1. Simple Disabled Button:

   • আপনি একটি সাধারণ ডিসেবলড বোতাম তৈরি করতে disabled ক্লাস ব্যবহার করবেন।

   <a href="#" class="btn disabled">ডিসেবলড বটন</a>
   

2. Disabled Button with Disabled Attribute:

   • এছাড়াও আপনি disabled অ্যাট্রিবিউট ব্যবহার করে ডিসেবলড বোতাম তৈরি করতে পারেন।

   <button class="btn" disabled>ডিসেবলড বটন</button>
   

উদাহরণ HTML কোড

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Disabled Button Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>

    <div class="container">
        <a href="#" class="btn disabled">ডিসেবলড বটন</a>
        <button class="btn" disabled>ডিসেবলড বটন</button>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

</body>
</html>

উপসংহার

Materialize CSS এর মাধ্যমে আপনি সহজেই Button Groups এবং Disabled Buttons তৈরি করতে পারেন। Button Groups ব্যবহারকারীদের জন্য একাধিক অপশন প্রদানের একটি চমৎকার উপায়, যেখানে বোতামগুলো একসাথে সাজানো হয়। Disabled Buttons ব্যবহৃত হয় যখন আপনি কোনো বোতামকে নিষ্ক্রিয় করতে চান, যাতে ব্যবহারকারীরা সেটি নির্বাচন করতে না পারে। Materialize CSS এই দুটি ফিচার খুব সহজেই অ্যাক্সেসযোগ্য করে দেয়, যা ওয়েব ডিজাইনে ইন্টারঅ্যাকশন এবং ব্যবহারের সুবিধা বৃদ্ধি করে।