<is-hidden>

The inverse of <is-visible>. It mounts its content while the condition is false. Laid out with display: contents. Used in component markup.

<is-hidden when="#ref" [eq|neq|gt|gte|lt|lte|contains="value"]>
  …content…
</is-hidden>

Attributes

The same as <is-visible>. The condition is evaluated the same way and the result is inverted.

Attribute Type Content is mounted when
when reference Required. Alone: the value is falsy
eq text String(value) !== eq
neq text String(value) === neq
gt number not Number(value) > Number(gt)
gte number not Number(value) >= Number(gte)
lt number not Number(value) < Number(lt)
lte number not Number(value) <= Number(lte)
contains text The array or string does not contain the text

<is-hidden when="#x"> is the same as <is-visible when="!#x">. Use whichever reads better.

Example

Previewindex.htmltodo-empty.html
Add task

Nothing to do.

That is a lot of tasks.

 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>is-hidden demo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/dist/theme.css">
  <script type="module" src="https://cdn.jsdelivr.net/npm/@realmorg/realm@alpha/dist/realm.js"></script>
</head>
<body>
  <import-element from="https://cdn.jsdelivr.net/npm/@realmorg/ui@alpha/components/button.html"></import-element>

  <import-element from="./todo-empty.html"></import-element>

  <todo-empty></todo-empty>
</body>
</html>
<custom-element name="todo-empty">
  <script>
    const todo = useState({ items: [] });

    function add() {
      todo.items.push(`Task ${todo.items.length + 1}`);
    }
  </script>

  <style>
    :host {
      display: grid;
      gap: calc(var(--spacing) * 2);
      justify-items: start;
    }
  </style>

  <ui-button onclick="add()">Add task</ui-button>
  <is-hidden when="#todo.items.length"><p>Nothing to do.</p></is-hidden>
  <is-hidden when="#todo.items.length" lt="3"><p>That is a lot of tasks.</p></is-hidden>
</custom-element>

Edit this page on GitHub · View as Markdown