i-show

The i-show directive in Olova is a simple yet effective way to control the visibility of elements based on a boolean condition. Unlike i-if, which removes the element from the DOM entirely when the condition is false, i-show only toggles the CSS display property of the element. This makes i-show ideal for cases where you want to toggle visibility without affecting the layout of the page.

Example:

Toggle Visibility with i-show

import { createApp } from "//unpkg.com/olova";

const app = createApp({
  data: {
    isVisible: true,
  },
  template: `
    <h1 i-show="isVisible">This will toggle when you click the button</h1>
    <button @click="isVisible = !isVisible">Toggle</button>
  `,
});

app.mount("#root");

How It Works:

1. The data Object:

• We have a single isVisible property in the data object, which is initially set to true. This property controls whether the <h1> element is visible.

2. Using i-show:

• The i-show directive is applied to the <h1> element: <h1 i-show="isVisible">.

• When isVisible is true, the <h1> element is shown. When isVisible is false, the element's display style is set to none, making it invisible but still present in the DOM.

3. Toggle Button:

• The button is used to toggle the value of isVisible between true and false.

• The @click event handler toggles the isVisible state whenever the button is clicked: @click="isVisible = !isVisible".

This will toggle when you click the button

Toggle Alert Message with i-show

import { createApp } from "//unpkg.com/olova";

const app = createApp({
  data: {
    showAlert: false,
    userName: "",
  },
  methods: {
    submitForm() {
      if (this.userName) {
        this.showAlert = true; // Show alert if username is filled
      } else {
        this.showAlert = false; // Hide alert if username is empty
      }
    },
  },
  template: `
    <form @submit.prevent="submitForm">
      <input i-model="userName" placeholder="Enter your name" />
      <button type="submit">Submit</button>
    </form>

    <div i-show="showAlert" class="alert">
      Thank you, {userName}, for submitting the form!
    </div>
  `,
});

app.mount("#root");

How It Works:

1. Data Properties:

showAlert: Controls whether the alert message should be displayed. Initially set to false. userName: Captures the user's input from the form.

2. Form Submission Logic:

The form uses @submit.prevent="submitForm" to handle the form submission. Inside the submitForm method, if the userName is filled in, it sets showAlert to true, which triggers the alert message to be displayed.

3. Using i-show:

The alert message (<div class="alert">) is wrapped with i-show="showAlert". When showAlert is true, the alert message will be shown with the entered userName in the message. When showAlert is false, the alert message is hidden.

CSS for Alert (Optional):

<style>
  .alert {
    padding: 10px;
    background-color: #4caf50;
    color: white;
    margin-top: 10px;
  }
</style>

Use Case:

This example shows how i-show can be useful in form validation or feedback. It dynamically toggles the visibility of an alert message based on user interaction, keeping the alert in the DOM but only showing it when the condition is met.

Thank you, , for submitting the form!