文章目錄

• • 基本布局
  • 常用屬性
  • 常用事件

基本布局

上-中-下 布局

<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-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>

常用屬性

Layout.Sider

屬性說明默認

breakpoint	觸發響應式布局的斷點({ 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' })
collapsed(v-model)	當前收起狀態
collapsible	是否可收起	false
defaultCollapsed	是否默認收起	false
theme	主題顏色light/dark	dark

常用事件

• collapse 展開-收起時的回調函數，有點擊 trigger 以及響應式反饋兩種方式可以觸發
• breakpoint 觸發響應式布局斷點時的回調

說明：

• 左邊區域一般放置Menu菜單，若應用型網站菜單過多也可以在Header上再設置一個菜單；
• Layout.Sider支持響應式布局：配置 breakpoint屬性即生效，視窗寬度小于 breakpoint 時 Sider 縮小為 collapsedWidth寬度，若將 collapsedWidth設置為零，會出現特殊 trigger；
• 當內容較長時，使用固定側邊欄可以提供更好的體驗：a-layout-sider設置為fixed定位；
• 若想頭部固定，可以設置a-layout-header為fixed定位

經典布局：

<a-layout id="components-layout-demo-top-side-2"><a-layout-header class="header"><div class="logo" /><a-menutheme="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><a-layout-sider width="200" style="background: #fff"><a-menumode="inline":default-selected-keys="['1']":default-open-keys="['sub1']":style="{ height: '100%', borderRight: 0 }"><a-sub-menu key="sub1"><span slot="title"><a-icon type="user" />subnav 1</span><a-menu-item key="1">option1</a-menu-item><a-menu-item key="2">option2</a-menu-item><a-menu-item key="3">option3</a-menu-item><a-menu-item key="4">option4</a-menu-item></a-sub-menu><a-sub-menu key="sub2"><span slot="title"><a-icon type="laptop" />subnav 2</span><a-menu-item key="5">option5</a-menu-item><a-menu-item key="6">option6</a-menu-item><a-menu-item key="7">option7</a-menu-item><a-menu-item key="8">option8</a-menu-item></a-sub-menu></a-menu></a-layout-sider><a-layout style="padding: 0 24px 24px"><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><a-layout-content:style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">Content</a-layout-content></a-layout></a-layout> </a-layout>

總結

以上是生活随笔為你收集整理的【Ant Design Vue】之layout布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。