Web Development Framework7 Layouts এবং Components গাইড ও নোট

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

Framework7 Layouts

Framework7 এর Layouts মূলত অ্যাপ্লিকেশনের স্ট্রাকচার তৈরি করতে ব্যবহৃত হয়। এতে Pages, Views, এবং Panels এর মতো উপাদান অন্তর্ভুক্ত থাকে।

Page Layout

Page Framework7 এর মূল লেআউট কাঠামো। প্রতিটি পৃষ্ঠা page ক্লাস ব্যবহার করে তৈরি করা হয়।

উদাহরণ:

<div class="page" data-name="home">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="title">Home</div>
    </div>
  </div>
  <div class="page-content">
    <p>Welcome to Framework7!</p>
  </div>
</div>

View Layout

Framework7 এর View একটি নির্দিষ্ট পৃষ্ঠার জন্য ব্যবহৃত হয়। view ক্লাস ব্যবহার করে এটি তৈরি করা হয়।

উদাহরণ:

<div class="view view-main">
  <div class="page">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="title">Main View</div>
      </div>
    </div>
    <div class="page-content">
      <p>This is the main view content.</p>
    </div>
  </div>
</div>

Panel Layout

Panel Framework7 এ সাইডবার তৈরি করতে ব্যবহৃত হয়। এটি অ্যাপ্লিকেশনে অফ-ক্যানভাস নেভিগেশন যোগ করতে সহায়ক।

উদাহরণ:

<div class="panel panel-left panel-cover">
  <div class="view">
    <div class="page">
      <div class="page-content">
        <p>This is a left panel.</p>
      </div>
    </div>
  </div>
</div>

Framework7 Components

Framework7 এর Components হলো এমন কিছু রেডি-মেড UI উপাদান যা অ্যাপ্লিকেশনের কার্যকারিতা এবং সৌন্দর্য বাড়াতে ব্যবহার করা হয়। এতে রয়েছে Navbar, Toolbar, Cards, Lists, এবং আরও অনেক কিছু।

Navbar

Navbar হলো প্রতিটি পৃষ্ঠার শীর্ষে প্রদর্শিত নেভিগেশন বার।

উদাহরণ:

<div class="navbar">
  <div class="navbar-inner">
    <div class="title">My App</div>
  </div>
</div>

Toolbar

Toolbar হলো পৃষ্ঠার নিচের দিকে প্রদর্শিত একটি বারের মতো, যা সাধারণত নেভিগেশন বা অ্যাকশন বাটন যোগ করতে ব্যবহৃত হয়।

উদাহরণ:

<div class="toolbar">
  <div class="toolbar-inner">
    <a href="#tab1" class="link">Tab 1</a>
    <a href="#tab2" class="link">Tab 2</a>
  </div>
</div>

Cards

Card Framework7 এ একটি কন্টেইনার কম্পোনেন্ট, যা অ্যাপ্লিকেশনে তথ্য বা কন্টেন্ট প্রদর্শনের জন্য ব্যবহৃত হয়।

উদাহরণ:

<div class="card">
  <div class="card-header">Card Header</div>
  <div class="card-content">
    <div class="card-content-inner">
      <p>This is a simple card.</p>
    </div>
  </div>
  <div class="card-footer">Card Footer</div>
</div>

Lists

Framework7 এর Lists অ্যাপ্লিকেশনে আইটেম বা কন্টেন্টের তালিকা প্রদর্শনের জন্য ব্যবহৃত হয়।

উদাহরণ:

<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>

Buttons

Buttons Framework7 এর ইন্টারেক্টিভ উপাদান, যা অ্যাপ্লিকেশনে বিভিন্ন অ্যাকশন সম্পাদনের জন্য ব্যবহৃত হয়।

উদাহরণ:

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

Modals

Modal হলো একটি পপ-আপ ডায়ালগ যা ব্যবহারকারীর সঙ্গে যোগাযোগ করতে বা তাদের থেকে ইনপুট নিতে ব্যবহৃত হয়।

উদাহরণ:

<div class="dialog">
  <div class="dialog-inner">
    <div class="dialog-title">Alert</div>
    <div class="dialog-text">This is a modal dialog.</div>
    <div class="dialog-buttons">
      <span class="dialog-button">OK</span>
    </div>
  </div>
</div>

Framework7 Layouts এবং Components এর সুবিধা

1. রেডি-মেড উপাদান: Framework7 এর প্রি-বিল্ট কম্পোনেন্ট ব্যবহারে সময় বাঁচে এবং ডেভেলপমেন্ট দ্রুত হয়।
2. ফ্লেক্সিবল লেআউট: Views, Panels, এবং Pages ব্যবহার করে কাস্টম লেআউট তৈরি করা সহজ।
3. রেসপন্সিভ ডিজাইন: Components এবং Layouts সব ডিভাইসে রেসপন্সিভভাবে কাজ করে।
4. নেটিভ অভিজ্ঞতা: iOS এবং Android এর জন্য আলাদা থিম এবং নেটিভ-স্টাইল UI প্রদান করে।

Framework7 এর Layouts এবং Components ব্যবহার করে আপনি দ্রুত এবং কার্যকরভাবে একটি পেশাদার মানের মোবাইল বা ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারবেন। এগুলোর প্রি-বিল্ট বৈশিষ্ট্য ডেভেলপমেন্টকে আরও সহজ করে তোলে।

Framework7 একটি অত্যন্ত কার্যকর ফ্রেমওয়ার্ক যা মোবাইল এবং ওয়েব অ্যাপ্লিকেশনের জন্য সহজ এবং সাশ্রয়ী লেআউট ডিজাইন করতে সাহায্য করে। এটি গ্রিড সিস্টেম, ফ্লেক্সবক্স (Flexbox) এবং রেসপন্সিভ ডিজাইন এর মতো অত্যাধুনিক টুলস সরবরাহ করে, যা ডেভেলপারদের দ্রুত লেআউট তৈরি করতে সহায়ক।

১. Framework7 Layouts এর মূল ধারণা

Framework7 Layouts হলো বিভিন্ন UI উপাদানের কাঠামো তৈরির একটি পদ্ধতি যা ব্যবহারকারীদের জন্য নেভিগেশন এবং কন্টেন্ট উপস্থাপনকে সহজ করে। Framework7 ডিফল্টভাবে বেশ কিছু লেআউট সাপোর্ট করে, যেমন:

• Single View Layout
• Split View Layout (ডেস্কটপ এবং ট্যাবলেটের জন্য)
• Tabs Layout
• Master-Detail Layout

২. Framework7 এর গ্রিড সিস্টেম

Framework7 এর গ্রিড সিস্টেম অত্যন্ত ফ্লেক্সিবল এবং রেসপন্সিভ। এটি ফ্লেক্সবক্সের উপর ভিত্তি করে তৈরি, যা উপাদানগুলোর লেআউট সহজে পরিচালনা করে।

গ্রিড সিস্টেমের মূল বৈশিষ্ট্য:

1. Row এবং Column ব্যবহার: লেআউট তৈরির জন্য row এবং col ব্যবহার করা হয়।
2. রেসপন্সিভ: বিভিন্ন স্ক্রিন সাইজ অনুযায়ী লেআউট পরিবর্তন করা যায়।
3. এলিমেন্ট স্পেসিং: gap ব্যবহার করে গ্রিডের মধ্যে ফাঁক তৈরি করা যায়।

উদাহরণ: Simple Grid Layout

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

রেসপন্সিভ গ্রিড উদাহরণ:

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

<div class="row">
  <div class="col-100">100% Width on Mobile</div>
  <div class="col-25">25% Width</div>
  <div class="col-75">75% Width</div>
</div>

৩. Flexbox Layout ব্যবহারের সুবিধা

Flexbox Framework7 এর লেআউট সিস্টেমের একটি গুরুত্বপূর্ণ অংশ। এটি উপাদানগুলোর অবস্থান এবং সাইজ ডাইনামিক্যালি নিয়ন্ত্রণ করতে ব্যবহৃত হয়।

Flexbox উদাহরণ:

<div class="row justify-content-center align-items-center">
  <div class="col">Centered Column 1</div>
  <div class="col">Centered Column 2</div>
</div>

প্রধান ক্লাসসমূহ:

• justify-content-start, justify-content-center, justify-content-end
• align-items-start, align-items-center, align-items-end

৪. Split View Layout (ডেস্কটপ ও ট্যাবলেটের জন্য)

Split View Layout ডেস্কটপ এবং ট্যাবলেট অ্যাপ্লিকেশনের জন্য উপযুক্ত, যেখানে নেভিগেশন প্যানেল এবং প্রধান কন্টেন্ট এলাকা পাশাপাশি থাকে।

উদাহরণ:

<div class="view view-left"> 
  <div class="page">
    <div class="page-content">
      <p>Left Panel Content</p>
    </div>
  </div>
</div>

<div class="view view-main">
  <div class="page">
    <div class="page-content">
      <p>Main Content Area</p>
    </div>
  </div>
</div>

৫. Tabs Layout

Tabs Layout এমন লেআউট যেখানে বিভিন্ন কন্টেন্ট ট্যাবে সাজানো থাকে এবং ব্যবহারকারী ট্যাবের মাধ্যমে বিভিন্ন পৃষ্ঠা দেখতে পারে।

Tabs Layout উদাহরণ:

<div class="tabs">
  <div id="tab1" class="page-content tab tab-active">
    <p>Tab 1 Content</p>
  </div>
  <div id="tab2" class="page-content tab">
    <p>Tab 2 Content</p>
  </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>
  </div>
</div>

৬. Master-Detail Layout

Master-Detail Layout মোবাইল এবং ডেস্কটপ উভয় প্ল্যাটফর্মে ব্যবহৃত হয়, যেখানে একটি লিস্ট (মাস্টার) এবং একটি বিস্তারিত পৃষ্ঠা (ডিটেইল) একসাথে কাজ করে।

Master-Detail উদাহরণ:

<div class="view view-main master-detail-master">
  <div class="page">
    <div class="page-content">
      <ul>
        <li><a href="/detail-page1/">Detail 1</a></li>
        <li><a href="/detail-page2/">Detail 2</a></li>
      </ul>
    </div>
  </div>
</div>

<div class="view view-detail master-detail-detail">
  <div class="page">
    <div class="page-content">
      <p>Detail Page Content</p>
    </div>
  </div>
</div>

৭. Framework7 Layouts এর সাথে রেসপন্সিভ স্ট্রাটেজি

Framework7 এর মিডিয়া কোয়ারিজ এবং CSS ক্লাস ব্যবহার করে রেসপন্সিভ লেআউট তৈরি করা যায়।

CSS মিডিয়া কোয়ারিজ উদাহরণ:

@media (max-width: 768px) {
  .col {
    width: 100%;
  }
}

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

• col-auto: উপাদানের সাইজ কনটেন্ট অনুযায়ী হয়।
• col-50: উপাদানের সাইজ স্ক্রিনের ৫০%।
• hidden-md: নির্দিষ্ট স্ক্রিন সাইজে উপাদান লুকানো হয়।

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

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

এখানে Framework7 এর তিনটি বেসিক কম্পোনেন্ট Navbar, Toolbar, এবং Statusbar নিয়ে আলোচনা করা হলো।

Navbar (ন্যাভবার)

Navbar বা ন্যাভিগেশন বার হলো পৃষ্ঠার উপরের অংশে অবস্থিত একটি কম্পোনেন্ট যা পৃষ্ঠার শিরোনাম, ব্যাক বাটন এবং অন্যান্য অ্যাকশন এলিমেন্ট প্রদর্শনের জন্য ব্যবহৃত হয়।

Navbar এর বেসিক উদাহরণ:

<div class="navbar">
  <div class="navbar-inner">
    <div class="left">
      <a href="#" class="link back">Back</a>
    </div>
    <div class="title">Page Title</div>
    <div class="right">
      <a href="#" class="link">Link</a>
    </div>
  </div>
</div>

Navbar এর উপাদান:

• Left: ব্যাক বাটন বা অন্যান্য বাটনের জন্য।
• Title: পৃষ্ঠার শিরোনাম।
• Right: অ্যাকশন বা লিঙ্কের জন্য।

ডায়নামিক Navbar:

Framework7 ডায়নামিক Navbar সমর্থন করে, যেখানে স্ক্রল করার সময় Navbar কন্টেন্ট পরিবর্তিত হতে পারে।

<div class="navbar navbar-large">
  <div class="navbar-inner">
    <div class="title">Large Title</div>
  </div>
</div>

Toolbar (টুলবার)

Toolbar একটি বটম বা টপ-অবস্থিত কম্পোনেন্ট যা সাধারণত অ্যাপ্লিকেশনের গুরুত্বপূর্ণ অ্যাকশন বা নেভিগেশন অপশন প্রদর্শনের জন্য ব্যবহৃত হয়।

Toolbar এর বেসিক উদাহরণ:

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

Toolbar এর উপাদান:

• Toolbar-inner: Toolbar এর অভ্যন্তরের কন্টেন্ট।
• Link: বিভিন্ন নেভিগেশন বা অ্যাকশনের জন্য লিঙ্ক।

ফিক্সড Toolbar:

Toolbar কন্টেন্ট পৃষ্ঠার সাথে স্ক্রল না করতে চাইলে এটি ফিক্সড করা যায়:

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

Toolbar এর অবস্থান:

• Top Toolbar: পৃষ্ঠার উপরের অংশে প্রদর্শিত হয়।
• Bottom Toolbar: পৃষ্ঠার নিচের অংশে প্রদর্শিত হয় (সাধারণত মোবাইল অ্যাপে ব্যবহৃত)।

Statusbar (স্ট্যাটাসবার)

Statusbar সাধারণত মোবাইল ডিভাইসের উপরের অংশে থাকে এবং ডিভাইসের সিস্টেম স্ট্যাটাস দেখায়, যেমন ব্যাটারি লেভেল, টাইম, এবং সিগনাল স্ট্রেংথ।

Framework7 এ Statusbar ব্যবহারের জন্য:

Framework7 এর Cordova Plugin ব্যবহার করে Statusbar নিয়ন্ত্রণ করা যায়। এটি মোবাইল অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়।

Statusbar প্লাগইন ইন্টিগ্রেশন:

1. Cordova Plugin ইনস্টল করুন:

   cordova plugin add cordova-plugin-statusbar
   

2. স্ট্যাটাসবার সক্রিয় করতে কোড যোগ করুন:

   document.addEventListener('deviceready', function () {
     StatusBar.styleDefault(); // Default স্টাইল
   }, false);
   

Statusbar কাস্টমাইজেশন:

Cordova প্লাগইনের মাধ্যমে স্ট্যাটাসবার কাস্টমাইজ করা যায়:

// স্ট্যাটাসবার লুকানো
StatusBar.hide();

// স্ট্যাটাসবার দেখানো
StatusBar.show();

// ব্যাকগ্রাউন্ড কালার পরিবর্তন
StatusBar.backgroundColorByHexString("#4CAF50");

Navbar, Toolbar, এবং Statusbar একত্রে ব্যবহার

<div class="page">
  <!-- Navbar -->
  <div class="navbar">
    <div class="navbar-inner">
      <div class="left">
        <a href="#" class="link back">Back</a>
      </div>
      <div class="title">Page Title</div>
    </div>
  </div>

  <!-- Page Content -->
  <div class="page-content">
    <p>Welcome to Framework7!</p>
  </div>

  <!-- Toolbar -->
  <div class="toolbar toolbar-bottom">
    <div class="toolbar-inner">
      <a href="#" class="link">Home</a>
      <a href="#" class="link">Search</a>
      <a href="#" class="link">Profile</a>
    </div>
  </div>
</div>

Framework7 এর Navbar, Toolbar, এবং Statusbar কম্পোনেন্টগুলো মোবাইল এবং ওয়েব অ্যাপ্লিকেশনের জন্য অত্যন্ত গুরুত্বপূর্ণ। এগুলো ব্যবহার করে অ্যাপ্লিকেশনের নেভিগেশন এবং কার্যকারিতা সহজতর করা যায়। Cordova এর মাধ্যমে Statusbar কাস্টমাইজ করে মোবাইল অ্যাপে আরও উন্নত অভিজ্ঞতা দেওয়া সম্ভব।

Framework7 দিয়ে আপনি মোবাইল এবং ওয়েব অ্যাপ্লিকেশনে Split View এবং Panel Layouts তৈরি করতে পারেন। এই ফিচারগুলো সাধারণত এমন অ্যাপ্লিকেশনে ব্যবহৃত হয় যেখানে বড় স্ক্রিন (ট্যাবলেট বা ডেস্কটপ) এবং ছোট স্ক্রিনের (মোবাইল) জন্য ভিন্ন ভিন্ন লেআউট দরকার হয়।

Split View তৈরি

Split View সাধারণত বড় স্ক্রিনে সাইড মেনু বা নেভিগেশন এবং মূল কন্টেন্ট একসাথে প্রদর্শনের জন্য ব্যবহৃত হয়। Framework7 Split View কে Resizable Split View হিসেবেও সমর্থন করে।

Split View HTML উদাহরণ

<div id="app">
  <!-- Split View -->
  <div class="view view-left panel panel-left panel-reveal">
    <div class="page">
      <div class="page-content">
        <p>Left Panel Content</p>
        <ul>
          <li><a href="/about/">About</a></li>
          <li><a href="/contact/">Contact</a></li>
        </ul>
      </div>
    </div>
  </div>

  <!-- Main View -->
  <div class="view view-main">
    <div class="page">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">Main Content</div>
        </div>
      </div>
      <div class="page-content">
        <p>This is the main content area.</p>
      </div>
    </div>
  </div>
</div>

Split View CSS উদাহরণ

.view-left {
  width: 300px;
  max-width: 30%;
  border-right: 1px solid #ccc;
}

.view-main {
  margin-left: 300px;
}

Split View কনফিগারেশন (JavaScript)

var app = new Framework7({
  root: '#app',
  routes: [
    { path: '/about/', url: './pages/about.html' },
    { path: '/contact/', url: './pages/contact.html' },
  ],
});

Panel Layouts তৈরি

Panel Layouts Framework7-এ মোবাইল এবং ট্যাবলেটের জন্য ড্রয়ার বা সাইড মেনু হিসেবে কাজ করে। আপনি Left Panel, Right Panel, এবং Resizable Panels তৈরি করতে পারেন।

Left Panel Layout উদাহরণ

<div id="app">
  <!-- Left Panel -->
  <div class="panel panel-left panel-cover">
    <div class="page">
      <div class="page-content">
        <p>This is the Left Panel</p>
        <ul>
          <li><a href="/about/">About</a></li>
          <li><a href="/contact/">Contact</a></li>
        </ul>
      </div>
    </div>
  </div>

  <!-- Main View -->
  <div class="view view-main">
    <div class="page">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">Main Content</div>
        </div>
      </div>
      <div class="page-content">
        <p>This is the main content area.</p>
        <a class="button panel-open" href="#" data-panel="left">Open Left Panel</a>
      </div>
    </div>
  </div>
</div>

Panel Layout কনফিগারেশন (JavaScript)

var app = new Framework7({
  root: '#app',
  panel: {
    swipe: 'left', // সাইড প্যানেল সোয়াইপ করে খুলতে সক্ষম
  },
  routes: [
    { path: '/about/', url: './pages/about.html' },
    { path: '/contact/', url: './pages/contact.html' },
  ],
});

Resizable Split View তৈরি

Resizable Split View এর মাধ্যমে ব্যবহারকারীরা সাইড প্যানেল এবং মেইন কন্টেন্টের আকার পরিবর্তন করতে পারেন।

Resizable Split View HTML উদাহরণ

<div id="app">
  <!-- Resizable Split View -->
  <div class="view view-left panel panel-left resizable">
    <div class="page">
      <div class="page-content">
        <p>Resizable Left Panel Content</p>
      </div>
    </div>
  </div>

  <!-- Main View -->
  <div class="view view-main">
    <div class="page">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">Main Content</div>
        </div>
      </div>
      <div class="page-content">
        <p>This is the main content area.</p>
      </div>
    </div>
  </div>
</div>

Resizable Split View CSS উদাহরণ

Framework7 নিজে থেকেই Resizable Split View এর CSS সংযুক্ত করে, তবে আপনি কাস্টমাইজ করতে পারেন।

Resizable Split View কনফিগারেশন (JavaScript)

var app = new Framework7({
  root: '#app',
  panel: {
    resizable: true,
  },
  routes: [
    { path: '/about/', url: './pages/about.html' },
    { path: '/contact/', url: './pages/contact.html' },
  ],
});

মোবাইল এবং ডেক্সটপের জন্য উপযোগিতা

• Mobile Devices: Panel Layout মোবাইল অ্যাপ্লিকেশনের জন্য আদর্শ। ড্রয়ার মেনু এবং সোয়াইপ প্যানেল ব্যবহার করে ব্যবহারকারীদের সহজে নেভিগেট করার সুযোগ দেয়।
• Desktop/Tablets: Split View বড় স্ক্রিনের জন্য উপযুক্ত, যেখানে নেভিগেশন এবং কন্টেন্ট একসাথে প্রদর্শিত হয়।

Framework7 এর Split View এবং Panel Layouts অ্যাপ্লিকেশনের ব্যবহারকারীর অভিজ্ঞতা উন্নত করে এবং মোবাইল ও বড় স্ক্রিনের উভয়ের জন্য কার্যকর ডিজাইন সরবরাহ করে।

Framework7 অ্যাপ্লিকেশনে Popup, Popover, এবং Action Sheet ব্যবহারের মাধ্যমে ইউজার ইন্টারফেস (UI) আরও সমৃদ্ধ করা যায়। এই উপাদানগুলো মোবাইল এবং ওয়েব অ্যাপ্লিকেশনে বিভিন্ন ধরনের ইন্টারঅ্যাকশন তৈরি করতে ব্যবহৃত হয়।

Popup ব্যবস্থাপনা

Popup হলো একটি ওভারলে যা পুরো স্ক্রিন বা স্ক্রিনের একটি নির্দিষ্ট অংশ জুড়ে প্রদর্শিত হয়। এটি সাধারণত বিশেষ কোনো কন্টেন্ট বা ফর্ম প্রদর্শনের জন্য ব্যবহৃত হয়।

Popup HTML স্ট্রাকচার:

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

Popup চালু ও বন্ধ করার জাভাস্ক্রিপ্ট:

// Popup খোলা
app.popup.open('#my-popup');

// Popup বন্ধ করা
app.popup.close('#my-popup');

Popover ব্যবস্থাপনা

Popover হলো একটি ছোট পপ-আপ উইন্ডো যা একটি নির্দিষ্ট উপাদানের সাথে সম্পর্কিত থাকে এবং অতিরিক্ত তথ্য বা বিকল্প সরবরাহ করতে ব্যবহৃত হয়।

Popover HTML স্ট্রাকচার:

<div class="popover" id="my-popover">
  <div class="popover-inner">
    <div class="block">
      <p>This is a Popover content.</p>
    </div>
  </div>
</div>
<a href="#" class="link" id="open-popover">Open Popover</a>

Popover চালু ও বন্ধ করার জাভাস্ক্রিপ্ট:

// Popover খোলা
app.popover.open('#my-popover', '#open-popover');

// Popover বন্ধ করা
app.popover.close('#my-popover');

Popover পজিশন নির্ধারণ:

Popover একটি নির্দিষ্ট উপাদানের পাশে প্রদর্শিত হয়। open() মেথডে দ্বিতীয় প্যারামিটার হিসাবে লক্ষ্যবস্তু এলিমেন্ট পাস করতে হবে।

Action Sheet ব্যবস্থাপনা

Action Sheet হলো একটি মোডাল ডায়ালগ যা সাধারণত একাধিক বিকল্প প্রদর্শনের জন্য ব্যবহৃত হয়। এটি সাধারণত স্ক্রিনের নিচ থেকে স্লাইড করে উঠে আসে।

Action Sheet HTML স্ট্রাকচার (ডায়নামিক জাভাস্ক্রিপ্টের মাধ্যমে):

var actionSheet = app.actions.create({
  buttons: [
    {
      text: 'Option 1',
      onClick: function () {
        console.log('Option 1 clicked');
      },
    },
    {
      text: 'Option 2',
      onClick: function () {
        console.log('Option 2 clicked');
      },
    },
    {
      text: 'Cancel',
      color: 'red',
    },
  ],
});

// Action Sheet খোলা
actionSheet.open();

Action Sheet HTML ভিত্তিক স্ট্রাকচার:

<div class="actions-modal">
  <div class="actions-group">
    <div class="actions-button">Option 1</div>
    <div class="actions-button">Option 2</div>
  </div>
  <div class="actions-group">
    <div class="actions-button actions-button-bold">Cancel</div>
  </div>
</div>

Action Sheet চালু ও বন্ধ করার জাভাস্ক্রিপ্ট:

// Action Sheet খোলা
app.actions.open('.actions-modal');

// Action Sheet বন্ধ করা
app.actions.close('.actions-modal');

Popup, Popover, এবং Action Sheet ব্যবহারের উদাহরণ

Popup:

• লগইন ফর্ম বা বিশেষ নোটিফিকেশন প্রদর্শনের জন্য।
• পুরো স্ক্রিন কভার করতে।

Popover:

• হেল্প টুলটিপ বা ছোট অপশন দেখানোর জন্য।
• একটি নির্দিষ্ট উপাদানের সাথে সংযুক্ত থাকতে।

Action Sheet:

• বিকল্পগুলোর তালিকা দেখানোর জন্য।
• ইউজার অ্যাকশন সিলেক্ট করার ক্ষেত্রে (যেমন: ছবি আপলোড, ডিলিট কনফার্মেশন)।

গুরুত্বপূর্ণ পয়েন্ট

1. Popup বড় কন্টেন্ট প্রদর্শনের জন্য উপযোগী। এটি মোবাইল অ্যাপ্লিকেশনগুলিতে পুরো স্ক্রিন কভার করে।
2. Popover ছোট এবং নির্দিষ্ট কন্টেন্ট প্রদর্শনের জন্য ব্যবহার করা হয়। এটি নির্দিষ্ট উপাদানের পাশে প্রদর্শিত হয়।
3. Action Sheet একাধিক বিকল্প প্রদর্শনের জন্য আদর্শ এবং সাধারণত স্ক্রিনের নিচ থেকে স্লাইড করে আসে।

Framework7-এ এই তিনটি উপাদানের মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনের UI এবং UX আরও উন্নত করতে পারবেন।

Framework7 একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা অ্যাপ্লিকেশনে প্রয়োজনীয় অনেক প্রি-বিল্ট UI উপাদান (components) প্রদান করে। এদের মধ্যে Accordion, Tabs, এবং Cards অন্যতম। এগুলো ব্যবহার করে আপনি সহজেই আপনার অ্যাপ্লিকেশনের ইন্টারফেস উন্নত করতে পারেন।

Accordion Component

Accordion এমন একটি উপাদান যা ব্যবহারকারীদের কন্টেন্ট গ্রুপ করতে এবং তা এক্সপ্যান্ড বা কোল্যাপ্স করার সুবিধা দেয়।

উদাহরণ:

<div class="accordion-list">
  <ul>
    <li class="accordion-item">
      <a href="#" class="item-link item-content">
        <div class="item-inner">
          <div class="item-title">Accordion Item 1</div>
        </div>
      </a>
      <div class="accordion-item-content">
        <div class="block">
          <p>এই কন্টেন্টটি Accordion Item 1 এর জন্য।</p>
        </div>
      </div>
    </li>
    <li class="accordion-item">
      <a href="#" class="item-link item-content">
        <div class="item-inner">
          <div class="item-title">Accordion Item 2</div>
        </div>
      </a>
      <div class="accordion-item-content">
        <div class="block">
          <p>এই কন্টেন্টটি Accordion Item 2 এর জন্য।</p>
        </div>
      </div>
    </li>
  </ul>
</div>

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

• আপনি accordion-item-opened ক্লাস যোগ করে ডিফল্টভাবে একটি আইটেম খোলা রাখতে পারেন।
• CSS ব্যবহার করে স্টাইল পরিবর্তন করতে পারেন।

Tabs Component

Tabs ব্যবহার করে একই স্ক্রিনে বিভিন্ন কন্টেন্ট গ্রুপ করার সুবিধা পাওয়া যায়, যেখানে প্রতিটি ট্যাব আলাদা কন্টেন্ট প্রদর্শন করে।

উদাহরণ:

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

<div class="tabs">
  <div id="tab-1" class="tab tab-active">
    <div class="block">
      <p>এই কন্টেন্টটি Tab 1 এর জন্য।</p>
    </div>
  </div>
  <div id="tab-2" class="tab">
    <div class="block">
      <p>এই কন্টেন্টটি Tab 2 এর জন্য।</p>
    </div>
  </div>
  <div id="tab-3" class="tab">
    <div class="block">
      <p>এই কন্টেন্টটি Tab 3 এর জন্য।</p>
    </div>
  </div>
</div>

বৈশিষ্ট্য:

• tab-link-active ক্লাস দিয়ে ডিফল্টভাবে সক্রিয় ট্যাব নির্বাচন করা হয়।
• tab-active ক্লাস ব্যবহার করে ডিফল্ট কন্টেন্ট প্রদর্শন করতে পারেন।

Cards Component

Cards ব্যবহারকারীদের তথ্য বা কন্টেন্ট ব্লকের একটি সুন্দর উপস্থাপনা প্রদান করে। এটি প্রোডাক্ট লিস্ট, নিউজ ফিড, বা অন্যান্য ডেটা উপস্থাপনার জন্য ব্যবহৃত হয়।

উদাহরণ:

<div class="card">
  <div class="card-header">Card Header</div>
  <div class="card-content">
    <div class="card-content-inner">
      <p>এটি একটি কার্ডের কন্টেন্ট। এখানে আপনি ডেটা বা টেক্সট প্রদর্শন করতে পারেন।</p>
    </div>
  </div>
  <div class="card-footer">Card Footer</div>
</div>

ইমেজ সহ কার্ড উদাহরণ:

<div class="card">
  <div class="card-header">Awesome Picture</div>
  <div class="card-content">
    <img src="https://via.placeholder.com/500" alt="Card Image" style="width: 100%;">
    <div class="card-content-inner">
      <p>এই কার্ডের মধ্যে একটি ইমেজ রয়েছে।</p>
    </div>
  </div>
  <div class="card-footer">Card Footer</div>
</div>

সব কম্পোনেন্ট একসঙ্গে ব্যবহার

Framework7 এর Accordion, Tabs, এবং Cards একসাথে ব্যবহার করলে আপনার অ্যাপ আরও বেশি ইন্টারেক্টিভ এবং আকর্ষণীয় হয়ে উঠবে।

উদাহরণ:

<div class="accordion-list">
  <ul>
    <li class="accordion-item">
      <a href="#" class="item-link item-content">
        <div class="item-inner">
          <div class="item-title">Accordion with Tabs</div>
        </div>
      </a>
      <div class="accordion-item-content">
        <div class="tabs">
          <div class="toolbar tabbar">
            <div class="toolbar-inner">
              <a href="#tab-1" class="tab-link tab-link-active">Tab 1</a>
              <a href="#tab-2" class="tab-link">Tab 2</a>
            </div>
          </div>
          <div id="tab-1" class="tab tab-active">
            <div class="block">
              <p>Tab 1 এর কন্টেন্ট।</p>
            </div>
          </div>
          <div id="tab-2" class="tab">
            <div class="card">
              <div class="card-header">Card in Tab 2</div>
              <div class="card-content">
                <p>Tab 2 এর মধ্যে একটি কার্ড প্রদর্শিত হচ্ছে।</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

Framework7 এর Accordion, Tabs, এবং Cards কম্পোনেন্ট অ্যাপ্লিকেশনকে আরও ইন্টারেক্টিভ এবং ব্যবহারবান্ধব করে তোলে। এই কম্পোনেন্টগুলো সহজেই কাস্টমাইজ করা যায় এবং অ্যাপ্লিকেশনে একটি প্রফেশনাল লুক নিয়ে আসে। এগুলো ব্যবহার করে আপনার Framework7 অ্যাপ উন্নত করুন।