Layout

Handling the overall layout of a page.

Design concept

Size

The first level of the navigation is inclined left near a logo, and the secondary menu is inclined right.

• Top Navigation (almost systems): the height of the first level of the navigation 64px, the second level of the navigation 48px.
• Top Navigation(contents page): the height of the first level of the navigation 80px, the second level of the navigation 56px.
• Calculation formula of a top navigation: 48+8n.
• Calculation formula of an aside navigation: 200+8n.

Interaction rules

• The first level of the navigation and the last level of the navigation should be distinguishable by visualization;
• The current item should have the highest priority of visualization;
• When the current navigation item is collapsed, the style of the current navigation item is applied to its parent level;
• The left side navigation bar has support for both the accordion and expanding styles; you can choose the one that fits your case the best.

Component Overview

• Layout: The layout wrapper, in which Header Sider Content Footer or Layout itself can be nested, and can be placed in any parent container.
• Header: The top layout with the default style, in which any element can be nested, and must be placed in Layout.
• Sider: The sidebar with default style and basic functions, in which any element can be nested, and must be placed in Layout.
• Content: The content layout with the default style, in which any element can be nested, and must be placed in Layout.
• Footer: The bottom layout with the default style, in which any element can be nested, and must be placed in Layout.

Examples

Basic

<template>
  <div>
    <a-layout>
      <a-layout-header>Header</a-layout-header>
      <a-layout-content>Content</a-layout-content>
      <a-layout-footer>Footer</a-layout-footer>
    </a-layout>

    <a-layout>
      <a-layout-header>Header</a-layout-header>
      <a-layout>
        <a-layout-sider>Sider</a-layout-sider>
        <a-layout-content>Content</a-layout-content>
      </a-layout>
      <a-layout-footer>Footer</a-layout-footer>
    </a-layout>

    <a-layout>
      <a-layout-header>Header</a-layout-header>
      <a-layout>
        <a-layout-content>Content</a-layout-content>
        <a-layout-sider>Sider</a-layout-sider>
      </a-layout>
      <a-layout-footer>Footer</a-layout-footer>
    </a-layout>

    <a-layout>
      <a-layout-sider>Sider</a-layout-sider>
      <a-layout>
        <a-layout-header>Header</a-layout-header>
        <a-layout-content>Content</a-layout-content>
        <a-layout-footer>Footer</a-layout-footer>
      </a-layout>
    </a-layout>
  </div>
</template>

<style scoped>
#components-layout-demo-basic .ant-layout-header,
#components-layout-demo-basic .ant-layout-footer {
  background: #7dbcea;
  color: #fff;
}

#components-layout-demo-basic .ant-layout-footer {
  line-height: 1.5;
}

#components-layout-demo-basic .ant-layout-sider {
  background: #3ba0e9;
  color: #fff;
  line-height: 120px;
}

#components-layout-demo-basic .ant-layout-content {
  background: rgba(16, 142, 233, 1);
  color: #fff;
  min-height: 120px;
  line-height: 120px;
}

#components-layout-demo-basic > .ant-layout {
  margin-bottom: 48px;
}

#components-layout-demo-basic > .ant-layout:last-child {
  margin: 0;
}
</style>

Top Layout

<template>
  <a-layout>
    <a-layout-header>
      <div class="logo" />
      <a-menu
        theme="dark"
        mode="horizontal"
        :default-selected-keys="['2']"
        :style="{ lineHeight: '64px' }"
      >
        <a-menu-item key="1">nav 1</a-menu-item>
        <a-menu-item key="2">nav 2</a-menu-item>
        <a-menu-item key="3">nav 3</a-menu-item>
      </a-menu>
    </a-layout-header>
    <a-layout-content :style="{ padding: '0 50px' }">
      <a-breadcrumb :style="{ margin: '16px 0' }">
        <a-breadcrumb-item>Home</a-breadcrumb-item>
        <a-breadcrumb-item>List</a-breadcrumb-item>
        <a-breadcrumb-item>App</a-breadcrumb-item>
      </a-breadcrumb>
      <div :style="{ background: '#fff', padding: 24, minHeight: 280 }">Content</div>
    </a-layout-content>
    <a-layout-footer :style="{ textAlign: 'center' }">
      Ant Design ©2018 Created by Ant UED
    </a-layout-footer>
  </a-layout>
</template>

<style scoped>
.logo {
  width: 120px;
  height: 31px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px 24px 16px 0;
  float: left;
}
</style>

API

Layout

The wrapper.

Property	Description	Type	Default	Version
class	Container className	string	-
style	To customize the styles	CSSProperties	-
hasSider	Whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering	boolean	-

Layout.Header

The top layout with the default style, in which any element can be nested, and must be placed in Layout.

Property	Description	Type	Default	Version
class	Container className	string	-
style	To customize the styles	CSSProperties	-

Layout.Content

The content layout with the default style, in which any element can be nested, and must be placed in Layout.

Property	Description	Type	Default	Version
class	Container className	string	-
style	To customize the styles	CSSProperties	-

Layout.Footer

The bottom layout with the default style, in which any element can be nested, and must be placed in Layout.

Property	Description	Type	Default	Version
class	Container className	string	-
style	To customize the styles	CSSProperties	-

Layout.Sider

The sidebar.

Property	Description	Type	Default	Version
breakpoint	Breakpoints of the responsive layout	xs | sm | md | lg | xl | xxl	-
class	Container className	string	-
collapsed	To set the current status	boolean	-
collapsedWidth	Width of the collapsed sidebar, by setting to 0 a special trigger will appear	number	80
collapsible	Whether can be collapsed	boolean	false
defaultCollapsed	To set the initial status	boolean	false
reverseArrow	Reverse direction of arrow, for a sider on the right	boolean	false
style	To customize the styles	CSSProperties	-
theme	Color theme of the sidebar	light | dark	dark
trigger	Specify the customized trigger, set to null to hide the trigger	VNode | slot	-
width	Width of the sidebar	number | string	200
zeroWidthTriggerStyle	To customize the styles of the special trigger that appears when collapsedWidth is 0	object	-

Events

Events Name	Description	Arguments	Version
collapse	The callback function, executed by clicking the trigger or activating the responsive layout	(collapsed, type) => {}
breakpoint	The callback function, executed when breakpoints changed	(broken) => {}