Ionic ফ্রেমওয়ার্কে অনেক প্রি-বিল্ট UI কম্পোনেন্ট রয়েছে যা অ্যাপ্লিকেশন ডেভেলপমেন্টে অনেক সহজ এবং দ্রুত কাজ করতে সাহায্য করে। এখানে Button, Card, List, এবং Input কম্পোনেন্টসের ব্যবহার এবং কিভাবে এগুলো ব্যবহার করবেন তা আলোচনা করা হলো।
১. Button
Button কম্পোনেন্ট হল Ionic এর সবচেয়ে সাধারণ এবং ব্যবহারিক কম্পোনেন্টগুলোর একটি। এটি বিভিন্ন রঙ, সাইজ এবং স্টাইলে কাস্টমাইজ করা যায়।
উদাহরণ:
<ion-button>Default Button</ion-button>
<ion-button color="primary">Primary Button</ion-button>
<ion-button color="secondary" size="small">Small Secondary Button</ion-button>
<ion-button fill="clear" color="tertiary">Clear Button</ion-button>
Button Attributes:
color: বাটনের রঙ (যেমন:primary,secondary,danger,tertiaryইত্যাদি)।size: বাটনের সাইজ (যেমন:small,default,large)।fill: বাটনের ভিন্ন স্টাইল (যেমন:solid,outline,clear)।
২. Card
Card কম্পোনেন্ট একটি কন্টেইনার যা কন্টেন্ট বা মিডিয়া (ছবি, টেক্সট, বাটন ইত্যাদি) দেখানোর জন্য ব্যবহৃত হয়। এটি সাধারণত একটি টাইটেল, সাবটাইটেল, ছবি এবং বাটনসহ থাকে।
উদাহরণ:
<ion-card>
<ion-card-header>
<ion-card-title>Card Title</ion-card-title>
<ion-card-subtitle>Card Subtitle</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
This is the content of the card. You can add text, images, or anything you want.
</ion-card-content>
<ion-button>Click Me</ion-button>
</ion-card>
Card Attributes:
ion-card-header: কার্ডের হেডার সেকশন, যেখানে টাইটেল এবং সাবটাইটেল থাকে।ion-card-title: কার্ডের শিরোনাম।ion-card-subtitle: কার্ডের উপশিরোনাম।ion-card-content: কার্ডের মূল কনটেন্ট।
৩. List
List কম্পোনেন্ট ব্যবহারকারীদের জন্য একটি লিস্টভিউ তৈরি করতে সাহায্য করে, যেখানে বিভিন্ন আইটেম রাখা যায়। আপনি প্রতিটি আইটেমের জন্য লেবেল, বাটন বা ইমেজ ইত্যাদি যোগ করতে পারেন।
উদাহরণ:
<ion-list>
<ion-item>
<ion-label>Item 1</ion-label>
<ion-button slot="end">Action</ion-button>
</ion-item>
<ion-item>
<ion-label>Item 2</ion-label>
<ion-button slot="end">Action</ion-button>
</ion-item>
<ion-item>
<ion-label>Item 3</ion-label>
<ion-button slot="end">Action</ion-button>
</ion-item>
</ion-list>
List Attributes:
ion-item: লিস্ট আইটেম।ion-label: আইটেমের লেবেল বা টেক্সট।slot="end": বাটন বা অ্যাকশন আইটেমের শেষ অংশে থাকবে এমন নির্দেশনা।
৪. Input
Input কম্পোনেন্ট ব্যবহারকারীদের ইনপুট নেওয়ার জন্য ব্যবহৃত হয়। এটি বিভিন্ন ধরনের ইনপুট যেমন টেক্সট, পাসওয়ার্ড, ইমেইল ইত্যাদি গ্রহণ করতে পারে।
উদাহরণ:
<ion-item>
<ion-label position="floating">Username</ion-label>
<ion-input type="text" placeholder="Enter your username"></ion-input>
</ion-item>
<ion-item>
<ion-label position="floating">Password</ion-label>
<ion-input type="password" placeholder="Enter your password"></ion-input>
</ion-item>
Input Attributes:
type: ইনপুট ফিল্ডের টাইপ (যেমন:text,password,email,numberইত্যাদি)।placeholder: ইনপুট ফিল্ডের মধ্যে প্রদর্শিত টেক্সট, যেমন "Enter your username"।position:floatingঅথবাstackedঅপশন দিয়ে লেবেলটি কিভাবে দেখাবে তা নির্ধারণ করা যায়।
সারাংশ
- Button: বাটন কম্পোনেন্ট ব্যবহার করে অ্যাকশন তৈরি করা যায়, এবং এটি বিভিন্ন স্টাইলে কাস্টমাইজ করা যায়।
- Card: একটি কন্টেইনার যা কন্টেন্ট বা মিডিয়া প্রদর্শনের জন্য ব্যবহৃত হয়, যেমন টাইটেল, সাবটাইটেল, ছবি ইত্যাদি।
- List: আইটেমগুলোর লিস্ট তৈরি করতে ব্যবহৃত হয়, এবং প্রতিটি আইটেমে বাটন এবং অন্যান্য কন্টেন্ট যোগ করা যায়।
- Input: ইনপুট ফিল্ড তৈরি করতে ব্যবহৃত হয় যা বিভিন্ন ধরনের ডেটা গ্রহণ করতে পারে।
এগুলি Ionic এর কিছু সাধারণ এবং খুবই কার্যকরী কম্পোনেন্ট যা আপনাকে আপনার অ্যাপ্লিকেশন ডেভেলপমেন্টে সাহায্য করবে।
