mirror of
https://github.com/wahyd4/ant-design.git
synced 2026-08-17 08:45:59 +10:00
1025 lines
182 KiB
HTML
1025 lines
182 KiB
HTML
<!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 - One 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-1.css"/>
|
|
<link rel="stylesheet" type="text/css" href="/index-2.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>
|
|
</head>
|
|
<body>
|
|
<div id="react-content">
|
|
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="-90872840"><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 style="display:block;" class="ant-col-xs-0 ant-col-sm-17 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-open="true" aria-owns="1481611189006_143" 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="1481611189006_143" 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-open="true" aria-owns="1481611189012_144" 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="1481611189012_144" 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="code-box-expand-trigger anticon anticon-appstore" 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="ant-layout-top" data-reactid="222"><div class="ant-layout-header" data-reactid="223"><div class="ant-layout-wrapper" data-reactid="224"><div class="ant-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="ant-layout-subheader" data-reactid="230"><div class="ant-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="ant-layout-wrapper" data-reactid="236"><div class="ant-layout-breadcrumb" data-reactid="237"><div class="ant-breadcrumb" data-reactid="238"><span data-reactid="239"><span class="ant-breadcrumb-link" data-reactid="240">首页</span><span class="ant-breadcrumb-separator" data-reactid="241">/</span></span><span data-reactid="242"><span class="ant-breadcrumb-link" data-reactid="243">应用列表</span><span class="ant-breadcrumb-separator" data-reactid="244">/</span></span><span data-reactid="245"><span class="ant-breadcrumb-link" data-reactid="246">某应用</span><span class="ant-breadcrumb-separator" data-reactid="247">/</span></span></div></div><div class="ant-layout-container" data-reactid="248"><div style="height:210px;" data-reactid="249"></div></div></div><div class="ant-layout-footer" data-reactid="250">Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持</div></div></section></article><style data-reactid="251">.ant-layout-top {
|
|
height: 100%;
|
|
}
|
|
|
|
.ant-layout-top .ant-layout-wrapper {
|
|
padding: 0 50px;
|
|
}
|
|
|
|
.ant-layout-top .ant-layout-header {
|
|
background: #404040;
|
|
height: 64px;
|
|
}
|
|
|
|
.ant-layout-top .ant-layout-logo {
|
|
width: 120px;
|
|
height: 32px;
|
|
background: #333;
|
|
border-radius: 6px;
|
|
margin: 16px 28px 16px 0;
|
|
float: left;
|
|
}
|
|
|
|
.ant-layout-top .ant-layout-subheader {
|
|
height: 48px;
|
|
border-bottom: 1px solid #e9e9e9;
|
|
background: #fff;
|
|
}
|
|
|
|
.ant-layout-top .ant-layout-breadcrumb {
|
|
margin: 7px 0 -17px 24px;
|
|
}
|
|
|
|
.ant-layout-top .ant-layout-container {
|
|
background: #fff;
|
|
margin: 24px 0 0;
|
|
position: relative;
|
|
padding-top: 24px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ant-layout-top .ant-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="252"><div class="code-box-title" data-reactid="253"><a href="#docs-spec-layout-demo-top" data-reactid="254">顶部导航</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/docs/spec/layout/demo/top.md" data-reactid="255"><i class="anticon anticon-edit" data-reactid="256"></i></a></div><div data-reactid="257"><p data-reactid="258"><!-- react-text: 259 -->一二级导航都在顶部。<!-- /react-text --></p><p data-reactid="260"><!-- react-text: 261 -->顶部导航在页面布局上采用的是上下的结构，一般主导航放置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器影响；上下级的结构符合用户上下浏览的习惯，也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不适合那些一级导航项很多的信息结构。<!-- /react-text --></p><blockquote data-reactid="262"><p data-reactid="263"><code data-reactid="264"><!-- react-text: 265 --><BrowserDemo /><!-- /react-text --></code><!-- react-text: 266 --> 做演示用，无须复制。<!-- /react-text --></p></blockquote></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="267"></i></section><section class="highlight-wrapper" data-reactid="268"><div class="highlight" data-reactid="269"><pre class="language-jsx" data-reactid="270"><code data-reactid="271"><span class="token keyword">import</span> <span class="token punctuation">{</span> Menu<span class="token punctuation">,</span> Breadcrumb <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> BrowserDemo <span class="token keyword">from</span> <span class="token string">'site/theme/template/BrowserDemo'</span><span class="token punctuation">;</span>
|
|
|
|
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>BrowserDemo</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-top<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-wrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-logo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu</span> <span class="token attr-name">theme</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dark<span class="token punctuation">"</span></span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>horizontal<span class="token punctuation">"</span></span>
|
|
<span class="token attr-name">defaultSelectedKeys</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">'2'</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>lineHeight<span class="token punctuation">:</span> <span class="token string">'64px'</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>导航一<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>导航二<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>导航三<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-subheader<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-wrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu</span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>horizontal<span class="token punctuation">"</span></span>
|
|
<span class="token attr-name">defaultSelectedKeys</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginLeft<span class="token punctuation">:</span> <span class="token number">124</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>二级导航<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>二级导航<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>二级导航<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-wrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-breadcrumb<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Breadcrumb</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Breadcrumb.Item</span><span class="token punctuation">></span></span>首页<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Breadcrumb.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Breadcrumb.Item</span><span class="token punctuation">></span></span>应用列表<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Breadcrumb.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Breadcrumb.Item</span><span class="token punctuation">></span></span>某应用<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Breadcrumb.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Breadcrumb</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> height<span class="token punctuation">:</span> <span class="token number">210</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
Ant Design 版权所有 © <span class="token number">2015</span> 由蚂蚁金服体验技术部支持
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>BrowserDemo</span><span class="token punctuation">></span></span>
|
|
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight" data-reactid="272"><pre data-reactid="273"><code class="css" data-reactid="274"><span class="token selector"><span class="token class">.ant-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">.ant-layout-top</span> <span class="token class">.ant-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">.ant-layout-top</span> <span class="token class">.ant-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">.ant-layout-top</span> <span class="token class">.ant-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">6</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">28</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">.ant-layout-top</span> <span class="token class">.ant-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 punctuation">}</span>
|
|
|
|
<span class="token selector"><span class="token class">.ant-layout-top</span> <span class="token class">.ant-layout-breadcrumb</span> </span><span class="token punctuation">{</span>
|
|
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">7</span>px <span class="token number">0</span> -<span class="token number">17</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">.ant-layout-top</span> <span class="token class">.ant-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">24</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 punctuation">}</span>
|
|
|
|
<span class="token selector"><span class="token class">.ant-layout-top</span> <span class="token class">.ant-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="275"><section class="code-box-demo" data-reactid="276"><article class="window-frame focus" data-reactid="277"><header class="top-bar" data-reactid="278"><div class="controls" data-reactid="279"><div class="control close" data-reactid="280"></div><div class="control minify" data-reactid="281"></div><div class="control expand" data-reactid="282"></div></div><input class="address-bar" value="http://www.example.com" data-reactid="283"/></header><section class="window-content" data-reactid="284"><div class="ant-layout-topaside" data-reactid="285"><div class="ant-layout-header" data-reactid="286"><div class="ant-layout-wrapper" data-reactid="287"><div class="ant-layout-logo" data-reactid="288"></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="289"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="290">导航一</li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="291">导航二</li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="292">导航三</li></ul></div></div><div class="ant-layout-subheader" data-reactid="293"><div class="ant-layout-wrapper" data-reactid="294"><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="295"><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="296">二级导航</li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="297">二级导航</li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="298">二级导航</li></ul></div></div><div class="ant-layout-wrapper" data-reactid="299"><div class="ant-layout-breadcrumb" data-reactid="300"><div class="ant-breadcrumb" data-reactid="301"><span data-reactid="302"><span class="ant-breadcrumb-link" data-reactid="303">首页</span><span class="ant-breadcrumb-separator" data-reactid="304">/</span></span><span data-reactid="305"><span class="ant-breadcrumb-link" data-reactid="306">应用列表</span><span class="ant-breadcrumb-separator" data-reactid="307">/</span></span><span data-reactid="308"><span class="ant-breadcrumb-link" data-reactid="309">某应用</span><span class="ant-breadcrumb-separator" data-reactid="310">/</span></span></div></div><div class="ant-layout-container" data-reactid="311"><aside class="ant-layout-sider" data-reactid="312"><ul class="ant-menu ant-menu-inline ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="313"><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu" data-reactid="314"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" data-reactid="315"><span data-reactid="316"><i class="anticon anticon-user" data-reactid="317"></i><!-- react-text: 318 -->导航一<!-- /react-text --></span></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="sub1$Menu" data-reactid="319"><li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="320">选项1</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="321">选项2</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="322">选项3</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="323">选项4</li></ul></li><li class="ant-menu-submenu-inline ant-menu-submenu" data-reactid="324"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="false" aria-owns="sub2$Menu" aria-haspopup="true" data-reactid="325"><span data-reactid="326"><i class="anticon anticon-laptop" data-reactid="327"></i><!-- react-text: 328 -->导航二<!-- /react-text --></span></div><!-- react-empty: 329 --></li><li class="ant-menu-submenu-inline ant-menu-submenu" data-reactid="330"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="false" aria-owns="sub3$Menu" aria-haspopup="true" data-reactid="331"><span data-reactid="332"><i class="anticon anticon-notification" data-reactid="333"></i><!-- react-text: 334 -->导航三<!-- /react-text --></span></div><!-- react-empty: 335 --></li></ul></aside><div class="ant-layout-content" data-reactid="336"><div style="height:240px;" data-reactid="337"><div style="clear:both;" data-reactid="338">内容区域</div></div></div></div><div class="ant-layout-footer" data-reactid="339">Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持</div></div></div></section></article><style data-reactid="340">.ant-layout-topaside {
|
|
height: 100%;
|
|
}
|
|
|
|
.ant-layout-topaside .ant-layout-wrapper {
|
|
padding: 0 50px;
|
|
}
|
|
|
|
.ant-layout-topaside .ant-layout-header {
|
|
background: #404040;
|
|
height: 64px;
|
|
}
|
|
|
|
.ant-layout-topaside .ant-layout-logo {
|
|
width: 120px;
|
|
height: 32px;
|
|
background: #333;
|
|
border-radius: 6px;
|
|
margin: 16px 28px 16px 0;
|
|
float: left;
|
|
}
|
|
|
|
.ant-layout-topaside .ant-layout-subheader {
|
|
height: 48px;
|
|
border-bottom: 1px solid #e9e9e9;
|
|
background: #fff;
|
|
}
|
|
|
|
.ant-layout-topaside .ant-layout-breadcrumb {
|
|
margin: 7px 0 -17px 24px;
|
|
}
|
|
|
|
.ant-layout-topaside .ant-layout-container {
|
|
background: #fff;
|
|
margin: 24px 0 0;
|
|
position: relative;
|
|
padding: 24px 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ant-layout-topaside .ant-layout-sider {
|
|
width: 224px;
|
|
float: left;
|
|
}
|
|
|
|
.ant-layout-topaside .ant-layout-content {
|
|
border-left: 1px solid #e9e9e9;
|
|
padding: 0 24px;
|
|
overflow: auto;
|
|
position: relative;
|
|
left: -1px;
|
|
}
|
|
|
|
.ant-layout-topaside .ant-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="341"><div class="code-box-title" data-reactid="342"><a href="#docs-spec-layout-demo-top-aside" data-reactid="343">顶部导航 + 侧边栏</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/docs/spec/layout/demo/top-aside.md" data-reactid="344"><i class="anticon anticon-edit" data-reactid="345"></i></a></div><div data-reactid="346"><p data-reactid="347"><!-- react-text: 348 -->顶级导航在头部，次级导航在侧边栏。<!-- /react-text --></p></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="349"></i></section><section class="highlight-wrapper" data-reactid="350"><div class="highlight" data-reactid="351"><pre class="language-jsx" data-reactid="352"><code data-reactid="353"><span class="token keyword">import</span> <span class="token punctuation">{</span> Menu<span class="token punctuation">,</span> Breadcrumb<span class="token punctuation">,</span> Icon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> BrowserDemo <span class="token keyword">from</span> <span class="token string">'site/theme/template/BrowserDemo'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> SubMenu <span class="token operator">=</span> Menu<span class="token punctuation">.</span>SubMenu<span class="token punctuation">;</span>
|
|
|
|
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>BrowserDemo</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-topaside<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-wrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-logo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu</span> <span class="token attr-name">theme</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dark<span class="token punctuation">"</span></span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>horizontal<span class="token punctuation">"</span></span>
|
|
<span class="token attr-name">defaultSelectedKeys</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">'2'</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>lineHeight<span class="token punctuation">:</span> <span class="token string">'64px'</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>导航一<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>导航二<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>导航三<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-subheader<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-wrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu</span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>horizontal<span class="token punctuation">"</span></span>
|
|
<span class="token attr-name">defaultSelectedKeys</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>marginLeft<span class="token punctuation">:</span> <span class="token number">124</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>二级导航<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>二级导航<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>二级导航<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-wrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-breadcrumb<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Breadcrumb</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Breadcrumb.Item</span><span class="token punctuation">></span></span>首页<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Breadcrumb.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Breadcrumb.Item</span><span class="token punctuation">></span></span>应用列表<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Breadcrumb.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Breadcrumb.Item</span><span class="token punctuation">></span></span>某应用<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Breadcrumb.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Breadcrumb</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>aside</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-sider<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu</span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>inline<span class="token punctuation">"</span></span> <span class="token attr-name">defaultSelectedKeys</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span> <span class="token attr-name">defaultOpenKeys</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">'sub1'</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SubMenu</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sub1<span class="token punctuation">"</span></span> <span class="token attr-name">title={<span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>user<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>导航一<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">}</span><span class="token operator">></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项<span class="token number">1</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项<span class="token number">2</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项<span class="token number">3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项<span class="token number">4</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>SubMenu</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SubMenu</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sub2<span class="token punctuation">"</span></span> <span class="token attr-name">title={<span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>laptop<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>导航二<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">}</span><span class="token operator">></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项<span class="token number">5</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项<span class="token number">6</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>7<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项<span class="token number">7</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项<span class="token number">8</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>SubMenu</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SubMenu</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sub3<span class="token punctuation">"</span></span> <span class="token attr-name">title={<span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>notification<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>导航三<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">}</span><span class="token operator">></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>9<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项<span class="token number">9</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项<span class="token number">10</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>11<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项<span class="token number">11</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>12<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项<span class="token number">12</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>SubMenu</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>aside</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> height<span class="token punctuation">:</span> <span class="token number">240</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>clear<span class="token punctuation">:</span> <span class="token string">'both'</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>内容区域<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
Ant Design 版权所有 © <span class="token number">2015</span> 由蚂蚁金服体验技术部支持
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>BrowserDemo</span><span class="token punctuation">></span></span>
|
|
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight" data-reactid="354"><pre data-reactid="355"><code class="css" data-reactid="356"><span class="token selector"><span class="token class">.ant-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">.ant-layout-topaside</span> <span class="token class">.ant-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">.ant-layout-topaside</span> <span class="token class">.ant-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">.ant-layout-topaside</span> <span class="token class">.ant-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">6</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">28</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">.ant-layout-topaside</span> <span class="token class">.ant-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 punctuation">}</span>
|
|
|
|
<span class="token selector"><span class="token class">.ant-layout-topaside</span> <span class="token class">.ant-layout-breadcrumb</span> </span><span class="token punctuation">{</span>
|
|
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">7</span>px <span class="token number">0</span> -<span class="token number">17</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">.ant-layout-topaside</span> <span class="token class">.ant-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">24</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 punctuation">}</span>
|
|
|
|
<span class="token selector"><span class="token class">.ant-layout-topaside</span> <span class="token class">.ant-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">.ant-layout-topaside</span> <span class="token class">.ant-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">.ant-layout-topaside</span> <span class="token class">.ant-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="357"><section class="code-box-demo" data-reactid="358"><article class="window-frame focus" data-reactid="359"><header class="top-bar" data-reactid="360"><div class="controls" data-reactid="361"><div class="control close" data-reactid="362"></div><div class="control minify" data-reactid="363"></div><div class="control expand" data-reactid="364"></div></div><input class="address-bar" value="http://www.example.com" data-reactid="365"/></header><section class="window-content" data-reactid="366"><div class="ant-layout-aside" data-reactid="367"><aside class="ant-layout-sider" data-reactid="368"><div class="ant-layout-logo" data-reactid="369"></div><ul class="ant-menu ant-menu-inline ant-menu-dark ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="370"><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu" data-reactid="371"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" data-reactid="372"><span data-reactid="373"><i class="anticon anticon-user" data-reactid="374"></i><!-- react-text: 375 -->导航一<!-- /react-text --></span></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="sub1$Menu" data-reactid="376"><li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="377">选项1</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="378">选项2</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="379">选项3</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="380">选项4</li></ul></li><li class="ant-menu-submenu-inline ant-menu-submenu" data-reactid="381"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="false" aria-owns="sub2$Menu" aria-haspopup="true" data-reactid="382"><span data-reactid="383"><i class="anticon anticon-laptop" data-reactid="384"></i><!-- react-text: 385 -->导航二<!-- /react-text --></span></div><!-- react-empty: 386 --></li><li class="ant-menu-submenu-inline ant-menu-submenu" data-reactid="387"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="false" aria-owns="sub3$Menu" aria-haspopup="true" data-reactid="388"><span data-reactid="389"><i class="anticon anticon-notification" data-reactid="390"></i><!-- react-text: 391 -->导航三<!-- /react-text --></span></div><!-- react-empty: 392 --></li></ul></aside><div class="ant-layout-main" data-reactid="393"><div class="ant-layout-header" data-reactid="394"></div><div class="ant-layout-breadcrumb" data-reactid="395"><div class="ant-breadcrumb" data-reactid="396"><span data-reactid="397"><span class="ant-breadcrumb-link" data-reactid="398">首页</span><span class="ant-breadcrumb-separator" data-reactid="399">/</span></span><span data-reactid="400"><span class="ant-breadcrumb-link" data-reactid="401">应用列表</span><span class="ant-breadcrumb-separator" data-reactid="402">/</span></span><span data-reactid="403"><span class="ant-breadcrumb-link" data-reactid="404">某应用</span><span class="ant-breadcrumb-separator" data-reactid="405">/</span></span></div></div><div class="ant-layout-container" data-reactid="406"><div class="ant-layout-content" data-reactid="407"><div style="height:590px;" data-reactid="408">内容区域</div></div></div><div class="ant-layout-footer" data-reactid="409">Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持</div></div></div></section></article><style data-reactid="410">.ant-layout-aside {
|
|
position: relative;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-logo {
|
|
width: 150px;
|
|
height: 32px;
|
|
background: #333;
|
|
border-radius: 6px;
|
|
margin: 16px 24px 16px 28px;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-sider {
|
|
width: 224px;
|
|
background: #404040;
|
|
position: absolute;
|
|
overflow: auto;
|
|
padding-bottom: 24px;
|
|
height: 100%;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-sider > .ant-menu {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-header {
|
|
background: #fff;
|
|
height: 64px;
|
|
border-bottom: 1px solid #e9e9e9;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-breadcrumb {
|
|
margin: 7px 0 -17px 24px;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-main {
|
|
margin-left: 224px;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-container {
|
|
margin: 24px 16px;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-content {
|
|
background: #fff;
|
|
padding: 24px;
|
|
}
|
|
|
|
.ant-layout-aside .ant-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="411"><div class="code-box-title" data-reactid="412"><a href="#docs-spec-layout-demo-aside" data-reactid="413">侧边导航</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/docs/spec/layout/demo/aside.md" data-reactid="414"><i class="anticon anticon-edit" data-reactid="415"></i></a></div><div data-reactid="416"><p data-reactid="417"><!-- react-text: 418 -->顶级导航在侧边栏。<!-- /react-text --></p><p data-reactid="419"><!-- react-text: 420 -->侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。<!-- /react-text --></p></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="421"></i></section><section class="highlight-wrapper" data-reactid="422"><div class="highlight" data-reactid="423"><pre class="language-jsx" data-reactid="424"><code data-reactid="425"><span class="token keyword">import</span> <span class="token punctuation">{</span> Menu<span class="token punctuation">,</span> Breadcrumb<span class="token punctuation">,</span> Icon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> BrowserDemo <span class="token keyword">from</span> <span class="token string">'site/theme/template/BrowserDemo'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> SubMenu <span class="token operator">=</span> Menu<span class="token punctuation">.</span>SubMenu<span class="token punctuation">;</span>
|
|
|
|
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>BrowserDemo</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-aside<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>aside</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-sider<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-logo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu</span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>inline<span class="token punctuation">"</span></span> <span class="token attr-name">theme</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dark<span class="token punctuation">"</span></span>
|
|
<span class="token attr-name">defaultSelectedKeys</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span> <span class="token attr-name">defaultOpenKeys</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">'sub1'</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SubMenu</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sub1<span class="token punctuation">"</span></span> <span class="token attr-name">title={<span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>user<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>导航一<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">}</span><span class="token operator">></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项<span class="token number">1</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项<span class="token number">2</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项<span class="token number">3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项<span class="token number">4</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>SubMenu</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SubMenu</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sub2<span class="token punctuation">"</span></span> <span class="token attr-name">title={<span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>laptop<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>导航二<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">}</span><span class="token operator">></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项<span class="token number">5</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项<span class="token number">6</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>7<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项<span class="token number">7</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项<span class="token number">8</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>SubMenu</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SubMenu</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sub3<span class="token punctuation">"</span></span> <span class="token attr-name">title={<span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>notification<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>导航三<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">}</span><span class="token operator">></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>9<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项<span class="token number">9</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项<span class="token number">10</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>11<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项<span class="token number">11</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>12<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选项<span class="token number">12</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>SubMenu</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>aside</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-main<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-breadcrumb<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Breadcrumb</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Breadcrumb.Item</span><span class="token punctuation">></span></span>首页<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Breadcrumb.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Breadcrumb.Item</span><span class="token punctuation">></span></span>应用列表<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Breadcrumb.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Breadcrumb.Item</span><span class="token punctuation">></span></span>某应用<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Breadcrumb.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Breadcrumb</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> height<span class="token punctuation">:</span> <span class="token number">590</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
|
内容区域
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
Ant Design 版权所有 © <span class="token number">2015</span> 由蚂蚁金服体验技术部支持
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>BrowserDemo</span><span class="token punctuation">></span></span>
|
|
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight" data-reactid="426"><pre data-reactid="427"><code class="css" data-reactid="428"><span class="token selector"><span class="token class">.ant-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">.ant-layout-aside</span> <span class="token class">.ant-layout-logo</span> </span><span class="token punctuation">{</span>
|
|
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">150</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">6</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">28</span>px<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token selector"><span class="token class">.ant-layout-aside</span> <span class="token class">.ant-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">.ant-layout-aside</span> <span class="token class">.ant-layout-sider</span> > <span class="token class">.ant-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">.ant-layout-aside</span> <span class="token class">.ant-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">.ant-layout-aside</span> <span class="token class">.ant-layout-breadcrumb</span> </span><span class="token punctuation">{</span>
|
|
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">7</span>px <span class="token number">0</span> -<span class="token number">17</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">.ant-layout-aside</span> <span class="token class">.ant-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">.ant-layout-aside</span> <span class="token class">.ant-layout-container</span> </span><span class="token punctuation">{</span>
|
|
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">24</span>px <span class="token number">16</span>px<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token selector"><span class="token class">.ant-layout-aside</span> <span class="token class">.ant-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 punctuation">}</span>
|
|
|
|
<span class="token selector"><span class="token class">.ant-layout-aside</span> <span class="token class">.ant-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="429"><section class="code-box-demo" data-reactid="430"><article class="window-frame focus" data-reactid="431"><header class="top-bar" data-reactid="432"><div class="controls" data-reactid="433"><div class="control close" data-reactid="434"></div><div class="control minify" data-reactid="435"></div><div class="control expand" data-reactid="436"></div></div><input class="address-bar" value="http://www.example.com" data-reactid="437"/></header><section class="window-content" data-reactid="438"><div class="ant-layout-ceiling-demo" data-reactid="439"><div class="ant-layout-ceiling" data-reactid="440"><div class="ant-layout-wrapper" data-reactid="441"><ul class="right" data-reactid="442"><li data-reactid="443">xxx@example.com</li><li data-reactid="444">|</li><li data-reactid="445">帮助中心</li><li data-reactid="446">|</li><li data-reactid="447">客服/投诉电话：400-826-7710</li></ul></div></div><div class="ant-layout-header" data-reactid="448"><div class="ant-layout-wrapper" data-reactid="449"><div class="ant-layout-logo" data-reactid="450"></div></div></div></div></section></article><style data-reactid="451">.ant-layout-ceiling-demo {
|
|
height: 100%;
|
|
}
|
|
|
|
.ant-layout-ceiling {
|
|
font-size: 12px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
background-color: #242736;
|
|
color: #ddd;
|
|
}
|
|
|
|
.ant-layout-ceiling .right {
|
|
float: right;
|
|
}
|
|
|
|
.ant-layout-ceiling ul li {
|
|
display: inline-block;
|
|
margin: 0 4px;
|
|
}
|
|
|
|
.ant-layout-ceiling-demo .ant-layout-wrapper {
|
|
padding: 0 50px;
|
|
}
|
|
|
|
.ant-layout-ceiling-demo .ant-layout-header {
|
|
background: #fff;
|
|
height: 64px;
|
|
border-bottom: 1px solid #d9d9d9;
|
|
}
|
|
|
|
.ant-layout-ceiling-demo .ant-layout-logo {
|
|
width: 120px;
|
|
height: 32px;
|
|
background: #eee;
|
|
border-radius: 6px;
|
|
margin: 16px 28px 16px 0;
|
|
float: left;
|
|
}</style></section><section class="code-box-meta markdown" data-reactid="452"><div class="code-box-title" data-reactid="453"><a href="#docs-spec-layout-demo-ceiling" data-reactid="454">吊顶规范</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/docs/spec/layout/demo/ceiling.md" data-reactid="455"><i class="anticon anticon-edit" data-reactid="456"></i></a></div><div data-reactid="457"><p data-reactid="458"><!-- react-text: 459 -->吊顶一般用于跨系统/应用场景，可以放置统一的登录/帮助信息。<!-- /react-text --></p><p data-reactid="460"><!-- react-text: 461 -->吊顶背景深色，高度 <!-- /react-text --><code data-reactid="462"><!-- react-text: 463 -->30px<!-- /react-text --></code><!-- react-text: 464 -->，和浅色调的主导航配合使用。<!-- /react-text --></p></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="465"></i></section><section class="highlight-wrapper" data-reactid="466"><div class="highlight" data-reactid="467"><pre class="language-jsx" data-reactid="468"><code data-reactid="469"><span class="token keyword">import</span> <span class="token punctuation">{</span> Menu<span class="token punctuation">,</span> Breadcrumb <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> BrowserDemo <span class="token keyword">from</span> <span class="token string">'site/theme/template/BrowserDemo'</span><span class="token punctuation">;</span>
|
|
|
|
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>BrowserDemo</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-ceiling-demo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-ceiling<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-wrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>xxx@example<span class="token punctuation">.</span>com<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token operator">|</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>帮助中心<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token operator">|</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></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 tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-wrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-logo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>BrowserDemo</span><span class="token punctuation">></span></span>
|
|
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight" data-reactid="470"><pre data-reactid="471"><code class="css" data-reactid="472"><span class="token selector"><span class="token class">.ant-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">.ant-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">.ant-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">.ant-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">.ant-layout-ceiling-demo</span> <span class="token class">.ant-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">.ant-layout-ceiling-demo</span> <span class="token class">.ant-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">#d9d9d9</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token selector"><span class="token class">.ant-layout-ceiling-demo</span> <span class="token class">.ant-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">6</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">28</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="473"><section class="code-box-demo" data-reactid="474"><article class="window-frame focus" data-reactid="475"><header class="top-bar" data-reactid="476"><div class="controls" data-reactid="477"><div class="control close" data-reactid="478"></div><div class="control minify" data-reactid="479"></div><div class="control expand" data-reactid="480"></div></div><input class="address-bar" value="http://www.example.com" data-reactid="481"/></header><section class="window-content" data-reactid="482"><div class="ant-layout-aside ant-layout-aside-collapse" data-reactid="483"><aside class="ant-layout-sider" data-reactid="484"><div class="ant-layout-logo" data-reactid="485"></div><ul class="ant-menu ant-menu-inline ant-menu-dark ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="486"><li style="padding-left:24px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="487"><i class="anticon anticon-user" data-reactid="488"></i></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="489"><i class="anticon anticon-setting" data-reactid="490"></i></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="491"><i class="anticon anticon-laptop" data-reactid="492"></i></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="493"><i class="anticon anticon-notification" data-reactid="494"></i></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="495"><i class="anticon anticon-folder" data-reactid="496"></i></li></ul><div class="ant-aside-action" data-reactid="497"><i class="anticon anticon-right" data-reactid="498"></i></div></aside><div class="ant-layout-main" data-reactid="499"><div class="ant-layout-header" data-reactid="500"></div><div class="ant-layout-breadcrumb" data-reactid="501"><div class="ant-breadcrumb" data-reactid="502"><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><span data-reactid="509"><span class="ant-breadcrumb-link" data-reactid="510">某应用</span><span class="ant-breadcrumb-separator" data-reactid="511">/</span></span></div></div><div class="ant-layout-container" data-reactid="512"><div class="ant-layout-content" data-reactid="513"><div style="height:220px;" data-reactid="514">内容区域</div></div></div><div class="ant-layout-footer" data-reactid="515">Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持</div></div></div></section></article><style data-reactid="516">.ant-layout-aside {
|
|
position: relative;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-logo {
|
|
width: 150px;
|
|
height: 32px;
|
|
background: #333;
|
|
border-radius: 6px;
|
|
margin: 16px 24px 16px 28px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.ant-layout-aside-collapse .ant-layout-logo {
|
|
width: 32px;
|
|
margin: 16px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-sider {
|
|
width: 224px;
|
|
background: #404040;
|
|
position: absolute;
|
|
overflow: visible;
|
|
padding-bottom: 24px;
|
|
height: 100%;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.ant-layout-aside-collapse .ant-layout-sider {
|
|
width: 64px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-sider > .ant-menu {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item {
|
|
margin: 16px 0;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item .nav-text {
|
|
vertical-align: baseline;
|
|
display: inline-block;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item > .anticon {
|
|
transition: font-size .3s;
|
|
}
|
|
|
|
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item {
|
|
transition: all 0s ease;
|
|
}
|
|
|
|
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item > .anticon {
|
|
font-size: 16px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item .nav-text {
|
|
display: none;
|
|
}
|
|
|
|
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item:hover {
|
|
background: #2db7f5;
|
|
color: #fff;
|
|
transition: all 0s ease;
|
|
}
|
|
|
|
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-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 */
|
|
.ant-layout-aside .ant-aside-action {
|
|
height: 42px;
|
|
width: 224px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
background: #656565;
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: 42px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.ant-layout-aside-collapse .ant-aside-action {
|
|
width: 64px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-header {
|
|
background: #fff;
|
|
height: 64px;
|
|
border-bottom: 1px solid #e9e9e9;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-breadcrumb {
|
|
margin: 7px 0 -17px 24px;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-main {
|
|
margin-left: 224px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.ant-layout-aside-collapse .ant-layout-main {
|
|
margin-left: 64px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-container {
|
|
margin: 24px 16px;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-content {
|
|
background: #fff;
|
|
padding: 24px;
|
|
}
|
|
|
|
.ant-layout-aside .ant-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="517"><div class="code-box-title" data-reactid="518"><a href="#docs-spec-layout-demo-aside-collapse" data-reactid="519">可收起展开的侧边导航</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/docs/spec/layout/demo/aside-collapse.md" data-reactid="520"><i class="anticon anticon-edit" data-reactid="521"></i></a></div><div data-reactid="522"><p data-reactid="523"><!-- react-text: 524 -->页面横向空间有限时使用。侧边导航默认收起，点击底部按钮时展开。<!-- /react-text --></p></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="525"></i></section><section class="highlight-wrapper" data-reactid="526"><div class="highlight" data-reactid="527"><pre class="language-jsx" data-reactid="528"><code data-reactid="529"><span class="token keyword">import</span> <span class="token punctuation">{</span> Menu<span class="token punctuation">,</span> Breadcrumb<span class="token punctuation">,</span> Icon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> BrowserDemo <span class="token keyword">from</span> <span class="token string">'site/theme/template/BrowserDemo'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> SubMenu <span class="token operator">=</span> Menu<span class="token punctuation">.</span>SubMenu<span class="token punctuation">;</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 punctuation">{</span>
|
|
<span class="token function">getInitialState</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
|
collapse<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token function">onCollapseChange</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
collapse<span class="token punctuation">:</span> <span class="token operator">!</span><span class="token keyword">this</span><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 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 punctuation">{</span>
|
|
<span class="token keyword">const</span> collapse <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>collapse<span class="token punctuation">;</span>
|
|
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>collapse <span class="token operator">?</span> <span class="token string">"ant-layout-aside ant-layout-aside-collapse"</span> <span class="token punctuation">:</span> <span class="token string">"ant-layout-aside"</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>aside</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-sider<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-logo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu</span> <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>inline<span class="token punctuation">"</span></span> <span class="token attr-name">theme</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>dark<span class="token punctuation">"</span></span> <span class="token attr-name">defaultSelectedKeys</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">'user'</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>user<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>user<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
|
<span class="token punctuation">{</span><span class="token operator">!</span>collapse <span class="token operator">&&</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>nav-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>导航一<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">}</span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>setting<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>setting<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
|
<span class="token punctuation">{</span><span class="token operator">!</span>collapse <span class="token operator">&&</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>nav-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>导航二<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">}</span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>laptop<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>laptop<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
|
<span class="token punctuation">{</span><span class="token operator">!</span>collapse <span class="token operator">&&</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>nav-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>导航三<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">}</span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>notification<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>notification<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
|
<span class="token punctuation">{</span><span class="token operator">!</span>collapse <span class="token operator">&&</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>nav-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>导航四<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">}</span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu.Item</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>folder<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>folder<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
|
<span class="token punctuation">{</span><span class="token operator">!</span>collapse <span class="token operator">&&</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>nav-text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>导航五<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">}</span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-aside-action<span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onCollapseChange<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
|
<span class="token punctuation">{</span>collapse <span class="token operator">?</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token punctuation">:</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>left<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>aside</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-main<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-breadcrumb<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Breadcrumb</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Breadcrumb.Item</span><span class="token punctuation">></span></span>首页<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Breadcrumb.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Breadcrumb.Item</span><span class="token punctuation">></span></span>应用列表<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Breadcrumb.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Breadcrumb.Item</span><span class="token punctuation">></span></span>某应用<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Breadcrumb.Item</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Breadcrumb</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> height<span class="token punctuation">:</span> <span class="token number">220</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
|
|
内容区域
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ant-layout-footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
Ant Design 版权所有 © <span class="token number">2015</span> 由蚂蚁金服体验技术部支持
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>BrowserDemo</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>AsideCollapse</span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>BrowserDemo</span><span class="token punctuation">></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><div class="highlight" data-reactid="530"><pre data-reactid="531"><code class="css" data-reactid="532"><span class="token selector"><span class="token class">.ant-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">.ant-layout-aside</span> <span class="token class">.ant-layout-logo</span> </span><span class="token punctuation">{</span>
|
|
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">150</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">6</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">28</span>px<span class="token punctuation">;</span>
|
|
<span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">0.3</span>s ease<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token selector"><span class="token class">.ant-layout-aside-collapse</span> <span class="token class">.ant-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">0.3</span>s ease<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token selector"><span class="token class">.ant-layout-aside</span> <span class="token class">.ant-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">0.3</span>s ease<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token selector"><span class="token class">.ant-layout-aside-collapse</span> <span class="token class">.ant-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">0.3</span>s ease<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token selector"><span class="token class">.ant-layout-aside</span> <span class="token class">.ant-layout-sider</span> > <span class="token class">.ant-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">.ant-layout-aside</span> <span class="token class">.ant-layout-sider</span> > <span class="token class">.ant-menu</span> > <span class="token class">.ant-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">.ant-layout-aside</span> <span class="token class">.ant-layout-sider</span> > <span class="token class">.ant-menu</span> > <span class="token class">.ant-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">.ant-layout-aside</span> <span class="token class">.ant-layout-sider</span> > <span class="token class">.ant-menu</span> > <span class="token class">.ant-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">.ant-layout-aside-collapse</span> <span class="token class">.ant-layout-sider</span> > <span class="token class">.ant-menu</span> > <span class="token class">.ant-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">.ant-layout-aside-collapse</span> <span class="token class">.ant-layout-sider</span> > <span class="token class">.ant-menu</span> > <span class="token class">.ant-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">.ant-layout-aside-collapse</span> <span class="token class">.ant-layout-sider</span> > <span class="token class">.ant-menu</span> > <span class="token class">.ant-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">.ant-layout-aside-collapse</span> <span class="token class">.ant-layout-sider</span> > <span class="token class">.ant-menu</span> > <span class="token class">.ant-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">.ant-layout-aside-collapse</span> <span class="token class">.ant-layout-sider</span> > <span class="token class">.ant-menu</span> > <span class="token class">.ant-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">.ant-layout-aside</span> <span class="token class">.ant-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">0.3</span>s ease<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token selector"><span class="token class">.ant-layout-aside-collapse</span> <span class="token class">.ant-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">0.3</span>s ease<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token selector"><span class="token class">.ant-layout-aside</span> <span class="token class">.ant-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">.ant-layout-aside</span> <span class="token class">.ant-layout-breadcrumb</span> </span><span class="token punctuation">{</span>
|
|
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">7</span>px <span class="token number">0</span> -<span class="token number">17</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">.ant-layout-aside</span> <span class="token class">.ant-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">0.3</span>s ease<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token selector"><span class="token class">.ant-layout-aside-collapse</span> <span class="token class">.ant-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">0.3</span>s ease<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token selector"><span class="token class">.ant-layout-aside</span> <span class="token class">.ant-layout-container</span> </span><span class="token punctuation">{</span>
|
|
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">24</span>px <span class="token number">16</span>px<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token selector"><span class="token class">.ant-layout-aside</span> <span class="token class">.ant-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 punctuation">}</span>
|
|
|
|
<span class="token selector"><span class="token class">.ant-layout-aside</span> <span class="token class">.ant-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="533"></section></article></div></div><div class="ant-row" data-reactid="534"><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="535"><section class="prev-next-nav" data-reactid="536"><a class="prev-page" href="/docs/spec/colors" data-reactid="537">Colors</a><a class="next-page" href="/docs/spec/motion" data-reactid="538">Motion</a></section></div></div></div><footer id="footer" data-reactid="539"><ul data-reactid="540"><li data-reactid="541"><h2 data-reactid="542">GitHub</h2><div data-reactid="543"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="544"><span data-reactid="545">Repository</span></a></div><div data-reactid="546"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="547">dva</a><!-- react-text: 548 --> - <!-- /react-text --><span data-reactid="549">Framework</span></div><div data-reactid="550"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="551">dva-cli</a><!-- react-text: 552 --> -<!-- /react-text --><span data-reactid="553">Scaffold</span></div><div data-reactid="554"><a target="_blank" rel="noopener noreferrer" href="http://ant-tool.github.io" data-reactid="555">ant-tool</a><!-- react-text: 556 --> - <!-- /react-text --><span data-reactid="557">Developer Tools</span></div></li><li data-reactid="558"><h2 data-reactid="559"><span data-reactid="560">Links</span></h2><div data-reactid="561"><a href="http://mobile.ant.design" data-reactid="562">Ant Design Mobile</a><span data-reactid="563"> - </span><span data-reactid="564">Mobile</span></div><div data-reactid="565"><a href="https://g2.alipay.com/" data-reactid="566">G2</a><span data-reactid="567"> - </span><span data-reactid="568">Data Visualization</span></div><div data-reactid="569"><a href="https://antv.alipay.com/" data-reactid="570">AntV</a><span data-reactid="571"> - </span><span data-reactid="572">Data Visualization Specification</span></div><div data-reactid="573"><a href="http://motion.ant.design" data-reactid="574">Ant Motion</a><span data-reactid="575"> - </span><span data-reactid="576">Motion</span></div><div data-reactid="577"><a href="http://library.ant.design/" data-reactid="578">AntD Library</a><span data-reactid="579"> - </span><span data-reactid="580">Axure library of Ant Design</span></div><div data-reactid="581"><a href="http://ux.ant.design" data-reactid="582">Ant UX</a><span data-reactid="583"> - </span><span data-reactid="584">Sitemap Template</span></div></li><li data-reactid="585"><h2 data-reactid="586"><span data-reactid="587">Community</span></h2><div data-reactid="588"><a rel="noopener noreferrer" href="/changelog" data-reactid="589"><span data-reactid="590">Change Log</span></a></div><div data-reactid="591"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues" data-reactid="592"><span data-reactid="593">Feedback</span></a></div><div data-reactid="594"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="595"><span data-reactid="596">Chat Room</span></a></div><div data-reactid="597"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="598"><span data-reactid="599">Bug Report</span></a></div></li><li data-reactid="600"><div data-reactid="601"><!-- react-text: 602 -->©2016 <!-- /react-text --><span data-reactid="603">Created by Ant UED</span></div><div data-reactid="604"><!-- react-text: 605 -->Powered by <!-- /react-text --><a href="https://github.com/benjycui/bisheng" data-reactid="606">BiSheng</a></div><div style="margin-top:10px;" data-reactid="607"><span data-reactid="608">Version: </span><div class="ant-select-sm ant-select ant-select-enabled" data-reactid="609"><div class="ant-select-selection
|
|
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="610"><div class="ant-select-selection__rendered" data-reactid="611"><div class="ant-select-selection-selected-value" title="1.11.4" style="display:block;opacity:1;" data-reactid="612">1.11.4</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="613"><b data-reactid="614"></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>
|
|
// 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>
|
|
<script src="/common.js"></script>
|
|
<script src="/index.js"></script>
|
|
</body>
|
|
</html>
|