@ea-lab/reactive-json-docs/public/rjbuild/docs/core/action/Hide.yaml

Complete documentation for Reactive-JSON - Components, examples and LLM-parsable guides

renderView:
  - type: Markdown
    content: |
      # Hide

      Completely hides the element and cancels any subsequent actions.

      ## Properties

      None.

      ## Behavior
      - The element and its children are not rendered in the DOM.
      - Subsequent actions are not executed.

  - type: RjBuildDescriber
    title: "Hide Action Example"
    description:
      - type: Markdown
        content: |
          This example shows how the `hide` action completely removes an element from the DOM based on a condition.

          Try toggling the visibility to see how the `hide` action works differently from just making something invisible.

    toDescribe:
      renderView:
        - type: div
          content:
            - type: button
              content: "Toggle visibility"
              actions:
                - what: setData
                  on: click
                  path: ~.shouldHide
                  value: "true"
                  when: ~.shouldHide
                  is: "false"
                - what: setData
                  on: click
                  path: ~.shouldHide
                  value: "false"
                  when: ~.shouldHide
                  is: "true"

            - type: div
              content: "This text will be hidden when shouldHide is true."
              actions:
                - what: hide
                  when: ~.shouldHide
                  is: "true"

            - type: div
              content: ["Current state: shouldHide = ", ~.shouldHide]

      data:
        shouldHide: "false"

  - type: Markdown
    content: |
      ## Limitation
      - When hidden, the element no longer exists in the DOM, so no events can be attached to it.