Web Development Framework7 এর Popup এবং Modal Components গাইড ও নোট

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

Popup Component

Popup হলো স্ক্রিনের উপরে ভেসে ওঠা একটি ওভারলে যা সাধারণত কোনো কন্টেন্ট বা অ্যাকশন বাটন প্রদর্শন করতে ব্যবহৃত হয়। ইউজার Popup বন্ধ না করা পর্যন্ত ব্যাকগ্রাউন্ড কন্টেন্ট অ্যাক্সেস করা যায় না, যা ইউজারের মনোযোগPopup-এর কন্টেন্টে ধরে রাখে।

Popup তৈরির উদাহরণ

<!-- Popup Trigger -->
<a href="#" class="link popup-open" data-popup=".my-popup">Open Popup</a>

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

Popup ওপেন করা

// জাভাস্ক্রিপ্টের মাধ্যমে ওপেন করা
var popup = app.popup.open('.my-popup');

Popup ক্লোজ করা

// জাভাস্ক্রিপ্টের মাধ্যমে ক্লোজ করা
app.popup.close('.my-popup');

Modal Component

Modal হলো একটি ওভারলে যা বিভিন্ন প্রকার UI এলিমেন্ট প্রদর্শন করতে পারে, যেমন নোটিফিকেশন, কনফার্মেশন বক্স, প্রম্পট বা কাস্টম কন্টেন্ট। Framework7 বিভিন্ন প্রস্তুত Modal ফাংশন সরবরাহ করে, যা ব্যবহার করে দ্রুত Modal তৈরি করা যায়।

Alert Modal

Alert Modal সাধারণত ইউজারকে কোনো বার্তা দেখানোর জন্য ব্যবহৃত হয়।

app.dialog.alert('This is an alert message!');

Confirm Modal

Confirm Modal ব্যবহার করে ইউজারের সম্মতি বা সিদ্ধান্ত গ্রহণের জন্য একটি কনফার্মেশন বক্স দেখানো যায়।

app.dialog.confirm('Are you sure?', function () {
  // ইউজার 'OK' চাপলে এখানে কোড চলবে
  console.log('User clicked OK');
}, function () {
  // ইউজার 'Cancel' চাপলে এখানে কোড চলবে
  console.log('User clicked Cancel');
});

Prompt Modal

Prompt Modal ব্যবহার করে ইউজারের কাছ থেকে ইনপুট নেওয়া যায়।

app.dialog.prompt('What is your name?', function (value) {
  console.log('User typed: ' + value);
});

Login Modal (কাস্টম কন্টেন্ট সহ)

Custom Modal ব্যবহার করে আপনি আপনার ইচ্ছেমতো কন্টেন্ট রাখতে পারেন, যেমন লগইন ফর্ম।

<div class="dialog dialog-login">
  <div class="dialog-inner">
    <div class="dialog-title">Login</div>
    <div class="dialog-input">
      <input type="text" placeholder="Username">
      <input type="password" placeholder="Password">
    </div>
    <div class="dialog-buttons">
      <span class="dialog-button dialog-close">Cancel</span>
      <span class="dialog-button dialog-login-button">Login</span>
    </div>
  </div>
</div>

// Modal ওপেন করা
var loginDialog = app.dialog.create({
  el: '.dialog-login',
  on: {
    opened: function () {
      console.log('Login Modal Opened');
    },
  },
});

// Modal ওপেন করার উদাহরণ
loginDialog.open();

// Login Button ইভেন্ট
document.querySelector('.dialog-login-button').addEventListener('click', function() {
  loginDialog.close();
  console.log('Logged in!');
});

Popup ও Modal ব্যবহারের সুবিধা

1. UI উন্নত করে: Popup এবং Modal এর মাধ্যমে ইউজারকে নিদৃষ্ট কাজের জন্য ফোকাসড কন্টেন্ট দেখানো যায়।
2. সহজ ইন্টারঅ্যাকশন: অ্যালার্ট, কনফার্ম, প্রম্পট ইত্যাদি ব্যবহার করে ইউজারের সাথে সরাসরি ইন্টারঅ্যাকশন করা সহজ।
3. টেমপ্লেটিং সহজ: CSS ও HTML পরিবর্তন করে পপআপ ও মডাল কাস্টমাইজ করা যায়।
4. অপশনাল কাস্টম কন্টেন্ট: Popup বা Modal এ যেকোনো ধরনের কাস্টম ফর্ম, তালিকা বা কম্পোনেন্ট যোগ করা যায়।

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

Framework7 মোবাইল ও ওয়েব অ্যাপ্লিকেশনে ইনটের্যাকটিভ ইলিমেন্ট তৈরি করতে Popup, Dialog এবং Action Sheet এর মতো UI কম্পোনেন্ট সরবরাহ করে। এগুলো ব্যবহার করে ইউজারদের জন্য উন্নত ব্যবহারকারী অভিজ্ঞতা নিশ্চিত করা যায়।

Popup ব্যবহার

Popup কি?

Popup (পপআপ) হল একটি ওভারলে করা এলিমেন্ট, যা সাধারণত কোন অ্যাকশন ট্রিগার করলে স্ক্রিনের উপরে প্রদর্শিত হয়। এটি ব্যবহার করে ইউজারকে অতিরিক্ত তথ্য, নোটিফিকেশন বা ফর্ম দেখানো যায়।

Popup তৈরির উদাহরণ

<!-- Popup Trigger -->
<a href="#" class="popup-open" data-popup=".demo-popup">Open Popup</a>

<!-- Popup Layout -->
<div class="popup demo-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-open ক্লাসযুক্ত লিঙ্কটি ক্লিক করলে .demo-popup ক্লাসযুক্ত পপআপটি প্রদর্শিত হবে। .popup-close লিঙ্কটি ক্লিক করলে পপআপটি বন্ধ হবে।

Dialog ব্যবহার

Dialog কি?

Dialog (ডায়ালগ) হল একটি মডাল উইন্ডো যা ইউজারকে কোনো বার্তা, সতর্কীকরণ বা কনফার্মেশন দেখাতে ব্যবহৃত হয়। Dialog সাধারণত ইউজারকে একটি নির্দিষ্ট অ্যাকশনে সম্মতি বা বাতিল করার সুযোগ দেয়।

Dialog তৈরির উদাহরণ (JavaScript API)

<a href="#" onclick="openDialog()" class="button button-fill">Open Dialog</a>

<script>
  var app = new Framework7({
    root: '#app'
  });

  function openDialog() {
    app.dialog.alert('This is a simple dialog!');
  }
</script>

উদাহরণে app.dialog.alert() মেথডটি ব্যবহার করে একটি সিম্পল ডায়ালগ তৈরি করা হয়েছে। ইউজার "OK" বাটনে ক্লিক করলে ডায়ালগটি বন্ধ হবে।

কনফার্ম ডায়ালগ

app.dialog.confirm('Are you sure?', function () {
  console.log('User clicked OK');
}, function () {
  console.log('User clicked Cancel');
});

উপরের উদাহরণে dialog.confirm() একটি কনফার্মেশন ডায়ালগ তৈরি করে। ইউজার "OK" বা "Cancel" বাটন ক্লিক করে অ্যাকশনের সম্মতি বা বাতিল করতে পারে।

Action Sheet ব্যবহার

Action Sheet কি?

Action Sheet হল একটি বটম-শীট মেনু যা স্ক্রিনের নিচ থেকে স্লাইড করে আসে এবং ইউজারকে একাধিক অ্যাকশন বা অপশন দেখায়। এটি সাধারণত মোবাইল UI তে বিকল্পগুলো সহজে নির্বাচন করার সুযোগ দেয়।

Action Sheet তৈরির উদাহরণ

<a href="#" class="button button-fill" onclick="openActionSheet()">Show Action Sheet</a>

<script>
  function openActionSheet() {
    var mainApp = new Framework7({ root: '#app' });
    mainApp.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'
        }
      ]
    }).open();
  }
</script>

উপরের উদাহরণে mainApp.actions.create() মেথড ব্যবহার করে একটি Action Sheet তৈরি করা হয়েছে। ইউজার "Option 1", "Option 2" বা "Cancel" অপশন নির্বাচন করতে পারে। Cancel ক্লিক করলে Action Sheet বন্ধ হয়ে যাবে।

সারাংশ

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

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

কাস্টম Modal তৈরি

বেসিক কাঠামো (HTML, CSS এবং JavaScript)

HTML টেমপ্লেট:

<div class="custom-modal modal">
  <div class="modal-inner">
    <div class="modal-title">শিরোনাম</div>
    <div class="modal-text">এখানে আপনার কনটেন্ট যোগ করুন</div>
    <div class="modal-buttons">
      <span class="modal-button modal-close">বন্ধ করুন</span>
      <span class="modal-button modal-accept">ঠিক আছে</span>
    </div>
  </div>
</div>

CSS কাস্টমাইজেশন (custom.css):

.custom-modal .modal-inner {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
}
.custom-modal .modal-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}
.modal-buttons .modal-button {
  padding: 10px 15px;
  margin: 5px;
  background: #007aff;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}
.modal-buttons .modal-button.modal-close {
  background: #ff3b30;
}

JavaScript কন্ট্রোল (app.js):

var app = new Framework7({
  root: '#app',
});

// Modal ওপেন করা
document.querySelector('.open-modal-button').addEventListener('click', function() {
  app.dialog.open('.custom-modal');
});

// Modal ক্লোজ করা
document.querySelector('.modal-close').addEventListener('click', function() {
  app.dialog.close('.custom-modal');
});

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

• রঙ, ফন্ট, প্যাডিং পরিবর্তন করে Modal-এর লুক কাস্টমাইজ করুন।
• animationCSS ক্লাস যোগ করে খোলার ও বন্ধ হওয়ার অ্যাডিমেশন পরিবর্তন করা যায়।
• প্রয়োজন অনুযায়ী Modal এর ভিতরে ফর্ম বা ইমেজ যুক্ত করতে পারেন।

Popup তৈরি

বেসিক কাঠামো

HTML টেমপ্লেট:

<div class="popup custom-popup">
  <div class="view">
    <div class="page">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">পপআপ শিরোনাম</div>
          <div class="right">
            <a class="link popup-close">বন্ধ</a>
          </div>
        </div>
      </div>
      <div class="page-content">
        <p>পপআপ কনটেন্ট যোগ করুন</p>
      </div>
    </div>
  </div>
</div>

CSS কাস্টমাইজেশন (custom.css):

.custom-popup .navbar {
  background: #4cd964;
}
.custom-popup .title {
  color: #fff;
}

JavaScript কন্ট্রোল (app.js):

// Popup ওপেন করা
document.querySelector('.open-popup-button').addEventListener('click', function() {
  app.popup.open('.custom-popup');
});

// Popup ক্লোজ করা
document.querySelector('.popup-close').addEventListener('click', function() {
  app.popup.close('.custom-popup');
});

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

• .custom-popup ক্লাসে স্টাইল যোগ করে ব্যাকগ্রাউন্ড কালার, হাইট বা উইথ পরিবর্তন করুন।
• Popup এ ফর্ম, তালিকা, বা কার্ড কম্পোনেন্ট যুক্ত করে ইউজারের ইন্টার‍্যাকশন বৃদ্ধির সুযোগ রয়েছে।
• এনিমেশন, ট্রানজিশন ইফেক্ট এবং Responsive ডিজাইনের মাধ্যমে Popup কে বিভিন্ন ডিভাইসে মানানসই করা যায়।

সারাংশ: Framework7-এ .Custom Modal এবং Popup ব্যবহার করে কাস্টম UI তৈরি করা যায়। CSS এবং JavaScript ব্যবহার করে এগুলোকে আপনার প্রয়োজন অনুযায়ী পরিবর্তন, পরিবর্ধন ও কাস্টমাইজ করতে পারবেন। এতে অ্যাপ্লিকেশনের ইন্টারফেস হবে আরও আকর্ষণীয় এবং ইন্টার‍্যাকটিভ।

Framework7 এ Notifications এবং Toast ব্যবহার করে অ্যাপ্লিকেশনে ব্যবহারকারীকে বিভিন্ন বার্তা এবং আপডেট দেখানো যায়। Notifications সাধারণত স্ক্রিনের উপরের দিকে দেখানো হয় এবং কিছু সময় পর অদৃশ্য হয়ে যায়, আর Toast সাধারণত স্ক্রিনের নিচে ছোট পপআপ আকারে প্রদর্শিত হয়।

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

Notifications তৈরি করা

Framework7 এ Notification তৈরি করতে app.notification.create() মেথড ব্যবহার করা হয়। Notification এ আপনি শিরোনাম (title), বার্তা (text), আইকন (icon) ইত্যাদি সেট করতে পারেন।

var notification = app.notification.create({
  title: 'Notification Title',
  text: 'This is a notification message.',
  closeButton: true,
});

Notification চালু ও বন্ধ করা

Notification প্রদর্শন করতে notification.open() এবং বন্ধ করতে notification.close() মেথড ব্যবহার করুন।

// Notification দেখানো
notification.open();

// Notification বন্ধ করা
notification.close();

Notification এর অন্যান্য অপশন

• title: Notification এর শিরোনাম।
• subtitle: Notification এর সাবটাইটেল।
• text: Notification এর মূল বার্তা।
• icon: Notification এ আইকন যুক্ত করতে।
• closeButton: Notification এ ক্লোজ বাটন দেখাতে true সেট করুন।
• closeTimeout: নির্দিষ্ট সময় পর Notification স্বয়ংক্রিয়ভাবে বন্ধ করতে একটি টাইমআউট (মিলিসেকেন্ডে) নির্ধারণ করতে পারেন।

var notification = app.notification.create({
  title: 'MyApp',
  subtitle: 'New Message',
  text: 'You have a new message!',
  closeButton: true,
  closeTimeout: 3000, // 3 সেকেন্ড পর স্বয়ংক্রিয়ভাবে বন্ধ হবে
});

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

Toast তৈরি করা

Toast হলো স্ক্রিনের নিচে ছোট পপআপ বার্তা প্রদর্শনের জন্য ব্যবহৃত হয়। Toast সাধারণত স্বল্প সময়ের জন্য দেখানো হয়।

var toast = app.toast.create({
  text: 'This is a Toast message!',
  position: 'bottom', // টোস্ট কোথায় দেখানো হবে (bottom, center, top)
  closeTimeout: 2000, // কতক্ষণ টোস্ট প্রদর্শিত থাকবে (মিলিসেকেন্ডে)
});

Toast চালু ও বন্ধ করা

// Toast দেখানো
toast.open();

// Toast বন্ধ করা
toast.close();

Toast এর অন্যান্য অপশন

• text: টোস্টের মূল বার্তা।
• position: টোস্ট কোথায় প্রদর্শিত হবে (bottom, center, top)।
• closeTimeout: স্বয়ংক্রিয়ভাবে টোস্ট বন্ধ হওয়ার সময় (মিলিসেকেন্ডে)।
• cssClass: কাস্টম CSS ক্লাস যোগ করে টোস্টের স্টাইল কাস্টমাইজ করা যায়।

var toast = app.toast.create({
  text: 'Task Completed!',
  position: 'bottom',
  closeTimeout: 2000,
  cssClass: 'my-toast-class',
});

Notifications এবং Toast এর ব্যবহারিক উদাহরণ

Notifications উদাহরণ

var messageNotification = app.notification.create({
  title: 'MyApp',
  subtitle: 'New Message Received',
  text: 'You have a new message from John.',
  closeButton: true,
  closeTimeout: 5000,
});
messageNotification.open();

Toast উদাহরণ

var successToast = app.toast.create({
  text: 'Data saved successfully!',
  position: 'center',
  closeTimeout: 3000,
});
successToast.open();

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

Framework7 অ্যাপ্লিকেশনে ব্যবহারকারীকে বিভিন্ন ধরনের বার্তা, সতর্কতা অথবা কনফার্মেশন প্রদর্শন করতে Dialog Boxes কার্যকরভাবে ব্যবহার করা যায়। এর মধ্যে সবচেয়ে প্রচলিত হলো Alert ও Confirm ডায়ালগ।

Alert Dialog

Alert (অ্যালার্ট) হলো একটি সাধারণ নোটিফিকেশন ডায়ালগ, যা ব্যবহারকারীকে কোনো বার্তা দেখায় এবং সাধারণত একটিমাত্র অ্যাকশন বোতাম থাকে।

উদাহরণ:

app.dialog.alert('This is an Alert Dialog!', 'Alert Title');

উপরের কোডে app.dialog.alert() ফাংশনটি ব্যবহার করে একটি অ্যালার্ট ডায়ালগ তৈরি করা হয়েছে। প্রথম আর্গুমেন্ট হলো মেসেজ এবং দ্বিতীয় আর্গুমেন্ট হলো ঐচ্ছিক শিরোনাম (Title)।

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

• শুধু মেসেজ:

  app.dialog.alert('Just a simple alert.');
  

• শিরোনামসহ মেসেজ:

  app.dialog.alert('This is an important message', 'Important!');
  

Confirm Dialog

Confirm (কনফার্ম) ডায়ালগ ব্যবহারকারীর কাছ থেকে কোনো কিছু নিশ্চিত করতে ব্যবহৃত হয়। এতে সাধারণত দুটি বোতাম থাকে: একটিতে সম্মতি (Ok, Yes) এবং অন্যটিতে অস্বীকার (Cancel, No)।

উদাহরণ:

app.dialog.confirm('Are you sure you want to proceed?', 'Confirmation', function () {
  console.log('User clicked OK');
}, function () {
  console.log('User clicked Cancel');
});

• প্রথম আর্গুমেন্ট: মেসেজ (string)।
• দ্বিতীয় আর্গুমেন্ট: শিরোনাম (optional)।
• তৃতীয় আর্গুমেন্ট: OK বাটন প্রেস করলে কলব্যাক ফাংশন ট্রিগার হবে।
• চতুর্থ আর্গুমেন্ট: Cancel বাটন প্রেস করলে কলব্যাক ফাংশন ট্রিগার হবে।

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

• কাস্টম বোতাম টেক্সট:

  app.dialog.confirm('Delete this item?', 'Delete', function () {
    console.log('Deleted');
  }, function () {
    console.log('Not Deleted');
  });
  

  এখানে ডিফল্ট OK/Cancel টেক্সট ব্যবহার হয়। তবে আপনি app.dialog.create() ব্যবহার করে কাস্টম বোতাম টেক্সট সেট করতে পারেন।

Prompt Dialog

Prompt (প্রম্প্ট) ডায়ালগ ব্যবহার করে ব্যবহারকারীর কাছ থেকে ইনপুট নেওয়া যায়। এটি সাধারণত একটি ইনপুট ফিল্ড এবং দুটি বোতাম (OK এবং Cancel) থাকে।

উদাহরণ:

app.dialog.prompt('What is your name?', 'Name Input', function (value) {
  console.log('User typed: ' + value);
}, function () {
  console.log('User cancelled');
});

উপরের উদাহরণে, ব্যবহারকারী OK প্রেস করলে ইনপুটের মান কলব্যাকে value প্যারামিটারে পাওয়া যাবে।

কাস্টম ডায়ালগ তৈরি

Framework7 এর app.dialog.create() API ব্যবহার করে আপনি নিজস্ব কাস্টম ডায়ালগ তৈরি করতে পারেন, যেখানে আপনার পছন্দমতো HTML, বোতাম, এবং ইভেন্ট হ্যান্ডলার যোগ করা যাবে।

উদাহরণ:

var myDialog = app.dialog.create({
  title: 'Custom Dialog',
  text: 'This is a custom dialog content',
  buttons: [
    {
      text: 'Cancel',
      onClick: function () {
        console.log('Cancelled');
      }
    },
    {
      text: 'Ok',
      bold: true,
      onClick: function () {
        console.log('Confirmed');
      }
    },
  ]
});

// ডায়ালগটি প্রদর্শন করতে:
myDialog.open();

সারাংশ

Framework7 এ Dialog Boxes ব্যবহার করে সহজেই Alert, Confirm, এবং Prompt ম্যাসেজ প্রদর্শন করা যায়। এগুলো ব্যবহার করে অ্যাপ্লিকেশনের ইউজার ইন্টারফেস আরও ইন্টারঅ্যাকটিভ ও ইউজার-ফ্রেন্ডলি করা যায়। Alert এবং Confirm ডায়ালগের মাধ্যমে ইউজারকে বার্তা প্রদর্শন, ইনপুট গ্রহণ এবং নিশ্চিতকরণ নেওয়া সম্ভব, যা আপনার অ্যাপকে আরও কার্যকর করে তুলবে।