Element: is-hidden (References) | Realm

dark

Summary

web-app

custom-element

element-attr

element-state

element-flow

global-state

import-element

import-script

import-style

is-visible

is-hidden

repeat-list

trigger-event

listen-event

set-attr

set-state

set-timer

send-event

http-request

request-header

request-body

response-ok

response-fail

script

trigger-element

Comparison Operators

Mutation Operators

Data Source

Summary

web-app

custom-element

element-attr

element-state

element-flow

global-state

import-element

import-script

import-style

is-visible

is-hidden

repeat-list

trigger-event

listen-event

set-attr

set-state

set-timer

send-event

http-request

request-header

request-body

response-ok

response-fail

script

trigger-element

Comparison Operators

Mutation Operators

Data Source

This element tag is reversed version of <is-visible> tag. It will hide its content if the condition is true.

Must be custom element's attribute or state name.

Only allowed one of logic operators (see supported in Comparison Operators page).

<custom-element name="my-element">
  <element-state name="count" type="number">0</element-state>
  <element-flow>
    <trigger-event click="TheButton">
      <set-state name="count" value="2" mutate="+"></set-state>
    </trigger-event>
  </element-flow>
  <template>
    <is-hidden value="#count" gt="10">
      <div>You'll always see me until you click me 6 times 😢.</div>
    </is-hidden>
    <slot name="#count"></slot>
    <button ref="TheButton">Add!</button>
  </template>
</custom-element>

<my-element></my-element>

0