Web Development Show এবং Hide Component ব্যবহার গাইড ও নোট

Riot.js-এ একটি কম্পোনেন্ট শো (Show) বা হাইড (Hide) করা সাধারণত কম্পোনেন্টের মধ্যে স্টেট পরিবর্তন করে এবং এই স্টেটের ওপর ভিত্তি করে HTML উপাদান বা কম্পোনেন্টকে রেন্ডার বা মুছে ফেলা হয়। Riot.js এ স্টেট পরিবর্তন করলে UI স্বয়ংক্রিয়ভাবে আপডেট হয়, তাই আপনি খুব সহজে একটি কম্পোনেন্ট বা HTML এলিমেন্ট শো বা হাইড করতে পারেন।

Show এবং Hide Component ব্যবহার করার প্রক্রিয়া

১. স্টেট পরিবর্তন করা: this দ্বারা কম্পোনেন্টের স্টেট পরিবর্তন করা যায়, এবং এই স্টেটের মানের ওপর ভিত্তি করে আপনি কম্পোনেন্ট বা একটি এলিমেন্টের দৃশ্যমানতা নিয়ন্ত্রণ করতে পারেন।

২. স্টাইল ব্যবহার করা: আপনি CSS ক্লাস বা inline স্টাইল ব্যবহার করে কম্পোনেন্ট বা এলিমেন্টের visibility নিয়ন্ত্রণ করতে পারেন।

উদাহরণ ১: কম্পোনেন্ট শো এবং হাইড করা

এখানে, আমরা একটি বাটন ব্যবহার করব যা একটি কম্পোনেন্টকে শো এবং হাইড করবে।

Step 1: Create a ShowHideComponent.riot Component

ShowHideComponent.riot:

<!-- ShowHideComponent.riot -->
<show-hide-component>
  <button onclick={toggleVisibility}>Toggle Component Visibility</button>

  <div if={isVisible}>
    <h1>This component is visible!</h1>
  </div>

  <script>
    export default {
      isVisible: false, // Initial state, component is hidden

      toggleVisibility() {
        this.isVisible = !this.isVisible; // Toggle the visibility state
      }
    }
  </script>
</show-hide-component>

ব্যাখ্যা:

• isVisible: একটি স্টেট ভেরিয়েবল, যা true বা false হতে পারে এবং এই ভেরিয়েবলটির উপর ভিত্তি করে কম্পোনেন্ট বা এলিমেন্টের দৃশ্যমানতা নিয়ন্ত্রণ করা হয়।
• toggleVisibility(): একটি মেথড, যা isVisible এর মান পাল্টায় এবং true বা false করে দেয়।
• <div if={isVisible}>: if শর্তের মাধ্যমে কম্পোনেন্টের দৃশ্যমানতা নিয়ন্ত্রণ করা হচ্ছে। যখন isVisible true হবে, তখন কম্পোনেন্টটি দৃশ্যমান হবে, এবং যখন এটি false হবে, তখন এটি হাইড হবে।

উদাহরণ ২: CSS ক্লাস ব্যবহার করে শো এবং হাইড করা

এখানে, আমরা CSS ক্লাস ব্যবহার করে একটি কম্পোনেন্টের দৃশ্যমানতা নিয়ন্ত্রণ করব।

Step 1: Create a ShowHideWithCSS.riot Component

ShowHideWithCSS.riot:

<!-- ShowHideWithCSS.riot -->
<show-hide-with-css>
  <button onclick={toggleVisibility}>Toggle Visibility</button>

  <div class={isVisible ? 'visible' : 'hidden'}>
    <h1>This component visibility is controlled with CSS</h1>
  </div>

  <style>
    .hidden {
      display: none;
    }
    .visible {
      display: block;
    }
  </style>

  <script>
    export default {
      isVisible: false,

      toggleVisibility() {
        this.isVisible = !this.isVisible;
      }
    }
  </script>
</show-hide-with-css>

ব্যাখ্যা:

• CSS ক্লাস visible এবং hidden: display: block; এবং display: none; এর মাধ্যমে CSS ক্লাসগুলি ব্যবহার করা হয়েছে, যা কম্পোনেন্ট বা এলিমেন্টের দৃশ্যমানতা নিয়ন্ত্রণ করে।
• class={isVisible ? 'visible' : 'hidden'}: এই লাইনে isVisible স্টেটের মানের ওপর ভিত্তি করে CSS ক্লাস অ্যাসাইন করা হচ্ছে। যদি isVisible true হয়, তাহলে ক্লাস হবে visible, এবং যদি false হয়, তাহলে ক্লাস হবে hidden।

উদাহরণ ৩: Inline স্টাইল ব্যবহার করে শো এবং হাইড করা

এখানে, আমরা inline স্টাইল ব্যবহার করে একটি কম্পোনেন্টের দৃশ্যমানতা নিয়ন্ত্রণ করব।

Step 1: Create a ShowHideWithInlineStyle.riot Component

ShowHideWithInlineStyle.riot:

<!-- ShowHideWithInlineStyle.riot -->
<show-hide-with-inline-style>
  <button onclick={toggleVisibility}>Toggle Visibility</button>

  <div style={'display: ' + (isVisible ? 'block' : 'none')}>
    <h1>This component visibility is controlled with inline style</h1>
  </div>

  <script>
    export default {
      isVisible: false,

      toggleVisibility() {
        this.isVisible = !this.isVisible;
      }
    }
  </script>
</show-hide-with-inline-style>

ব্যাখ্যা:

• Inline স্টাইল ব্যবহার: style={'display: ' + (isVisible ? 'block' : 'none')} এই লাইনে display প্রপার্টির মান শর্তের ওপর ভিত্তি করে পরিবর্তন হচ্ছে। যদি isVisible true হয়, তাহলে এটি block হবে, এবং যদি false হয়, এটি none হবে।

৪. পৃথক কম্পোনেন্টে শো/হাইড এবং Parent-Child কম্পোনেন্ট

এখন, যদি আপনি Parent এবং Child কম্পোনেন্টের মধ্যে দৃশ্যমানতা নিয়ন্ত্রণ করতে চান, আপনি Parent কম্পোনেন্ট থেকে Child কম্পোনেন্টে স্টেট প্রপস হিসেবে পাঠিয়ে কম্পোনেন্টের দৃশ্যমানতা নিয়ন্ত্রণ করতে পারেন।

Parent কম্পোনেন্ট

<!-- ParentComponent.riot -->
<parent-component>
  <child-component is-visible={isChildVisible}></child-component>
  <button onclick={toggleChildVisibility}>Toggle Child Visibility</button>

  <script>
    import ChildComponent from './ChildComponent.riot';

    export default {
      isChildVisible: false,

      toggleChildVisibility() {
        this.isChildVisible = !this.isChildVisible;
      }
    }
  </script>
</parent-component>

Child কম্পোনেন্ট

<!-- ChildComponent.riot -->
<child-component>
  <div if={opts.isVisible}>
    <h1>This is the child component</h1>
  </div>

  <script>
    export default {}
  </script>
</child-component>

ব্যাখ্যা:

• Parent কম্পোনেন্ট isChildVisible স্টেট ব্যবহার করে Child কম্পোনেন্টের দৃশ্যমানতা নিয়ন্ত্রণ করছে। এই স্টেটটি ChildComponent-এর is-visible প্রপস হিসেবে পাঠানো হচ্ছে।
• Child কম্পোনেন্ট opts.isVisible এর মান অনুযায়ী div কে শো বা হাইড করছে।

সারাংশ

Riot.js এ কম্পোনেন্ট বা এলিমেন্ট শো এবং হাইড করার জন্য আপনি নিম্নলিখিত পদ্ধতিগুলি ব্যবহার করতে পারেন:

• ডাটা বাইন্ডিং (যেমন if={isVisible}) ব্যবহার করে।
• CSS ক্লাস (যেমন class={isVisible ? 'visible' : 'hidden'}) ব্যবহার করে।
• Inline স্টাইল (যেমন style={'display: ' + (isVisible ? 'block' : 'none')}) ব্যবহার করে।