Buttons, Icons, এবং List Components কনফিগার করা

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 ব্যবহার করে একটি অ্যাপ্লিকেশনকে আধুনিক, রেসপন্সিভ এবং ব্যবহারকারী-বান্ধব করা যায়। এই উপাদানগুলোর মাধ্যমে আপনি দ্রুত একটি সুন্দর এবং কার্যকর ইউজার ইন্টারফেস তৈরি করতে পারবেন।