Container

Container components for scaffolding the basic structure of the page. Two usage modes:

1. Pattern mode — quick layout via pattern prop (12 presets)
2. Flexible mode — freely compose with sub-components

Pattern Mode

Switch layout structures with the pattern prop.

classic — Classic Four-Region

header on top, aside on the left, main in the center, footer at the bottom.

<TContainer pattern="classic" header-height="56px" aside-width="220px">
  <template #header>Top Nav</template>
  <template #aside>Side Menu</template>
  Main Content
  <template #footer>Copyright</template>
</TContainer>

All 12 Patterns

Pattern	Structure	Description
classic	[Header] → [Aside|Main] → [Footer]	Classic four-region
classic-right	[Header] → [Main|Aside] → [Footer]	Sidebar right
sidebar-full	[Aside | Header+Main+Footer]	Sidebar full height left
sidebar-full-right	[Header+Main+Footer | Aside]	Sidebar full height right
header-sidebar	[Header] → [Aside|Main+Footer]	Header full, sidebar reaches bottom left
header-sidebar-right	[Header] → [Main+Footer|Aside]	Header full, sidebar reaches bottom right
vertical	[Header] → [Main] → [Footer]	Vertical flow
sidebar-main	[Aside|Main]	Sidebar + Main
main-sidebar	[Main|Aside]	Main + Sidebar
header-main	[Header] → [Main]	Header + Main
main-footer	[Main] → [Footer]	Main + Footer
main-only	[Main]	Only Main

Flexible Sub-Component Mode (Element Plus Style)

Use TContainerHeader, TContainerAside, TContainerMain, TContainerFooter to freely compose your layout. Direction auto-infers: vertical when header/footer is present, horizontal otherwise.

<TContainer>
  <TContainerHeader height="56px">
    <!-- Top nav -->
  </TContainerHeader>
  <TContainerAside width="220px">
    <!-- Side menu -->
  </TContainerAside>
  <TContainerMain>
    <!-- Main content -->
  </TContainerMain>
  <TContainerFooter height="60px">
    <!-- Footer -->
  </TContainerFooter>
</TContainer>

Direction Auto-Inference

Without direction prop, TContainer detects child components:

• With TContainerHeader or TContainerFooter → vertical
• Only TContainerAside + TContainerMain → horizontal

Collapsible Sidebar

Use aside-collapsed and aside-collapsed-width to implement a collapsible sidebar.

API

TContainer Props

Prop	Description	Type	Default
pattern	Layout pattern. 12 presets available (see table above)	ContainerPattern	undefined
direction	Layout direction. Auto-inferred when unset (see below)	'horizontal' | 'vertical'	auto
header-height	Header height (pattern mode only)	string | number	'60px'
footer-height	Footer height (pattern mode only)	string | number	'60px'
aside-width	Aside width (pattern mode only)	string | number	'260px'
aside-collapsed	Whether to collapse the sidebar	boolean	false
aside-collapsed-width	Collapsed sidebar width	string | number	'64px'

Direction auto-inference rules:

• direction explicitly set → use it
• pattern set without direction → inferred from pattern
• Neither set → inspect children: Header/Footer present → vertical, else horizontal

TContainer Slots (Pattern Mode)

Slot	Description
header	Header content
aside	Aside content
default	Main content area
footer	Footer content

Sub-Component Props

Component	Prop	Description	Default
TContainerHeader	height	Header height	undefined
TContainerAside	width	Aside width	undefined
TContainerMain	—	Semantic main wrapper	—
TContainerFooter	height	Footer height	undefined

In flexible mode, sub-components accept their own height/width props independent of the parent container's pattern.