furo-data-hide-content

furo-data-hide-content #

@furo/data v2.18.0
import '@furo/data/src/furo-data-hide-content.js';
exports FuroDataHideContent js
exports <furo-data-hide-content> custom-element-definition
superclass LitElement
mixes FBP
summary hide content with a boolean fieldnode

furo-data-hide-content hides content in dependency to a boolean field value.

It is also possible to call the hide() and show() methods to show and hide the content and update the value. TODO: support furo.fat.Bool and google.protobuf.BoolValue

1
2
3

<furo-data-hide-content animated fn-bind-data="--bind(*.bool)">
  <div>some content</div>
</furo-collapsible-box>

The attribute animated will add a slide in slide out animation.

Attributes and Properties #

hidden #

default: false



hideOnFalse #

hide-on-false Boolean

Hide element on false instead of true

animated #

animated boolean

Set this to animate the collapse and expand.

Events #

value-changed #

at-value-changed → Boolean

Fired when the visibility changed, contains the current visibility state

hid #

at-hid → void

Fired when the content gets hid

showed #

at-showed → void

Fired when the content gets visible

Methods #

bindData #

bindData(fieldNode Object|FieldNode ) ⟹ void

Object|FieldNode → fn-bind-data

Bind a entity field to the date-input. You can use the entity even when no data was received. When you use at-object-ready from a furo-data-object which emits a EntityNode, just bind the field with --entity(*.fields.fieldname)

  • fieldNode a Field object

hide #

hide() ⟹ void

* → fn-hide

hides the content



show #

show() ⟹ void

* → fn-show

shows the content



toggle #

toggle() ⟹ void

* → fn-toggle

Toggle the current visibility state.



Slots #

default #

Type: HTMLElement [0..n]

default slot to add content.