style: update layout
parent
efea6b000e
commit
4320dd6434
|
@ -118,7 +118,7 @@ exports[`renders ./components/layout/demo/fixed.vue correctly 1`] = `
|
|||
|
||||
exports[`renders ./components/layout/demo/fixed-sider.vue correctly 1`] = `
|
||||
<section class="ant-layout ant-layout-has-sider">
|
||||
<aside style="overflow: auto; height: 100vh; position: fixed; left: 0px; max-width: 200px; min-width: 200px; width: 200px; flex: 0 0 200px;" class="ant-layout-sider ant-layout-sider-dark">
|
||||
<aside style="overflow: auto; height: 100vh; position: fixed; left: 0px; flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;" class="ant-layout-sider ant-layout-sider-dark">
|
||||
<div class="ant-layout-sider-children">
|
||||
<div class="logo"></div>
|
||||
<ul class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark" role="menu" data-menu-list="true">
|
||||
|
@ -171,7 +171,7 @@ exports[`renders ./components/layout/demo/fixed-sider.vue correctly 1`] = `
|
|||
<!---->
|
||||
</aside>
|
||||
<section class="ant-layout" style="margin-left: 200px;">
|
||||
<header class="ant-layout-header" style="padding: 0px; background: rgb(255, 255, 255);"></header>
|
||||
<header class="ant-layout-header" style="background: rgb(255, 255, 255); padding: 0px;"></header>
|
||||
<main class="ant-layout-content" style="margin: 24px 16px 0px; overflow: initial;">
|
||||
<div style="padding: 24px; background: rgb(255, 255, 255); text-align: center;"> ... <br> Really <br> ... <br> ... <br> ... <br> long <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> ... <br> content </div>
|
||||
</main>
|
||||
|
|
|
@ -17,7 +17,7 @@ When dealing with long content, a fixed sider can provide a better user experien
|
|||
|
||||
</docs>
|
||||
<template>
|
||||
<a-layout>
|
||||
<a-layout has-sider>
|
||||
<a-layout-sider :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }">
|
||||
<div class="logo" />
|
||||
<a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
|
||||
|
|
|
@ -80,8 +80,6 @@ The wrapper.
|
|||
| style | to customize the styles | object\|string | - |
|
||||
| hasSider | whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering | boolean | - |
|
||||
|
||||
> APIs of `Layout.Header` `Layout.Footer` `Layout.Content` are the same as that of `Layout`.
|
||||
|
||||
### Layout.Sider
|
||||
|
||||
The sidebar.
|
||||
|
|
|
@ -81,8 +81,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/hzEndUVEx/Layout.svg
|
|||
| style | 指定样式 | object | - |
|
||||
| hasSider | 表示子元素里有 Sider,一般不用指定。可用于服务端渲染时避免样式闪动 | boolean | - |
|
||||
|
||||
> `Layout.Header` `Layout.Footer` `Layout.Content` API 与 `Layout` 相同
|
||||
|
||||
### Layout.Sider
|
||||
|
||||
侧边栏。
|
||||
|
|
|
@ -8,6 +8,7 @@
|
|||
display: flex;
|
||||
flex: auto;
|
||||
flex-direction: column;
|
||||
|
||||
/* fix firefox can't set height smaller than content on flex item */
|
||||
min-height: 0;
|
||||
background: @layout-body-background;
|
||||
|
@ -48,6 +49,7 @@
|
|||
|
||||
&-content {
|
||||
flex: auto;
|
||||
|
||||
/* fix firefox can't set height smaller than content on flex item */
|
||||
min-height: 0;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue