ALayout

ALayout and its sub-components — AHeader, AContent, AFooter, ASide — compose classic app shells. AHeader/AFooter take a height prop; ASide takes a width prop; AContent fills the remaining space.

Import

import { Layout, Header, Content, Footer, Side } from '@any-design/anyui/vue';
// React:  import { Layout, Header, Content, Footer, Side } from '@any-design/anyui/react';
// Svelte: import { Layout, Header, Content, Footer, Side } from '@any-design/anyui/svelte';

Basic usage

A header / content / footer shell.

<template>
  <ALayout>
    <AHeader :height="60">Header</AHeader>
    <AContent>Main content</AContent>
    <AFooter :height="40">Footer</AFooter>
  </ALayout>
</template>

Examples

With a sidebar

Add an ASide for a sidebar navigation layout.

<template>
  <ALayout>
    <AHeader :height="56">Top bar</AHeader>
    <ALayout>
      <ASide :width="220">Sidebar</ASide>
      <AContent>Page content</AContent>
    </ALayout>
  </ALayout>
</template>

Fit to viewport

Set fit to make the whole layout fill the viewport height (useful for dashboards).

<template>
  <ALayout fit>
    <AHeader :height="56">Header</AHeader>
    <AContent>Fills the remaining viewport height</AContent>
  </ALayout>
</template>

Props

Prop	Type	Default	Description
fit	Boolean	false	Fit the viewport height.
autoFit	Boolean	true	Auto-resize to viewport.

Slots

Slot	Props	Description
default	—	Layout children.

Notes

Sub-components: AHeader / AFooter take height (Number|String, default ""); ASide takes width (Number|String) and noDefault (Boolean, false); AContent has no props. Exported as Header, Content, Footer, Side.

ALayout

ALayout 及其子组件 —— AHeader、AContent、AFooter、ASide —— 共同组成经典的应用外壳。AHeader / AFooter 接收 height 属性；ASide 接收 width 属性；AContent 自动填充剩余空间。

引入

import { Layout, Header, Content, Footer, Side } from '@any-design/anyui/vue';
// React:  import { Layout, Header, Content, Footer, Side } from '@any-design/anyui/react';
// Svelte: import { Layout, Header, Content, Footer, Side } from '@any-design/anyui/svelte';

基础用法

一个 Header / Content / Footer 外壳。

<template>
  <ALayout>
    <AHeader :height="60">Header</AHeader>
    <AContent>主体内容</AContent>
    <AFooter :height="40">Footer</AFooter>
  </ALayout>
</template>

示例

带侧边栏

添加 ASide 实现侧边导航布局。

<template>
  <ALayout>
    <AHeader :height="56">顶栏</AHeader>
    <ALayout>
      <ASide :width="220">侧边栏</ASide>
      <AContent>页面内容</AContent>
    </ALayout>
  </ALayout>
</template>

撑满视口

设置 fit 让整个布局撑满视口高度（适合后台仪表盘）。

<template>
  <ALayout fit>
    <AHeader :height="56">Header</AHeader>
    <AContent>填充视口剩余高度</AContent>
  </ALayout>
</template>

属性

属性	类型	默认值	说明
fit	Boolean	false	撑满视口高度。
autoFit	Boolean	true	自动适配视口。

插槽

插槽	作用域参数	说明
default	—	布局子元素。

说明

子组件：AHeader / AFooter 接收 height（Number|String，默认 ""）；ASide 接收 width（Number|String）与 noDefault（Boolean，false）；AContent 无属性。以 Header、Content、Footer、Side 导出。