r-show Directive

The r-show directive is used to conditionally display or hide an HTML element based on the truthiness of an expression. It allows you to control the visibility of an element dynamically.

Try it live

import { html, ref } from 'regor'

export function createShow(interactive = false) {
  const visible = ref(true)
  return { interactive, visible, toggle: () => visible(!visible()) }
}

export const showTemplate = html` <div class="guide-demo">
  <div class="guide-session-bar">
    <button type="button" @click="toggle" :disabled="!interactive">
      {{ visible ? 'Hide details' : 'Show details' }}</button
    ><span>display: {{ visible ? 'visible' : 'none' }}</span>
  </div>
  <section class="directive-card directive-show-details" r-show="visible">
    <label class="guide-controls"
      >A local draft<input
        type="text"
        value="This draft stays in the same DOM node."
        :disabled="!interactive"
    /></label>
  </section>
  <p class="guide-hint">
    Edit the draft, hide it, and show it again. The element stays mounted; its
    display changes.
  </p>
</div>`

import { createApp, useScope } from 'regor'
import { directiveExamples } from './examples'

const element = document.getElementById('directive-demo')
const name = element?.dataset.example
if (element && name && Object.hasOwn(directiveExamples, name)) {
  const example = directiveExamples[name as keyof typeof directiveExamples]
  createApp<object>(
    useScope<object>(() => example.create(true)),
    { element, template: example.template },
  )
}

Syntax

<element r-show="expression"></element>

• <element>: The HTML element that you want to conditionally show or hide.
• expression: An expression that evaluates to a boolean value (true or false). If the expression is true, the element is displayed; if it's false, the element is hidden.

Usage

The r-show directive is useful when you want to toggle the visibility of an element based on a condition in your Regor component. It provides a simple way to hide or reveal content in response to user interactions or changes in your application's state.

Example

<div>
  <p r-show="isContentVisible">
    This content is visible when 'isContentVisible' is true.
  </p>
</div>

In this example, the <p> element will be displayed if the isContentVisible property in your component's data is true. If isContentVisible becomes false, the element will be hidden.

Notes

• The r-show directive operates by toggling the element's display CSS property. When the expression evaluates to true, the display property is set to its default value (usually "block" or "inline"), making the element visible. When the expression evaluates to false, the display property is set to "none", hiding the element.

• You can use expressions that evaluate to boolean values in the r-show directive. These expressions can be based on component data, computed properties, or any logic you implement in your component.

• The r-show directive is reactive, meaning that changes to the expression's truthiness will automatically update the element's visibility. If the expression becomes true, the element will become visible, and if it becomes false, the element will be hidden.

• You can combine the r-show directive with other directives and HTML attributes to create complex conditional rendering logic in your Regor templates.

Example

<div>
  <button @click="toggleVisibility">Toggle Visibility</button>
  <p r-show="isVisible">This content can be toggled on and off.</p>
</div>

In this example, clicking the "Toggle Visibility" button will trigger the toggleVisibility method in your component. This method updates the isVisible property. If isVisible is true, the <p> element will be displayed; if it's false, the element will be hidden. This allows you to create interactive user interfaces with elements that appear and disappear based on user actions.

The r-show directive provides a straightforward way to implement conditional visibility in your Regor-powered applications, making it easier to control what content is displayed to users in response to various conditions and interactions.

Back to the directives