Materialize CSS একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক, যা বিভিন্ন প্রি-ডিফাইন্ড কম্পোনেন্ট সরবরাহ করে, যেমন buttons, cards, modals, sliders ইত্যাদি। তবে কখনও কখনও আপনি আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনে custom components তৈরি করতে চাইবেন, যা আপনার নির্দিষ্ট ডিজাইন এবং ফাংশনালিটির প্রয়োজনীয়তা পূরণ করে। এই টিউটোরিয়ালে আমরা দেখব কীভাবে Materialize CSS ব্যবহার করে কাস্টম কম্পোনেন্ট তৈরি করা যায়।
Custom Components কি?
Custom Components হলো এমন UI উপাদান যা আপনার নির্দিষ্ট প্রয়োজনের জন্য তৈরি করা হয়, যেগুলি Materialize CSS বা অন্য কোনো ফ্রেমওয়ার্কের মাধ্যমে পূর্বে তৈরি করা কম্পোনেন্টগুলির থেকে আলাদা বা কাস্টম ডিজাইনে তৈরি করা হয়। এটি হতে পারে একটি নতুন button, form, card, modal বা অন্য কোনো UI উপাদান, যা আপনার ওয়েবসাইটের ডিজাইন এবং ফাংশনালিটির সঙ্গে পুরোপুরি মেলে।
Custom Components তৈরি করার প্রক্রিয়া
১. Custom Button তৈরি করা
আপনি Materialize CSS এর বাটন স্টাইল ব্যবহার করে কাস্টম বাটন তৈরি করতে পারেন, এবং এই বাটনে প্রয়োজনীয় স্টাইল ও ফিচার যোগ করতে পারেন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Button</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<style>
.custom-btn {
background-color: #ff5722; /* Custom background color */
color: white;
border-radius: 25px; /* Rounded corners */
padding: 15px 30px; /* Custom padding */
font-size: 18px; /* Custom font size */
}
.custom-btn:hover {
background-color: #e64a19; /* Darker shade on hover */
}
</style>
</head>
<body>
<button class="custom-btn">Click Me</button>
<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>
কোড ব্যাখ্যা:
- custom-btn ক্লাস ব্যবহার করে একটি কাস্টম বাটন তৈরি করা হয়েছে, যেখানে background-color, padding, border-radius ইত্যাদি কাস্টমাইজ করা হয়েছে।
- hover পসিবিলিটি ব্যবহার করে বাটনের উপর মাউস হোভার করলে রঙ পরিবর্তিত হবে।
২. Custom Card তৈরি করা
এখানে আমরা Materialize CSS এর card কম্পোনেন্টকে কাস্টমাইজ করে একটি নতুন ডিজাইন তৈরি করব।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Card</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<style>
.custom-card {
background-color: #f5f5f5; /* Custom background color */
border-radius: 12px; /* Rounded corners */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Custom shadow */
padding: 20px;
font-family: 'Arial', sans-serif;
}
.custom-card-title {
color: #ff5722; /* Title color */
font-size: 24px; /* Custom font size */
}
</style>
</head>
<body>
<div class="custom-card">
<h4 class="custom-card-title">Custom Card Title</h4>
<p>This is a custom card component with Materialize CSS styles.</p>
</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>
কোড ব্যাখ্যা:
- custom-card: একটি কাস্টম কার্ড তৈরি করা হয়েছে যেখানে ব্যাকগ্রাউন্ড রঙ, বর্ডার-radius এবং শ্যাডো কাস্টমাইজ করা হয়েছে।
- custom-card-title: এখানে টাইটেলটির জন্য আলাদা রঙ এবং ফন্ট সাইজ দেওয়া হয়েছে।
৩. Custom Form Input তৈরি করা
Materialize CSS-এর input ফিল্ডের কাস্টমাইজেশন সাধারণত এর ফর্ম্যাট এবং স্টাইল পরিবর্তন করার মাধ্যমে করা হয়। নিচে একটি কাস্টম ইনপুট ফর্ম তৈরি করা হলো।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Input</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<style>
.custom-input {
border: 2px solid #ff5722; /* Custom border color */
border-radius: 5px; /* Rounded corners */
padding: 12px;
font-size: 18px; /* Custom font size */
}
.custom-input:focus {
border-color: #e64a19; /* Darker border color on focus */
}
</style>
</head>
<body>
<div class="container">
<h4>Custom Input Example</h4>
<input type="text" class="custom-input" placeholder="Enter your name">
</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>
কোড ব্যাখ্যা:
- custom-input: ইনপুট ফিল্ডের জন্য একটি কাস্টম ডিজাইন তৈরি করা হয়েছে, যেখানে বর্ডার, প্যাডিং এবং ফন্ট সাইজ কাস্টমাইজ করা হয়েছে।
- :focus: ইনপুট ফিল্ডে ফোকাস দিলে বর্ডারের রঙ পরিবর্তিত হবে।
৪. Custom Modal (Popup) তৈরি করা
Materialize CSS-এর modal কম্পোনেন্টের মাধ্যমে কাস্টম পপআপ তৈরি করা যায়, যা কোনও একশন বা ইন্টারঅ্যাকশনের জন্য উপযুক্ত হতে পারে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Modal</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<!-- Trigger Button -->
<a class="waves-effect waves-light btn modal-trigger" href="#custom-modal">Open Modal</a>
<!-- Modal Structure -->
<div id="custom-modal" class="modal">
<div class="modal-content">
<h4>Custom Modal Title</h4>
<p>This is a custom modal with Materialize CSS.</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</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>
<script>
$(document).ready(function(){
$('.modal').modal();
});
</script>
</body>
</html>
কোড ব্যাখ্যা:
- modal-trigger: বাটনের মাধ্যমে মডালটি ট্রিগার করা হবে।
- modal-content: মডালের মূল কন্টেন্ট, যেমন টাইটেল এবং বার্তা।
- modal-footer: মডালের ফুটার, যেখানে বন্ধ করার বাটন থাকে।
উপসংহার
Materialize CSS এর custom components তৈরি করা একটি খুবই শক্তিশালী পদ্ধতি যা আপনাকে আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনের জন্য প্রয়োজনীয় ডিজাইন তৈরি করতে সহায়তা করে। আপনি buttons, cards, forms, modals ইত্যাদি কাস্টমাইজ করে আপনার ডিজাইনে আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় উপাদান যোগ করতে পারেন। Materialize CSS এর ফ্রন্ট-এন্ড ফিচার ব্যবহার করে আপনি সহজেই প্রফেশনাল ওয়েবসাইট তৈরি করতে পারবেন যা ব্যবহারকারীদের জন্য সুন্দর এবং কার্যকরী হবে।
Read more
