<is-visible>
Mounts its content while a condition is true and removes it while it is false. Laid out with display: contents. Used in component markup. <is-hidden> is the inverse.
<is-visible when="#ref" [eq|neq|gt|gte|lt|lte|contains="value"]>
…content…
</is-visible>Attributes
| Attribute | Type | Meaning |
|---|---|---|
when |
reference | The value to test. Required. Without a comparison, the condition is "truthy" |
eq |
text | String(value) === eq |
neq |
text | String(value) !== neq |
gt |
number | Number(value) > Number(gt) |
gte |
number | Number(value) >= Number(gte) |
lt |
number | Number(value) < Number(lt) |
lte |
number | Number(value) <= Number(lte) |
contains |
text | An array has an item whose String(item) equals the text, or a string includes the text |
Use at most one comparison attribute. If there are several, the first in the order above is used.
Mounting
- While the condition is false, the content is not in the DOM. Its bindings, handlers, observers and requests do not exist.
- When it becomes true, the content is created fresh. When it becomes false again, the content is removed and everything inside it stops.
- To keep content in the DOM and only hide it, bind
hiddeninstead:<div _hidden="!#panel.open">.
Example
Sold out.
Only a few left.
In stock.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>is-visible 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="./stock-level.html"></import-element>
<stock-level></stock-level>
</body>
</html><custom-element name="stock-level">
<script>
const stock = useState({ count: 3 });
</script>
<style>
:host {
display: grid;
gap: calc(var(--spacing) * 2);
justify-items: start;
}
</style>
<ui-button onclick="stock.count = (stock.count + 1) % 6">Count: <slot name="#stock.count"></slot></ui-button>
<is-visible when="#stock.count" eq="0"><p>Sold out.</p></is-visible>
<is-visible when="#stock.count" lte="2"><p>Only a few left.</p></is-visible>
<is-visible when="#stock.count" gt="2"><p>In stock.</p></is-visible>
</custom-element>