Class and Style Bindings ​

ডেটা বাইন্ডিংয়ের জন্য একটি সাধারণ প্রয়োজন হল একটি কম্পোনেন্টের ক্লাস তালিকা এবং ইনলাইন স্টাইলগুলি পরিচালনা করা। যেহেতু class এবং style উভয়ই অ্যাট্রিবিউট, তাই আমরা অন্যান্য অ্যাট্রিবিউটের মতোই গতিশীলভাবে একটি স্ট্রিং মান নির্ধারণ করতে v-bind ব্যবহার করতে পারি। যাইহোক, স্ট্রিং কনক্যাটেনেশন ব্যবহার করে সেই মানগুলি তৈরি করার চেষ্টা করা বিরক্তিকর এবং ত্রুটি-প্রবণ হতে পারে। এই কারণে, Vue বিশেষ বর্ধন প্রদান করে যখন v-bind class এবং style এর সাথে ব্যবহার করা হয়। স্ট্রিংগুলি ছাড়াও, অভিব্যক্তিগুলি অবজেক্ট বা অ্যারেতেও মূল্যায়ন করতে পারে।

Binding HTML Classes ​

Binding to Objects ​

ক্লাসগুলিকে গতিশীলভাবে টগল করতে আমরা একটি অবজেক্টকে :class (v-bind:class-এর জন্য সংক্ষিপ্ত) পাস করতে পারি:

<div :class="{ active: isActive }"></div>

উপরের সিনট্যাক্সের অর্থ হল active শ্রেণীর উপস্থিতি ডেটা প্রপার্টি isActive এর truthiness দ্বারা নির্ধারিত হবে।

অবজেক্টে আরও ক্ষেত্র থাকার মাধ্যমে আপনি একাধিক ক্লাস টগল করতে পারেন। উপরন্তু, :class নির্দেশিকাও প্লেইন class বৈশিষ্ট্যের সাথে সহ-অস্তিত্ব করতে পারে। তাই নিম্নলিখিত রাষ্ট্র দেওয়া:

const isActive = ref(true)
const hasError = ref(false)

data() {
  return {
    isActive: true,
    hasError: false
  }
}

এবং নিম্নলিখিত টেমপ্লেট:

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

এটি রেন্ডার করবে:

<div class="static active"></div>

যখন isActive বা hasError পরিবর্তিত হয়, ক্লাস তালিকা সেই অনুযায়ী আপডেট করা হবে। উদাহরণস্বরূপ, যদি hasError true হয়ে যায়, তাহলে ক্লাস তালিকা "static active text-danger" হয়ে যাবে।

আবদ্ধ অবজেক্টটি ইনলাইন হতে হবে না:

const classObject = reactive({
  active: true,
  'text-danger': false
})

data() {
  return {
    classObject: {
      active: true,
      'text-danger': false
    }
  }
}

<div :class="classObject"></div>

এটি রেন্ডার করবে:

<div class="active"></div>

আমরা একটি computed property এর সাথেও আবদ্ধ করতে পারি যা একটি অবজেক্টকে ফেরত দেয়। এটি একটি সাধারণ এবং শক্তিশালী প্যাটার্ন:

const isActive = ref(true)
const error = ref(null)

const classObject = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': error.value && error.value.type === 'fatal'
}))

data() {
  return {
    isActive: true,
    error: null
  }
},
computed: {
  classObject() {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

<div :class="classObject"></div>

Binding to Arrays ​

ক্লাসের একটি তালিকা প্রয়োগ করতে আমরা একটি অ্যারের সাথে :class আবদ্ধ করতে পারি:

const activeClass = ref('active')
const errorClass = ref('text-danger')

data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

<div :class="[activeClass, errorClass]"></div>

যা রেন্ডার করবে:

<div class="active text-danger"></div>

আপনি যদি শর্তসাপেক্ষে তালিকায় একটি ক্লাস টগল করতে চান তবে আপনি এটি একটি ত্রিমুখী অভিব্যক্তি দিয়ে করতে পারেন:

<div :class="[isActive ? activeClass : '', errorClass]"></div>

এটি সর্বদা errorClass প্রয়োগ করবে, কিন্তু activeClass শুধুমাত্র তখনই প্রয়োগ করা হবে যখন isActive সত্য হবে।

যাইহোক, যদি আপনার একাধিক শর্তসাপেক্ষ ক্লাস থাকে তবে এটি কিছুটা ভার্বোস হতে পারে। এই কারণেই অ্যারে সিনট্যাক্সের ভিতরে অবজেক্ট সিনট্যাক্স ব্যবহার করাও সম্ভব:

<div :class="[{ active: isActive }, errorClass]"></div>

With Components ​

এই বিভাগটি Components সম্পর্কে জ্ঞান গ্রহণ করে। নির্দ্বিধায় এটি এড়িয়ে যান এবং পরে ফিরে আসুন।

আপনি যখন একটি একক রুট এলিমেন্ট সহ একটি কম্পোনেন্টে class অ্যাট্রিবিউট ব্যবহার করেন, তখন সেই ক্লাসগুলিকে কম্পোনেন্টের রুট এলিমেন্টে যোগ করা হবে এবং আগে থেকে থাকা যেকোনো ক্লাসের সাথে মার্জ করা হবে।

উদাহরণস্বরূপ, যদি আমাদের কাছে নিম্নলিখিত টেমপ্লেট সহ MyComponent নামের একটি কম্পোনেন্ট থাকে:

<!-- child component template -->
<p class="foo bar">Hi!</p>

তারপর এটি ব্যবহার করার সময় কিছু classes যোগ করুন:

<!-- when using the component -->
<MyComponent class="baz boo" />

রেন্ডার করা HTML হবে:

<p class="foo bar baz boo">Hi!</p>

class bindings জন্য একই কথা সত্য:

<MyComponent :class="{ active: isActive }" />

যখন isActive সত্য হয়, রেন্ডার করা HTML হবে:

<p class="foo bar active">Hi!</p>

আপনার কম্পোনেন্টে একাধিক রুট এলিমেন্ট থাকলে, কোন এলিমেন্টটি এই ক্লাসটি পাবে তা আপনাকে নির্ধারণ করতে হবে। আপনি $attrs কম্পোনেন্ট বৈশিষ্ট্য ব্যবহার করে এটি করতে পারেন:

<!-- MyComponent template using $attrs -->
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>

<MyComponent class="baz" />

রেন্ডার করবে:

<p class="baz">Hi!</p>
<span>This is a child component</span>

আপনি Fallthrough Attributes বিভাগে কম্পোনেন্ট অ্যাট্রিবিউটের উত্তরাধিকার সম্পর্কে আরও জানতে পারেন।

Binding Inline Styles ​

Binding to Objects ​

:style জাভাস্ক্রিপ্ট অবজেক্টের মানগুলির সাথে বাঁধাই সমর্থন করে - এটি একটি HTML element's style property এর সাথে মিলে যায়:

const activeColor = ref('red')
const fontSize = ref(30)

data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

যদিও ক্যামেলকেস কীগুলি সুপারিশ করা হয়, :style কাবাব-কেসড সিএসএস প্রপার্টি কীগুলিকেও সমর্থন করে (এগুলি প্রকৃত CSS-এ কীভাবে ব্যবহার করা হয় তার সাথে মিলে যায়) - উদাহরণস্বরূপ:

<div :style="{ 'font-size': fontSize + 'px' }"></div>

এটি প্রায়শই একটি স্টাইল অবজেক্টর সাথে সরাসরি আবদ্ধ করা একটি ভাল ধারণা যাতে টেমপ্লেটটি পরিষ্কার হয়:

const styleObject = reactive({
  color: 'red',
  fontSize: '13px'
})

data() {
  return {
    styleObject: {
      color: 'red',
      fontSize: '13px'
    }
  }
}

<div :style="styleObject"></div>

আবার, অবজেক্ট স্টাইল বাইন্ডিং প্রায়ই কম্পিউটেড বৈশিষ্ট্যের সাথে ব্যবহার করা হয় যা অবজেক্টকে ফেরত দেয়।

Binding to Arrays ​

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

<div :style="[baseStyles, overridingStyles]"></div>

Auto-prefixing ​

আপনি যখন একটি CSS প্রপার্টি ব্যবহার করেন যার জন্য :style-এ vendor prefix প্রয়োজন, Vue স্বয়ংক্রিয়ভাবে উপযুক্ত উপসর্গ যোগ করবে। বর্তমান ব্রাউজারে কোন স্টাইল বৈশিষ্ট্যগুলি সমর্থিত তা দেখতে রানটাইমে চেক করে Vue এটি করে। যদি ব্রাউজার একটি নির্দিষ্ট কম্পিউটেড প্রপার্টি সমর্থন না করে তাহলে সমর্থিত একটি খুঁজে বের করার চেষ্টা করার জন্য বিভিন্ন প্রিফিক্সড ভেরিয়েন্ট পরীক্ষা করা হবে।

Multiple Values ​

আপনি একটি স্টাইল কম্পিউটেড প্রপার্টিতে একাধিক (প্রিফিক্সড) মানগুলির একটি অ্যারে প্রদান করতে পারেন, উদাহরণস্বরূপ:

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

এটি ব্রাউজার সমর্থন করে এমন অ্যারের মধ্যে শুধুমাত্র শেষ মানটি রেন্ডার করবে। এই উদাহরণে, এটি ফ্লেক্সবক্সের আনপ্রিফিক্সড সংস্করণ সমর্থন করে এমন ব্রাউজারগুলির জন্য display: flex রেন্ডার করবে।