Polymer Elements এর জন্য CSS কাস্টমাইজেশন

Polymer ফ্রেমওয়ার্কে Polymer Elements তৈরি করা হয় যা সাধারণত কাস্টম উপাদান (Custom Elements) হয়। যখন আপনি Polymer এর কাস্টম উপাদান তৈরি করেন, তখন আপনি CSS কাস্টমাইজেশন ব্যবহার করে তাদের চেহারা এবং স্টাইলিং নিয়ন্ত্রণ করতে পারেন। Polymer CSS কাস্টমাইজেশন খুবই শক্তিশালী এবং আপনি Shadow DOM ব্যবহার করে আপনার কাস্টম উপাদানগুলির অভ্যন্তরীণ স্টাইল এবং বাইরের স্টাইল আলাদা রাখতে পারেন।

এখানে আমরা Polymer Elements-এর জন্য CSS কাস্টমাইজেশন কীভাবে করতে হয় তা দেখব।

১. CSS Customization in Polymer with Shadow DOM:

Polymer ফ্রেমওয়ার্কের একটি গুরুত্বপূর্ণ বৈশিষ্ট্য হল Shadow DOM। Shadow DOM আপনাকে একটি নির্দিষ্ট উপাদানের ভিতরের DOM এবং CSS আলাদা করতে সহায়তা করে, যাতে বাইরের স্টাইলগুলি উপাদানের অভ্যন্তরীণ অংশে প্রভাব ফেলতে না পারে। আপনি যখন Polymer Elements তৈরি করবেন, তখন CSS স্টাইলগুলি Shadow DOM-এ থাকবে।

Polymer Element এর জন্য Shadow DOM স্টাইলিং:

Polymer এ, আপনি সহজেই Shadow DOM এ স্টাইলিং করতে পারেন এবং কাস্টম CSS ব্যবহার করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো:

<dom-module id="custom-button">
  <template>
    <style>
      /* Shadow DOM এর স্টাইল */
      :host {
        display: inline-block;
        padding: 10px 20px;
        background-color: #007BFF;
        color: white;
        border: none;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
      }

      :host(:hover) {
        background-color: #0056b3;
      }
    </style>
    <button><slot></slot></button>
  </template>
  <script>
    Polymer({
      is: 'custom-button'
    });
  </script>
</dom-module>

এখানে, :host সিলেক্টর ব্যবহার করা হয়েছে যা Shadow DOM এর মূল উপাদানকে লক্ষ্য করে এবং স্টাইল প্রয়োগ করেছে। :host(:hover) দিয়ে হোভার স্টাইল নির্ধারণ করা হয়েছে।

২. CSS Customization Using ::part and ::slotted:

Polymer-এ CSS কাস্টমাইজেশন আরও সহজ করতে ::part এবং ::slotted সিলেক্টরগুলি ব্যবহার করা যায়।

a. ::part:

Polymer এর কাস্টম উপাদানগুলির মধ্যে part অ্যাট্রিবিউট ব্যবহার করে আপনি একটি নির্দিষ্ট অংশের স্টাইল কাস্টমাইজ করতে পারেন। এটি আপনাকে একটি উপাদানের অংশগুলির উপর স্টাইল প্রয়োগ করতে সাহায্য করে।

<dom-module id="custom-input">
  <template>
    <style>
      /* ::part ব্যবহার করে স্টাইল */
      :host([focused]) {
        border: 2px solid #007BFF;
      }

      ::part(input-field) {
        background-color: #f0f0f0;
        padding: 10px;
        border-radius: 5px;
      }
    </style>
    <input part="input-field" />
  </template>
  <script>
    Polymer({
      is: 'custom-input'
    });
  </script>
</dom-module>

এখানে ::part(input-field) সিলেক্টর ব্যবহার করে ইনপুট ফিল্ডের অংশের স্টাইল কাস্টমাইজ করা হয়েছে।

b. ::slotted:

Polymer-এ <slot> ট্যাগ ব্যবহার করে আপনি কাস্টম উপাদানের মধ্যে কন্টেন্ট ইনজেক্ট করতে পারেন। ::slotted সিলেক্টর ব্যবহার করে আপনি সেই কন্টেন্টের স্টাইল কাস্টমাইজ করতে পারেন যা স্লটের মাধ্যমে ইনজেক্ট করা হয়েছে।

<dom-module id="custom-card">
  <template>
    <style>
      ::slotted(.content) {
        font-size: 18px;
        color: #333;
        padding: 10px;
        background-color: #f9f9f9;
      }
    </style>
    <div class="card">
      <slot></slot> <!-- স্লট দিয়ে কন্টেন্ট ইনজেক্ট করা হবে -->
    </div>
  </template>
  <script>
    Polymer({
      is: 'custom-card'
    });
  </script>
</dom-module>

এখানে, ::slotted(.content) সিলেক্টর ব্যবহার করা হয়েছে কাস্টম কার্ড উপাদানে স্লটের মাধ্যমে ইনজেক্ট করা কন্টেন্টের স্টাইল কাস্টমাইজ করার জন্য।

৩. CSS Variables in Polymer:

Polymer CSS ভ্যারিয়েবল ব্যবহার করাও সম্ভব, যা কাস্টম উপাদানগুলির মধ্যে ডাইনামিক স্টাইল পরিবর্তন করতে সাহায্য করে। আপনি Polymer এ CSS ভ্যারিয়েবল দিয়ে একটি কাস্টম উপাদানের বাহ্যিক বা অভ্যন্তরীণ স্টাইল নিয়ন্ত্রণ করতে পারেন।

<dom-module id="themed-button">
  <template>
    <style>
      :host {
        --button-bg-color: #008CBA;
        --button-text-color: white;
        background-color: var(--button-bg-color);
        color: var(--button-text-color);
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
      }

      :host(:hover) {
        background-color: darkblue;
      }
    </style>
    <button><slot></slot></button>
  </template>
  <script>
    Polymer({
      is: 'themed-button'
    });
  </script>
</dom-module>

এখানে, --button-bg-color এবং --button-text-color ভ্যারিয়েবল ব্যবহার করা হয়েছে এবং :host সিলেক্টরের মাধ্যমে এগুলি কাস্টমাইজ করা হয়েছে। বাইরের উপাদান থেকে এই ভ্যারিয়েবলগুলির মান পরিবর্তন করা যেতে পারে।

৪. Customizing Polymer Components:

Polymer এর বিল্ট-ইন উপাদানগুলির (যেমন <paper-button>, <paper-input>, ইত্যাদি) CSS কাস্টমাইজেশনও করা যায়। আপনি Polymer উপাদানগুলির CSS ভ্যারিয়েবল বা ::part সিলেক্টর ব্যবহার করে তাদের স্টাইল কাস্টমাইজ করতে পারেন।

<custom-element>
  <style>
    paper-button {
      --paper-button-raised-keyboard-focus: #ff0000;
    }
  </style>
  <paper-button raised>Click Me</paper-button>
</custom-element>

এখানে, paper-button উপাদানের কাস্টম CSS ভ্যারিয়েবল --paper-button-raised-keyboard-focus ব্যবহার করা হয়েছে।

Polymer ফ্রেমওয়ার্কে CSS কাস্টমাইজেশন খুবই গুরুত্বপূর্ণ, কারণ এটি আপনাকে কাস্টম উপাদানগুলির ডিজাইন এবং অনুভূতি নিয়ন্ত্রণ করতে সাহায্য করে। আপনি Shadow DOM, ::part, ::slotted, এবং CSS Variables এর মাধ্যমে আপনার কাস্টম উপাদানগুলির স্টাইলিং কাস্টমাইজ করতে পারেন, যা আপনাকে আরও বেশি ফ্লেক্সিবিলিটি এবং নিয়ন্ত্রণ দেয়। Polymer এর মাধ্যমে তৈরি কাস্টম উপাদানগুলো সহজে স্টাইল করা যায় এবং এগুলি অন্যান্য ওয়েব অ্যাপ্লিকেশনের মধ্যে পুনঃব্যবহার করা যেতে পারে।