Angular Material-এ spacing, gutter এবং columns ব্যবহারের মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনে আরও পরিষ্কার, পরিপাটি এবং সুশৃঙ্খল লেআউট তৈরি করতে পারেন। এগুলো মূলত Grid System এর অংশ, যা Angular Material এর Flex Layout এবং CSS Grid সিস্টেমের উপর ভিত্তি করে কাজ করে।

Spacing, Gutter এবং Columns এর ধারণা

• Spacing: অ্যাপ্লিকেশনের উপাদানগুলির মধ্যে ফাঁকা জায়গা (মার্জিন বা প্যাডিং) সৃষ্টি করে। এটি উপাদানগুলির মধ্যে সঠিক পার্থক্য এবং আরও পরিষ্কার ও গোছানো লেআউট নিশ্চিত করে।
• Gutter: দুটি উপাদান বা কলামের মধ্যে ব্যবধান বা গ্যাপ। এটি সাধারণত সঠিক ফাঁকা জায়গা সৃষ্টি করতে ব্যবহৃত হয়, বিশেষত grid সিস্টেমে।
• Columns: লেআউটের জন্য কোলাম (বা কলাম) ব্যবহার করে আপনি উপাদানগুলিকে বিভিন্ন কলামে ভাগ করতে পারেন, যা একটি responsive লেআউট তৈরি করতে সহায়ক।

Angular Material-এ Spacing, Gutter এবং Columns ব্যবহার

Angular Material এর মাধ্যমে spacing, gutter, এবং columns ব্যবহারের জন্য Angular Flex Layout প্যাকেজটি ব্যবহার করা হয়। এটি ব্যবহারকারীকে flexbox সিস্টেমের মাধ্যমে লেআউট কাস্টমাইজ করার সুবিধা দেয়।

১. Angular Flex Layout ইনস্টল করা

প্রথমে, Angular Flex Layout প্যাকেজটি ইনস্টল করতে হবে।

npm install @angular/flex-layout

এটি ইনস্টল করার পর, আপনার app.module.ts ফাইলে এটি ইমপোর্ট করতে হবে:

import { FlexLayoutModule } from '@angular/flex-layout';

@NgModule({
  imports: [
    FlexLayoutModule
  ],
  ...
})
export class AppModule { }

২. Spacing (প্যাডিং এবং মার্জিন)

Angular Material এর উপাদানগুলির মধ্যে spacing তৈরি করতে, Flex Layout এর fxLayoutGap অথবা fxLayoutAlign ব্যবহার করা যায়।

• fxLayoutGap: উপাদানগুলির মধ্যে গ্যাপ বা ফাঁকা জায়গা তৈরি করার জন্য।
• fxLayoutAlign: উপাদানগুলির অবস্থান নির্ধারণ করতে ব্যবহৃত হয়, যেমন justify-content এবং align-items।

উদাহরণ:

<div fxLayout="row" fxLayoutGap="16px">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

এখানে fxLayout="row" মানে উপাদানগুলো এক্স_axis (লাইন) এ সাজানো হবে এবং fxLayoutGap="16px" মানে উপাদানগুলোর মধ্যে ১৬px গ্যাপ থাকবে।

৩. Gutter

Gutter সাধারণত grid সিস্টেমে ব্যবহৃত হয়, যেখানে কলামের মধ্যে ফাঁকা জায়গা বা গ্যাপ নির্ধারণ করা হয়। Angular Material-এ gutter সেট করার জন্য fxLayoutGap বা CSS ব্যবহার করা যায়।

উদাহরণ:

<div fxLayout="row" fxLayoutGap="24px">
  <div class="box">Column 1</div>
  <div class="box">Column 2</div>
  <div class="box">Column 3</div>
</div>

এখানে, কলামগুলোর মধ্যে ২৪px গ্যাপ থাকবে।

৪. Columns (Flexbox Columns)

Columns ব্যবহারের মাধ্যমে আপনি উপাদানগুলো বিভিন্ন কলামে ভাগ করতে পারেন। Flex Layout এর fxFlex নির্দেশক ব্যবহার করে এটি করা সম্ভব।

উদাহরণ:

<div fxLayout="row" fxLayoutGap="24px">
  <div fxFlex="33.33%" class="box">Column 1</div>
  <div fxFlex="33.33%" class="box">Column 2</div>
  <div fxFlex="33.33%" class="box">Column 3</div>
</div>

এখানে fxFlex="33.33%" ব্যবহার করে তিনটি কলাম সমানভাবে ভাগ করা হয়েছে (প্রতিটি ৩৩.৩৩% প্রস্থ নিয়ে)।

৫. Responsive Layout (Responsive Spacing, Gutter, and Columns)

Flex Layout এর মাধ্যমে আপনি responsive লেআউট তৈরি করতে পারেন, যেখানে কলামগুলো বিভিন্ন স্ক্রীন সাইজ অনুযায়ী সাজানো হয়।

উদাহরণ:

<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="16px">
  <div fxFlex="50%" class="box">Column 1</div>
  <div fxFlex="50%" class="box">Column 2</div>
</div>

এখানে, lt-md মানে "medium" স্ক্রীন সাইজের নিচে (যেমন মোবাইল) এই লেআউটটি column হিসেবে সজ্জিত হবে এবং বড় স্ক্রীনে এটি row হিসেবে থাকবে।

Angular Material এবং Flex Layout ব্যবহারের মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনের spacing, gutter এবং columns সিস্টেমকে কার্যকরভাবে কাস্টমাইজ করতে পারেন। এটি responsive design তৈরি করতে সহায়ক, যেখানে উপাদানগুলো বিভিন্ন স্ক্রীন সাইজ অনুযায়ী সঠিকভাবে সাজানো হবে। Flexbox সিস্টেম এবং CSS Grid সিস্টেমের মাধ্যমে স্পেসিং, গ্যাপ এবং কলাম ব্যবস্থাপনা আরও সহজ এবং প্রভাবশালী হয়ে ওঠে।