Ionic Framework এ Grid System একটি শক্তিশালী লেআউট টুল যা আপনার অ্যাপের কন্টেন্টকে সুন্দর এবং রেসপনসিভ (responsive) ভাবে সাজানোর জন্য ব্যবহৃত হয়। Ionic Grid System মূলত Flexbox এর উপর ভিত্তি করে কাজ করে এবং এটি আপনার কন্টেন্টকে বিভিন্ন ডিভাইসের স্ক্রীনে সুন্দরভাবে প্রদর্শন করতে সহায়তা করে।
Ionic Grid System দুটি প্রধান উপাদান নিয়ে কাজ করে:
- ion-grid: এটি মূল গ্রিড কন্টেইনার হিসেবে কাজ করে।
- ion-row: এটি একটি সারি তৈরি করে, যেখানে কলাম থাকবে।
- ion-col: এটি গ্রিডের কলাম হিসাবে কাজ করে এবং এতে কন্টেন্ট রাখার জন্য ব্যবহার হয়।
এখন আমরা বিস্তারিতভাবে Grid System এর ব্যবহার শিখবো।
১. Grid System এর বেসিক ব্যবহার
Ionic Grid System এ ion-grid উপাদানটি গ্রিড কন্টেইনার হিসাবে কাজ করে, ion-row এর মাধ্যমে সারি তৈরি হয় এবং ion-col এর মাধ্যমে কলাম তৈরি করা হয়।
উদাহরণ:
<ion-content>
<ion-grid>
<ion-row>
<ion-col>
<div class="box">Column 1</div>
</ion-col>
<ion-col>
<div class="box">Column 2</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
এখানে, ion-grid একটি কন্টেইনার হিসেবে কাজ করছে, ion-row একটি সারি তৈরি করছে, এবং ion-col দুটি কলাম তৈরি করছে। প্রতিটি কলামের মধ্যে একটি "box" ডিভ রয়েছে, যা কলামগুলোর মধ্যে কন্টেন্ট দেখানোর জন্য।
২. Grid System এর রেসপনসিভ ডিজাইন
Ionic Grid System রেসপনসিভ (responsive) ডিজাইনের জন্য উপযোগী। এর মানে হলো, আপনি বিভিন্ন ডিভাইসে গ্রিডের কলাম সংখ্যা বা আকার পরিবর্তন করতে পারেন।
ল্যাপটপ, ট্যাবলেট এবং মোবাইল ডিভাইসের জন্য ভিন্ন ভিন্ন কলাম সেট করা যায়।
উদাহরণ:
<ion-content>
<ion-grid>
<ion-row>
<ion-col size="12" size-md="6" size-lg="4">
<div class="box">Column 1</div>
</ion-col>
<ion-col size="12" size-md="6" size-lg="4">
<div class="box">Column 2</div>
</ion-col>
<ion-col size="12" size-md="6" size-lg="4">
<div class="box">Column 3</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
এখানে:
- size="12": এটি মোবাইলের জন্য কলাম পূর্ণ-প্রস্থ (100%) করে।
- size-md="6": এটি medium devices (ট্যাবলেট) এর জন্য কলাম প্রস্থ 50% (6/12) করবে।
- size-lg="4": এটি large devices (ল্যাপটপ) এর জন্য কলাম প্রস্থ 33% (4/12) করবে।
এভাবে আপনি গ্রিড সিস্টেমে কন্টেন্টের আকার এবং কলামের সংখ্যা ডিভাইসের স্ক্রীনের আকার অনুযায়ী কাস্টমাইজ করতে পারেন।
৩. নেস্টেড (Nested) Grid ব্যবহার করা
আপনি যদি একটি কলামের ভিতরে আরো একটি গ্রিড সিস্টেম ব্যবহার করতে চান, তাহলে নেস্টেড গ্রিড ব্যবহার করতে পারেন।
উদাহরণ:
<ion-content>
<ion-grid>
<ion-row>
<ion-col size="6">
<ion-grid>
<ion-row>
<ion-col size="6">
<div class="box">Nested Column 1</div>
</ion-col>
<ion-col size="6">
<div class="box">Nested Column 2</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
<ion-col size="6">
<div class="box">Column 2</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
এখানে, প্রথম কলামে একটি নতুন গ্রিড সিস্টেম (Nested Grid) তৈরি করা হয়েছে, যেখানে আরো দুটি কলাম রয়েছে।
৪. Grid System এর অন্যান্য অপশন
Ionic Grid System এ কিছু অতিরিক্ত অপশনও রয়েছে যা আপনি কাস্টমাইজেশন করতে ব্যবহার করতে পারেন:
offset: কলামটি নির্দিষ্ট সংখ্যক কলাম সরে গিয়ে প্রদর্শন হবে।
উদাহরণ:
<ion-col size="6" offset="3"> <div class="box">Centered Column</div> </ion-col>push ও pull: কলামগুলোর স্থান পরিবর্তন করতে।
উদাহরণ:
<ion-col size="6" push="6"> <div class="box">Push Column</div> </ion-col>
৫. Grid System এর স্টাইলিং
Grid System এর ব্যবহার করার সময় আপনি স্টাইলিং করতে চান, যেমন কলামগুলোর মধ্যে কিছু গ্যাপ, মার্জিন, বা প্যাডিং যোগ করতে পারেন।
.box {
background-color: #f2f2f2;
padding: 10px;
text-align: center;
border: 1px solid #ccc;
}
এটি কলামের কন্টেন্টকে সুন্দরভাবে প্রদর্শন করবে।
সারাংশ
Ionic Grid System হল একটি সহজ কিন্তু শক্তিশালী টুল যা আপনাকে রেসপনসিভ এবং সুশৃঙ্খল লেআউট তৈরি করতে সাহায্য করে। এর মাধ্যমে আপনি খুব সহজে আপনার অ্যাপের কন্টেন্টকে বিভিন্ন ডিভাইসে সুন্দরভাবে প্রদর্শন করতে পারবেন।
Read more
