Web Development Framework7 এর UI Elements এবং Customization গাইড ও নোট

Framework7 একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা নেটিভ মোবাইল অ্যাপ্লিকেশনের মতো দেখতে এবং অনুভব করতে UI Elements প্রদান করে। এছাড়াও, এটি কাস্টমাইজেশন এবং থিমিং সুবিধা দিয়ে অ্যাপ্লিকেশনকে ব্যবহারকারীর প্রয়োজন অনুযায়ী সাজাতে দেয়।

Framework7 এর প্রধান UI Elements

১. Navbar (ন্যাভিগেশন বার)

Navbar একটি পৃষ্ঠার উপরের অংশে থাকে এবং পৃষ্ঠার শিরোনাম ও নেভিগেশন অপশন দেখায়।

উদাহরণ:

<div class="navbar">
  <div class="navbar-inner">
    <div class="title">Home</div>
  </div>
</div>

২. Toolbar (টুলবার)

Toolbar সাধারণত পৃষ্ঠার নিচে থাকে এবং বিভিন্ন অ্যাকশন বা ট্যাব সুইচিং-এর জন্য ব্যবহৃত হয়।

উদাহরণ:

<div class="toolbar">
  <div class="toolbar-inner">
    <a href="#" class="link">Home</a>
    <a href="#" class="link">Profile</a>
    <a href="#" class="link">Settings</a>
  </div>
</div>

৩. List (লিস্ট)

List বিভিন্ন আইটেমের একটি গোষ্ঠী দেখানোর জন্য ব্যবহৃত হয়, যেমন মেনু বা অপশন।

উদাহরণ:

<div class="list">
  <ul>
    <li><a href="#" class="item-link">Item 1</a></li>
    <li><a href="#" class="item-link">Item 2</a></li>
    <li><a href="#" class="item-link">Item 3</a></li>
  </ul>
</div>

৪. Form (ফর্ম)

Form ব্যবহারকারীর ইনপুট নেওয়ার জন্য ব্যবহৃত হয়।

উদাহরণ:

<div class="list">
  <ul>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">Name</div>
          <div class="item-input-wrap">
            <input type="text" placeholder="Enter your name">
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content item-input">
        <div class="item-inner">
          <div class="item-title item-label">Email</div>
          <div class="item-input-wrap">
            <input type="email" placeholder="Enter your email">
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

৫. Popup (পপআপ)

Popup অ্যাপ্লিকেশনের ভেতরে কনটেন্ট দেখানোর জন্য একটি মডাল উইন্ডোর মতো কাজ করে।

উদাহরণ:

<div class="popup">
  <div class="view">
    <div class="page">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">Popup</div>
        </div>
      </div>
      <div class="page-content">
        <p>This is a popup!</p>
        <a href="#" class="link popup-close">Close</a>
      </div>
    </div>
  </div>
</div>

৬. Cards (কার্ডস)

Cards একটি নির্দিষ্ট ডেটা ব্লক প্রদর্শনের জন্য ব্যবহৃত হয়।

উদাহরণ:

<div class="card">
  <div class="card-header">Card Header</div>
  <div class="card-content">
    <div class="card-content-inner">
      <p>This is a card. You can put any content here.</p>
    </div>
  </div>
  <div class="card-footer">Card Footer</div>
</div>

৭. Tabs (ট্যাবস)

Tabs একাধিক কনটেন্ট দেখানোর জন্য ব্যবহার করা হয়, যেখানে একটি সময়ে একটি কনটেন্ট সক্রিয় থাকে।

উদাহরণ:

<div class="tabs">
  <div id="tab1" class="tab tab-active">Tab 1 Content</div>
  <div id="tab2" class="tab">Tab 2 Content</div>
  <div id="tab3" class="tab">Tab 3 Content</div>
</div>

<div class="toolbar tabbar">
  <div class="toolbar-inner">
    <a href="#tab1" class="tab-link tab-link-active">Tab 1</a>
    <a href="#tab2" class="tab-link">Tab 2</a>
    <a href="#tab3" class="tab-link">Tab 3</a>
  </div>
</div>

Framework7 এর UI Customization

Framework7 এর UI কাস্টমাইজ করতে CSS এবং JavaScript ব্যবহার করা যায়।

থিমিং (Themes)

Framework7 দুটি প্রধান থিম প্রদান করে:

• iOS Theme: iOS ডিভাইসের মতো ডিজাইন।
• Material Design Theme: Android এর মতো ডিজাইন।

থিম নির্বাচন

Framework7 থিম স্বয়ংক্রিয়ভাবে প্ল্যাটফর্ম অনুযায়ী নির্বাচন করে। তবে আপনি ম্যানুয়ালি থিম সেট করতে পারেন:

var app = new Framework7({
  theme: 'ios', // বা 'md' (Material Design)
});

CSS কাস্টমাইজেশন

Framework7 এর ডিফল্ট স্টাইল পরিবর্তন করতে আপনি কাস্টম CSS ব্যবহার করতে পারেন।

উদাহরণ:

.page {
  background-color: #f5f5f5;
}
.navbar {
  background-color: #007aff;
  color: #fff;
}

কাস্টম JavaScript ব্যবহার

Framework7 এর ইন্টারেক্টিভ উপাদানগুলো কাস্টম JavaScript দিয়ে কাস্টমাইজ করা যায়।

উদাহরণ:

var myPopup = app.popup.create({
  content: '<div class="popup"><div class="view"><div class="page"><div class="page-content"><p>Custom Popup Content!</p></div></div></div></div>',
});
myPopup.open();

Framework7 এর UI Elements এর সুবিধা

1. প্রি-বিল্ট কম্পোনেন্ট: Framework7 এর UI উপাদানগুলো প্রস্তুত এবং ব্যবহার করা সহজ।
2. কাস্টমাইজেশন ক্ষমতা: CSS এবং JavaScript ব্যবহার করে সহজে স্টাইল এবং ফাংশনালিটি পরিবর্তন করা যায়।
3. থিমিং সাপোর্ট: iOS এবং Material Design থিম সমর্থন করে।
4. রেসপন্সিভ ডিজাইন: Framework7 এর UI উপাদানগুলো স্বয়ংক্রিয়ভাবে রেসপন্সিভ।

Framework7 এর শক্তিশালী UI Elements এবং কাস্টমাইজেশন ক্ষমতা ডেভেলপারদের দ্রুত এবং প্রোফেশনাল মানের অ্যাপ তৈরি করতে সাহায্য করে।

Framework7 এর Buttons, Icons, এবং List Components একটি অ্যাপ্লিকেশনকে ব্যবহারকারী-বান্ধব এবং ইন্টারঅ্যাকটিভ করার জন্য অত্যন্ত গুরুত্বপূর্ণ ভূমিকা পালন করে। এই উপাদানগুলো ব্যবহার করে আপনার অ্যাপ্লিকেশনে নেটিভ-লুক এবং ফিল যুক্ত করা সম্ভব।

Buttons কনফিগার করা

Buttons Framework7 এর অন্যতম গুরুত্বপূর্ণ UI উপাদান। এটি বিভিন্ন রঙ, আকার, এবং স্টাইলের হতে পারে।

সাধারণ বোতাম:

<a href="#" class="button">Click Me</a>

রঙিন বোতাম:

<a href="#" class="button button-fill color-red">Red Button</a>
<a href="#" class="button button-fill color-green">Green Button</a>
<a href="#" class="button button-fill color-blue">Blue Button</a>

বড় এবং ছোট বোতাম:

<a href="#" class="button button-large">Large Button</a>
<a href="#" class="button button-small">Small Button</a>

গোল বোতাম:

<a href="#" class="button button-round">Rounded Button</a>

লিঙ্ক বোতাম:

<a href="#" class="link">Link Button</a>

ব্লক বোতাম:

<a href="#" class="button button-fill button-block">Block Button</a>

Icons কনফিগার করা

Icons Framework7 এর আইকন ফন্ট ব্যবহার করে অ্যাপ্লিকেশনে ভিজ্যুয়াল এফেক্ট তৈরি করতে সহায়তা করে। Framework7 ডিফল্টভাবে Material এবং iOS আইকন ফন্ট সাপোর্ট করে।

একটি সাধারণ আইকন যোগ করা:

<i class="icon f7-icons">home</i>

বোতামের সাথে আইকন ব্যবহার:

<a href="#" class="button">
  <i class="icon f7-icons">star</i>
  Star Button
</a>

বড় এবং রঙিন আইকন:

<i class="icon f7-icons size-44 color-red">heart</i>
<i class="icon f7-icons size-44 color-blue">alarm</i>

আইকন তালিকা:

<div class="row">
  <div class="col">
    <i class="icon f7-icons">phone</i>
  </div>
  <div class="col">
    <i class="icon f7-icons">email</i>
  </div>
  <div class="col">
    <i class="icon f7-icons">map</i>
  </div>
</div>

Framework7 এর আইকন তালিকা:

Framework7 এর সকল আইকন F7 Icons Documentation থেকে পাওয়া যাবে।

List Components কনফিগার করা

List Components Framework7 এ ব্যবহৃত একটি সাধারণ উপাদান যা বিভিন্ন ধরণের ডেটা প্রদর্শনের জন্য উপযুক্ত। এটি একটি তালিকা বা মেনু তৈরি করতে ব্যবহৃত হয়।

সাধারণ তালিকা:

<div class="list">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

লিঙ্কযুক্ত তালিকা:

<div class="list">
  <ul>
    <li><a href="#" class="item-link">Home</a></li>
    <li><a href="#" class="item-link">Profile</a></li>
    <li><a href="#" class="item-link">Settings</a></li>
  </ul>
</div>

আইকন সহ তালিকা:

<div class="list">
  <ul>
    <li>
      <a href="#" class="item-link item-content">
        <div class="item-media"><i class="icon f7-icons">phone</i></div>
        <div class="item-inner">
          <div class="item-title">Call</div>
        </div>
      </a>
    </li>
    <li>
      <a href="#" class="item-link item-content">
        <div class="item-media"><i class="icon f7-icons">email</i></div>
        <div class="item-inner">
          <div class="item-title">Email</div>
        </div>
      </a>
    </li>
  </ul>
</div>

ইনপুট ফিল্ড সহ তালিকা:

<div class="list">
  <ul>
    <li class="item-content item-input">
      <div class="item-inner">
        <div class="item-title item-label">Name</div>
        <div class="item-input-wrap">
          <input type="text" placeholder="Enter your name">
        </div>
      </div>
    </li>
    <li class="item-content item-input">
      <div class="item-inner">
        <div class="item-title item-label">Email</div>
        <div class="item-input-wrap">
          <input type="email" placeholder="Enter your email">
        </div>
      </div>
    </li>
  </ul>
</div>

Buttons, Icons এবং List Components একসাথে ব্যবহার

আপনার অ্যাপ্লিকেশনে এই তিনটি উপাদান একত্রে ব্যবহার করে আরও ইন্টারঅ্যাকটিভ এবং কার্যকর UI তৈরি করা যায়।

উদাহরণ:

<div class="list">
  <ul>
    <li>
      <a href="#" class="item-link item-content">
        <div class="item-media"><i class="icon f7-icons">home</i></div>
        <div class="item-inner">
          <div class="item-title">Home</div>
        </div>
      </a>
    </li>
    <li>
      <a href="#" class="item-link item-content">
        <div class="item-media"><i class="icon f7-icons">settings</i></div>
        <div class="item-inner">
          <div class="item-title">Settings</div>
        </div>
      </a>
    </li>
    <li>
      <a href="#" class="button button-fill color-blue">
        <i class="icon f7-icons">phone</i>
        Call Us
      </a>
    </li>
  </ul>
</div>

Framework7 এর Buttons, Icons, এবং List Components ব্যবহার করে একটি অ্যাপ্লিকেশনকে আধুনিক, রেসপন্সিভ এবং ব্যবহারকারী-বান্ধব করা যায়। এই উপাদানগুলোর মাধ্যমে আপনি দ্রুত একটি সুন্দর এবং কার্যকর ইউজার ইন্টারফেস তৈরি করতে পারবেন।

Framework7-এ Grid Layouts এবং Responsive Design তৈরির জন্য উন্নত Flexbox Grid System ব্যবহার করা হয়। এটি ডেভেলপারদের সহজে রেসপন্সিভ এবং ব্যবহারকারী-বান্ধব ডিজাইন তৈরি করতে সাহায্য করে।

Grid Layouts কি?

Grid Layout একটি পৃষ্ঠা বা কনটেন্টকে রো (row) এবং কলাম (column) আকারে ভাগ করার একটি পদ্ধতি। Framework7 এর Grid System সম্পূর্ণভাবে Flexbox ভিত্তিক এবং এটি মোবাইল-প্রথম ডিজাইন নিশ্চিত করে।

Grid Layout এর প্রধান বৈশিষ্ট্য:

1. রেসপন্সিভ ডিজাইন: বিভিন্ন স্ক্রিন সাইজে কনটেন্ট সঠিকভাবে প্রদর্শন।
2. Flexbox ভিত্তিক: এটি স্বয়ংক্রিয়ভাবে কনটেন্টের আকার ও অবস্থান পরিচালনা করে।
3. সহজ স্ট্রাকচার: HTML ক্লাস ব্যবহার করে দ্রুত গ্রিড তৈরি করা যায়।
4. রো এবং কলাম সিস্টেম: কনটেন্টকে পরিষ্কার এবং গঠনমূলকভাবে সাজানো।

Grid Layouts ব্যবহার

Framework7 এর Grid Layout HTML ক্লাস row এবং col এর মাধ্যমে কাজ করে। নিচে একটি সাধারণ উদাহরণ দেওয়া হলো:

উদাহরণ:

<div class="row">
  <div class="col">Column 1</div>
  <div class="col">Column 2</div>
  <div class="col">Column 3</div>
</div>

ব্যাখ্যা:

• row: একটি রো তৈরি করে যা কলামগুলো ধারণ করবে।
• col: প্রতিটি কলাম নির্ধারণ করে।

Responsive Grid Layouts

Framework7 এর Grid System স্বয়ংক্রিয়ভাবে বিভিন্ন ডিভাইসের স্ক্রিন সাইজ অনুযায়ী কাজ করে। তবে আপনি চাইলে নির্দিষ্ট স্ক্রিন সাইজ অনুযায়ী কনটেন্টের আকার বা কলামের সংখ্যা নির্ধারণ করতে পারেন।

রেসপন্সিভ ক্লাস:

Framework7 এ নিম্নলিখিত রেসপন্সিভ ক্লাস রয়েছে:

উদাহরণ:

<div class="row">
  <div class="col-50">50% Width</div>
  <div class="col-50">50% Width</div>
</div>

<div class="row">
  <div class="col-md-33">33% Width on Medium Screens</div>
  <div class="col-md-67">67% Width on Medium Screens</div>
</div>

গ্রিডে কনটেন্ট কেন্দ্রিক করা

Flexbox Grid System ব্যবহার করে কনটেন্টকে সহজেই কেন্দ্রিক করা যায়।

উদাহরণ:

<div class="row justify-content-center">
  <div class="col-50">Centered Column</div>
</div>

ব্যাখ্যা:

• justify-content-center: কলামগুলো রো এর কেন্দ্রে স্থাপন করে।

কলামের গ্যাপ নির্ধারণ

কলাম এবং রো এর মধ্যে গ্যাপ নির্ধারণ করা যায় gap ক্লাস ব্যবহার করে।

উদাহরণ:

<div class="row gap">
  <div class="col">Column 1</div>
  <div class="col">Column 2</div>
</div>

Nested Grids

Nested Grid ব্যবহার করে একটি কলামের ভিতরে আরেকটি রো এবং কলাম তৈরি করা যায়।

উদাহরণ:

<div class="row">
  <div class="col">
    Parent Column
    <div class="row">
      <div class="col">Nested Column 1</div>
      <div class="col">Nested Column 2</div>
    </div>
  </div>
</div>

Responsive Design তৈরি

Framework7 এর Grid Layout Responsive Design তৈরিতে অত্যন্ত কার্যকর। রেসপন্সিভ ডিজাইন নিশ্চিত করতে স্ক্রিনের আকার অনুযায়ী বিভিন্ন ক্লাস ব্যবহার করুন।

উদাহরণ:

<div class="row">
  <div class="col-100 col-md-50 col-lg-25">Responsive Column</div>
  <div class="col-100 col-md-50 col-lg-25">Responsive Column</div>
  <div class="col-100 col-md-50 col-lg-25">Responsive Column</div>
  <div class="col-100 col-md-50 col-lg-25">Responsive Column</div>
</div>

ব্যাখ্যা:

1. col-100: সমস্ত স্ক্রিন সাইজে ১০০% প্রস্থ।
2. col-md-50: Medium স্ক্রিনে ৫০% প্রস্থ।
3. col-lg-25: Large স্ক্রিনে ২৫% প্রস্থ।

Grid Layout এবং Responsive Design এর সুবিধা

• Flexibility: সহজেই পরিবর্তনশীল ডিজাইন তৈরি করা যায়।
• Device Compatibility: ছোট থেকে বড় স্ক্রিন পর্যন্ত কনটেন্ট ঠিকমতো দেখানো যায়।
• Nested Layouts: জটিল লেআউট তৈরি করা সহজ।
• Efficiency: Flexbox এর উপর ভিত্তি করে দ্রুত লেআউট তৈরি করা যায়।

Framework7 এর Grid Layout এবং Responsive Design ফিচার দিয়ে আপনি একটি সম্পূর্ণ ব্যবহারবান্ধব এবং রেসপন্সিভ অ্যাপ্লিকেশন তৈরি করতে পারবেন।

Framework7 একটি শক্তিশালী ডিফল্ট থিম সরবরাহ করলেও, কাস্টম CSS ব্যবহার করে অ্যাপ্লিকেশনকে নির্দিষ্ট প্রয়োজন অনুযায়ী কাস্টমাইজ করা যায়। Framework7 এর HTML স্ট্রাকচার এবং CSS ক্লাসগুলোর সাহায্যে সহজেই অ্যাপ্লিকেশনের লুক ও ফিল পরিবর্তন করা সম্ভব।

Framework7 এ Custom CSS যোগ করার ধাপ

১. CSS ফাইল তৈরি করা

Framework7 প্রজেক্টের /src/css/ ডিরেক্টরিতে একটি কাস্টম CSS ফাইল তৈরি করুন। উদাহরণ:

/src/css/custom.css

২. Custom CSS ফাইলকে লিঙ্ক করা

Custom CSS ফাইলটি index.html এ Framework7 এর CSS ফাইলের পরে যুক্ত করুন। এটি Framework7 এর ডিফল্ট স্টাইল ওভাররাইড করার জন্য প্রয়োজন।

উদাহরণ:

<link rel="stylesheet" href="css/custom.css">

Custom CSS উদাহরণ

Navbar কাস্টমাইজ করা

Framework7 এর ডিফল্ট navbar স্টাইল পরিবর্তন করতে:

/* Navbar Background Color */
.navbar {
  background-color: #4CAF50; /* গাঢ় সবুজ */
}

/* Navbar Title Color */
.navbar .title {
  color: white;
  font-size: 20px;
  font-weight: bold;
}

বাটন স্টাইল কাস্টমাইজ করা

Framework7 এর ডিফল্ট button স্টাইল পরিবর্তন করতে:

/* Primary Button Customization */
.button {
  background-color: #008CBA; /* নীল */
  border-radius: 10px;
  color: white;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Button Hover Effect */
.button:hover {
  background-color: #005f73;
}

পৃষ্ঠার ব্যাকগ্রাউন্ড এবং ফন্ট কাস্টমাইজ করা

Framework7 এ একটি পৃষ্ঠার ব্যাকগ্রাউন্ড এবং ফন্ট স্টাইল কাস্টমাইজ করতে:

/* Page Background */
.page {
  background-color: #f4f4f4;
  font-family: 'Arial', sans-serif;
  color: #333;
}

/* Link Style */
a {
  color: #1E90FF;
  text-decoration: none;
}

a:hover {
  color: #104E8B;
}

ট্যাবের স্টাইল পরিবর্তন

Framework7 এর tab স্টাইল পরিবর্তন করতে:

/* Active Tab Style */
.tab-link-active {
  color: #4CAF50; /* সবুজ */
  font-weight: bold;
  border-bottom: 2px solid #4CAF50;
}

/* Tab Content Style */
.tab {
  padding: 20px;
  font-size: 16px;
}

Framework7 থিম পরিবর্তনের জন্য CSS ভেরিয়েবল ব্যবহার

Framework7 CSS এর জন্য অনেক প্রি-ডিফাইন্ড ভেরিয়েবল ব্যবহার করে, যা কাস্টমাইজেশন আরও সহজ করে তোলে। এই ভেরিয়েবলগুলো কাস্টমাইজ করতে, আপনার CSS প্রিপ্রসেসর (SASS/LESS) ব্যবহার করতে পারেন।

উদাহরণ (SASS ব্যবহার করে):

// Default theme variables override
$theme-color: #4CAF50; // Primary Color
$navbar-bg-color: #4CAF50; // Navbar Background
$button-bg-color: #008CBA; // Button Background

@import 'framework7/framework7-bundle';

Framework7 কাস্টমাইজ করার টিপস

1. Specificity বজায় রাখুন: Framework7 এর ডিফল্ট CSS ওভাররাইড করতে .class এবং #id সিলেক্টর সুনির্দিষ্টভাবে ব্যবহার করুন।
2. CSS Preprocessor ব্যবহার করুন: SASS বা LESS ব্যবহার করলে থিমের ভেরিয়েবল সহজেই ওভাররাইড করা যায়।
3. Responsive Design: Framework7 এর গ্রিড সিস্টেম ব্যবহার করে CSS কাস্টমাইজেশন রেসপন্সিভ রাখুন।
4. Browser Developer Tools: Chrome DevTools বা অন্য টুল দিয়ে Framework7 এর ডিফল্ট CSS ক্লাস এবং স্টাইল চিহ্নিত করুন।

উপসংহার

Framework7 এ Custom CSS ব্যবহার করে অ্যাপ্লিকেশন কাস্টমাইজেশন সহজ এবং কার্যকর। Navbar, Button, Tabs, এবং অন্যান্য UI কম্পোনেন্ট কাস্টমাইজ করতে CSS ব্যবহার করা যায়। কাস্টম ডিজাইন যোগ করার মাধ্যমে অ্যাপ্লিকেশনটি আপনার ব্র্যান্ডের সাথে মানানসই করা সম্ভব। Framework7 এর প্রি-ডিফাইন্ড CSS ভেরিয়েবল এবং স্টাইল ব্যবহার করলে কাস্টমাইজেশন আরও দ্রুত এবং সহজ হয়ে যায়।

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

Dark Mode ব্যবহার Framework7 এ

Framework7 এর ডার্ক মোড ফিচার ব্যবহার করা খুবই সহজ। এটি স্বয়ংক্রিয়ভাবে ডিভাইসের প্রিফারেন্স অনুযায়ী সক্রিয় হতে পারে অথবা ম্যানুয়ালি কনফিগার করা যায়।

ডার্ক মোড সক্রিয় করা

Framework7 এ ডার্ক মোড সক্রিয় করতে আপনাকে theme-dark ক্লাস যুক্ত করতে হবে।

উদাহরণ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark Mode Example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/framework7/framework7-bundle.min.css">
</head>
<body class="theme-dark">
  <div id="app">
    <div class="view view-main">
      <div class="page">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="title">Dark Mode</div>
          </div>
        </div>
        <div class="page-content">
          <p>This is Dark Mode!</p>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/framework7/framework7-bundle.min.js"></script>
</body>
</html>

উপরের উদাহরণে:

1. theme-dark ক্লাস ব্যবহার করে ডার্ক মোড সক্রিয় করা হয়েছে।
2. এই ক্লাসটি সরিয়ে নিলে ডিফল্ট লাইট মোড চালু থাকবে।

ডার্ক মোড টগল (Switch)

আপনার অ্যাপ্লিকেশনে ব্যবহারকারীর জন্য ডার্ক মোড টগল করার ব্যবস্থা করতে পারেন। Framework7 এ ডার্ক মোড টগল করার জন্য ক্লাস theme-dark অ্যাড বা রিমুভ করা হয়।

উদাহরণ:

<div class="page">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="title">Dark Mode Toggle</div>
    </div>
  </div>
  <div class="page-content">
    <button class="button button-fill" id="toggle-dark-mode">Toggle Dark Mode</button>
  </div>
</div>

<script>
  var body = document.body;
  var toggleButton = document.getElementById('toggle-dark-mode');

  toggleButton.addEventListener('click', function () {
    body.classList.toggle('theme-dark');
  });
</script>

ব্যাখ্যা:

1. classList.toggle('theme-dark') ব্যবহার করে ক্লাস টগল করা হয়।
2. ব্যবহারকারী যখন বোতাম ক্লিক করে, তখন ডার্ক মোড অন বা অফ হয়।

Framework7 এর থিমস

Framework7 iOS এবং Android প্ল্যাটফর্মের জন্য আলাদা থিম সাপোর্ট করে। এর মধ্যে রয়েছে:

• iOS থিম: Apple এর iOS ডিভাইসের জন্য।
• Material Design থিম: Android ডিভাইসের জন্য।

স্বয়ংক্রিয় থিম ডিটেকশন

Framework7 ডিফল্টভাবে ডিভাইস প্ল্যাটফর্ম অনুযায়ী থিম নির্ধারণ করে। তবে, আপনি এটি ম্যানুয়ালি সেট করতে পারেন।

থিম ম্যানুয়ালি সেট করা:

var app = new Framework7({
  root: '#app',
  theme: 'md', // Material Design
});

থিমের অপশন:

1. ios: iOS থিম।
2. md: Material Design থিম।
3. auto: ডিভাইসের প্ল্যাটফর্ম অনুযায়ী থিম নির্বাচন (ডিফল্ট)।

ডার্ক মোড এবং থিমস একত্রে ব্যবহার

Framework7 এ আপনি থিম এবং ডার্ক মোড একত্রে ব্যবহার করতে পারেন। এটি আপনার অ্যাপ্লিকেশনের লুক এবং ফিল আরও উন্নত করে।

উদাহরণ:

var app = new Framework7({
  root: '#app',
  theme: 'ios', // iOS থিম
});

document.body.classList.add('theme-dark'); // ডার্ক মোড অ্যাক্টিভ করা

ডার্ক মোডের CSS কাস্টমাইজেশন

Framework7 এর ডার্ক মোড থিম আরও কাস্টমাইজ করতে আপনার নিজের CSS যোগ করতে পারেন।

উদাহরণ:

:root.theme-dark {
  --f7-navbar-bg-color: #000000;
  --f7-navbar-text-color: #ffffff;
  --f7-page-bg-color: #121212;
}

Framework7 এর ডার্ক মোড এবং থিম ব্যবহার অ্যাপ্লিকেশনকে আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করে তোলে। ডিফল্ট ফিচার ব্যবহার করে সহজেই লাইট এবং ডার্ক মোড টগল করা যায় এবং iOS ও Material Design থিমের মাধ্যমে প্ল্যাটফর্ম অনুযায়ী অ্যাপের লুক কাস্টমাইজ করা সম্ভব।