@ea-lab/reactive-json-docs/public/rjbuild/docs/core/element/html/Tabs.yaml

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

renderView:
  - type: Markdown
    content: |
      # Tabs

      The `Tabs` component provides a tabbed interface using React-Bootstrap. Each tab must have a unique `eventKey` and a `title` in its attributes, and can contain any valid Reactive-JSON view content.

      ## Properties

  - type: DefinitionList
    content:
      - term:
          code: tabs
          after: "(array, required)"
        details:
          type: Markdown
          content: |
            Static array of tab objects. This array is not evaluated by the template system and must be defined statically in the schema.
            Each tab object must have:
            - `attributes` (object, required):
              - `title` (string, required): The label of the tab.
              - `eventKey` (string, required): A unique identifier for the tab.
              - Other attributes are passed to the React-Bootstrap Tab component.
            - `content` (array|object, required): The content to display in the tab. Can be any valid Reactive-JSON view (components, arrays, templates, etc.)

  - type: RjBuildDescriber
    title: "Interactive Example: Editable tabs"
    description:
      - type: Markdown
        content: |
          Edit the content of each tab and switch between them to see the result.
    toDescribe:
      renderView:
        - type: Tabs
          tabs:
            - attributes:
                eventKey: simple
                title: "First tab"
              content: "This tab has the value directly set."
            - attributes:
                eventKey: templateLoaded
                title: "Template loaded tab"
              content:
                load: tabTemplate
            - attributes:
                eventKey: components
                title: "Components"
              content:
                type: p
                content: "You can put any component or template in the tab content."

      templates:
        tabTemplate:
          text: "This tab content is from a template."

  - type: Markdown
    content: |
      ## Limitations
      - The `tabs` array must be static in the schema (no dynamic generation or template evaluation).
      - Each tab must have a unique `eventKey` in its attributes.
      - The `title` attribute is required for each tab.
      - No support for dynamic addition/removal of tabs at runtime.
      - No built-in support for icons in tab headers.
      - No animation customization beyond what react-bootstrap provides.
      - All tab content is rendered at once (not lazy-loaded).
      - Tab selection state is not persisted between renders.