Containers

Modal & carousel

Pop-up dialogs with fields, and sliding image / content carousels.

Modal

A Modal (also Dialog) stays in the page while closed, so its fields keep their values. Fields inside a closed modal are not validated.

Open and close it without code: a button with data-modal (the modal id) and onClick: "openModal()" / "closeModal()". From code: api.openModal(id) / api.closeModal(id). Buttons for the bottom of the modal go in footer.

Carousel

items are slides: an image slide { src, alt, caption, text } or a slide made of nodes { children }. interval is the time per slide in ms (null stops auto-play).

Try it

Loading example…

Events0

Use the example — every action it runs shows up here with its data.

Code

Copy Full page.js into app/your-page/page.js of a Next.js app (withrcube-html, react-bootstrap and Bootstrap's CSS installed) — it runs as is. Or copy only the schema and keep your own page.

[
  {
    "type": "row",
    "id": "row-modal",
    "children": [
      {
        "type": "column",
        "id": "c-modal",
        "props": {
          "className": "d-flex gap-2 mb-2"
        },
        "children": [
          {
            "type": "ButtonField",
            "id": "open",
            "props": {
              "text": "Edit profile (modal)",
              "variant": "primary",
              "data-modal": "edit-modal",
              "onClick": "openModal()"
            }
          },
          {
            "type": "P",
            "id": "saved",
            "props": {
              "className": "mb-0 align-self-center text-body-secondary",
              "text": ""
            }
          }
        ]
      }
    ]
  },
  {
    "type": "Modal",
    "id": "edit-modal",
    "props": {
      "title": "Edit profile",
      "show": false,
      "centered": true,
      "onHide": "modalHidden()"
    },
    "children": [
      {
        "type": "InputField",
        "id": "nickname",
        "props": {
          "name": "nickname",
          "label": "Nickname",
          "required": true
        }
      },
      {
        "type": "SelectField",
        "id": "theme",
        "props": {
          "name": "theme",
          "label": "Theme",
          "options": [
            "Light",
            "Dark"
          ]
        }
      }
    ],
    "footer": [
      {
        "type": "ButtonField",
        "id": "cancel",
        "props": {
          "text": "Cancel",
          "variant": "outline-secondary",
          "data-modal": "edit-modal",
          "onClick": "closeModal()"
        }
      },
      {
        "type": "ButtonField",
        "id": "save",
        "props": {
          "text": "Save",
          "onClick": "saveProfile()"
        }
      }
    ]
  },
  {
    "type": "row",
    "id": "row-carousel",
    "props": {
      "className": "mt-3"
    },
    "children": [
      {
        "type": "column",
        "id": "c-carousel",
        "children": [
          {
            "type": "Carousel",
            "id": "hero",
            "props": {
              "interval": 4000
            },
            "items": [
              {
                "src": "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22800%22%20height%3D%22260%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%232a78d6%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20font-family%3D%22sans-serif%22%20font-size%3D%2236%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3ESlide%20one%3C%2Ftext%3E%3C%2Fsvg%3E",
                "alt": "Slide one",
                "caption": "Image slide",
                "text": "With a caption"
              },
              {
                "src": "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22800%22%20height%3D%22260%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%231baf7a%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23fff%22%20font-family%3D%22sans-serif%22%20font-size%3D%2236%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3ESlide%20two%3C%2Ftext%3E%3C%2Fsvg%3E",
                "alt": "Slide two",
                "caption": "Second slide"
              },
              {
                "children": [
                  {
                    "type": "DIV",
                    "id": "node-slide",
                    "props": {
                      "className": "p-5 text-center bg-body-tertiary",
                      "style": {
                        "height": 260
                      },
                      "children": "A slide made of schema nodes"
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
]

Options used here

Option	What it does
`Modal { title, show, size, centered, backdrop }`	A dialog; `children` = body, `footer` = bottom buttons.
`data-modal + openModal() / closeModal()`	Buttons that open / close a modal.
`api.openModal(id) / closeModal(id)`	Open / close from code.
`Carousel { interval }`	Slides from `items`: `{ src, alt, caption, text }` or `{ children }`.

Events

Event	When it runs	Your action receives
`onHide (Modal)`	The modal closes itself (× or backdrop click).	—