Element: is-visible (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 used to adds visibility logic inside a custom element. It will render 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-attr name="is-attr-true" type="boolean">false</element-attr>
  <element-state name="is-state-true" type="boolean">false</element-state>
  <element-flow>
    <trigger-event click="TheButton">
      <set-state toggle name="is-state-true" value="$.is-state-true" from="localState">
    </trigger-event>
  </element-flow>
  <template>
    <is-visible value="@is-attr-true" eq="true">
      It's attribute visible.
    </is-visible>
    <is-visible value="#is-state-true" eq="true">
      It's state visible.
    </is-visible>
    <button ref="TheButton">Toggle Me!</button>
  </template>
</custom-element>

<my-element is-attr-true="true"></my-element>
<br />
<my-element></my-element>

false

false