Web Development Conditional Rendering গাইড ও নোট

Riot.js-এ Conditional Rendering ব্যবহার করতে হলে, আপনি সাধারণভাবে JavaScript এর শর্তাবলী (conditional expressions) ব্যবহার করবেন, যা কম্পোনেন্টের ভিতরে ইউজার ইন্টারফেস (UI) উপাদানগুলো প্রদর্শন বা লুকানোর জন্য নিয়ন্ত্রণ করতে সাহায্য করবে। Riot.js এ if শর্ত বা ternary operator ব্যবহার করে শর্তাধীন rendering করা সম্ভব।

১. if শর্ত ব্যবহার করে Conditional Rendering

Riot.js-এ if শর্ত ব্যবহার করে আপনি নির্দিষ্ট কোন উপাদান প্রদর্শন করতে বা না করতে পারেন। আপনি যদি কোনও শর্ত পূর্ণ হয়, তবেই একটি উপাদান রেন্ডার হবে।

উদাহরণ:

<!-- src/components/ConditionalRender.riot -->
<conditional-render>
  <h1>Welcome to Riot.js</h1>

  <p>If condition is true, the message below will show:</p>

  <div if={showMessage}>
    <p>This is a conditional message!</p>
  </div>

  <button onclick={toggleMessage}>Toggle Message</button>

  <script>
    export default {
      onMounted() {
        this.showMessage = false;  // Initially, the message is hidden
      },

      toggleMessage() {
        this.showMessage = !this.showMessage; // Toggle the message visibility
      }
    }
  </script>
</conditional-render>

এখানে:

• showMessage শর্তের উপর ভিত্তি করে একটি <p> ট্যাগ শো হবে বা হাইড হবে।
• if={showMessage} দ্বারা শর্তটি চেক করা হচ্ছে, এবং শর্ত সত্য হলে <div> এবং তার ভিতরের বার্তা দেখানো হবে।
• toggleMessage ফাংশনটি বাটনে ক্লিক করলে showMessage স্টেটটি পরিবর্তন করে, এবং এর মাধ্যমে শর্তটি আপডেট হবে।

২. Ternary Operator ব্যবহার করে Conditional Rendering

যদি আপনি এক লাইনে শর্তাবলী দিয়ে একটি উপাদান রেন্ডার করতে চান, তবে আপনি ternary operator ব্যবহার করতে পারেন।

উদাহরণ:

<!-- src/components/ConditionalRender.riot -->
<conditional-render>
  <h1>Welcome to Riot.js</h1>

  <p>The message below is conditionally rendered:</p>

  <div>
    <p>{showMessage ? 'This is a conditional message!' : 'Message is hidden.'}</p>
  </div>

  <button onclick={toggleMessage}>Toggle Message</button>

  <script>
    export default {
      onMounted() {
        this.showMessage = false;  // Initially, the message is hidden
      },

      toggleMessage() {
        this.showMessage = !this.showMessage; // Toggle the message visibility
      }
    }
  </script>
</conditional-render>

এখানে:

• {showMessage ? 'This is a conditional message!' : 'Message is hidden.'} এটি একটি ternary operator। যদি showMessage সত্য (true) হয়, তবে বার্তাটি "This is a conditional message!" দেখাবে, আর যদি মিথ্যা (false) হয়, তবে "Message is hidden." বার্তা দেখাবে।
• toggleMessage ফাংশনটি আবার বাটনে ক্লিক করলে showMessage স্টেট পরিবর্তন করবে, এবং এর মাধ্যমে শর্তটি আপডেট হবে।

৩. else শর্ত ব্যবহার করে Conditional Rendering

Riot.js-এ else শর্ত ব্যবহারের মাধ্যমে আপনি একটি বিকল্প UI উপাদান রেন্ডার করতে পারেন যখন মূল শর্তটি পূর্ণ না হয়।

উদাহরণ:

<!-- src/components/ConditionalRender.riot -->
<conditional-render>
  <h1>Welcome to Riot.js</h1>

  <p>The message below is conditionally rendered:</p>

  <div if={showMessage}>
    <p>This is a conditional message!</p>
  </div>
  <div else>
    <p>Message is hidden!</p>
  </div>

  <button onclick={toggleMessage}>Toggle Message</button>

  <script>
    export default {
      onMounted() {
        this.showMessage = false;  // Initially, the message is hidden
      },

      toggleMessage() {
        this.showMessage = !this.showMessage; // Toggle the message visibility
      }
    }
  </script>
</conditional-render>

এখানে:

• if={showMessage} শর্ত পূর্ণ হলে একটি বার্তা শো হবে।
• else ব্লকটি ব্যবহার করা হয়েছে যাতে যখন showMessage মিথ্যা হয়, তখন অন্য একটি বার্তা রেন্ডার হয়।

সারাংশ

Riot.js-এ Conditional Rendering করার জন্য আপনি নিচের পদ্ধতিগুলি ব্যবহার করতে পারেন:

1. if শর্ত ব্যবহার করে উপাদান রেন্ডার করা।
2. Ternary operator ব্যবহার করে শর্তাধীন উপাদান রেন্ডার করা।
3. else শর্ত ব্যবহার করে শর্ত মিথ্যা হলে অন্য একটি উপাদান রেন্ডার করা।

এগুলি React বা অন্য লাইব্রেরির মতোই সহজ, এবং আপনার UI দ্রুত পরিবর্তন করতে সহায়ক।

Riot.js তে if নির্দেশনা ব্যবহার করা হয় UI-তে একটি শর্তাধীন ব্লক রেন্ডার করতে। Riot.js-এ, এটি if নির্দেশনা ও else ব্লক দিয়ে UI-তে শর্ত অনুযায়ী এলিমেন্টের প্রদর্শন নিয়ন্ত্রণ করা যায়।

১. Basic if Conditional Rendering

Riot.js-এ if নির্দেশনা ব্যবহার করার জন্য, {#if condition} এবং {#else} সিনট্যাক্স ব্যবহার করা হয়। এখানে condition হলো একটি শর্ত যা যদি সত্য হয় তবে সংশ্লিষ্ট HTML ব্লকটি রেন্ডার হবে।

উদাহরণ:

<!-- MyComponent.riot -->
<my-component>
  <h1>Welcome to Riot.js</h1>
  
  {#if showMessage}
    <p>This is a conditional message!</p>
  {#else}
    <p>No message to show!</p>
  {/if}
  
  <button onclick={toggleMessage}>Toggle Message</button>

  <script>
    export default {
      onMounted() {
        this.showMessage = true;  // initially showing the message
      },

      toggleMessage() {
        this.showMessage = !this.showMessage;  // Toggle between true and false
      }
    }
  </script>
</my-component>

ব্যাখ্যা:

• {#if showMessage}: যদি showMessage সত্য (true) হয়, তাহলে <p>This is a conditional message!</p> প্রদর্শিত হবে।
• {#else}: যদি showMessage মিথ্যা (false) হয়, তাহলে <p>No message to show!</p> প্রদর্শিত হবে।
• toggleMessage ফাংশনটি showMessage এর মান পরিবর্তন করবে, এবং যখন এটি পরিবর্তিত হবে, তখন UI পুনরায় রেন্ডার হবে।

২. if এবং else ব্যবহার

Riot.js-এ আপনি if এবং else উভয়কেই ব্যবহার করতে পারেন একসাথে। আপনি আরও শর্ত ভিত্তিক if ব্লকগুলি তৈরি করতে পারেন।

উদাহরণ:

<!-- MyComponent.riot -->
<my-component>
  <h1>Welcome to Riot.js</h1>
  
  {#if age >= 18}
    <p>You are an adult.</p>
  {#else if age >= 13}
    <p>You are a teenager.</p>
  {#else}
    <p>You are a child.</p>
  {/if}
  
  <button onclick={increaseAge}>Increase Age</button>

  <script>
    export default {
      onMounted() {
        this.age = 20;  // Initially set age to 20
      },

      increaseAge() {
        this.age += 1;  // Increase age by 1
      }
    }
  </script>
</my-component>

ব্যাখ্যা:

• {#if age >= 18}: যদি age ১৮ বা তার বেশি হয়, তাহলে "You are an adult." বার্তা দেখাবে।
• {#else if age >= 13}: যদি age ১৩ বা তার বেশি হয় কিন্তু ১৮ এর নিচে, তখন "You are a teenager." দেখাবে।
• {#else}: অন্য সব ক্ষেত্রে, "You are a child." বার্তা দেখাবে।
• increaseAge ফাংশন ব্যবহার করে আপনি age পরিবর্তন করতে পারবেন, এবং এর ফলে UI পুনরায় রেন্ডার হবে।

৩. Multiple if Statements

Riot.js-এ আপনি একাধিক শর্তে if ব্লক ব্যবহার করতে পারেন যাতে আপনার কম্পোনেন্ট আরও নমনীয় হয়।

<!-- MyComponent.riot -->
<my-component>
  <h1>Check Your Account Status</h1>
  
  {#if isLoggedIn}
    <p>Welcome back, {userName}!</p>
  {#else if isGuest}
    <p>Welcome, guest. Please log in to enjoy full features.</p>
  {#else}
    <p>You are not logged in. Please sign up!</p>
  {/if}
  
  <button onclick={toggleLogin}>Toggle Login Status</button>

  <script>
    export default {
      onMounted() {
        this.isLoggedIn = false;
        this.isGuest = true;
        this.userName = 'John Doe'; // Sample user name
      },

      toggleLogin() {
        this.isLoggedIn = !this.isLoggedIn;
        this.isGuest = !this.isGuest;
      }
    }
  </script>
</my-component>

ব্যাখ্যা:

• এখানে আপনি তিনটি if ব্লক ব্যবহার করেছেন: একটি লগিন অবস্থার জন্য, একটি গেস্ট অবস্থার জন্য, এবং অন্য কোনো অবস্থার জন্য।
• toggleLogin ফাংশনটি isLoggedIn এবং isGuest এর মান পরিবর্তন করবে এবং UI স্বয়ংক্রিয়ভাবে আপডেট হবে।

৪. if নির্দেশনা ব্যবহার করার সময় কিছু টিপস:

1. সাবধানতার সাথে if ব্যবহারের সময় অনেক শর্ত যোগ করবেন না, কারণ এতে কম্পোনেন্টের রেন্ডারিং জটিল হতে পারে। সম্ভব হলে শর্তগুলিকে সহজ রাখুন।
2. প্রযুক্তিগতভাবে সঠিক কোড লেখা: if এবং else if এর সঠিক ব্যবহার নিশ্চিত করুন। Riot.js তে ব্লকের মাঝে {#else} ব্যবহারের সময় সাবধানতা অবলম্বন করুন।
3. else ব্লক সরবরাহ না করা: যদি আপনার শুধু if ব্লক ব্যবহার করার প্রয়োজন হয়, তবে {#else} ব্যবহার করতে হবে না।

Riot.js-এ if নির্দেশনা দিয়ে শর্তাধীন UI রেন্ডারিং করা অনেক সহজ এবং পরিষ্কার। {#if condition}, {#else}, {#else if} ব্যবহারের মাধ্যমে আপনি ডাইনামিকভাবে UI পরিবর্তন করতে পারবেন এবং এটি ডেটার ভিত্তিতে স্বয়ংক্রিয়ভাবে রেন্ডার হবে।

Riot.js-এ শর্তাধীন Rendering (Conditional Rendering) ব্যবহার করা হয় UI-এর কিছু অংশ বা উপাদান শুধুমাত্র নির্দিষ্ট শর্তে প্রদর্শন করার জন্য। এর মাধ্যমে আপনি কম্পোনেন্টের বিভিন্ন স্টেট বা ভেরিয়েবল অনুসারে UI কন্টেন্ট পরিবর্তন করতে পারেন।

শর্তাধীন Rendering এর ধারণা:

Riot.js-এ শর্তাধীন Rendering সাধারনত {condition && content} বা {condition ? trueContent : falseContent} স্টাইলের সিনট্যাক্স ব্যবহার করে করা হয়। এটি JavaScript এক্সপ্রেশন ব্যবহার করে শর্ত বসানো সম্ভব করে।

উদাহরণ:

১. Boolean condition ব্যবহার করে:

<my-component>
  <button onclick={toggleMessage}>Toggle Message</button>
  
  <!-- Show the message based on the condition -->
  {isVisible && <p>{message}</p>}

  <script>
    export default {
      onMounted() {
        this.isVisible = false;  // Initially, the message is hidden
        this.message = 'Hello, this is a conditional message!';
      },

      toggleMessage() {
        this.isVisible = !this.isVisible; // Toggle the visibility of the message
      }
    }
  </script>
</my-component>

ব্যাখ্যা:

• এখানে, isVisible একটি শর্ত হিসাবে ব্যবহার করা হচ্ছে। যখন isVisible সত্য (true) হবে, তখন <p>{message}</p> প্রদর্শিত হবে।
• toggleMessage ফাংশনটি বোতামে ক্লিক করার সময় isVisible এর মান পরিবর্তন করবে এবং বার্তা দেখাবে বা লুকাবে।

২. তিনটি শর্তের মধ্যে পছন্দ নির্বাচন (Conditional Rendering with Ternary Operator):

<my-component>
  <button onclick={changeStatus}>Change Status</button>

  <!-- Show different content based on condition -->
  <p>{status ? 'The status is Active' : 'The status is Inactive'}</p>

  <script>
    export default {
      onMounted() {
        this.status = false;  // Initially status is Inactive
      },

      changeStatus() {
        this.status = !this.status; // Toggle the status between Active and Inactive
      }
    }
  </script>
</my-component>

ব্যাখ্যা:

• এখানে, status ভেরিয়েবলটি শর্ত হিসেবে ব্যবহার করা হচ্ছে এবং ternary operator (condition ? trueContent : falseContent) ব্যবহার করে দুইটি ভিন্ন বার্তা দেখানো হচ্ছে।
• যখন status সত্য হবে, তখন "The status is Active" বার্তাটি দেখাবে, আর যদি status মিথ্যা হয়, তখন "The status is Inactive" দেখাবে।

৩. বিভিন্ন উপাদান শর্ত অনুসারে Render করা:

<my-component>
  <button onclick={toggleView}>Toggle View</button>

  <!-- Conditional rendering of different content -->
  {viewMode === 'list' ? <ul><li>Item 1</li><li>Item 2</li></ul> : <div>Grid View</div>}

  <script>
    export default {
      onMounted() {
        this.viewMode = 'list';  // Initially, list view is selected
      },

      toggleView() {
        this.viewMode = this.viewMode === 'list' ? 'grid' : 'list'; // Toggle between 'list' and 'grid' view
      }
    }
  </script>
</my-component>

ব্যাখ্যা:

• এখানে, viewMode স্টেট অনুযায়ী শর্তাধীনভাবে list বা grid ভিউ প্রদর্শিত হবে।
• যখন viewMode "list" থাকবে, তখন একটি ul (unordered list) দেখাবে এবং অন্যথায় একটি "Grid View" বার্তা দেখাবে।

শর্তাধীন Rendering এর সুবিধা:

• ডাইনামিক UI: ব্যবহারকারী অ্যাকশন বা স্টেট পরিবর্তনের ভিত্তিতে UI পরিবর্তন করতে পারে।
• কোডের কমপ্লেক্সিটি কমানো: শর্ত ব্যবহার করে UI-এর বিভিন্ন অংশ সহজে পরিবর্তন করা যায়।
• রিয়েকটিভিটি: Riot.js-এর মাধ্যমে যখন ডেটা পরিবর্তিত হয়, তখন UI স্বয়ংক্রিয়ভাবে আপডেট হয়।

সারাংশ:

Riot.js-এ শর্তাধীন Rendering ব্যবহার করে, আপনি একটি নির্দিষ্ট শর্তের উপর ভিত্তি করে UI-এর অংশ বা উপাদানগুলো পরিবর্তন করতে পারেন। এটি অ্যাপ্লিকেশনকে আরও ডাইনামিক এবং রিয়েকটিভ করে তোলে, যেখানে ব্যবহারকারীর ইনপুট বা স্টেট পরিবর্তনের ভিত্তিতে UI পরিবর্তিত হয়।

Riot.js-এ Conditional Rendering একটি শক্তিশালী বৈশিষ্ট্য যা আপনাকে UI এর বিভিন্ন অংশগুলি শর্তাধীনভাবে render করতে সক্ষম করে। এটি বিশেষত তখন কাজে আসে যখন আপনি চাইছেন নির্দিষ্ট ডেটা বা শর্ত পূর্ণ হলে একটি উপাদান (component) বা অংশ UI তে প্রদর্শিত হোক, এবং অন্যথায় না।

Riot.js-এ conditional rendering সাধারণত if বা each ডিরেক্টিভ ব্যবহার করে করা হয়। এটি মূলত DOM এর অংশগুলিকে শর্তাধীনভাবে render করার জন্য ব্যবহৃত হয়।

Conditional Rendering in Riot.js

1. if ডিরেক্টিভ: if ডিরেক্টিভ ব্যবহার করে, আপনি একটি UI অংশ শর্তসাপেক্ষে render করতে পারেন। এটি সাধারণত একটি ভেরিয়েবল বা এক্সপ্রেশনের ভিত্তিতে UI অংশ প্রদর্শন বা গোপন করার জন্য ব্যবহৃত হয়।
2. else ডিরেক্টিভ: else ব্যবহার করে আপনি একটি বিকল্প UI অংশ render করতে পারেন, যদি if শর্ত মেলেনা।
3. each ডিরেক্টিভ: each ডিরেক্টিভ ব্যবহার করে আপনি একটি অ্যারে বা লিস্টের উপাদানগুলির জন্য UI render করতে পারেন।

১. if ডিরেক্টিভের উদাহরণ:

ধরা যাক, আপনি একটি login কম্পোনেন্ট তৈরি করতে চান যেখানে শুধুমাত্র যদি ইউজার লগইন থাকে, তবে তার নাম প্রদর্শিত হবে, অন্যথায় "Login to continue" বার্তা প্রদর্শিত হবে।

<!-- ConditionalRendering.riot -->
<conditional-rendering>
  <h1>If condition example</h1>
  
  <!-- Conditional rendering using if -->
  <h2 if={isLoggedIn}>Welcome, {username}!</h2>
  <p if={!isLoggedIn}>Please login to continue.</p>
  
  <button onclick={toggleLogin}>Toggle Login Status</button>

  <script>
    export default {
      onMounted() {
        this.isLoggedIn = false; // Initially the user is not logged in
        this.username = 'John Doe'; // Sample username
      },

      toggleLogin() {
        this.isLoggedIn = !this.isLoggedIn; // Toggle login status
      }
    }
  </script>
</conditional-rendering>

ব্যাখ্যা:

• <h2 if={isLoggedIn}>: যদি isLoggedIn সত্য হয়, তাহলে এই ট্যাগটি UI তে প্রদর্শিত হবে।
• <p if={!isLoggedIn}>: যদি isLoggedIn মিথ্যা হয়, তাহলে এই ট্যাগটি প্রদর্শিত হবে।
• toggleLogin() ফাংশনটি ইউজারকে লগইন বা লগ আউট করার ক্ষমতা প্রদান করে, এবং isLoggedIn ভেরিয়েবলের মান পরিবর্তন করলে UI আপডেট হবে।

২. else ডিরেক্টিভের উদাহরণ:

আপনি if এবং else ডিরেক্টিভ ব্যবহার করে দুটি শর্তের মধ্যে স্যুইচ করতে পারেন। এখানে একটি উদাহরণ:

<!-- ElseConditionRendering.riot -->
<else-condition-rendering>
  <h1>Else condition example</h1>
  
  <h2 if={isLoggedIn}>Welcome, {username}!</h2>
  <p else>Please login to continue.</p>

  <button onclick={toggleLogin}>Toggle Login Status</button>

  <script>
    export default {
      onMounted() {
        this.isLoggedIn = false; // Initially the user is not logged in
        this.username = 'John Doe'; // Sample username
      },

      toggleLogin() {
        this.isLoggedIn = !this.isLoggedIn; // Toggle login status
      }
    }
  </script>
</else-condition-rendering>

ব্যাখ্যা:

• <h2 if={isLoggedIn}>: isLoggedIn যদি সত্য হয়, তাহলে এই ট্যাগটি প্রদর্শিত হবে।
• <p else>: if শর্ত মেলেনি (অর্থাৎ isLoggedIn মিথ্যা) হলে, এই অংশটি প্রদর্শিত হবে।

৩. each ডিরেক্টিভের উদাহরণ (লিস্ট রেন্ডারিং):

each ডিরেক্টিভের মাধ্যমে আপনি একটি অ্যারে বা লিস্টের প্রতিটি উপাদান ডাইনামিকভাবে রেন্ডার করতে পারেন।

<!-- EachConditionRendering.riot -->
<each-condition-rendering>
  <h1>Each condition example</h1>
  
  <ul>
    <li each={item in items}>{item}</li>
  </ul>
  
  <button onclick={addItem}>Add Item</button>

  <script>
    export default {
      onMounted() {
        this.items = ['Item 1', 'Item 2', 'Item 3']; // Initial items list
      },

      addItem() {
        this.items.push('New Item'); // Add a new item to the list
      }
    }
  </script>
</each-condition-rendering>

ব্যাখ্যা:

• <li each={item in items}>: এখানে items অ্যারের প্রতিটি উপাদানকে li ট্যাগে রেন্ডার করা হচ্ছে।
• addItem() ফাংশনটি items অ্যারে তে নতুন একটি আইটেম যোগ করে এবং UI তে তা দেখানো হয়।

Riot.js এ Conditional Rendering এর সুবিধা:

• প্রতিক্রিয়াশীল UI: শর্তসাপেক্ষে UI অংশগুলি রেন্ডার করতে ব্যবহার করা হয়, যার মাধ্যমে আপনি ডেটা পরিবর্তনের সাথে UI কে প্রতিক্রিয়া দিতে সক্ষম হন।
• সহজ এবং পরিষ্কার কোড: if, else, এবং each ডিরেক্টিভগুলি Riot.js কোডকে পরিষ্কার এবং সহজ করে তোলে, এবং কোডের রক্ষণাবেক্ষণ সহজ করে।
• ডায়নামিক UI পরিবর্তন: ডেটার পরিবর্তনের সাথে UI আপডেট হয়, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।

সারসংক্ষেপ:

Riot.js-এ Conditional Rendering ব্যবহার করে আপনি শর্ত অনুযায়ী UI-এর বিভিন্ন অংশ প্রদর্শন বা গোপন করতে পারেন। এটি if, else, এবং each ডিরেক্টিভ ব্যবহার করে করা হয়, যা ডেটার উপর ভিত্তি করে UI পরিবর্তন করতে সহায়তা করে। এই বৈশিষ্ট্যটি ডেভেলপারদের UI আরও ইন্টারঅ্যাকটিভ এবং ডায়নামিকভাবে তৈরি করতে সাহায্য করে।

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')}) ব্যবহার করে।