Containers

Cards, alerts, tooltips, popovers

Boxes and messages that hold other elements, including form fields.

Containers hold other nodes

Containers draw a Bootstrap component and put their children inside it. Children can be anything — text, buttons, rows and form fields. Fields inside a container still validate and submit normally.

Card has header, title, footer (and imgSrc) in props and its children in the body. Alert shows heading and text; with dismissible: true the × button hides it, and api.showNode(id) brings it back.

Tooltip and Popover wrap their children and show text on hover / click.

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-1",
    "props": {
      "className": "g-3"
    },
    "children": [
      {
        "type": "column",
        "id": "c-card",
        "props": {
          "className": "col-12 col-md-6"
        },
        "children": [
          {
            "type": "Card",
            "id": "profile-card",
            "props": {
              "header": "Profile",
              "title": "Jane Doe",
              "footer": "Last login: today"
            },
            "children": [
              {
                "type": "P",
                "id": "card-text",
                "props": {
                  "text": "Cards can hold any nodes, including fields:"
                }
              },
              {
                "type": "InputField",
                "id": "card-email",
                "props": {
                  "type": "email",
                  "name": "cardEmail",
                  "label": "Email"
                }
              }
            ]
          }
        ]
      },
      {
        "type": "column",
        "id": "c-alerts",
        "props": {
          "className": "col-12 col-md-6"
        },
        "children": [
          {
            "type": "Alert",
            "id": "notice",
            "props": {
              "variant": "warning",
              "heading": "Heads up!",
              "text": "Close me with ×, then press \"Show alert again\".",
              "dismissible": true,
              "onClose": "alertClosed()"
            }
          },
          {
            "type": "Alert",
            "id": "info",
            "props": {
              "variant": "info",
              "text": "A plain info alert."
            }
          }
        ]
      }
    ]
  },
  {
    "type": "row",
    "id": "row-2",
    "props": {
      "className": "mt-3"
    },
    "children": [
      {
        "type": "column",
        "id": "c-overlays",
        "props": {
          "className": "d-flex flex-wrap gap-2 align-items-start"
        },
        "children": [
          {
            "type": "ButtonField",
            "id": "show-alert",
            "props": {
              "text": "Show alert again",
              "onClick": "showAlert()"
            }
          },
          {
            "type": "Tooltip",
            "id": "tip",
            "props": {
              "text": "I'm a tooltip",
              "placement": "top"
            },
            "children": [
              {
                "type": "ButtonField",
                "id": "tip-btn",
                "props": {
                  "text": "Hover me (tooltip)",
                  "variant": "outline-secondary"
                }
              }
            ]
          },
          {
            "type": "Popover",
            "id": "pop",
            "props": {
              "title": "Popover",
              "text": "Click outside to close.",
              "placement": "bottom",
              "trigger": "click"
            },
            "children": [
              {
                "type": "ButtonField",
                "id": "pop-btn",
                "props": {
                  "text": "Click me (popover)",
                  "variant": "outline-secondary"
                }
              }
            ]
          }
        ]
      }
    ]
  }
]

Options used here

Option	What it does
`Card { header, title, content, footer, imgSrc }`	A card; `children` go in its body.
`Alert { variant, heading, text, dismissible }`	A message box; dismissible hides it.
`Tooltip { text, placement }`	Text on hover around its children.
`Popover { title, text, placement, trigger }`	A small pop-up around its children.

Events

Event	When it runs	Your action receives
`onClose (Alert)`	The user closes a dismissible alert.	`(event)`