Bulma ফ্রেমওয়ার্কে Button এবং Icon দুটি গুরুত্বপূর্ণ উপাদান, যা ব্যবহার করে সহজেই ইন্টারঅ্যাকটিভ এবং দৃশ্যমান কম্পোনেন্ট তৈরি করা যায়। Bulma বাটনগুলো স্টাইল করার জন্য বিভিন্ন ক্লাস প্রদান করে, এবং ইকনগুলো ব্যবহার করার জন্য সাধারণত Font Awesome বা অন্যান্য আইকন লাইব্রেরি যুক্ত করা হয়।
১. Bulma এর Button
Bulma তে বাটন তৈরি করার জন্য button ক্লাস ব্যবহার করা হয়। বাটনগুলো বিভিন্ন স্টাইল এবং রঙে কাস্টমাইজ করা যায়, যেমন is-primary, is-danger, is-success, ইত্যাদি। এছাড়াও, বাটনগুলোকে সাইজ, রঙ, আউটলাইন এবং স্টেট পরিবর্তন করার জন্য অন্যান্য ক্লাসও দেয়া হয়েছে।
বেসিক বাটন
<button class="button">Click Me</button>
এটি একটি সাধারণ বাটন। তবে, আপনি বিভিন্ন বাটন স্টাইল এবং বৈশিষ্ট্য যোগ করতে পারেন।
২. বাটনের স্টাইল
Bulma বিভিন্ন ধরনের বাটন স্টাইল প্রদান করে, যা সহজে ব্যবহার করা যায়। এই স্টাইলগুলো মূলত বিভিন্ন রঙ এবং প্রভাব তৈরি করতে ব্যবহৃত হয়।
রঙ এবং স্টাইলের উদাহরণ:
<button class="button is-primary">Primary Button</button>
<button class="button is-link">Link Button</button>
<button class="button is-info">Info Button</button>
<button class="button is-success">Success Button</button>
<button class="button is-warning">Warning Button</button>
<button class="button is-danger">Danger Button</button>
<button class="button is-light">Light Button</button>
<button class="button is-dark">Dark Button</button>
এখানে বিভিন্ন রঙের বাটন তৈরি করা হয়েছে:
is-primary: প্রধান (প্রাথমিক) বাটনis-link: লিংক বাটনis-info: ইনফরমেশন বাটনis-success: সফলতা বাটনis-warning: সতর্কতা বাটনis-danger: বিপদ বাটনis-light: হালকা রঙের বাটনis-dark: গা dark ় রঙের বাটন
৩. বাটনের আউটলাইন (Outline) এবং বর্ডার
Bulma বাটনের জন্য is-outlined ক্লাস প্রদান করে, যা বাটনকে আউটলাইন স্টাইলে প্রদর্শিত করে।
আউটলাইন বাটনের উদাহরণ:
<button class="button is-outlined is-primary">Outlined Primary Button</button>
<button class="button is-outlined is-danger">Outlined Danger Button</button>
এই ক্লাসটি বাটনকে আউটলাইনে পরিণত করে এবং বাটনের বর্ডারটি পরিষ্কারভাবে প্রদর্শিত হয়।
৪. বাটনের সাইজ
Bulma বাটনের সাইজ কাস্টমাইজ করার জন্য বিভিন্ন ক্লাস প্রদান করে। আপনি বাটনের সাইজ পরিবর্তন করতে is-small, is-medium, is-large ক্লাস ব্যবহার করতে পারেন।
সাইজের উদাহরণ:
<button class="button is-small">Small Button</button>
<button class="button is-medium">Medium Button</button>
<button class="button is-large">Large Button</button>
এখানে:
is-small: ছোট সাইজের বাটনis-medium: সাধারণ সাইজের বাটনis-large: বড় সাইজের বাটন
৫. বাটন স্টেট
Bulma বাটনের জন্য কিছু স্টেট ক্লাসও প্রদান করে, যেমন is-loading, যা বাটনের উপর লোডিং ইফেক্ট তৈরি করে, অথবা is-active ক্লাস যা বাটনকে সক্রিয় দেখাতে ব্যবহার করা যায়।
বাটন স্টেটের উদাহরণ:
<button class="button is-loading">Loading...</button>
<button class="button is-active">Active Button</button>
is-loading: লোডিং ইফেক্টের সাথে বাটনis-active: সক্রিয় বাটন
৬. Bulma এর Icon
Bulma এর মূল ফিচার হলো এটি আইকন ব্যবহারের জন্য কোনো নির্দিষ্ট লাইব্রেরি সরবরাহ করে না, তবে এটি সহজেই Font Awesome, Material Icons, বা অন্য কোনো আইকন লাইব্রেরি সহ ব্যবহার করা যায়।
Font Awesome Icon যুক্ত করা
প্রথমে, Font Awesome সিডিএন লিঙ্কটি আপনার HTML ফাইলে যোগ করুন।
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
এবার আপনি Bulma এর বাটনের মধ্যে আইকন যুক্ত করতে পারবেন।
আইকন সহ বাটন:
<button class="button is-primary">
<span class="icon is-small">
<i class="fas fa-home"></i>
</span>
<span>Home</span>
</button>
<button class="button is-info">
<span class="icon is-small">
<i class="fas fa-search"></i>
</span>
<span>Search</span>
</button>
এখানে:
fas fa-home: হোম আইকনfas fa-search: সার্চ আইকনicon is-small: আইকনের সাইজ ছোট করা
৭. আইকন এবং টেক্সট একসাথে
আপনি যদি বাটনে আইকন এবং টেক্সট একসাথে ব্যবহার করতে চান, তাহলে span ট্যাগ ব্যবহার করুন। আইকনকে <span class="icon"> ক্লাসের মধ্যে এবং টেক্সটকে সাধারণ <span> ক্লাসের মধ্যে রাখতে হবে।
আইকন এবং টেক্সট একসাথে:
<button class="button is-success">
<span class="icon is-small">
<i class="fas fa-check"></i>
</span>
<span>Success</span>
</button>
<button class="button is-danger">
<span class="icon is-small">
<i class="fas fa-times"></i>
</span>
<span>Cancel</span>
</button>
এখানে:
fas fa-check: চেক আইকনfas fa-times: ক্রস আইকনspan: টেক্সটকে আইকনের সাথে সংযুক্ত করা
সারাংশ
Bulma তে Button এবং Icon ব্যবহার করা সহজ এবং খুবই কার্যকর। আপনি button ক্লাসের মাধ্যমে বিভিন্ন স্টাইল, সাইজ, রঙ এবং স্টেট কাস্টমাইজ করতে পারবেন। বাটনের সাথে Font Awesome বা অন্যান্য আইকন লাইব্রেরি ব্যবহার করে আপনি আইকন যুক্ত করতে পারবেন, যা আপনার ইউজার ইন্টারফেসকে আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ করে তোলে। Bulma এর বাটন এবং আইকন ক্লাস ব্যবহার করে আপনি খুব সহজেই ওয়েবসাইটে কার্যকরী এবং সুন্দর বাটন ডিজাইন করতে পারবেন।
Bulma CSS ফ্রেমওয়ার্কের Button Component খুবই জনপ্রিয় এবং সহজে ব্যবহারযোগ্য। এটি বিভিন্ন ধরনের স্টাইল এবং কার্যকরী বৈশিষ্ট্য প্রদান করে, যা ডিজাইনকে সুন্দর এবং ইন্টারঅ্যাকটিভ করে তোলে। Bulma এর বাটন ক্লাস ব্যবহার করে আপনি সহজে বিভিন্ন ধরনের বাটন তৈরি করতে পারেন, যা আপনার ওয়েবসাইটের ইউজার ইন্টারফেসে সাদৃশ্য এবং কার্যকারিতা যোগ করে।
১. বেসিক বাটন
Bulma এর বেসিক বাটন তৈরি করতে আপনি শুধু button ক্লাস ব্যবহার করতে পারেন। এটি একটি সাদামাটা বাটন তৈরি করবে, যা আপনি স্টাইলিংয়ের মাধ্যমে কাস্টমাইজ করতে পারবেন।
<button class="button">Click Me</button>
এটি একটি সাধারণ বাটন তৈরি করবে যা ক্লিক করার জন্য প্রস্তুত।
২. বাটনের স্টাইল (Color Classes)
Bulma আপনাকে বিভিন্ন color classes প্রদান করে, যা দিয়ে আপনি বাটনের রঙ পরিবর্তন করতে পারবেন। যেমন:
- is-primary: প্রাথমিক রঙ (সাধারণত ব্লু)
- is-link: লিংক রঙ (আসন্ন/হালকা নীল)
- is-info: তথ্য রঙ (নীল)
- is-success: সফলতা রঙ (সবুজ)
- is-warning: সতর্কতা রঙ (হলুদ)
- is-danger: বিপদ রঙ (লাল)
- is-light: হালকা রঙ (হালকা পটভূমি)
- is-dark: গা dark ় রঙ
উদাহরণ:
<button class="button is-primary">Primary Button</button>
<button class="button is-success">Success Button</button>
<button class="button is-danger">Danger Button</button>
<button class="button is-info">Info Button</button>
এখানে বিভিন্ন ধরনের রঙের বাটন দেখানো হয়েছে, যা ক্লিকযোগ্য এবং ভিজ্যুয়ালভাবে আলাদা।
৩. আউটলাইন বাটন (Outline Button)
Bulma এর is-outlined ক্লাসটি বাটনকে আউটলাইন স্টাইলে তৈরি করে, যেখানে ব্যাকগ্রাউন্ড রঙ বাদে শুধু বর্ডার এবং টেক্সট রঙ প্রদর্শিত হয়।
উদাহরণ:
<button class="button is-outlined is-primary">Outlined Button</button>
<button class="button is-outlined is-danger">Outlined Button</button>
এই বাটনগুলি আউটলাইন স্টাইলের থাকবে, যা হালকা এবং আধুনিক অনুভূতি প্রদান করে।
৪. বাটন সাইজ
Bulma এর is-small, is-medium, এবং is-large ক্লাসগুলি বাটনের আকার নিয়ন্ত্রণ করতে সহায়তা করে। এই ক্লাসগুলির মাধ্যমে আপনি বাটনের সাইজ ছোট, মাঝারি বা বড় করতে পারবেন।
উদাহরণ:
<button class="button is-small">Small Button</button>
<button class="button is-medium">Medium Button</button>
<button class="button is-large">Large Button</button>
এটি বাটনের আকার নিয়ন্ত্রণ করার জন্য ব্যবহার করা হয়, যেখানে ছোট আকারের বাটন কম জায়গা নেবে, এবং বড় আকারের বাটন চোখে পড়বে।
৫. বাটন আইকন
Bulma আপনাকে Font Awesome বা অন্য কোনো আইকন লাইব্রেরি ব্যবহার করে বাটনের সাথে আইকন যুক্ত করার সুবিধা দেয়। এটি সাধারণত বাটনের মধ্যে একটি আইকন প্রদর্শন করতে ব্যবহৃত হয়।
উদাহরণ:
<button class="button is-primary">
<span class="icon is-small">
<i class="fas fa-check"></i>
</span>
<span>Submit</span>
</button>
এখানে span.icon এর মধ্যে Font Awesome আইকন ব্যবহার করা হয়েছে, যা বাটনের মধ্যে একটি চেক মার্ক আইকন প্রদর্শন করবে।
৬. বাটন গ্রুপ
Bulma এর buttons ক্লাসের মাধ্যমে আপনি একসাথে একাধিক বাটন গ্রুপ করতে পারেন। এটি সাধারণত ব্যবহারকারীর জন্য একটি সম্পর্কিত বাটন গুচ্ছ তৈরির জন্য ব্যবহৃত হয়।
উদাহরণ:
<div class="buttons">
<button class="button is-primary">Primary</button>
<button class="button is-info">Info</button>
<button class="button is-success">Success</button>
</div>
এটি একসাথে একাধিক বাটন তৈরি করবে এবং সেগুলিকে একটি গ্রুপ হিসেবে উপস্থাপন করবে।
৭. বাটন ডিসেবল (Disabled Button)
Bulma এর is-disabled ক্লাস দিয়ে আপনি বাটনটিকে নিষ্ক্রিয় করতে পারেন, যার ফলে ইউজার বাটনে ক্লিক করতে পারবে না।
উদাহরণ:
<button class="button is-primary is-disabled">Disabled Button</button>
এই বাটনটি ইনঅ্যাকটিভ থাকবে এবং ইউজার এটি ক্লিক করতে পারবে না।
৮. বাটনের লোডিং (Loading Button)
Bulma এর is-loading ক্লাস দিয়ে আপনি বাটনের মধ্যে একটি লোডিং ইন্ডিকেটর অ্যাড করতে পারেন, যা সাধারণত কোনো প্রসেস চলমান অবস্থায় ব্যবহার করা হয়।
উদাহরণ:
<button class="button is-primary is-loading">Loading...</button>
এটি একটি লোডিং বাটন তৈরি করবে, যেখানে টেক্সটের পরিবর্তে একটি স্পিনার থাকবে, যা ইঙ্গিত দেয় যে কোনো প্রক্রিয়া চলছে।
৯. বাটনের হোভার স্টাইল
Bulma ক্লাসের মাধ্যমে আপনি বাটনের হোভার স্টাইল কাস্টমাইজ করতে পারেন। তবে এটি ডিফল্টরূপে বুলমা বাটনগুলির জন্য কিছু হোভার ইফেক্ট প্রদান করে। যদি আপনি চান যে বাটনটি হোভার করার সময় কিছু বিশেষ পরিবর্তন হোক, আপনি CSS এর মাধ্যমে স্টাইল যোগ করতে পারেন।
উদাহরণ:
<style>
.button:hover {
background-color: #ffdd57;
}
</style>
<button class="button is-primary">Hover Over Me</button>
এটি বাটনের হোভার ইফেক্ট যোগ করবে, যাতে বাটনের ব্যাকগ্রাউন্ড কালার পরিবর্তিত হবে যখন ইউজার বাটনে মাউস রাখবে।
সারাংশ
Bulma এর Button Component অত্যন্ত ব্যবহারযোগ্য এবং কাস্টমাইজেবল। আপনি সহজেই বাটনগুলির রঙ, সাইজ, স্টাইল এবং আউটলাইন কাস্টমাইজ করতে পারেন। Bulma বিভিন্ন ধরনের বাটন বৈশিষ্ট্য যেমন ইকোন, ডিসেবল, লোডিং, হোভার ইফেক্ট এবং বাটন গ্রুপ প্রদান করে, যা আপনার প্রোজেক্টে ইউজার ইন্টারফেস উন্নত করতে সাহায্য করে। সহজেই ব্যবহারযোগ্য ক্লাস এবং স্টাইলিং অপশনগুলির মাধ্যমে আপনি আপনার বাটনগুলি কাস্টমাইজ করে একটি অত্যাধুনিক ডিজাইন তৈরি করতে পারবেন।
Bulma CSS ফ্রেমওয়ার্কে বাটনের স্টাইল এবং সাইজ কাস্টমাইজ করা খুব সহজ। বুলমা আপনাকে বিভিন্ন ধরনের Button Size, Button Color, এবং Button Styles ব্যবহারের সুযোগ দেয়, যাতে আপনি আপনার ওয়েবসাইটের ডিজাইন অনুসারে বাটনগুলি কাস্টমাইজ করতে পারেন।
১. বাটন সাইজ (Button Size)
Bulma ফ্রেমওয়ার্কে বাটনের সাইজ কাস্টমাইজ করার জন্য কিছু পূর্বনির্ধারিত ক্লাস রয়েছে। আপনি সেগুলি ব্যবহার করে বাটনের সাইজ বড় বা ছোট করতে পারেন।
বাটন সাইজ ক্লাস:
- is-small: ছোট সাইজের বাটন।
- is-medium: মডারেট সাইজের বাটন (ডিফল্ট সাইজ)।
- is-large: বড় সাইজের বাটন।
উদাহরণ:
<div class="container">
<button class="button is-small">Small Button</button>
<button class="button is-medium">Medium Button</button>
<button class="button is-large">Large Button</button>
</div>
এখানে is-small, is-medium, এবং is-large ক্লাসগুলি বাটনের সাইজ নির্ধারণ করতে ব্যবহৃত হয়েছে।
২. বাটন রঙ (Button Color)
Bulma বিভিন্ন রঙের বাটন তৈরি করার জন্য কিছু ক্লাস প্রদান করে, যা আপনার প্রোজেক্টে ব্যবহার করতে পারবেন। এই রঙগুলো সিএসএস এর background-color প্রপার্টি নিয়ন্ত্রণ করে।
বাটন রঙের ক্লাস:
- is-primary: প্রাথমিক রঙ (সবচেয়ে সাধারণ রঙ, সাধারণত ব্লু)।
- is-link: লিংক বা নীল রঙ।
- is-info: ইনফরমেশন বা আকাশী রঙ।
- is-success: সাকসেস বা সবুজ রঙ।
- is-warning: সতর্কতা বা হলুদ রঙ।
- is-danger: বিপদ বা লাল রঙ।
- is-light: হালকা রঙ (প্রায় সাদা বা নরম রঙ)।
- is-dark: গা dark ় রঙ।
- is-white: সাদা রঙ।
- is-black: কালো রঙ।
উদাহরণ:
<div class="container">
<button class="button is-primary">Primary Button</button>
<button class="button is-link">Link Button</button>
<button class="button is-info">Info Button</button>
<button class="button is-success">Success Button</button>
<button class="button is-warning">Warning Button</button>
<button class="button is-danger">Danger Button</button>
<button class="button is-light">Light Button</button>
<button class="button is-dark">Dark Button</button>
<button class="button is-white">White Button</button>
<button class="button is-black">Black Button</button>
</div>
এখানে is-primary, is-link, is-info, is-success, is-warning, is-danger ইত্যাদি ক্লাসগুলো বিভিন্ন রঙের বাটন তৈরি করতে ব্যবহৃত হয়েছে।
৩. বাটন স্টাইল (Button Styles)
Bulma ফ্রেমওয়ার্কে বাটন স্টাইল কাস্টমাইজ করার জন্য বিভিন্ন ক্লাস রয়েছে। আপনি বাটনের বিভিন্ন স্টাইল যেমন আউটলাইন, আন্ডারলাইন, বর্ডারসহ ইত্যাদি ব্যবহার করতে পারবেন।
বাটন স্টাইল ক্লাস:
- is-outlined: আউটলাইন বাটন (বর্ডারসহ কিন্তু ব্যাকগ্রাউন্ড ছাড়া)।
- is-inverted: ইনভার্টেড বাটন (বিভিন্ন কনটেক্সটে আলাদা স্টাইল)।
- is-rounded: রাউন্ডেড (কোণ গোলাকার) বাটন।
- is-loading: লোডিং স্টেট বাটন (লোডিং অ্যানিমেশন সহ)।
- is-static: স্ট্যাটিক বাটন (অপরিবর্তিত অবস্থায় রাখা হয়)।
উদাহরণ:
<div class="container">
<button class="button is-primary is-outlined">Outlined Primary</button>
<button class="button is-info is-rounded">Rounded Info Button</button>
<button class="button is-success is-loading">Loading Success</button>
<button class="button is-danger is-inverted">Inverted Danger Button</button>
<button class="button is-dark is-static">Static Dark Button</button>
</div>
এখানে is-outlined, is-rounded, is-loading, is-inverted, এবং is-static ক্লাসগুলি বাটনের স্টাইল পরিবর্তন করতে ব্যবহৃত হয়েছে।
৪. বাটন গ্রুপ (Button Group)
Bulma ফ্রেমওয়ার্কে একাধিক বাটন একত্রে গ্রুপ হিসেবে প্রদর্শন করার জন্য buttons ক্লাস ব্যবহার করা যায়।
উদাহরণ:
<div class="buttons">
<button class="button is-primary">Primary</button>
<button class="button is-link">Link</button>
<button class="button is-info">Info</button>
</div>
এখানে buttons ক্লাস দিয়ে একাধিক বাটন গ্রুপ করা হয়েছে, যা পাশাপাশি দেখানো হবে।
সারাংশ
Bulma ফ্রেমওয়ার্কে বাটনগুলি সহজেই কাস্টমাইজ করা যায়। আপনি button size ক্লাস ব্যবহার করে বাটনের আকার নিয়ন্ত্রণ করতে পারেন, button color ক্লাস ব্যবহার করে বিভিন্ন রঙের বাটন তৈরি করতে পারেন, এবং button styles ক্লাস ব্যবহার করে বাটনের আউটলাইন, রাউন্ডেড, লোডিং ইত্যাদি স্টাইল প্রয়োগ করতে পারেন। এই ক্লাসগুলো ব্যবহার করে আপনি সহজেই আপনার প্রোজেক্টের ডিজাইন অনুসারে বাটন কাস্টমাইজ করতে পারবেন।
Bulma CSS ফ্রেমওয়ার্কে Button Group এবং Addons ব্যবহার করে আপনি বাটনগুলোর মধ্যে গ্রুপিং এবং কাস্টমাইজড অ্যাডঅন যোগ করতে পারেন। এগুলি সাধারণত ফর্ম, টুলবার, অথবা বাটন সেন্টারাইজেশন বা অর্ডারিংয়ের জন্য ব্যবহার করা হয়।
১. Button Group
Button Group হচ্ছে একাধিক বাটনকে একসাথে গ্রুপ করে একটি ইউনিট হিসেবে প্রদর্শন করার একটি উপায়। Bulma ফ্রেমওয়ার্কে, এটি খুব সহজেই buttons ক্লাস ব্যবহার করে করা যায়।
Button Group তৈরি করার জন্য ক্লাস:
- buttons: বাটনগুলোর একটি গ্রুপ তৈরি করে।
- is-grouped: বাটনগুলিকে একে অপরের সাথে গ্রুপ করে দেয়।
- is-grouped-multiline: একাধিক লাইনে বাটনগুলো গ্রুপ করে দেয় (যদি পর্যাপ্ত জায়গা না থাকে)।
উদাহরণ:
<div class="buttons is-grouped">
<button class="button is-primary">Button 1</button>
<button class="button is-link">Button 2</button>
<button class="button is-info">Button 3</button>
</div>
এখানে তিনটি বাটন একটি গ্রুপে র্যাপ করা হয়েছে is-grouped ক্লাসের মাধ্যমে। এই বাটনগুলো একসাথে দেখাবে, তবে একে অপরের মধ্যে ব্যবধান থাকবে না।
২. Button Addons
Button Addons আপনাকে বাটনের সাথে কিছু অতিরিক্ত উপাদান যেমন ইনপুট ফিল্ড, ড্রপডাউন বা অন্য যেকোনো আইটেম যুক্ত করার সুযোগ দেয়। সাধারণত, ফর্মের ইনপুটের সাথে বাটন ব্যবহার করার জন্য addons ব্যবহৃত হয়। এতে বাটন এবং ইনপুট ফিল্ড একসাথে দেখানো হয়।
Button Addon তৈরি করার জন্য ক্লাস:
- control: ইনপুট বা বাটনকে একই লাইনে সাজানোর জন্য।
- has-addons: বাটন এবং ইনপুট অ্যাডঅন তৈরি করতে ব্যবহৃত হয়।
উদাহরণ:
<div class="field has-addons">
<div class="control">
<input class="input" type="text" placeholder="Enter something">
</div>
<div class="control">
<button class="button is-info">Submit</button>
</div>
</div>
এখানে একটি input ফিল্ড এবং একটি button একই লাইনে has-addons এবং control ক্লাস দিয়ে গ্রুপ করা হয়েছে। এতে ইনপুট ফিল্ড এবং বাটন একই রকমভাবে একে অপরের পাশে দেখাবে।
আরও একটি উদাহরণ: Dropdown সহ Button Addon
<div class="field has-addons">
<div class="control">
<div class="select">
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
<div class="control">
<button class="button is-info">Go</button>
</div>
</div>
এখানে একটি select dropdown এবং একটি button একটি গ্রুপে রাখা হয়েছে, যাতে ব্যবহারকারী একটি অপশন নির্বাচন করার পর Go বাটনটি চাপতে পারে।
৩. Button Addons - Multiple Buttons with Inputs
একাধিক বাটন এবং ইনপুট ফিল্ড একত্রে প্রদর্শন করতে has-addons এবং control ক্লাস ব্যবহার করা যেতে পারে। এটা সাধারণত ফর্মের জন্য উপকারী যেখানে একটি অ্যাকশন বাটন একাধিক ইনপুটের সাথে কাজ করে।
উদাহরণ:
<div class="field has-addons">
<div class="control">
<input class="input" type="text" placeholder="Search...">
</div>
<div class="control">
<button class="button is-warning">Search</button>
</div>
<div class="control">
<button class="button is-danger">Clear</button>
</div>
</div>
এখানে একটি Search ইনপুট ফিল্ড এবং দুটি বাটন, Search এবং Clear একসাথে গ্রুপ করা হয়েছে। এইভাবে, বাটন এবং ইনপুট ফিল্ডগুলোর মধ্যে একটি সুসংগত ডিজাইন তৈরি করা সম্ভব।
৪. Button Group with Addons
যখন আপনাকে বাটন গ্রুপের মধ্যে Addons ব্যবহার করতে হয়, তখন আপনি buttons, is-grouped, এবং has-addons ক্লাসগুলো একসাথে ব্যবহার করতে পারেন। এই কম্বিনেশনটি খুবই শক্তিশালী এবং ব্যবহারযোগ্য যখন একটি ফর্মের মধ্যে একাধিক বাটন এবং ইনপুট যুক্ত করতে হয়।
উদাহরণ:
<div class="buttons has-addons is-grouped">
<div class="control">
<input class="input" type="text" placeholder="Type here">
</div>
<div class="control">
<button class="button is-link">Button 1</button>
</div>
<div class="control">
<button class="button is-success">Button 2</button>
</div>
</div>
এখানে ইনপুট ফিল্ডের সাথে দুটি বাটন গ্রুপ করা হয়েছে। ইনপুট এবং বাটনগুলো একসাথে একটি গ্রুপে থাকছে এবং ব্যবহারকারী সহজেই একটি নির্দিষ্ট অ্যাকশন করতে পারবে।
সারাংশ
Bulma ফ্রেমওয়ার্কে Button Group এবং Button Addons খুবই কার্যকর উপায় যখন আপনি একাধিক বাটন বা ইনপুট ফিল্ডকে একত্রে গ্রুপ করতে চান। Button Group ক্লাসের মাধ্যমে একাধিক বাটনকে সুন্দরভাবে একত্রে প্রদর্শন করা যায় এবং Button Addons ব্যবহার করে আপনি বাটনের সাথে ইনপুট বা অন্যান্য উপাদান যোগ করতে পারেন। এটি ফর্ম ও ইউজার ইন্টারফেস ডিজাইনকে আরও সহজ এবং পরিষ্কার করে তোলে।
Bulma CSS ফ্রেমওয়ার্কে আইকন যুক্ত করার জন্য একটি ইন-বিল্ট আইকন লাইব্রেরি নেই, তবে আপনি Bulma এর সাথে সহজেই আইকন যুক্ত করতে পারেন Font Awesome বা Heroicons এর মতো জনপ্রিয় আইকন লাইব্রেরি ব্যবহার করে। এই আইকনগুলি সাধারণত বাটন, টুলবার, ন্যাভিগেশন বার, এবং অন্যান্য উপাদানে ব্যবহার করা হয়।
Bulma এর সাথে Font Awesome বা অন্য আইকন লাইব্রেরি ব্যবহার করা সহজ, এবং এটি আপনার ডিজাইনকে আরো আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করে তোলে।
১. Font Awesome আইকন ব্যবহার করা
Font Awesome একটি জনপ্রিয় আইকন লাইব্রেরি, যা প্রায় ১,০০০ আইকন প্রদান করে। Bulma এর সাথে Font Awesome ব্যবহার করা খুবই সহজ। আপনি এটি CDN বা NPM এর মাধ্যমে যুক্ত করতে পারেন।
১.১. Font Awesome CDN যোগ করা
Font Awesome CDN যুক্ত করার জন্য আপনার HTML ফাইলে <head> ট্যাগের মধ্যে Font Awesome এর স্টাইলশিট লিঙ্ক যোগ করুন।
<head>
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
১.২. Font Awesome আইকন ব্যবহার করা
এখন, আপনি HTML ফাইলে Font Awesome আইকন ব্যবহার করতে পারেন। নিচে একটি উদাহরণ দেখানো হলো:
<button class="button is-primary">
<i class="fas fa-home"></i> Home
</button>
এখানে, fas fa-home হল Font Awesome এর আইকন ক্লাস। আপনি এইভাবে বিভিন্ন আইকন ব্যবহার করতে পারেন।
বিভিন্ন Font Awesome আইকনের উদাহরণ:
<!-- Home Icon -->
<i class="fas fa-home"></i>
<!-- Search Icon -->
<i class="fas fa-search"></i>
<!-- User Icon -->
<i class="fas fa-user"></i>
<!-- Bell Icon -->
<i class="fas fa-bell"></i>
২. Heroicons ব্যবহার করা
Heroicons আরেকটি জনপ্রিয় আইকন লাইব্রেরি, যা Tailwind CSS এর সাথে ব্যবহৃত হয়, তবে Bulma এর সাথেও সহজে কাজ করে। Heroicons ফ্রেমওয়ার্কটি বেশ স্টাইলিশ এবং সিম্পল আইকন প্রদান করে।
২.১. Heroicons CDN যোগ করা
Heroicons এর সিএসএস বা এসভিজি ফাইল CDN এর মাধ্যমে ব্যবহার করা যেতে পারে। তবে, আপনি এসভিজি আইকন সরাসরি ব্যবহার করতে পারেন, উদাহরণস্বরূপ:
<!-- Heroicons CDN (SVG Icons) -->
<script src="https://unpkg.com/heroicons@1.0.6/outline/"></script>
২.২. Heroicons আইকন ব্যবহার করা
এখন আপনি সহজেই Heroicons এর আইকন ব্যবহার করতে পারেন। উদাহরণস্বরূপ:
<button class="button is-info">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3v18h18V3H3z" />
</svg>
Info
</button>
৩. Bulma এর ক্লাসের সাথে আইকন ব্যবহার করা
Bulma এর সাথে আইকন ব্যবহার করা বেশ সহজ, এবং আপনি Bulma এর ক্লাসগুলির সাথে সেগুলিকে কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, আপনি আইকনগুলো বাটনের ভিতরে রাখতে পারেন বা ন্যাভিগেশন বার এ আইকন ব্যবহার করতে পারেন।
৩.১. Button এর ভিতরে আইকন
<button class="button is-success">
<i class="fas fa-check"></i> Success
</button>
এখানে, is-success ক্লাসের মাধ্যমে বাটনের রঙ সঠিকভাবে সেট করা হয়েছে এবং আইকনটি বাটনের মধ্যে স্থাপন করা হয়েছে।
৩.২. Icon in Navbar
<nav class="navbar">
<div class="navbar-brand">
<a class="navbar-item">
<i class="fas fa-home"></i>
</a>
<a class="navbar-item">
<i class="fas fa-search"></i>
</a>
</div>
</nav>
এখানে, ন্যাভবারে দুইটি আইকন ব্যবহৃত হয়েছে। Font Awesome এর fa-home এবং fa-search আইকনগুলো ন্যাভবারের আইটেম হিসেবে দেখা যাচ্ছে।
৪. আইকনের আকার এবং রঙ পরিবর্তন
Bulma এবং Font Awesome এর সাথে আপনি আইকনের আকার এবং রঙ সহজেই কাস্টমাইজ করতে পারেন। Bulma এর ক্লাস এবং Font Awesome এর আইকন ক্লাসগুলো ব্যবহার করে আকার এবং রঙ পরিবর্তন করা সম্ভব।
৪.১. আইকনের আকার পরিবর্তন
Font Awesome আইকনের আকার পরিবর্তন করার জন্য fa-xs, fa-sm, fa-lg, fa-2x, fa-3x, fa-4x, fa-5x, fa-10x ক্লাস ব্যবহার করা যায়।
<!-- Small Icon -->
<i class="fas fa-home fa-sm"></i>
<!-- Large Icon -->
<i class="fas fa-home fa-3x"></i>
৪.২. আইকনের রঙ পরিবর্তন
Bulma এর has-text-{color} ক্লাস ব্যবহার করে আইকনের রঙ পরিবর্তন করা সম্ভব।
<!-- Blue Icon -->
<i class="fas fa-home has-text-primary"></i>
<!-- Red Icon -->
<i class="fas fa-heart has-text-danger"></i>
এখানে, has-text-primary ক্লাস ব্যবহার করে আইকনের রঙ ব্লু এবং has-text-danger ক্লাস ব্যবহার করে রেড রঙ দেয়া হয়েছে।
সারাংশ
Bulma CSS ফ্রেমওয়ার্কের সাথে আইকন ব্যবহারের জন্য Font Awesome এবং Heroicons দুটি জনপ্রিয় লাইব্রেরি ব্যবহার করা হয়। আপনি CDN বা NPM এর মাধ্যমে Font Awesome বা Heroicons যোগ করতে পারেন এবং সহজেই আইকনগুলো ওয়েব পেজে ব্যবহার করতে পারেন। Bulma এর স্টাইলশিপ ক্লাস যেমন is-primary, has-text-danger ব্যবহার করে আইকনের রঙ এবং আকার কাস্টমাইজ করা সম্ভব। এইভাবে, Bulma এর সাথে আইকন ব্যবহার করে আপনার ডিজাইনকে আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব বানানো যায়।
Read more
