home/ant-design
2
0
Fork 0
mirror of https://github.com/wahyd4/ant-design.git synced 2026-08-16 00:06:26 +10:00
Code Issues Packages Projects Releases Wiki Activity
Files
b7f7cb8708a8d55ebef372a0ed65e596cfd8d94f
ant-design/docs/spec/layout.html
T
Wei Zhu 941cd3d61b Updates
2017-01-21 00:48:58 +08:00

996 lines
147 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An enterprise-class UI design language and React-based implementation">
<meta name="description" content="A set of high-quality React components">
<meta name="description" content="One of best React UI library for enterprise background">
<title>Ant Design - A UI Design Language</title>
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.cnpmjs.org/css?family=Lato:400,700|Raleway"/>
<link rel="stylesheet" type="text/css" href="/index.css"/>
<style id="nprogress-style">
#nprogress { display: none }
</style>
<!--[if lte IE 10]>
<script
src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
<![endif]-->
<script>
if (!window.Intl) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
}
if (!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>');
}
</script>
<script>
// Enable Google Analytics
if (!location.port) {
/* eslint-disable */
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-72788897-1', 'auto');
ga('send', 'pageview');
/* eslint-enable */
}
</script>
</head>
<body>
<div id="react-content">
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="1747175934"><header id="header" class="clearfix" data-reactid="2"><div class="ant-row" data-reactid="3"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="4"><a id="logo" href="/" data-reactid="5"><img alt="logo" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" data-reactid="6"/><span data-reactid="7">Ant Design</span></a></div><div class="ant-col-xs-0 ant-col-sm-0 ant-col-md-18 ant-col-lg-20" data-reactid="8"><div id="search-box" data-reactid="9"><div class="ant-select ant-select-combobox ant-select-enabled" data-reactid="10"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="11"><div class="ant-select-selection__rendered" data-reactid="12"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="13">Search Components...</div><ul data-reactid="14"><li class="ant-select-search ant-select-search--inline" data-reactid="15"><div class="ant-select-search__field__wrap" data-reactid="16"><input value="" class="ant-select-search__field" data-reactid="17"/><span class="ant-select-search__field__mirror" data-reactid="18"></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="19"><b data-reactid="20"></b></span></div></div></div><button type="button" class="ant-btn ant-btn-ghost ant-btn-sm lang" data-reactid="21"><span data-reactid="22">中文</span></button><ul class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" id="nav" tabindex="0" data-reactid="23"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="24"><a href="/" data-reactid="25"><span data-reactid="26">Home</span></a></li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="27"><a href="/docs/spec/introduce" data-reactid="28"><span data-reactid="29">Specification</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="30"><a href="/docs/react/introduce" data-reactid="31"><span data-reactid="32">Components</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="33"><a href="/docs/pattern/navigation" data-reactid="34"><span data-reactid="35">Pattern</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="36"><a href="/docs/practice/cases" data-reactid="37"><span data-reactid="38">Practice</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="39"><a href="/docs/resource/download" data-reactid="40"><span data-reactid="41">Resource</span></a></li></ul></div></div></header><div class="main-wrapper" data-reactid="42"><div class="ant-row" data-reactid="43"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="44"><ul class="ant-menu ant-menu-inline aside-container ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="45"><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="46"><a href="/docs/spec/introduce" data-reactid="47">Ant Design</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="48"><a href="/docs/spec/feature" data-reactid="49">Features</a></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu" data-reactid="50"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Principles$Menu" aria-haspopup="true" data-reactid="51"><h4 data-reactid="52">Principles</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="Principles$Menu" data-reactid="53"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="54"><a href="/docs/spec/principle" data-reactid="55">Introduction</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="56"><a href="/docs/spec/proximity" data-reactid="57">Proximity</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="58"><a href="/docs/spec/alignment" data-reactid="59">Alignment</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="60"><a href="/docs/spec/contrast" data-reactid="61">Contrast</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="62"><a href="/docs/spec/repetition" data-reactid="63">Repetition</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="64"><a href="/docs/spec/direct" data-reactid="65">Make it Direct</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="66"><a href="/docs/spec/stay" data-reactid="67">Stay on the Page</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="68"><a href="/docs/spec/lightweight" data-reactid="69">Keep it Lightweight</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="70"><a href="/docs/spec/invitation" data-reactid="71">Provide an Invitation</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="72"><a href="/docs/spec/transition" data-reactid="73">Use Transition</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="74"><a href="/docs/spec/reaction" data-reactid="75">React Immediately</a></li></ul></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu" data-reactid="76"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Design Fundamental$Menu" aria-haspopup="true" data-reactid="77"><h4 data-reactid="78">Design Fundamental</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="Design Fundamental$Menu" data-reactid="79"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="80"><a href="/docs/spec/font" data-reactid="81">Font</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="82"><a href="/docs/spec/typography" data-reactid="83">Typography</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="84"><a href="/docs/spec/colors" data-reactid="85">Colors</a></li><li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="86"><a href="/docs/spec/layout" data-reactid="87">Layout</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="88"><a href="/docs/spec/motion" data-reactid="89">Motion</a></li></ul></li></ul></div><div class="main-container ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-lg-20" data-reactid="90"><article data-reactid="91"><div class="toc-affix" data-reactid="92"><div class="" data-reactid="93"><ul class="toc demos-anchor" data-reactid="94"><li title="顶部导航" data-reactid="95"><a href="#docs-spec-layout-demo-top" data-reactid="96">顶部导航</a></li><li title="顶部导航 + 侧边栏" data-reactid="97"><a href="#docs-spec-layout-demo-top-aside" data-reactid="98">顶部导航 + 侧边栏</a></li><li title="侧边导航" data-reactid="99"><a href="#docs-spec-layout-demo-aside" data-reactid="100">侧边导航</a></li><li title="吊顶规范" data-reactid="101"><a href="#docs-spec-layout-demo-ceiling" data-reactid="102">吊顶规范</a></li><li title="可收起展开的侧边导航" data-reactid="103"><a href="#docs-spec-layout-demo-aside-collapse" data-reactid="104">可收起展开的侧边导航</a></li></ul></div></div><section class="markdown" data-reactid="105"><h1 data-reactid="106"><!-- react-text: 107 -->Layout<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/docs/spec/layout/index.md" data-reactid="108"><i class="anticon anticon-edit" data-reactid="109"></i></a></h1><section class="markdown" data-reactid="110"><p data-reactid="111"><!-- react-text: 112 -->布局和导航是产品的骨架，是页面的重要构成模式之一，是作为后续展开页面设计的基础，可以为产品奠定交互和视觉风格。<!-- /react-text --></p><p data-reactid="113"><!-- react-text: 114 -->Ant Design 的布局和导航设计规范如下：<!-- /react-text --></p><h3 id="尺寸规则" data-reactid="115"><span data-reactid="116"><!-- react-text: 117 -->尺寸规则<!-- /react-text --></span><a href="#尺寸规则" class="anchor" data-reactid="118">#</a></h3><p data-reactid="119"><!-- react-text: 120 -->一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。<!-- /react-text --></p><ul data-reactid="121"><li data-reactid="122"><p data-reactid="123"><!-- react-text: 124 -->顶部导航（大部分系统）：一级导航高度 <!-- /react-text --><code data-reactid="125"><!-- react-text: 126 -->64px<!-- /react-text --></code><!-- react-text: 127 -->，二级导航 <!-- /react-text --><code data-reactid="128"><!-- react-text: 129 -->48px<!-- /react-text --></code><!-- react-text: 130 -->。<!-- /react-text --></p></li><li data-reactid="131"><p data-reactid="132"><!-- react-text: 133 -->顶部导航（展示类页面）：一级导航高度 <!-- /react-text --><code data-reactid="134"><!-- react-text: 135 -->80px<!-- /react-text --></code><!-- react-text: 136 -->,二级导航 <!-- /react-text --><code data-reactid="137"><!-- react-text: 138 -->56px<!-- /react-text --></code><!-- react-text: 139 -->。<!-- /react-text --></p></li><li data-reactid="140"><p data-reactid="141"><!-- react-text: 142 -->顶部导航高度的范围计算公式为：<!-- /react-text --><code data-reactid="143"><!-- react-text: 144 -->48+8n<!-- /react-text --></code><!-- react-text: 145 -->。<!-- /react-text --></p></li><li data-reactid="146"><p data-reactid="147"><!-- react-text: 148 -->侧边导航宽度的范围计算公式：<!-- /react-text --><code data-reactid="149"><!-- react-text: 150 -->200+8n<!-- /react-text --></code><!-- react-text: 151 -->。<!-- /react-text --></p></li></ul><h3 id="交互原则" data-reactid="152"><span data-reactid="153"><!-- react-text: 154 -->交互原则<!-- /react-text --></span><a href="#交互原则" class="anchor" data-reactid="155">#</a></h3><ul data-reactid="156"><li data-reactid="157"><p data-reactid="158"><!-- react-text: 159 -->一级导航和末级的导航需要在可视化的层面被强调出来；<!-- /react-text --></p></li><li data-reactid="160"><p data-reactid="161"><!-- react-text: 162 -->当前项应该在呈现上优先级最高；<!-- /react-text --></p></li><li data-reactid="163"><p data-reactid="164"><!-- react-text: 165 -->当导航收起的时候，当前项的样式自动赋予给它的上一个层级；<!-- /react-text --></p></li><li data-reactid="166"><p data-reactid="167"><!-- react-text: 168 -->左侧导航栏的收放交互同时支持手风琴和全展开的样式，根据业务的要求进行适当的选择。<!-- /react-text --></p></li></ul><h3 id="视觉原则" data-reactid="169"><span data-reactid="170"><!-- react-text: 171 -->视觉原则<!-- /react-text --></span><a href="#视觉原则" class="anchor" data-reactid="172">#</a></h3><p data-reactid="173"><!-- react-text: 174 -->导航样式上需要根据信息层级合理的选择样式：<!-- /react-text --></p><ul data-reactid="175"><li data-reactid="176"><p data-reactid="177"><strong data-reactid="178"><!-- react-text: 179 -->大色块强调<!-- /react-text --></strong></p><p data-reactid="180"><!-- react-text: 181 -->建议用于底色为深色系时，当前页面父级的导航项。<!-- /react-text --></p></li><li data-reactid="182"><p data-reactid="183"><strong data-reactid="184"><!-- react-text: 185 -->高亮火柴棍<!-- /react-text --></strong></p><p data-reactid="186"><!-- react-text: 187 -->当导航栏底色为浅色系时使用，可用于当前页面对应导航项，建议尽量在导航路径的最终项使用。<!-- /react-text --></p></li><li data-reactid="188"><p data-reactid="189"><strong data-reactid="190"><!-- react-text: 191 -->字体高亮变色<!-- /react-text --></strong></p><p data-reactid="192"><!-- react-text: 193 -->从可视化层面，字体高亮的视觉强化力度低于大色块，通常在当前项的上一级使用。<!-- /react-text --></p></li><li data-reactid="194"><p data-reactid="195"><strong data-reactid="196"><!-- react-text: 197 -->字体放大<!-- /react-text --></strong></p><p data-reactid="198"><code data-reactid="199"><!-- react-text: 200 -->12px<!-- /react-text --></code><!-- react-text: 201 -->、<!-- /react-text --><code data-reactid="202"><!-- react-text: 203 -->14px<!-- /react-text --></code><!-- react-text: 204 --> 是导航的标准字号，14 号字体用在一、二级导航中。字号可以考虑导航项的等级做相应选择。<!-- /react-text --></p></li></ul><p data-reactid="205"><!-- react-text: 206 -->在大中后台系统中，Ant Design 使用两种常见的布局形式，顶部导航布局和侧边导航布局，以下收集了使用 Ant Design 设计的中后台产品的基本布局。<!-- /react-text --></p></section><h2 data-reactid="207"><span data-reactid="208">Examples</span><i class="anticon anticon-appstore code-box-expand-trigger" title="展开全部代码" data-reactid="209"></i></h2></section><div class="ant-row" style="margin-left:-8px;margin-right:-8px;" data-reactid="210"><div style="padding-left:8px;padding-right:8px;" class="ant-col-24 code-boxes-col-1-1" data-reactid="211"><section class="code-box" id="docs-spec-layout-demo-top" data-reactid="212"><section class="code-box-demo" data-reactid="213"><article class="window-frame focus" data-reactid="214"><header class="top-bar" data-reactid="215"><div class="controls" data-reactid="216"><div class="control close" data-reactid="217"></div><div class="control minify" data-reactid="218"></div><div class="control expand" data-reactid="219"></div></div><input class="address-bar" value="http://www.example.com" data-reactid="220"/></header><section class="window-content" data-reactid="221"><div class="layout-top" data-reactid="222"><div class="layout-header" data-reactid="223"><div class="layout-wrapper" data-reactid="224"><div class="layout-logo" data-reactid="225"></div><ul style="line-height:64px;" class="ant-menu ant-menu-horizontal ant-menu-dark ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="226"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="227">导航一</li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="228">导航二</li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="229">导航三</li></ul></div></div><div class="layout-subheader" data-reactid="230"><div class="layout-wrapper" data-reactid="231"><ul style="margin-left:124px;" class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="232"><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="233">二级导航</li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="234">二级导航</li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="235">二级导航</li></ul></div></div><div class="layout-wrapper" data-reactid="236"><div class="ant-breadcrumb" data-reactid="237"><span data-reactid="238"><span class="ant-breadcrumb-link" data-reactid="239">首页</span><span class="ant-breadcrumb-separator" data-reactid="240">/</span></span><span data-reactid="241"><span class="ant-breadcrumb-link" data-reactid="242">应用列表</span><span class="ant-breadcrumb-separator" data-reactid="243">/</span></span><span data-reactid="244"><span class="ant-breadcrumb-link" data-reactid="245">某应用</span><span class="ant-breadcrumb-separator" data-reactid="246">/</span></span></div><div class="layout-container" data-reactid="247"><div style="height:210px;" data-reactid="248"></div></div></div><div class="layout-footer" data-reactid="249">Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持</div></div></section></article><style data-reactid="250">.layout-top {
height: 100%;
}
.layout-top .layout-wrapper {
padding: 0 50px;
}
.layout-top .layout-header {
background: #404040;
height: 64px;
}
.layout-top .layout-logo {
width: 120px;
height: 32px;
background: #333;
border-radius: 4px;
margin: 16px 24px 16px 0;
float: left;
}
.layout-top .layout-subheader {
height: 48px;
border-bottom: 1px solid #e9e9e9;
background: #fff;
margin-bottom: 12px;
}
.layout-top .layout-container {
background: #fff;
margin: 12px 0 0;
position: relative;
padding-top: 24px;
overflow: hidden;
border-radius: 4px;
}
.layout-top .layout-footer {
height: 64px;
line-height: 64px;
text-align: center;
font-size: 12px;
color: #999;
}</style></section><section class="code-box-meta markdown" data-reactid="251"><div class="code-box-title" data-reactid="252"><a href="#docs-spec-layout-demo-top" data-reactid="253">顶部导航</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/docs/spec/layout/demo/top.md" data-reactid="254"><i class="anticon anticon-edit" data-reactid="255"></i></a></div><div data-reactid="256"><p data-reactid="257"><!-- react-text: 258 -->一二级导航都在顶部。<!-- /react-text --></p><p data-reactid="259"><!-- react-text: 260 -->顶部导航在页面布局上采用的是上下的结构，一般主导航放置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器影响；上下级的结构符合用户上下浏览的习惯，也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不适合那些一级导航项很多的信息结构。<!-- /react-text --></p><blockquote data-reactid="261"><p data-reactid="262"><code data-reactid="263"><!-- react-text: 264 -->&lt;BrowserDemo /&gt;<!-- /react-text --></code><!-- react-text: 265 --> 做演示用，无须复制。<!-- /react-text --></p></blockquote></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="266"></i></section><section class="highlight-wrapper" data-reactid="267"><div class="highlight" data-reactid="268"><pre class="language-__react" data-reactid="269"><code data-reactid="270">import { Menu<span class="token punctuation">,</span> Breadcrumb } from <span class="token string">'antd'</span><span class="token comment" spellcheck="true">;</span>
import BrowserDemo from <span class="token string">'site/theme/template/BrowserDemo'</span><span class="token comment" spellcheck="true">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token operator">&lt;</span>BrowserDemo<span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-top"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-header"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-wrapper"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-logo"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu theme<span class="token operator">=</span><span class="token string">"dark"</span> mode<span class="token operator">=</span><span class="token string">"horizontal"</span>
defaultSelectedKeys<span class="token operator">=</span>{<span class="token punctuation">[</span><span class="token string">'2'</span><span class="token punctuation">]</span>} style<span class="token operator">=</span>{{lineHeight<span class="token punctuation">:</span> <span class="token string">'64px'</span>}}<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"1"</span><span class="token operator">></span>导航一<span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"2"</span><span class="token operator">></span>导航二<span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"3"</span><span class="token operator">></span>导航三<span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-subheader"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-wrapper"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Menu mode<span class="token operator">=</span><span class="token string">"horizontal"</span>
defaultSelectedKeys<span class="token operator">=</span>{<span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">]</span>} style<span class="token operator">=</span>{{marginLeft<span class="token punctuation">:</span> <span class="token number">124</span>}}<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"1"</span><span class="token operator">></span>二级导航<span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"2"</span><span class="token operator">></span>二级导航<span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"3"</span><span class="token operator">></span>二级导航<span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-wrapper"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Breadcrumb<span class="token operator">></span>
<span class="token operator">&lt;</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>首页<span class="token operator">&lt;</span><span class="token operator">/</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>应用列表<span class="token operator">&lt;</span><span class="token operator">/</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>某应用<span class="token operator">&lt;</span><span class="token operator">/</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Breadcrumb<span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-container"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>div style<span class="token operator">=</span>{{ height<span class="token punctuation">:</span> <span class="token number">210</span> }}<span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-footer"</span><span class="token operator">></span>
Ant Design 版权所有 © <span class="token number">2015</span> 由蚂蚁金服体验技术部支持
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>BrowserDemo<span class="token operator">></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span></code></pre></div><div class="highlight" data-reactid="271"><pre data-reactid="272"><code class="css" data-reactid="273"><span class="token selector"><span class="token class">.layout-top</span> </span><span class="token punctuation">{</span>
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-top</span> <span class="token class">.layout-wrapper</span> </span><span class="token punctuation">{</span>
<span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">50</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-top</span> <span class="token class">.layout-header</span> </span><span class="token punctuation">{</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#404040</span><span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">64</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-top</span> <span class="token class">.layout-logo</span> </span><span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">120</span>px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">32</span>px<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#333</span><span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">4</span>px<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">16</span>px <span class="token number">24</span>px <span class="token number">16</span>px <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-top</span> <span class="token class">.layout-subheader</span> </span><span class="token punctuation">{</span>
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">48</span>px<span class="token punctuation">;</span>
<span class="token property">border-bottom</span><span class="token punctuation">:</span> <span class="token number">1</span>px solid <span class="token hexcode">#e9e9e9</span><span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
<span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token number">12</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-top</span> <span class="token class">.layout-container</span> </span><span class="token punctuation">{</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">12</span>px <span class="token number">0</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token property">padding-top</span><span class="token punctuation">:</span> <span class="token number">24</span>px<span class="token punctuation">;</span>
<span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">4</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-top</span> <span class="token class">.layout-footer</span> </span><span class="token punctuation">{</span>
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">64</span>px<span class="token punctuation">;</span>
<span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">64</span>px<span class="token punctuation">;</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">12</span>px<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#999</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="docs-spec-layout-demo-top-aside" data-reactid="274"><section class="code-box-demo" data-reactid="275"><article class="window-frame focus" data-reactid="276"><header class="top-bar" data-reactid="277"><div class="controls" data-reactid="278"><div class="control close" data-reactid="279"></div><div class="control minify" data-reactid="280"></div><div class="control expand" data-reactid="281"></div></div><input class="address-bar" value="http://www.example.com" data-reactid="282"/></header><section class="window-content" data-reactid="283"><div class="layout-topaside" data-reactid="284"><div class="layout-header" data-reactid="285"><div class="layout-wrapper" data-reactid="286"><div class="layout-logo" data-reactid="287"></div><ul style="line-height:64px;" class="ant-menu ant-menu-horizontal ant-menu-dark ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="288"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="289">导航一</li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="290">导航二</li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="291">导航三</li></ul></div></div><div class="layout-subheader" data-reactid="292"><div class="layout-wrapper" data-reactid="293"><ul style="margin-left:124px;" class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="294"><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="295">二级导航</li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="296">二级导航</li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="297">二级导航</li></ul></div></div><div class="layout-wrapper" data-reactid="298"><div class="ant-breadcrumb" data-reactid="299"><span data-reactid="300"><span class="ant-breadcrumb-link" data-reactid="301">首页</span><span class="ant-breadcrumb-separator" data-reactid="302">/</span></span><span data-reactid="303"><span class="ant-breadcrumb-link" data-reactid="304">应用列表</span><span class="ant-breadcrumb-separator" data-reactid="305">/</span></span><span data-reactid="306"><span class="ant-breadcrumb-link" data-reactid="307">某应用</span><span class="ant-breadcrumb-separator" data-reactid="308">/</span></span></div><div class="layout-container" data-reactid="309"><aside class="layout-sider" data-reactid="310"><ul class="ant-menu ant-menu-inline ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="311"><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu" data-reactid="312"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" data-reactid="313"><span data-reactid="314"><i class="anticon anticon-user" data-reactid="315"></i><!-- react-text: 316 -->导航一<!-- /react-text --></span></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="sub1$Menu" data-reactid="317"><li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="318">选项1</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="319">选项2</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="320">选项3</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="321">选项4</li></ul></li><li class="ant-menu-submenu-inline ant-menu-submenu" data-reactid="322"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="false" aria-owns="sub2$Menu" aria-haspopup="true" data-reactid="323"><span data-reactid="324"><i class="anticon anticon-laptop" data-reactid="325"></i><!-- react-text: 326 -->导航二<!-- /react-text --></span></div><!-- react-empty: 327 --></li><li class="ant-menu-submenu-inline ant-menu-submenu" data-reactid="328"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="false" aria-owns="sub3$Menu" aria-haspopup="true" data-reactid="329"><span data-reactid="330"><i class="anticon anticon-notification" data-reactid="331"></i><!-- react-text: 332 -->导航三<!-- /react-text --></span></div><!-- react-empty: 333 --></li></ul></aside><div class="layout-content" data-reactid="334"><div style="height:240px;" data-reactid="335"><div style="clear:both;" data-reactid="336">内容区域</div></div></div></div><div class="layout-footer" data-reactid="337">Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持</div></div></div></section></article><style data-reactid="338">.layout-topaside {
height: 100%;
}
.layout-topaside .layout-wrapper {
padding: 0 50px;
}
.layout-topaside .layout-header {
background: #404040;
height: 64px;
}
.layout-topaside .layout-logo {
width: 120px;
height: 32px;
background: #333;
border-radius: 4px;
margin: 16px 24px 16px 0;
float: left;
}
.layout-topaside .layout-subheader {
height: 48px;
border-bottom: 1px solid #e9e9e9;
background: #fff;
margin-bottom: 12px;
}
.layout-topaside .layout-container {
background: #fff;
margin: 12px 0 0;
position: relative;
padding: 24px 0;
overflow: hidden;
border-radius: 4px;
}
.layout-topaside .layout-sider {
width: 224px;
float: left;
}
.layout-topaside .layout-content {
border-left: 1px solid #e9e9e9;
padding: 0 24px;
overflow: auto;
position: relative;
left: -1px;
}
.layout-topaside .layout-footer {
height: 64px;
line-height: 64px;
text-align: center;
font-size: 12px;
color: #999;
}</style></section><section class="code-box-meta markdown" data-reactid="339"><div class="code-box-title" data-reactid="340"><a href="#docs-spec-layout-demo-top-aside" data-reactid="341">顶部导航 + 侧边栏</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/docs/spec/layout/demo/top-aside.md" data-reactid="342"><i class="anticon anticon-edit" data-reactid="343"></i></a></div><div data-reactid="344"><p data-reactid="345"><!-- react-text: 346 -->顶级导航在头部，次级导航在侧边栏。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="347"></i></section><section class="highlight-wrapper" data-reactid="348"><div class="highlight" data-reactid="349"><pre class="language-__react" data-reactid="350"><code data-reactid="351">import { Menu<span class="token punctuation">,</span> Breadcrumb<span class="token punctuation">,</span> Icon } from <span class="token string">'antd'</span><span class="token comment" spellcheck="true">;</span>
import BrowserDemo from <span class="token string">'site/theme/template/BrowserDemo'</span><span class="token comment" spellcheck="true">;</span>
<span class="token keyword">const</span> SubMenu <span class="token operator">=</span> Menu<span class="token punctuation">.</span>SubMenu<span class="token comment" spellcheck="true">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token operator">&lt;</span>BrowserDemo<span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-topaside"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-header"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-wrapper"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-logo"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu theme<span class="token operator">=</span><span class="token string">"dark"</span> mode<span class="token operator">=</span><span class="token string">"horizontal"</span>
defaultSelectedKeys<span class="token operator">=</span>{<span class="token punctuation">[</span><span class="token string">'2'</span><span class="token punctuation">]</span>} style<span class="token operator">=</span>{{lineHeight<span class="token punctuation">:</span> <span class="token string">'64px'</span>}}<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"1"</span><span class="token operator">></span>导航一<span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"2"</span><span class="token operator">></span>导航二<span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"3"</span><span class="token operator">></span>导航三<span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-subheader"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-wrapper"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Menu mode<span class="token operator">=</span><span class="token string">"horizontal"</span>
defaultSelectedKeys<span class="token operator">=</span>{<span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">]</span>} style<span class="token operator">=</span>{{marginLeft<span class="token punctuation">:</span> <span class="token number">124</span>}}<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"1"</span><span class="token operator">></span>二级导航<span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"2"</span><span class="token operator">></span>二级导航<span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"3"</span><span class="token operator">></span>二级导航<span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-wrapper"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Breadcrumb<span class="token operator">></span>
<span class="token operator">&lt;</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>首页<span class="token operator">&lt;</span><span class="token operator">/</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>应用列表<span class="token operator">&lt;</span><span class="token operator">/</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>某应用<span class="token operator">&lt;</span><span class="token operator">/</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Breadcrumb<span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-container"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>aside className<span class="token operator">=</span><span class="token string">"layout-sider"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Menu mode<span class="token operator">=</span><span class="token string">"inline"</span> defaultSelectedKeys<span class="token operator">=</span>{<span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">]</span>} defaultOpenKeys<span class="token operator">=</span>{<span class="token punctuation">[</span><span class="token string">'sub1'</span><span class="token punctuation">]</span>}<span class="token operator">></span>
<span class="token operator">&lt;</span>SubMenu key<span class="token operator">=</span><span class="token string">"sub1"</span> title<span class="token operator">=</span>{<span class="token operator">&lt;</span>span<span class="token operator">></span><span class="token operator">&lt;</span>Icon type<span class="token operator">=</span><span class="token string">"user"</span> <span class="token operator">/</span><span class="token operator">></span>导航一<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span>}<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"1"</span><span class="token operator">></span>选项<span class="token number">1</span><span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"2"</span><span class="token operator">></span>选项<span class="token number">2</span><span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"3"</span><span class="token operator">></span>选项<span class="token number">3</span><span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"4"</span><span class="token operator">></span>选项<span class="token number">4</span><span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>SubMenu<span class="token operator">></span>
<span class="token operator">&lt;</span>SubMenu key<span class="token operator">=</span><span class="token string">"sub2"</span> title<span class="token operator">=</span>{<span class="token operator">&lt;</span>span<span class="token operator">></span><span class="token operator">&lt;</span>Icon type<span class="token operator">=</span><span class="token string">"laptop"</span> <span class="token operator">/</span><span class="token operator">></span>导航二<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span>}<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"5"</span><span class="token operator">></span>选项<span class="token number">5</span><span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"6"</span><span class="token operator">></span>选项<span class="token number">6</span><span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"7"</span><span class="token operator">></span>选项<span class="token number">7</span><span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"8"</span><span class="token operator">></span>选项<span class="token number">8</span><span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>SubMenu<span class="token operator">></span>
<span class="token operator">&lt;</span>SubMenu key<span class="token operator">=</span><span class="token string">"sub3"</span> title<span class="token operator">=</span>{<span class="token operator">&lt;</span>span<span class="token operator">></span><span class="token operator">&lt;</span>Icon type<span class="token operator">=</span><span class="token string">"notification"</span> <span class="token operator">/</span><span class="token operator">></span>导航三<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span>}<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"9"</span><span class="token operator">></span>选项<span class="token number">9</span><span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"10"</span><span class="token operator">></span>选项<span class="token number">10</span><span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"11"</span><span class="token operator">></span>选项<span class="token number">11</span><span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"12"</span><span class="token operator">></span>选项<span class="token number">12</span><span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>SubMenu<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>aside<span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-content"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>div style<span class="token operator">=</span>{{ height<span class="token punctuation">:</span> <span class="token number">240</span> }}<span class="token operator">></span>
<span class="token operator">&lt;</span>div style<span class="token operator">=</span>{{clear<span class="token punctuation">:</span> <span class="token string">'both'</span>}}<span class="token operator">></span>内容区域<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-footer"</span><span class="token operator">></span>
Ant Design 版权所有 © <span class="token number">2015</span> 由蚂蚁金服体验技术部支持
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>BrowserDemo<span class="token operator">></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span></code></pre></div><div class="highlight" data-reactid="352"><pre data-reactid="353"><code class="css" data-reactid="354"><span class="token selector"><span class="token class">.layout-topaside</span> </span><span class="token punctuation">{</span>
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-topaside</span> <span class="token class">.layout-wrapper</span> </span><span class="token punctuation">{</span>
<span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">50</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-topaside</span> <span class="token class">.layout-header</span> </span><span class="token punctuation">{</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#404040</span><span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">64</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-topaside</span> <span class="token class">.layout-logo</span> </span><span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">120</span>px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">32</span>px<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#333</span><span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">4</span>px<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">16</span>px <span class="token number">24</span>px <span class="token number">16</span>px <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-topaside</span> <span class="token class">.layout-subheader</span> </span><span class="token punctuation">{</span>
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">48</span>px<span class="token punctuation">;</span>
<span class="token property">border-bottom</span><span class="token punctuation">:</span> <span class="token number">1</span>px solid <span class="token hexcode">#e9e9e9</span><span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
<span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token number">12</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-topaside</span> <span class="token class">.layout-container</span> </span><span class="token punctuation">{</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">12</span>px <span class="token number">0</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">24</span>px <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">4</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-topaside</span> <span class="token class">.layout-sider</span> </span><span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">224</span>px<span class="token punctuation">;</span>
<span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-topaside</span> <span class="token class">.layout-content</span> </span><span class="token punctuation">{</span>
<span class="token property">border-left</span><span class="token punctuation">:</span> <span class="token number">1</span>px solid <span class="token hexcode">#e9e9e9</span><span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">24</span>px<span class="token punctuation">;</span>
<span class="token property">overflow</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token property">left</span><span class="token punctuation">:</span> -<span class="token number">1</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-topaside</span> <span class="token class">.layout-footer</span> </span><span class="token punctuation">{</span>
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">64</span>px<span class="token punctuation">;</span>
<span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">64</span>px<span class="token punctuation">;</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">12</span>px<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#999</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="docs-spec-layout-demo-aside" data-reactid="355"><section class="code-box-demo" data-reactid="356"><article class="window-frame focus" data-reactid="357"><header class="top-bar" data-reactid="358"><div class="controls" data-reactid="359"><div class="control close" data-reactid="360"></div><div class="control minify" data-reactid="361"></div><div class="control expand" data-reactid="362"></div></div><input class="address-bar" value="http://www.example.com" data-reactid="363"/></header><section class="window-content" data-reactid="364"><div class="layout-aside" data-reactid="365"><aside class="layout-sider" data-reactid="366"><div class="layout-logo" data-reactid="367"></div><ul class="ant-menu ant-menu-inline ant-menu-dark ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="368"><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu" data-reactid="369"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" data-reactid="370"><span data-reactid="371"><i class="anticon anticon-user" data-reactid="372"></i><!-- react-text: 373 -->导航一<!-- /react-text --></span></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="sub1$Menu" data-reactid="374"><li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="375">选项1</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="376">选项2</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="377">选项3</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="378">选项4</li></ul></li><li class="ant-menu-submenu-inline ant-menu-submenu" data-reactid="379"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="false" aria-owns="sub2$Menu" aria-haspopup="true" data-reactid="380"><span data-reactid="381"><i class="anticon anticon-laptop" data-reactid="382"></i><!-- react-text: 383 -->导航二<!-- /react-text --></span></div><!-- react-empty: 384 --></li><li class="ant-menu-submenu-inline ant-menu-submenu" data-reactid="385"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="false" aria-owns="sub3$Menu" aria-haspopup="true" data-reactid="386"><span data-reactid="387"><i class="anticon anticon-notification" data-reactid="388"></i><!-- react-text: 389 -->导航三<!-- /react-text --></span></div><!-- react-empty: 390 --></li></ul></aside><div class="layout-main" data-reactid="391"><div class="layout-header" data-reactid="392"></div><div class="layout-container" data-reactid="393"><div class="ant-breadcrumb" data-reactid="394"><span data-reactid="395"><span class="ant-breadcrumb-link" data-reactid="396">首页</span><span class="ant-breadcrumb-separator" data-reactid="397">/</span></span><span data-reactid="398"><span class="ant-breadcrumb-link" data-reactid="399">应用列表</span><span class="ant-breadcrumb-separator" data-reactid="400">/</span></span><span data-reactid="401"><span class="ant-breadcrumb-link" data-reactid="402">某应用</span><span class="ant-breadcrumb-separator" data-reactid="403">/</span></span></div><div class="layout-content" data-reactid="404"><div style="height:590px;" data-reactid="405">内容区域</div></div></div><div class="layout-footer" data-reactid="406">Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持</div></div></div></section></article><style data-reactid="407">.layout-aside {
position: relative;
min-height: 100%;
}
.layout-aside .layout-logo {
height: 32px;
background: #333;
border-radius: 4px;
margin: 16px 24px;
}
.layout-aside .layout-sider {
width: 224px;
background: #404040;
position: absolute;
overflow: auto;
padding-bottom: 24px;
height: 100%;
}
.layout-aside .layout-sider > .menu {
margin-bottom: 20px;
}
.layout-aside .layout-header {
background: #fff;
height: 64px;
border-bottom: 1px solid #e9e9e9;
}
.layout-aside .layout-main {
margin-left: 224px;
}
.layout-aside .layout-container {
margin: 12px 16px 24px;
}
.layout-aside .layout-content {
background: #fff;
padding: 24px;
margin-top: 12px;
border-radius: 4px;
}
.layout-aside .layout-footer {
height: 64px;
line-height: 64px;
text-align: center;
font-size: 12px;
color: #999;
background: #fff;
border-top: 1px solid #e9e9e9;
width: 100%;
}</style></section><section class="code-box-meta markdown" data-reactid="408"><div class="code-box-title" data-reactid="409"><a href="#docs-spec-layout-demo-aside" data-reactid="410">侧边导航</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/docs/spec/layout/demo/aside.md" data-reactid="411"><i class="anticon anticon-edit" data-reactid="412"></i></a></div><div data-reactid="413"><p data-reactid="414"><!-- react-text: 415 -->顶级导航在侧边栏。<!-- /react-text --></p><p data-reactid="416"><!-- react-text: 417 -->侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="418"></i></section><section class="highlight-wrapper" data-reactid="419"><div class="highlight" data-reactid="420"><pre class="language-__react" data-reactid="421"><code data-reactid="422">import { Menu<span class="token punctuation">,</span> Breadcrumb<span class="token punctuation">,</span> Icon } from <span class="token string">'antd'</span><span class="token comment" spellcheck="true">;</span>
import BrowserDemo from <span class="token string">'site/theme/template/BrowserDemo'</span><span class="token comment" spellcheck="true">;</span>
<span class="token keyword">const</span> SubMenu <span class="token operator">=</span> Menu<span class="token punctuation">.</span>SubMenu<span class="token comment" spellcheck="true">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token operator">&lt;</span>BrowserDemo<span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-aside"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>aside className<span class="token operator">=</span><span class="token string">"layout-sider"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-logo"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu mode<span class="token operator">=</span><span class="token string">"inline"</span> theme<span class="token operator">=</span><span class="token string">"dark"</span>
defaultSelectedKeys<span class="token operator">=</span>{<span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">]</span>} defaultOpenKeys<span class="token operator">=</span>{<span class="token punctuation">[</span><span class="token string">'sub1'</span><span class="token punctuation">]</span>}<span class="token operator">></span>
<span class="token operator">&lt;</span>SubMenu key<span class="token operator">=</span><span class="token string">"sub1"</span> title<span class="token operator">=</span>{<span class="token operator">&lt;</span>span<span class="token operator">></span><span class="token operator">&lt;</span>Icon type<span class="token operator">=</span><span class="token string">"user"</span> <span class="token operator">/</span><span class="token operator">></span>导航一<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span>}<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"1"</span><span class="token operator">></span>选项<span class="token number">1</span><span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"2"</span><span class="token operator">></span>选项<span class="token number">2</span><span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"3"</span><span class="token operator">></span>选项<span class="token number">3</span><span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"4"</span><span class="token operator">></span>选项<span class="token number">4</span><span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>SubMenu<span class="token operator">></span>
<span class="token operator">&lt;</span>SubMenu key<span class="token operator">=</span><span class="token string">"sub2"</span> title<span class="token operator">=</span>{<span class="token operator">&lt;</span>span<span class="token operator">></span><span class="token operator">&lt;</span>Icon type<span class="token operator">=</span><span class="token string">"laptop"</span> <span class="token operator">/</span><span class="token operator">></span>导航二<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span>}<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"5"</span><span class="token operator">></span>选项<span class="token number">5</span><span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"6"</span><span class="token operator">></span>选项<span class="token number">6</span><span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"7"</span><span class="token operator">></span>选项<span class="token number">7</span><span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"8"</span><span class="token operator">></span>选项<span class="token number">8</span><span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>SubMenu<span class="token operator">></span>
<span class="token operator">&lt;</span>SubMenu key<span class="token operator">=</span><span class="token string">"sub3"</span> title<span class="token operator">=</span>{<span class="token operator">&lt;</span>span<span class="token operator">></span><span class="token operator">&lt;</span>Icon type<span class="token operator">=</span><span class="token string">"notification"</span> <span class="token operator">/</span><span class="token operator">></span>导航三<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span>}<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"9"</span><span class="token operator">></span>选项<span class="token number">9</span><span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"10"</span><span class="token operator">></span>选项<span class="token number">10</span><span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"11"</span><span class="token operator">></span>选项<span class="token number">11</span><span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"12"</span><span class="token operator">></span>选项<span class="token number">12</span><span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>SubMenu<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>aside<span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-main"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-header"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-container"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Breadcrumb<span class="token operator">></span>
<span class="token operator">&lt;</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>首页<span class="token operator">&lt;</span><span class="token operator">/</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>应用列表<span class="token operator">&lt;</span><span class="token operator">/</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>某应用<span class="token operator">&lt;</span><span class="token operator">/</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Breadcrumb<span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-content"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>div style<span class="token operator">=</span>{{ height<span class="token punctuation">:</span> <span class="token number">590</span> }}<span class="token operator">></span>
内容区域
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-footer"</span><span class="token operator">></span>
Ant Design 版权所有 © <span class="token number">2015</span> 由蚂蚁金服体验技术部支持
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>BrowserDemo<span class="token operator">></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span></code></pre></div><div class="highlight" data-reactid="423"><pre data-reactid="424"><code class="css" data-reactid="425"><span class="token selector"><span class="token class">.layout-aside</span> </span><span class="token punctuation">{</span>
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token property">min-height</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-logo</span> </span><span class="token punctuation">{</span>
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">32</span>px<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#333</span><span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">4</span>px<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">16</span>px <span class="token number">24</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-sider</span> </span><span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">224</span>px<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#404040</span><span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
<span class="token property">overflow</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token property">padding-bottom</span><span class="token punctuation">:</span> <span class="token number">24</span>px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-sider</span> > <span class="token class">.menu</span> </span><span class="token punctuation">{</span>
<span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token number">20</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-header</span> </span><span class="token punctuation">{</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">64</span>px<span class="token punctuation">;</span>
<span class="token property">border-bottom</span><span class="token punctuation">:</span> <span class="token number">1</span>px solid <span class="token hexcode">#e9e9e9</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-main</span> </span><span class="token punctuation">{</span>
<span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token number">224</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-container</span> </span><span class="token punctuation">{</span>
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">12</span>px <span class="token number">16</span>px <span class="token number">24</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-content</span> </span><span class="token punctuation">{</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">24</span>px<span class="token punctuation">;</span>
<span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token number">12</span>px<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">4</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-footer</span> </span><span class="token punctuation">{</span>
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">64</span>px<span class="token punctuation">;</span>
<span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">64</span>px<span class="token punctuation">;</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">12</span>px<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#999</span><span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
<span class="token property">border-top</span><span class="token punctuation">:</span> <span class="token number">1</span>px solid <span class="token hexcode">#e9e9e9</span><span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="docs-spec-layout-demo-ceiling" data-reactid="426"><section class="code-box-demo" data-reactid="427"><article class="window-frame focus" data-reactid="428"><header class="top-bar" data-reactid="429"><div class="controls" data-reactid="430"><div class="control close" data-reactid="431"></div><div class="control minify" data-reactid="432"></div><div class="control expand" data-reactid="433"></div></div><input class="address-bar" value="http://www.example.com" data-reactid="434"/></header><section class="window-content" data-reactid="435"><div class="layout-ceiling-demo" data-reactid="436"><div class="layout-ceiling" data-reactid="437"><div class="layout-wrapper" data-reactid="438"><ul class="right" data-reactid="439"><li data-reactid="440">xxx@example.com</li><li data-reactid="441">|</li><li data-reactid="442">帮助中心</li><li data-reactid="443">|</li><li data-reactid="444">客服/投诉电话：400-826-7710</li></ul></div></div><div class="layout-header" data-reactid="445"><div class="layout-wrapper" data-reactid="446"><div class="layout-logo" data-reactid="447"></div></div></div></div></section></article><style data-reactid="448">.layout-ceiling-demo {
height: 100%;
}
.layout-ceiling {
font-size: 12px;
height: 30px;
line-height: 30px;
background-color: #242736;
color: #ddd;
}
.layout-ceiling .right {
float: right;
}
.layout-ceiling ul li {
display: inline-block;
margin: 0 4px;
}
.layout-ceiling-demo .layout-wrapper {
padding: 0 50px;
}
.layout-ceiling-demo .layout-header {
background: #fff;
height: 64px;
border-bottom: 1px solid #e9e9e9;
}
.layout-ceiling-demo .layout-logo {
width: 120px;
height: 32px;
background: #eee;
border-radius: 4px;
margin: 16px 24px 16px 0;
float: left;
}</style></section><section class="code-box-meta markdown" data-reactid="449"><div class="code-box-title" data-reactid="450"><a href="#docs-spec-layout-demo-ceiling" data-reactid="451">吊顶规范</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/docs/spec/layout/demo/ceiling.md" data-reactid="452"><i class="anticon anticon-edit" data-reactid="453"></i></a></div><div data-reactid="454"><p data-reactid="455"><!-- react-text: 456 -->吊顶一般用于跨系统/应用场景，可以放置统一的登录/帮助信息。<!-- /react-text --></p><p data-reactid="457"><!-- react-text: 458 -->吊顶背景深色，高度 <!-- /react-text --><code data-reactid="459"><!-- react-text: 460 -->30px<!-- /react-text --></code><!-- react-text: 461 -->，和浅色调的主导航配合使用。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="462"></i></section><section class="highlight-wrapper" data-reactid="463"><div class="highlight" data-reactid="464"><pre class="language-__react" data-reactid="465"><code data-reactid="466">import { Menu<span class="token punctuation">,</span> Breadcrumb } from <span class="token string">'antd'</span><span class="token comment" spellcheck="true">;</span>
import BrowserDemo from <span class="token string">'site/theme/template/BrowserDemo'</span><span class="token comment" spellcheck="true">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
<span class="token operator">&lt;</span>BrowserDemo<span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-ceiling-demo"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-ceiling"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-wrapper"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>ul className<span class="token operator">=</span><span class="token string">"right"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>li<span class="token operator">></span>xxx<span class="token variable">@example</span><span class="token punctuation">.</span>com<span class="token operator">&lt;</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator">&lt;</span>li<span class="token operator">></span>|<span class="token operator">&lt;</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator">&lt;</span>li<span class="token operator">></span>帮助中心<span class="token operator">&lt;</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator">&lt;</span>li<span class="token operator">></span>|<span class="token operator">&lt;</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator">&lt;</span>li<span class="token operator">></span>客服<span class="token operator">/</span>投诉电话：<span class="token number">400</span><span class="token operator">-</span><span class="token number">826</span><span class="token operator">-</span><span class="token number">7710</span><span class="token operator">&lt;</span><span class="token operator">/</span>li<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>ul<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-header"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-wrapper"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-logo"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>BrowserDemo<span class="token operator">></span>
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span></code></pre></div><div class="highlight" data-reactid="467"><pre data-reactid="468"><code class="css" data-reactid="469"><span class="token selector"><span class="token class">.layout-ceiling-demo</span> </span><span class="token punctuation">{</span>
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-ceiling</span> </span><span class="token punctuation">{</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">12</span>px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">30</span>px<span class="token punctuation">;</span>
<span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">30</span>px<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token hexcode">#242736</span><span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#ddd</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-ceiling</span> <span class="token class">.right</span> </span><span class="token punctuation">{</span>
<span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-ceiling</span> ul li </span><span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">4</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-ceiling-demo</span> <span class="token class">.layout-wrapper</span> </span><span class="token punctuation">{</span>
<span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">50</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-ceiling-demo</span> <span class="token class">.layout-header</span> </span><span class="token punctuation">{</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">64</span>px<span class="token punctuation">;</span>
<span class="token property">border-bottom</span><span class="token punctuation">:</span> <span class="token number">1</span>px solid <span class="token hexcode">#e9e9e9</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-ceiling-demo</span> <span class="token class">.layout-logo</span> </span><span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">120</span>px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">32</span>px<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#eee</span><span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">4</span>px<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">16</span>px <span class="token number">24</span>px <span class="token number">16</span>px <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="docs-spec-layout-demo-aside-collapse" data-reactid="470"><section class="code-box-demo" data-reactid="471"><article class="window-frame focus" data-reactid="472"><header class="top-bar" data-reactid="473"><div class="controls" data-reactid="474"><div class="control close" data-reactid="475"></div><div class="control minify" data-reactid="476"></div><div class="control expand" data-reactid="477"></div></div><input class="address-bar" value="http://www.example.com" data-reactid="478"/></header><section class="window-content" data-reactid="479"><div class="layout-aside layout-aside-collapse" data-reactid="480"><aside class="layout-sider" data-reactid="481"><div class="layout-logo" data-reactid="482"></div><ul class="ant-menu ant-menu-inline ant-menu-dark ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="483"><li style="padding-left:24px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="484"><i class="anticon anticon-user" data-reactid="485"></i></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="486"><i class="anticon anticon-setting" data-reactid="487"></i></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="488"><i class="anticon anticon-laptop" data-reactid="489"></i></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="490"><i class="anticon anticon-notification" data-reactid="491"></i></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="492"><i class="anticon anticon-folder" data-reactid="493"></i></li></ul><div class="aside-action" data-reactid="494"><i class="anticon anticon-right" data-reactid="495"></i></div></aside><div class="layout-main" data-reactid="496"><div class="layout-header" data-reactid="497"></div><div class="layout-container" data-reactid="498"><div class="ant-breadcrumb" data-reactid="499"><span data-reactid="500"><span class="ant-breadcrumb-link" data-reactid="501">首页</span><span class="ant-breadcrumb-separator" data-reactid="502">/</span></span><span data-reactid="503"><span class="ant-breadcrumb-link" data-reactid="504">应用列表</span><span class="ant-breadcrumb-separator" data-reactid="505">/</span></span><span data-reactid="506"><span class="ant-breadcrumb-link" data-reactid="507">某应用</span><span class="ant-breadcrumb-separator" data-reactid="508">/</span></span></div><div class="layout-content" data-reactid="509"><div style="height:220px;" data-reactid="510">内容区域</div></div></div><div class="layout-footer" data-reactid="511">Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持</div></div></div></section></article><style data-reactid="512">.layout-aside {
position: relative;
min-height: 100%;
}
.layout-aside .layout-logo {
height: 32px;
background: #333;
border-radius: 4px;
margin: 16px 24px;
transition: all .3s;
}
.layout-aside-collapse .layout-logo {
width: 32px;
margin: 16px;
transition: all .3s;
}
.layout-aside .layout-sider {
width: 224px;
background: #404040;
position: absolute;
overflow: visible;
padding-bottom: 24px;
height: 100%;
transition: all .3s;
}
.layout-aside-collapse .layout-sider {
width: 64px;
transition: all .3s;
}
.layout-aside .layout-sider > .menu {
margin-bottom: 20px;
}
.layout-aside .layout-sider > .menu > .menu-item {
margin: 16px 0;
}
.layout-aside .layout-sider > .menu > .menu-item .nav-text {
vertical-align: baseline;
display: inline-block;
}
.layout-aside .layout-sider > .menu > .menu-item > .anticon {
transition: font-size .3s;
}
.layout-aside-collapse .layout-sider > .menu > .menu-item {
transition: all 0s ease;
}
.layout-aside-collapse .layout-sider > .menu > .menu-item > .anticon {
font-size: 16px;
display: inline-block;
}
.layout-aside-collapse .layout-sider > .menu > .menu-item .nav-text {
display: none;
}
.layout-aside-collapse .layout-sider > .menu > .menu-item:hover {
background: #2db7f5;
color: #fff;
transition: all 0s ease;
}
.layout-aside-collapse .layout-sider > .menu > .menu-item:hover .nav-text {
display: inline-block;
vertical-align: top;
background: #2db7f5;
color: #fff;
padding-right: 16px;
border-radius: 0 5px 5px 0;
}
/* 实际使用中需要改成 position: fixed */
.layout-aside .aside-action {
height: 42px;
width: 224px;
position: absolute;
bottom: 0;
background: #656565;
color: #fff;
text-align: center;
line-height: 42px;
cursor: pointer;
transition: all .3s;
}
.layout-aside-collapse .aside-action {
width: 64px;
transition: all .3s;
}
.layout-aside .layout-header {
background: #fff;
height: 64px;
border-bottom: 1px solid #e9e9e9;
}
.layout-aside .layout-main {
margin-left: 224px;
transition: all .3s;
}
.layout-aside-collapse .layout-main {
margin-left: 64px;
transition: all .3s;
}
.layout-aside .layout-container {
margin: 12px 16px 24px;
}
.layout-aside .layout-content {
background: #fff;
padding: 24px;
margin-top: 12px;
border-radius: 4px;
}
.layout-aside .layout-footer {
height: 64px;
line-height: 64px;
text-align: center;
font-size: 12px;
color: #999;
background: #fff;
border-top: 1px solid #e9e9e9;
width: 100%;
}</style></section><section class="code-box-meta markdown" data-reactid="513"><div class="code-box-title" data-reactid="514"><a href="#docs-spec-layout-demo-aside-collapse" data-reactid="515">可收起展开的侧边导航</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/docs/spec/layout/demo/aside-collapse.md" data-reactid="516"><i class="anticon anticon-edit" data-reactid="517"></i></a></div><div data-reactid="518"><p data-reactid="519"><!-- react-text: 520 -->页面横向空间有限时使用。侧边导航默认收起，点击底部按钮时展开。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="521"></i></section><section class="highlight-wrapper" data-reactid="522"><div class="highlight" data-reactid="523"><pre class="language-__react" data-reactid="524"><code data-reactid="525">import { Menu<span class="token punctuation">,</span> Breadcrumb<span class="token punctuation">,</span> Icon } from <span class="token string">'antd'</span><span class="token comment" spellcheck="true">;</span>
import BrowserDemo from <span class="token string">'site/theme/template/BrowserDemo'</span><span class="token comment" spellcheck="true">;</span>
<span class="token keyword">const</span> SubMenu <span class="token operator">=</span> Menu<span class="token punctuation">.</span>SubMenu<span class="token comment" spellcheck="true">;</span>
<span class="token keyword">const</span> AsideCollapse <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass</span><span class="token punctuation">(</span>{
<span class="token function">getInitialState</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
return {
collapse<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
}<span class="token comment" spellcheck="true">;</span>
}<span class="token punctuation">,</span>
<span class="token function">onCollapseChange</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
this<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span>{
collapse<span class="token punctuation">:</span> !this<span class="token punctuation">.</span>state<span class="token punctuation">.</span>collapse<span class="token punctuation">,</span>
}<span class="token punctuation">)</span>
}<span class="token punctuation">,</span>
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
<span class="token keyword">const</span> collapse <span class="token operator">=</span> this<span class="token punctuation">.</span>state<span class="token punctuation">.</span>collapse<span class="token comment" spellcheck="true">;</span>
return <span class="token punctuation">(</span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span>{collapse <span class="token operator">?</span> <span class="token string">"layout-aside layout-aside-collapse"</span> <span class="token punctuation">:</span> <span class="token string">"layout-aside"</span>}<span class="token operator">></span>
<span class="token operator">&lt;</span>aside className<span class="token operator">=</span><span class="token string">"layout-sider"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-logo"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu mode<span class="token operator">=</span><span class="token string">"inline"</span> theme<span class="token operator">=</span><span class="token string">"dark"</span> defaultSelectedKeys<span class="token operator">=</span>{<span class="token punctuation">[</span><span class="token string">'user'</span><span class="token punctuation">]</span>}<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"user"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Icon type<span class="token operator">=</span><span class="token string">"user"</span> <span class="token operator">/</span><span class="token operator">></span>
{!collapse <span class="token operator">&amp;</span><span class="token operator">&amp;</span> <span class="token operator">&lt;</span>span className<span class="token operator">=</span><span class="token string">"nav-text"</span><span class="token operator">></span>导航一<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span>}
<span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"setting"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Icon type<span class="token operator">=</span><span class="token string">"setting"</span> <span class="token operator">/</span><span class="token operator">></span>
{!collapse <span class="token operator">&amp;</span><span class="token operator">&amp;</span> <span class="token operator">&lt;</span>span className<span class="token operator">=</span><span class="token string">"nav-text"</span><span class="token operator">></span>导航二<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span>}
<span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"laptop"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Icon type<span class="token operator">=</span><span class="token string">"laptop"</span> <span class="token operator">/</span><span class="token operator">></span>
{!collapse <span class="token operator">&amp;</span><span class="token operator">&amp;</span> <span class="token operator">&lt;</span>span className<span class="token operator">=</span><span class="token string">"nav-text"</span><span class="token operator">></span>导航三<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span>}
<span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"notification"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Icon type<span class="token operator">=</span><span class="token string">"notification"</span> <span class="token operator">/</span><span class="token operator">></span>
{!collapse <span class="token operator">&amp;</span><span class="token operator">&amp;</span> <span class="token operator">&lt;</span>span className<span class="token operator">=</span><span class="token string">"nav-text"</span><span class="token operator">></span>导航四<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span>}
<span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"folder"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Icon type<span class="token operator">=</span><span class="token string">"folder"</span> <span class="token operator">/</span><span class="token operator">></span>
{!collapse <span class="token operator">&amp;</span><span class="token operator">&amp;</span> <span class="token operator">&lt;</span>span className<span class="token operator">=</span><span class="token string">"nav-text"</span><span class="token operator">></span>导航五<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">></span>}
<span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Menu<span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"aside-action"</span> onClick<span class="token operator">=</span>{this<span class="token punctuation">.</span>onCollapseChange}<span class="token operator">></span>
{collapse <span class="token operator">?</span> <span class="token operator">&lt;</span>Icon type<span class="token operator">=</span><span class="token string">"right"</span> <span class="token operator">/</span><span class="token operator">></span> <span class="token punctuation">:</span> <span class="token operator">&lt;</span>Icon type<span class="token operator">=</span><span class="token string">"left"</span> <span class="token operator">/</span><span class="token operator">></span>}
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>aside<span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-main"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-header"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-container"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>Breadcrumb<span class="token operator">></span>
<span class="token operator">&lt;</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>首页<span class="token operator">&lt;</span><span class="token operator">/</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>应用列表<span class="token operator">&lt;</span><span class="token operator">/</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>某应用<span class="token operator">&lt;</span><span class="token operator">/</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>Breadcrumb<span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-content"</span><span class="token operator">></span>
<span class="token operator">&lt;</span>div style<span class="token operator">=</span>{{ height<span class="token punctuation">:</span> <span class="token number">220</span> }}<span class="token operator">></span>
内容区域
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">"layout-footer"</span><span class="token operator">></span>
Ant Design 版权所有 © <span class="token number">2015</span> 由蚂蚁金服体验技术部支持
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
}<span class="token punctuation">,</span>
}<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator">&lt;</span>BrowserDemo<span class="token operator">></span><span class="token operator">&lt;</span>AsideCollapse <span class="token operator">/</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>BrowserDemo<span class="token operator">></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span></code></pre></div><div class="highlight" data-reactid="526"><pre data-reactid="527"><code class="css" data-reactid="528"><span class="token selector"><span class="token class">.layout-aside</span> </span><span class="token punctuation">{</span>
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token property">min-height</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-logo</span> </span><span class="token punctuation">{</span>
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">32</span>px<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#333</span><span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">4</span>px<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">16</span>px <span class="token number">24</span>px<span class="token punctuation">;</span>
<span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">.3</span>s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-aside-collapse</span> <span class="token class">.layout-logo</span> </span><span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">32</span>px<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">16</span>px<span class="token punctuation">;</span>
<span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">.3</span>s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-sider</span> </span><span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">224</span>px<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#404040</span><span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
<span class="token property">overflow</span><span class="token punctuation">:</span> visible<span class="token punctuation">;</span>
<span class="token property">padding-bottom</span><span class="token punctuation">:</span> <span class="token number">24</span>px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
<span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">.3</span>s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-aside-collapse</span> <span class="token class">.layout-sider</span> </span><span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">64</span>px<span class="token punctuation">;</span>
<span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">.3</span>s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-sider</span> > <span class="token class">.menu</span> </span><span class="token punctuation">{</span>
<span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token number">20</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-sider</span> > <span class="token class">.menu</span> > <span class="token class">.menu-item</span> </span><span class="token punctuation">{</span>
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">16</span>px <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-sider</span> > <span class="token class">.menu</span> > <span class="token class">.menu-item</span> <span class="token class">.nav-text</span> </span><span class="token punctuation">{</span>
<span class="token property">vertical-align</span><span class="token punctuation">:</span> baseline<span class="token punctuation">;</span>
<span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-sider</span> > <span class="token class">.menu</span> > <span class="token class">.menu-item</span> > <span class="token class">.anticon</span> </span><span class="token punctuation">{</span>
<span class="token property">transition</span><span class="token punctuation">:</span> font-size <span class="token number">.3</span>s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-aside-collapse</span> <span class="token class">.layout-sider</span> > <span class="token class">.menu</span> > <span class="token class">.menu-item</span> </span><span class="token punctuation">{</span>
<span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">0</span>s ease<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-aside-collapse</span> <span class="token class">.layout-sider</span> > <span class="token class">.menu</span> > <span class="token class">.menu-item</span> > <span class="token class">.anticon</span> </span><span class="token punctuation">{</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">16</span>px<span class="token punctuation">;</span>
<span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-aside-collapse</span> <span class="token class">.layout-sider</span> > <span class="token class">.menu</span> > <span class="token class">.menu-item</span> <span class="token class">.nav-text</span> </span><span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-aside-collapse</span> <span class="token class">.layout-sider</span> > <span class="token class">.menu</span> > <span class="token class">.menu-item</span><span class="token pseudo-class">:hover</span> </span><span class="token punctuation">{</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#2db7f5</span><span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
<span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">0</span>s ease<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-aside-collapse</span> <span class="token class">.layout-sider</span> > <span class="token class">.menu</span> > <span class="token class">.menu-item</span><span class="token pseudo-class">:hover</span> <span class="token class">.nav-text</span> </span><span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
<span class="token property">vertical-align</span><span class="token punctuation">:</span> top<span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#2db7f5</span><span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
<span class="token property">padding-right</span><span class="token punctuation">:</span> <span class="token number">16</span>px<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">5</span>px <span class="token number">5</span>px <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment" spellcheck="true">/* 实际使用中需要改成 position: fixed */</span>
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.aside-action</span> </span><span class="token punctuation">{</span>
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">42</span>px<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">224</span>px<span class="token punctuation">;</span>
<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
<span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#656565</span><span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">42</span>px<span class="token punctuation">;</span>
<span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
<span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">.3</span>s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-aside-collapse</span> <span class="token class">.aside-action</span> </span><span class="token punctuation">{</span>
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">64</span>px<span class="token punctuation">;</span>
<span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">.3</span>s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-header</span> </span><span class="token punctuation">{</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">64</span>px<span class="token punctuation">;</span>
<span class="token property">border-bottom</span><span class="token punctuation">:</span> <span class="token number">1</span>px solid <span class="token hexcode">#e9e9e9</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-main</span> </span><span class="token punctuation">{</span>
<span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token number">224</span>px<span class="token punctuation">;</span>
<span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">.3</span>s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-aside-collapse</span> <span class="token class">.layout-main</span> </span><span class="token punctuation">{</span>
<span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token number">64</span>px<span class="token punctuation">;</span>
<span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">.3</span>s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-container</span> </span><span class="token punctuation">{</span>
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">12</span>px <span class="token number">16</span>px <span class="token number">24</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-content</span> </span><span class="token punctuation">{</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
<span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">24</span>px<span class="token punctuation">;</span>
<span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token number">12</span>px<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">4</span>px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-footer</span> </span><span class="token punctuation">{</span>
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">64</span>px<span class="token punctuation">;</span>
<span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">64</span>px<span class="token punctuation">;</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">12</span>px<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#999</span><span class="token punctuation">;</span>
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
<span class="token property">border-top</span><span class="token punctuation">:</span> <span class="token number">1</span>px solid <span class="token hexcode">#e9e9e9</span><span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre></div></section></section></div></div><section class="markdown api-container" data-reactid="529"></section></article></div></div><div class="ant-row" data-reactid="530"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-md-offset-6 ant-col-lg-20 ant-col-lg-offset-4" data-reactid="531"><section class="prev-next-nav" data-reactid="532"><a class="prev-page" href="/docs/spec/colors" data-reactid="533">Colors</a><a class="next-page" href="/docs/spec/motion" data-reactid="534">Motion</a></section></div></div></div><footer id="footer" data-reactid="535"><ul data-reactid="536"><li data-reactid="537"><h2 data-reactid="538">GitHub</h2><div data-reactid="539"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="540"><span data-reactid="541">Repository</span></a></div><div data-reactid="542"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="543">dva</a><!-- react-text: 544 --> - <!-- /react-text --><span data-reactid="545">Framework</span></div><div data-reactid="546"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="547">dva-cli</a><!-- react-text: 548 --> -<!-- /react-text --><span data-reactid="549">Scaffold</span></div><div data-reactid="550"><a target="_blank" rel="noopener noreferrer" href="http://ant-tool.github.io" data-reactid="551">ant-tool</a><!-- react-text: 552 --> - <!-- /react-text --><span data-reactid="553">Developer Tools</span></div></li><li data-reactid="554"><h2 data-reactid="555"><span data-reactid="556">Links</span></h2><div data-reactid="557"><a href="http://mobile.ant.design" data-reactid="558">Ant Design Mobile</a><span data-reactid="559"> - </span><span data-reactid="560">Mobile</span></div><div data-reactid="561"><a href="https://g2.alipay.com/" data-reactid="562">G2</a><span data-reactid="563"> - </span><span data-reactid="564">Data Visualization</span></div><div data-reactid="565"><a href="https://antv.alipay.com/" data-reactid="566">AntV</a><span data-reactid="567"> - </span><span data-reactid="568">Data Visualization Specification</span></div><div data-reactid="569"><a href="http://motion.ant.design" data-reactid="570">Ant Motion</a><span data-reactid="571"> - </span><span data-reactid="572">Motion</span></div><div data-reactid="573"><a href="http://library.ant.design/" data-reactid="574">AntD Library</a><span data-reactid="575"> - </span><span data-reactid="576">Axure library of Ant Design</span></div><div data-reactid="577"><a href="http://ux.ant.design" data-reactid="578">Ant UX</a><span data-reactid="579"> - </span><span data-reactid="580">Sitemap Template</span></div></li><li data-reactid="581"><h2 data-reactid="582"><span data-reactid="583">Community</span></h2><div data-reactid="584"><a rel="noopener noreferrer" href="/changelog" data-reactid="585"><span data-reactid="586">Change Log</span></a></div><div data-reactid="587"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues" data-reactid="588"><span data-reactid="589">Feedback</span></a></div><div data-reactid="590"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="591"><span data-reactid="592">Chat Room</span></a></div><div data-reactid="593"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="594"><span data-reactid="595">Bug Report</span></a></div></li><li data-reactid="596"><div data-reactid="597"><!-- react-text: 598 -->©2016 <!-- /react-text --><span data-reactid="599">Created by Ant UED</span></div><div data-reactid="600"><!-- react-text: 601 -->Powered by <!-- /react-text --><a href="https://github.com/benjycui/bisheng" data-reactid="602">BiSheng</a></div><div style="margin-top:10px;" data-reactid="603"><span data-reactid="604">Version: </span><div class="ant-select-sm ant-select ant-select-enabled" data-reactid="605"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="606"><div class="ant-select-selection__rendered" data-reactid="607"><div class="ant-select-selection-selected-value" title="2.6.4" style="display:block;opacity:1;" data-reactid="608">2.6.4</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="609"><b data-reactid="610"></b></span></div></div></div></li></ul></footer></div>
</div>
<script>
function isZhCN(pathname) {
return /-cn\/?$/.test(pathname);
}
function getLocalizedPathname(path, zhCN) {
var pathname = path.startsWith('/') ? path : '/' + path;
if (!zhCN) { // to enUS
return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
} else if (pathname === '/') {
return '/index-cn';
} else if (pathname.endsWith('/')) {
return pathname.replace(/\/$/, '-cn/');
}
return pathname + '-cn';
}
var queryString = location.search;
if (queryString) {
var pathname = location.pathname;
var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
if (isZhCNConfig !== isZhCN(pathname)) {
location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
}
}
</script>
<script src="/common.js"></script>
<script src="/index.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink