style: update layout

feat-css-var
tangjinzhou 2022-03-01 15:22:09 +08:00
parent efea6b000e
commit 4320dd6434
6 changed files with 5 additions and 7 deletions

View File

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

View File

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

View File

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

View File

@ -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
侧边栏。

View File

@ -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;
}