Note

This documentation describes the FramesContainer Vue component for native UI views, for Xml templates see frames-container.

FramesContainer

A multi-frame container that renders dynamically loaded view frames as tabs or a stacked layout. Used to host multiple concurrent views within a single container.

Import

import { FramesContainer } from '@neos/app'

Props

Prop	Type	Default	Description
`containerId`	`string`	`undefined`	Named container ID. When provided, renders frames registered to this container
`mode`	`'tabs' \\| 'stack'`	`'tabs'`	How multiple frames are presented
`modelValue`	`FrameWithComponent[]`	`undefined`	Explicit frame list (v-model)
`selectedTabIndex`	`number`	`undefined`	Index of the active tab (v-model)
`tabCloseButtonDisplayMode`	`'default' \\| 'always'`	`'default'`	When to show the close button on tabs: `default` = on hover; `always` = always visible

Emits

Event	Payload	Description
`update:modelValue`	`FrameWithComponent[]`	Emitted when frames change
`update:selectedTabIndex`	`number`	Emitted when active tab changes

Slots

Slot	Description
`actions`	Extra buttons rendered in the tab bar right area

Usage Examples

Main content area

<FramesContainer containerId="main" />

Tabs with always-visible close button

<FramesContainer containerId="main" tab-close-button-display-mode="always" />

Stacked container

<FramesContainer containerId="detail" mode="stack" />

With extra tab bar actions

<FramesContainer containerId="main">
  <template #actions>
    <button icon="pi pi-plus" size="small" @click="openNewTab" />
  </template>
</FramesContainer>

Table of Contents