mirror of
https://github.com/wahyd4/ant-design.git
synced 2026-08-13 23:07:49 +10:00
1023 lines
182 KiB
HTML
1023 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 - A UI Design Language</title>
|
||
<script>
|
||
(function() {
|
||
function isLocalStorageNameSupported() {
|
||
var testKey = 'test';
|
||
var storage = window.localStorage;
|
||
try {
|
||
storage.setItem(testKey, '1');
|
||
storage.removeItem(testKey);
|
||
return true;
|
||
} catch (error) {
|
||
return false;
|
||
}
|
||
}
|
||
// 优先级提高到所有静态资源的前面，语言不对，加载其他静态资源没意义
|
||
var pathname = location.pathname;
|
||
|
||
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';
|
||
}
|
||
|
||
// 兼容旧的 URL， `?locale=...`
|
||
var queryString = location.search;
|
||
if (queryString) {
|
||
var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
|
||
if (isZhCNConfig && !isZhCN(pathname)) {
|
||
location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
|
||
}
|
||
}
|
||
|
||
// 首页无视链接里面的语言设置 https://github.com/ant-design/ant-design/issues/4552
|
||
if (isLocalStorageNameSupported() && (pathname === '/' || pathname === '/index-cn')) {
|
||
var lang = (window.localStorage && localStorage.getItem('locale')) || (navigator.language.toLowerCase() === 'zh-cn' ? 'zh-CN' : 'en-US');
|
||
// safari is 'zh-cn', while other browser is 'zh-CN';
|
||
if ((lang === 'zh-CN') !== isZhCN(pathname)) {
|
||
location.pathname = getLocalizedPathname(pathname, lang === 'zh-CN');
|
||
}
|
||
}
|
||
document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
|
||
})()
|
||
</script>
|
||
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
|
||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.cnpmjs.org/css?family=Lato:400,700|Raleway"/>
|
||
<link rel="stylesheet" type="text/css" href="/index.css"/>
|
||
<style id="nprogress-style">
|
||
#nprogress { display: none }
|
||
</style>
|
||
<!--[if lte IE 10]>
|
||
<script
|
||
src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
|
||
<![endif]-->
|
||
<script>
|
||
if (!window.Intl) {
|
||
document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
|
||
}
|
||
if (!window.Promise) {
|
||
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>');
|
||
}
|
||
// Enable Google Analytics
|
||
if (!location.port) {
|
||
/* eslint-disable */
|
||
(function (i, s, o, g, r, a, m) {
|
||
i['GoogleAnalyticsObject'] = r;
|
||
i[r] = i[r] || function () {
|
||
(i[r].q = i[r].q || []).push(arguments)
|
||
}, i[r].l = 1 * new Date();
|
||
a = s.createElement(o),
|
||
m = s.getElementsByTagName(o)[0];
|
||
a.async = 1;
|
||
a.src = g;
|
||
m.parentNode.insertBefore(a, m)
|
||
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
|
||
ga('create', 'UA-72788897-1', 'auto');
|
||
ga('send', 'pageview');
|
||
/* eslint-enable */
|
||
}
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div id="react-content">
|
||
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="-40627523"><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-5 ant-col-lg-4" data-reactid="4"><a id="logo" href="/" data-reactid="5"><img alt="logo" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" data-reactid="6"/><span data-reactid="7">Ant Design</span></a></div><div class="ant-col-xs-0 ant-col-sm-0 ant-col-md-19 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"><!-- react-text: 19 --><!-- /react-text --><!-- react-text: 20 --> <!-- /react-text --></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="21"><b data-reactid="22"></b></span></div></div></div><button type="button" class="ant-btn ant-btn-ghost ant-btn-sm lang" data-reactid="23"><span data-reactid="24">中文</span></button><div class="ant-select-sm version ant-select ant-select-enabled" data-reactid="25"><div class="ant-select-selection
|
||
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="26"><div class="ant-select-selection__rendered" data-reactid="27"><div class="ant-select-selection-selected-value" title="2.8.1" style="display:block;opacity:1;" data-reactid="28">2.8.1</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="29"><b data-reactid="30"></b></span></div></div><ul class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" id="nav" tabindex="0" data-reactid="31"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="32"><a href="/" data-reactid="33"><span data-reactid="34">Home</span></a></li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="35"><a href="/docs/spec/introduce" data-reactid="36"><span data-reactid="37">Specification</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="38"><a href="/docs/react/introduce" data-reactid="39"><span data-reactid="40">Components</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="41"><a href="/docs/pattern/navigation" data-reactid="42"><span data-reactid="43">Pattern</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="44"><a href="/docs/resource/download" data-reactid="45"><span data-reactid="46">Resource</span></a></li></ul></div></div></header><div class="main-wrapper" data-reactid="47"><div class="ant-row" data-reactid="48"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="49"><ul class="ant-menu ant-menu-inline aside-container ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="50"><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="51"><a href="/docs/spec/introduce" data-reactid="52">Ant Design</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="53"><a href="/docs/spec/cases" data-reactid="54">Cases</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="55"><a href="/docs/spec/feature" data-reactid="56">Features</a></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu" data-reactid="57"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Principles$Menu" aria-haspopup="true" data-reactid="58"><h4 data-reactid="59">Principles</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="Principles$Menu" data-reactid="60"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="61"><a href="/docs/spec/principle" data-reactid="62">Introduction</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="63"><a href="/docs/spec/proximity" data-reactid="64">Proximity</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="65"><a href="/docs/spec/alignment" data-reactid="66">Alignment</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="67"><a href="/docs/spec/contrast" data-reactid="68">Contrast</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="69"><a href="/docs/spec/repetition" data-reactid="70">Repetition</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="71"><a href="/docs/spec/direct" data-reactid="72">Make it Direct</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="73"><a href="/docs/spec/lightweight" data-reactid="74">Keep it Lightweight</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="75"><a href="/docs/spec/stay" data-reactid="76">Stay on the Page</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="77"><a href="/docs/spec/invitation" data-reactid="78">Provide an Invitation</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="79"><a href="/docs/spec/transition" data-reactid="80">Use Transition</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="81"><a href="/docs/spec/reaction" data-reactid="82">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="83"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Design Fundamental$Menu" aria-haspopup="true" data-reactid="84"><h4 data-reactid="85">Design Fundamental</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="Design Fundamental$Menu" data-reactid="86"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="87"><a href="/docs/spec/font" data-reactid="88">Font</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="89"><a href="/docs/spec/typography" data-reactid="90">Typography</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="91"><a href="/docs/spec/colors" data-reactid="92">Colors</a></li><li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="93"><a href="/docs/spec/layout" data-reactid="94">Layout</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="95"><a href="/docs/spec/motion" data-reactid="96">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="97"><article data-reactid="98"><div class="toc-affix" data-reactid="99"><div class="" data-reactid="100"><ul class="toc demos-anchor" data-reactid="101"><li title="Top" data-reactid="102"><a href="#docs-spec-layout-demo-top" data-reactid="103">Top</a></li><li title="Top aside" data-reactid="104"><a href="#docs-spec-layout-demo-top-aside" data-reactid="105">Top aside</a></li><li title="Aside" data-reactid="106"><a href="#docs-spec-layout-demo-aside" data-reactid="107">Aside</a></li><li title="Ceiling" data-reactid="108"><a href="#docs-spec-layout-demo-ceiling" data-reactid="109">Ceiling</a></li><li title="Collapsed aside" data-reactid="110"><a href="#docs-spec-layout-demo-aside-collapse" data-reactid="111">Collapsed aside</a></li></ul></div></div><section class="markdown" data-reactid="112"><h1 data-reactid="113"><!-- react-text: 114 -->Layout<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/docs/spec/layout/index.en-US.md" data-reactid="115"><i class="anticon anticon-edit" data-reactid="116"></i></a></h1><section class="markdown" data-reactid="117"><p data-reactid="118"><!-- react-text: 119 -->Layout and Navigation is the backbone of productions, it is one of the most important design pattern of a page,
|
||
and it is also a base when you create a page, it will establish a interactive and visual style for a production.<!-- /react-text --></p><p data-reactid="120"><!-- react-text: 121 -->The Layout and Navigation design specification for Ant Design are as follows:<!-- /react-text --></p><h3 id="The-specification-of-size" data-reactid="122"><span data-reactid="123"><!-- react-text: 124 -->The specification of size<!-- /react-text --></span><a href="#The-specification-of-size" class="anchor" data-reactid="125">#</a></h3><p data-reactid="126"><!-- react-text: 127 -->The first level of the navigation is placed near by a logo inclined left, and the secondary menu is placed inclined right.<!-- /react-text --></p><ul data-reactid="128"><li data-reactid="129"><p data-reactid="130"><!-- react-text: 131 -->Top Navigation (almost systems): the height of the first level navigation <!-- /react-text --><code data-reactid="132"><!-- react-text: 133 -->64px<!-- /react-text --></code><!-- react-text: 134 -->, the second level of navigation <!-- /react-text --><code data-reactid="135"><!-- react-text: 136 -->48px<!-- /react-text --></code><!-- react-text: 137 -->。<!-- /react-text --></p></li><li data-reactid="138"><p data-reactid="139"><!-- react-text: 140 -->Top Navigation(contents page): the height of the first level navigation <!-- /react-text --><code data-reactid="141"><!-- react-text: 142 -->80px<!-- /react-text --></code><!-- react-text: 143 -->,the second level of navigation <!-- /react-text --><code data-reactid="144"><!-- react-text: 145 -->56px<!-- /react-text --></code><!-- react-text: 146 -->。<!-- /react-text --></p></li><li data-reactid="147"><p data-reactid="148"><!-- react-text: 149 -->Calculation formula of a top navigation:<!-- /react-text --><code data-reactid="150"><!-- react-text: 151 -->48+8n<!-- /react-text --></code><!-- react-text: 152 -->.<!-- /react-text --></p></li><li data-reactid="153"><p data-reactid="154"><!-- react-text: 155 -->Calculation formula a aside navigation:<!-- /react-text --><code data-reactid="156"><!-- react-text: 157 -->200+8n<!-- /react-text --></code><!-- react-text: 158 -->.<!-- /react-text --></p></li></ul><h3 id="The-principle-of-interaction" data-reactid="159"><span data-reactid="160"><!-- react-text: 161 -->The principle of interaction<!-- /react-text --></span><a href="#The-principle-of-interaction" class="anchor" data-reactid="162">#</a></h3><ul data-reactid="163"><li data-reactid="164"><p data-reactid="165"><!-- react-text: 166 -->The first level navigation and the last level navigation should be distincted by visualization;<!-- /react-text --></p></li><li data-reactid="167"><p data-reactid="168"><!-- react-text: 169 -->The current item should have the highest priority of visualization;<!-- /react-text --></p></li><li data-reactid="170"><p data-reactid="171"><!-- react-text: 172 -->When the current navigation item is collapsed, the stlye of the current navigation item will be applied to the parent level of it;<!-- /react-text --></p></li><li data-reactid="173"><p data-reactid="174"><!-- react-text: 175 -->The left side navigation bar support for both the according and the expanding style, you can choose the one of it case by case.<!-- /react-text --></p></li></ul><h3 id="The-principle-of-visualization" data-reactid="176"><span data-reactid="177"><!-- react-text: 178 -->The principle of visualization<!-- /react-text --></span><a href="#The-principle-of-visualization" class="anchor" data-reactid="179">#</a></h3><p data-reactid="180"><!-- react-text: 181 --> Style of a navigation should conform to the level of it.<!-- /react-text --></p><ul data-reactid="182"><li data-reactid="183"><p data-reactid="184"><strong data-reactid="185"><!-- react-text: 186 -->Emphasis by colorblock<!-- /react-text --></strong></p><p data-reactid="187"><!-- react-text: 188 -->When background color is a deep color, you can use this pattern for the parent level navigation item of current page.<!-- /react-text --></p></li><li data-reactid="189"><p data-reactid="190"><strong data-reactid="191"><!-- react-text: 192 -->The highlight match stick<!-- /react-text --></strong></p><p data-reactid="193"><!-- react-text: 194 -->When background color is a light color, you can use this pattern for the current page navigation item, we recommed to use it for the last item of the navigation path.<!-- /react-text --></p></li><li data-reactid="195"><p data-reactid="196"><strong data-reactid="197"><!-- react-text: 198 -->Hightlighted font<!-- /react-text --></strong></p><p data-reactid="199"><!-- react-text: 200 -->From the visualization aspect, hightlighted font is stronger than colorblock, this pattern is often used for the parent level of the current item.<!-- /react-text --></p></li><li data-reactid="201"><p data-reactid="202"><strong data-reactid="203"><!-- react-text: 204 -->Enlarge the size of the font<!-- /react-text --></strong></p><p data-reactid="205"><code data-reactid="206"><!-- react-text: 207 -->12px<!-- /react-text --></code><!-- react-text: 208 -->、<!-- /react-text --><code data-reactid="209"><!-- react-text: 210 -->14px<!-- /react-text --></code><!-- react-text: 211 --> is a standard font size of navigations，14 is used for the first and the second level of the navigation. You can choose a approprigate font size in terms of the level of your navigation.<!-- /react-text --></p></li></ul><p data-reactid="212"><!-- react-text: 213 -->In almost middle-back systems, Ant Design uses two general layouts of top navigation and aside navition, we collect some basic layouts of middle-back systems are designed by Ant Design as follows. The demo code below is used of sample, you should <!-- /react-text --><a href="/components/layout/" data-reactid="214">Layout</a><!-- react-text: 215 --> component in real project.<!-- /react-text --></p></section><h2 data-reactid="216"><span data-reactid="217">Examples</span><i class="anticon anticon-appstore code-box-expand-trigger" title="展开全部代码" data-reactid="218"></i></h2></section><div class="ant-row" style="margin-left:-8px;margin-right:-8px;" data-reactid="219"><div style="padding-left:8px;padding-right:8px;" class="ant-col-24 code-boxes-col-1-1" data-reactid="220"><section class="code-box" id="docs-spec-layout-demo-top" data-reactid="221"><section class="code-box-demo" data-reactid="222"><article class="window-frame focus" data-reactid="223"><header class="top-bar" data-reactid="224"><div class="controls" data-reactid="225"><div class="control close" data-reactid="226"></div><div class="control minify" data-reactid="227"></div><div class="control expand" data-reactid="228"></div></div><input class="address-bar" value="http://www.example.com" data-reactid="229"/></header><section class="window-content" data-reactid="230"><div class="layout-top" data-reactid="231"><div class="layout-header" data-reactid="232"><div class="layout-wrapper" data-reactid="233"><div class="layout-logo" data-reactid="234"></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="235"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="236">Navigation 1</li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="237">Navigation 2</li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="238">Navigation 3</li></ul></div></div><div class="layout-subheader" data-reactid="239"><div class="layout-wrapper" data-reactid="240"><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="241"><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="242">Second nav</li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="243">Second nav</li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="244">Second nav</li></ul></div></div><div class="layout-wrapper" data-reactid="245"><div class="ant-breadcrumb" data-reactid="246"><span data-reactid="247"><span class="ant-breadcrumb-link" data-reactid="248">Home</span><span class="ant-breadcrumb-separator" data-reactid="249">/</span></span><span data-reactid="250"><span class="ant-breadcrumb-link" data-reactid="251">App list</span><span class="ant-breadcrumb-separator" data-reactid="252">/</span></span><span data-reactid="253"><span class="ant-breadcrumb-link" data-reactid="254">Any app</span><span class="ant-breadcrumb-separator" data-reactid="255">/</span></span></div><div class="layout-container" data-reactid="256"><div style="height:210px;" data-reactid="257"></div></div></div><div class="layout-footer" data-reactid="258">Ant Design all rights reserved © 2015 Created by Ant UED</div></div></section></article><style data-reactid="259">.layout-top {
|
||
height: 100%;
|
||
}
|
||
|
||
.layout-top .layout-wrapper {
|
||
padding: 0 50px;
|
||
}
|
||
|
||
.layout-top .layout-header {
|
||
background: #404040;
|
||
height: 64px;
|
||
}
|
||
|
||
.layout-top .layout-logo {
|
||
width: 120px;
|
||
height: 32px;
|
||
background: #333;
|
||
border-radius: 4px;
|
||
margin: 16px 24px 16px 0;
|
||
float: left;
|
||
}
|
||
|
||
.layout-top .layout-subheader {
|
||
height: 48px;
|
||
border-bottom: 1px solid #e9e9e9;
|
||
background: #fff;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.layout-top .layout-container {
|
||
background: #fff;
|
||
margin: 12px 0 0;
|
||
position: relative;
|
||
padding-top: 24px;
|
||
overflow: hidden;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.layout-top .layout-footer {
|
||
height: 64px;
|
||
line-height: 64px;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
color: #999;
|
||
}</style></section><section class="code-box-meta markdown" data-reactid="260"><div class="code-box-title" data-reactid="261"><a href="#docs-spec-layout-demo-top" data-reactid="262">Top</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/docs/spec/layout/demo/top.md" data-reactid="263"><i class="anticon anticon-edit" data-reactid="264"></i></a></div><div data-reactid="265"><p data-reactid="266"><!-- react-text: 267 -->The first and second level nav are both on the top.<!-- /react-text --></p><p data-reactid="268"><!-- react-text: 269 -->A top-bottom structure of page layouts is used for top navigation. Generally, the mainnav is placed at the top of the page, and includes the logo, the first level navigation, and the secondary menu (users, settings, notifications) from left to right in it.
|
||
We always put contents in a fixed size navigation (eg: <!-- /react-text --><code data-reactid="270"><!-- react-text: 271 -->1200px<!-- /react-text --></code><!-- react-text: 272 -->), the layout of the whole page is stable, it's not affected by viewing area.<!-- /react-text --></p><p data-reactid="273"><!-- react-text: 274 -->Top-bottom structure is conform with the top-bottom viewing habit, it's a classical navigation pattern of websites. This pattern demonstrates efficiency in the main workarea, while using some vertical space. And because the horizontal space of the navigation is limited, this pattern is not suitable for cases when the first level navigation contains many elements or links.<!-- /react-text --></p><blockquote data-reactid="275"><p data-reactid="276"><code data-reactid="277"><!-- react-text: 278 --><BrowserDemo /><!-- /react-text --></code><!-- react-text: 279 --> This is for demo, don't need to copy.<!-- /react-text --></p></blockquote></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="280"></i></section><section class="highlight-wrapper" data-reactid="281"><div class="highlight" data-reactid="282"><i class="anticon anticon-copy code-box-code-copy" data-reactid="283"></i><pre class="language-jsx" data-reactid="284"><code data-reactid="285"><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>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>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>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>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>Navigation <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>Navigation <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>Navigation <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</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>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>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>Second nav<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>Second nav<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>Second nav<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>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>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>Home<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>App list<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>Any app<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 attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>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>layout-footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
Ant Design all rights reserved © <span class="token number">2015</span> Created by Ant UED
|
||
<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="286"><pre data-reactid="287"><code class="css" data-reactid="288"><span class="token selector"><span class="token class">.layout-top</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-top</span> <span class="token class">.layout-wrapper</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">50</span>px<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-top</span> <span class="token class">.layout-header</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#404040</span><span class="token punctuation">;</span>
|
||
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">64</span>px<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-top</span> <span class="token class">.layout-logo</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">120</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">32</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#333</span><span class="token punctuation">;</span>
|
||
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">4</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">16</span>px <span class="token number">24</span>px <span class="token number">16</span>px <span class="token number">0</span><span class="token punctuation">;</span>
|
||
<span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-top</span> <span class="token class">.layout-subheader</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">48</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">border-bottom</span><span class="token punctuation">:</span> <span class="token number">1</span>px solid <span class="token hexcode">#e9e9e9</span><span class="token punctuation">;</span>
|
||
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
|
||
<span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token number">12</span>px<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-top</span> <span class="token class">.layout-container</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
|
||
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">12</span>px <span class="token number">0</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
|
||
<span class="token property">padding-top</span><span class="token punctuation">:</span> <span class="token number">24</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
|
||
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">4</span>px<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-top</span> <span class="token class">.layout-footer</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">64</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">64</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
|
||
<span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">12</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#999</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="docs-spec-layout-demo-top-aside" data-reactid="289"><section class="code-box-demo" data-reactid="290"><article class="window-frame focus" data-reactid="291"><header class="top-bar" data-reactid="292"><div class="controls" data-reactid="293"><div class="control close" data-reactid="294"></div><div class="control minify" data-reactid="295"></div><div class="control expand" data-reactid="296"></div></div><input class="address-bar" value="http://www.example.com" data-reactid="297"/></header><section class="window-content" data-reactid="298"><div class="layout-topaside" data-reactid="299"><div class="layout-header" data-reactid="300"><div class="layout-wrapper" data-reactid="301"><div class="layout-logo" data-reactid="302"></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="303"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="304">Navigation 1</li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="305">Navigation 2</li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="306">Navigation 3</li></ul></div></div><div class="layout-subheader" data-reactid="307"><div class="layout-wrapper" data-reactid="308"><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="309"><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="310">Second nav</li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="311">Second nav</li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="312">Second nav</li></ul></div></div><div class="layout-wrapper" data-reactid="313"><div class="ant-breadcrumb" data-reactid="314"><span data-reactid="315"><span class="ant-breadcrumb-link" data-reactid="316">Home</span><span class="ant-breadcrumb-separator" data-reactid="317">/</span></span><span data-reactid="318"><span class="ant-breadcrumb-link" data-reactid="319">App list</span><span class="ant-breadcrumb-separator" data-reactid="320">/</span></span><span data-reactid="321"><span class="ant-breadcrumb-link" data-reactid="322">Any app</span><span class="ant-breadcrumb-separator" data-reactid="323">/</span></span></div><div class="layout-container" data-reactid="324"><aside class="layout-sider" data-reactid="325"><ul class="ant-menu ant-menu-inline ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="326"><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu" data-reactid="327"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" data-reactid="328"><span data-reactid="329"><i class="anticon anticon-user" data-reactid="330"></i><!-- react-text: 331 -->Navigation 1<!-- /react-text --></span></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="sub1$Menu" data-reactid="332"><li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="333">item 1</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="334">item 2</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="335">item 3</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="336">item 4</li></ul></li><li class="ant-menu-submenu-inline ant-menu-submenu" data-reactid="337"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="false" aria-owns="sub2$Menu" aria-haspopup="true" data-reactid="338"><span data-reactid="339"><i class="anticon anticon-laptop" data-reactid="340"></i><!-- react-text: 341 -->Navigation 2<!-- /react-text --></span></div><!-- react-empty: 342 --></li><li class="ant-menu-submenu-inline ant-menu-submenu" data-reactid="343"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="false" aria-owns="sub3$Menu" aria-haspopup="true" data-reactid="344"><span data-reactid="345"><i class="anticon anticon-notification" data-reactid="346"></i><!-- react-text: 347 -->Navigation 3<!-- /react-text --></span></div><!-- react-empty: 348 --></li></ul></aside><div class="layout-content" data-reactid="349"><div style="height:240px;" data-reactid="350"><div style="clear:both;" data-reactid="351">Contents</div></div></div></div><div class="layout-footer" data-reactid="352">Ant Design all rights reserved © 2015 Created by Ant UED</div></div></div></section></article><style data-reactid="353">.layout-topaside {
|
||
height: 100%;
|
||
}
|
||
|
||
.layout-topaside .layout-wrapper {
|
||
padding: 0 50px;
|
||
}
|
||
|
||
.layout-topaside .layout-header {
|
||
background: #404040;
|
||
height: 64px;
|
||
}
|
||
|
||
.layout-topaside .layout-logo {
|
||
width: 120px;
|
||
height: 32px;
|
||
background: #333;
|
||
border-radius: 4px;
|
||
margin: 16px 24px 16px 0;
|
||
float: left;
|
||
}
|
||
|
||
.layout-topaside .layout-subheader {
|
||
height: 48px;
|
||
border-bottom: 1px solid #e9e9e9;
|
||
background: #fff;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.layout-topaside .layout-container {
|
||
background: #fff;
|
||
margin: 12px 0 0;
|
||
position: relative;
|
||
padding: 24px 0;
|
||
overflow: hidden;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.layout-topaside .layout-sider {
|
||
width: 224px;
|
||
float: left;
|
||
}
|
||
|
||
.layout-topaside .layout-content {
|
||
border-left: 1px solid #e9e9e9;
|
||
padding: 0 24px;
|
||
overflow: auto;
|
||
position: relative;
|
||
left: -1px;
|
||
}
|
||
|
||
.layout-topaside .layout-footer {
|
||
height: 64px;
|
||
line-height: 64px;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
color: #999;
|
||
}</style></section><section class="code-box-meta markdown" data-reactid="354"><div class="code-box-title" data-reactid="355"><a href="#docs-spec-layout-demo-top-aside" data-reactid="356">Top aside</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/docs/spec/layout/demo/top-aside.md" data-reactid="357"><i class="anticon anticon-edit" data-reactid="358"></i></a></div><div data-reactid="359"><p data-reactid="360"><!-- react-text: 361 -->The top navigation is placed on the top, and the secondary navigation is placed on the aside.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="362"></i></section><section class="highlight-wrapper" data-reactid="363"><div class="highlight" data-reactid="364"><i class="anticon anticon-copy code-box-code-copy" data-reactid="365"></i><pre class="language-jsx" data-reactid="366"><code data-reactid="367"><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>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>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>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>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>Navigation <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>Navigation <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>Navigation <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</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>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>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>Second nav<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>Second nav<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>Second nav<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>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>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>Home<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>App list<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>Any app<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 attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>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>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>Navigation <span class="token number">1</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>item <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>item <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>item <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>item <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>Navigation <span class="token number">2</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>item <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>item <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>item <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>item <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>Navigation <span class="token number">3</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>item <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>item <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>item <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>item <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>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>Contents<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>layout-footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
Ant Design all rights reserved © <span class="token number">2015</span> Created by Ant UED
|
||
<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="368"><pre data-reactid="369"><code class="css" data-reactid="370"><span class="token selector"><span class="token class">.layout-topaside</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-topaside</span> <span class="token class">.layout-wrapper</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">50</span>px<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-topaside</span> <span class="token class">.layout-header</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#404040</span><span class="token punctuation">;</span>
|
||
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">64</span>px<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-topaside</span> <span class="token class">.layout-logo</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">120</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">32</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#333</span><span class="token punctuation">;</span>
|
||
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">4</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">16</span>px <span class="token number">24</span>px <span class="token number">16</span>px <span class="token number">0</span><span class="token punctuation">;</span>
|
||
<span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-topaside</span> <span class="token class">.layout-subheader</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">48</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">border-bottom</span><span class="token punctuation">:</span> <span class="token number">1</span>px solid <span class="token hexcode">#e9e9e9</span><span class="token punctuation">;</span>
|
||
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
|
||
<span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token number">12</span>px<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-topaside</span> <span class="token class">.layout-container</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
|
||
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">12</span>px <span class="token number">0</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
|
||
<span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">24</span>px <span class="token number">0</span><span class="token punctuation">;</span>
|
||
<span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
|
||
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">4</span>px<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-topaside</span> <span class="token class">.layout-sider</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">224</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-topaside</span> <span class="token class">.layout-content</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">border-left</span><span class="token punctuation">:</span> <span class="token number">1</span>px solid <span class="token hexcode">#e9e9e9</span><span class="token punctuation">;</span>
|
||
<span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">24</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">overflow</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
|
||
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
|
||
<span class="token property">left</span><span class="token punctuation">:</span> -<span class="token number">1</span>px<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-topaside</span> <span class="token class">.layout-footer</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">64</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">64</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
|
||
<span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">12</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#999</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="docs-spec-layout-demo-aside" data-reactid="371"><section class="code-box-demo" data-reactid="372"><article class="window-frame focus" data-reactid="373"><header class="top-bar" data-reactid="374"><div class="controls" data-reactid="375"><div class="control close" data-reactid="376"></div><div class="control minify" data-reactid="377"></div><div class="control expand" data-reactid="378"></div></div><input class="address-bar" value="http://www.example.com" data-reactid="379"/></header><section class="window-content" data-reactid="380"><div class="layout-aside" data-reactid="381"><aside class="layout-sider" data-reactid="382"><div class="layout-logo" data-reactid="383"></div><ul class="ant-menu ant-menu-inline ant-menu-dark ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="384"><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu" data-reactid="385"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" data-reactid="386"><span data-reactid="387"><i class="anticon anticon-user" data-reactid="388"></i><!-- react-text: 389 -->Navigation 1<!-- /react-text --></span></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="sub1$Menu" data-reactid="390"><li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="391">item 1</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="392">item 2</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="393">item 3</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="394">item 4</li></ul></li><li class="ant-menu-submenu-inline ant-menu-submenu" data-reactid="395"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="false" aria-owns="sub2$Menu" aria-haspopup="true" data-reactid="396"><span data-reactid="397"><i class="anticon anticon-laptop" data-reactid="398"></i><!-- react-text: 399 -->Navigation 2<!-- /react-text --></span></div><!-- react-empty: 400 --></li><li class="ant-menu-submenu-inline ant-menu-submenu" data-reactid="401"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="false" aria-owns="sub3$Menu" aria-haspopup="true" data-reactid="402"><span data-reactid="403"><i class="anticon anticon-notification" data-reactid="404"></i><!-- react-text: 405 -->Navigation 3<!-- /react-text --></span></div><!-- react-empty: 406 --></li></ul></aside><div class="layout-main" data-reactid="407"><div class="layout-header" data-reactid="408"></div><div class="layout-container" data-reactid="409"><div class="ant-breadcrumb" data-reactid="410"><span data-reactid="411"><span class="ant-breadcrumb-link" data-reactid="412">Home</span><span class="ant-breadcrumb-separator" data-reactid="413">/</span></span><span data-reactid="414"><span class="ant-breadcrumb-link" data-reactid="415">App list</span><span class="ant-breadcrumb-separator" data-reactid="416">/</span></span><span data-reactid="417"><span class="ant-breadcrumb-link" data-reactid="418">Any App</span><span class="ant-breadcrumb-separator" data-reactid="419">/</span></span></div><div class="layout-content" data-reactid="420"><div style="height:590px;" data-reactid="421">Contents</div></div></div><div class="layout-footer" data-reactid="422">Ant Design all rights reserved © 2015 Created by Ant UED</div></div></div></section></article><style data-reactid="423">.layout-aside {
|
||
position: relative;
|
||
min-height: 100%;
|
||
}
|
||
|
||
.layout-aside .layout-logo {
|
||
height: 32px;
|
||
background: #333;
|
||
border-radius: 4px;
|
||
margin: 16px 24px;
|
||
}
|
||
|
||
.layout-aside .layout-sider {
|
||
width: 224px;
|
||
background: #404040;
|
||
position: absolute;
|
||
overflow: auto;
|
||
padding-bottom: 24px;
|
||
height: 100%;
|
||
}
|
||
|
||
.layout-aside .layout-sider > .menu {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.layout-aside .layout-header {
|
||
background: #fff;
|
||
height: 64px;
|
||
border-bottom: 1px solid #e9e9e9;
|
||
}
|
||
|
||
.layout-aside .layout-main {
|
||
margin-left: 224px;
|
||
}
|
||
|
||
.layout-aside .layout-container {
|
||
margin: 12px 16px 24px;
|
||
}
|
||
|
||
.layout-aside .layout-content {
|
||
background: #fff;
|
||
padding: 24px;
|
||
margin-top: 12px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.layout-aside .layout-footer {
|
||
height: 64px;
|
||
line-height: 64px;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
color: #999;
|
||
background: #fff;
|
||
border-top: 1px solid #e9e9e9;
|
||
width: 100%;
|
||
}</style></section><section class="code-box-meta markdown" data-reactid="424"><div class="code-box-title" data-reactid="425"><a href="#docs-spec-layout-demo-aside" data-reactid="426">Aside</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/docs/spec/layout/demo/aside.md" data-reactid="427"><i class="anticon anticon-edit" data-reactid="428"></i></a></div><div data-reactid="429"><p data-reactid="430"><!-- react-text: 431 -->Aside top level navigation<!-- /react-text --></p><p data-reactid="432"><!-- react-text: 433 -->A left-right structure of page layouts is used to Aside navigation, Generally, the mainnav is placed on the left side of the page, and the secondary menu is placed on the top of the working area. Contents will adapt the layout to the viewing area to improve the horizontal space usage, while the layout of the whole page is not stable.<!-- /react-text --></p><p data-reactid="434"><!-- react-text: 435 -->The level of the aisde navigation is scalable. The first, second, and third level navigations could be present more fluently and relevantly, and aside navigation can be fixed, allowing the user to quickly switch and spot the current position, improving the user experience. However, this navigation occupies some horizontal space of the contents.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="436"></i></section><section class="highlight-wrapper" data-reactid="437"><div class="highlight" data-reactid="438"><i class="anticon anticon-copy code-box-code-copy" data-reactid="439"></i><pre class="language-jsx" data-reactid="440"><code data-reactid="441"><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>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>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>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>Navigation <span class="token number">1</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>item <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>item <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>item <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>item <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>Navigation <span class="token number">2</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>item <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>item <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>item <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>item <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>Navigation <span class="token number">3</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>item <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>item <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>item <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>item <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>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>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>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>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>Home<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>App list<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>Any App<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 attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>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>
|
||
Contents
|
||
<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>layout-footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
Ant Design all rights reserved © <span class="token number">2015</span> Created by Ant UED
|
||
<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="442"><pre data-reactid="443"><code class="css" data-reactid="444"><span class="token selector"><span class="token class">.layout-aside</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
|
||
<span class="token property">min-height</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-logo</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">32</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#333</span><span class="token punctuation">;</span>
|
||
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">4</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">16</span>px <span class="token number">24</span>px<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-sider</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">224</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#404040</span><span class="token punctuation">;</span>
|
||
<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
|
||
<span class="token property">overflow</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
|
||
<span class="token property">padding-bottom</span><span class="token punctuation">:</span> <span class="token number">24</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-sider</span> > <span class="token class">.menu</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token number">20</span>px<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-header</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
|
||
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">64</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">border-bottom</span><span class="token punctuation">:</span> <span class="token number">1</span>px solid <span class="token hexcode">#e9e9e9</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-main</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token number">224</span>px<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-container</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">12</span>px <span class="token number">16</span>px <span class="token number">24</span>px<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-content</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
|
||
<span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">24</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token number">12</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">4</span>px<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-footer</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">64</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">64</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
|
||
<span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">12</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#999</span><span class="token punctuation">;</span>
|
||
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
|
||
<span class="token property">border-top</span><span class="token punctuation">:</span> <span class="token number">1</span>px solid <span class="token hexcode">#e9e9e9</span><span class="token punctuation">;</span>
|
||
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="docs-spec-layout-demo-ceiling" data-reactid="445"><section class="code-box-demo" data-reactid="446"><article class="window-frame focus" data-reactid="447"><header class="top-bar" data-reactid="448"><div class="controls" data-reactid="449"><div class="control close" data-reactid="450"></div><div class="control minify" data-reactid="451"></div><div class="control expand" data-reactid="452"></div></div><input class="address-bar" value="http://www.example.com" data-reactid="453"/></header><section class="window-content" data-reactid="454"><div class="layout-ceiling-demo" data-reactid="455"><div class="layout-ceiling" data-reactid="456"><div class="layout-wrapper" data-reactid="457"><ul class="right" data-reactid="458"><li data-reactid="459">xxx@example.com</li><li data-reactid="460">|</li><li data-reactid="461">Help Center</li><li data-reactid="462">|</li><li data-reactid="463">Custom Service/Complaint Center phone：400-826-7710</li></ul></div></div><div class="layout-header" data-reactid="464"><div class="layout-wrapper" data-reactid="465"><div class="layout-logo" data-reactid="466"></div></div></div></div></section></article><style data-reactid="467">.layout-ceiling-demo {
|
||
height: 100%;
|
||
}
|
||
|
||
.layout-ceiling {
|
||
font-size: 12px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
background-color: #242736;
|
||
color: #ddd;
|
||
}
|
||
|
||
.layout-ceiling .right {
|
||
float: right;
|
||
}
|
||
|
||
.layout-ceiling ul li {
|
||
display: inline-block;
|
||
margin: 0 4px;
|
||
}
|
||
|
||
.layout-ceiling-demo .layout-wrapper {
|
||
padding: 0 50px;
|
||
}
|
||
|
||
.layout-ceiling-demo .layout-header {
|
||
background: #fff;
|
||
height: 64px;
|
||
border-bottom: 1px solid #e9e9e9;
|
||
}
|
||
|
||
.layout-ceiling-demo .layout-logo {
|
||
width: 120px;
|
||
height: 32px;
|
||
background: #eee;
|
||
border-radius: 4px;
|
||
margin: 16px 24px 16px 0;
|
||
float: left;
|
||
}</style></section><section class="code-box-meta markdown" data-reactid="468"><div class="code-box-title" data-reactid="469"><a href="#docs-spec-layout-demo-ceiling" data-reactid="470">Ceiling</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/docs/spec/layout/demo/ceiling.md" data-reactid="471"><i class="anticon anticon-edit" data-reactid="472"></i></a></div><div data-reactid="473"><p data-reactid="474"><!-- react-text: 475 -->Generally, ceiling is used for cross system/applications, where you can put uniform login/help information on top of the page.<!-- /react-text --></p><p data-reactid="476"><!-- react-text: 477 -->Background color of a ceiling is a dark color, height is <!-- /react-text --><code data-reactid="478"><!-- react-text: 479 -->30px<!-- /react-text --></code><!-- react-text: 480 -->, and a light color foreground for the mainnav should be used.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="481"></i></section><section class="highlight-wrapper" data-reactid="482"><div class="highlight" data-reactid="483"><i class="anticon anticon-copy code-box-code-copy" data-reactid="484"></i><pre class="language-jsx" data-reactid="485"><code data-reactid="486"><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>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>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>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>Help Center<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>Custom Service<span class="token operator">/</span>Complaint Center phone：<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>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>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>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="487"><pre data-reactid="488"><code class="css" data-reactid="489"><span class="token selector"><span class="token class">.layout-ceiling-demo</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-ceiling</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">12</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">30</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">30</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token hexcode">#242736</span><span class="token punctuation">;</span>
|
||
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#ddd</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-ceiling</span> <span class="token class">.right</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-ceiling</span> ul li </span><span class="token punctuation">{</span>
|
||
<span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
|
||
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">4</span>px<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-ceiling-demo</span> <span class="token class">.layout-wrapper</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">50</span>px<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-ceiling-demo</span> <span class="token class">.layout-header</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
|
||
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">64</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">border-bottom</span><span class="token punctuation">:</span> <span class="token number">1</span>px solid <span class="token hexcode">#e9e9e9</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-ceiling-demo</span> <span class="token class">.layout-logo</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">120</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">32</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#eee</span><span class="token punctuation">;</span>
|
||
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">4</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">16</span>px <span class="token number">24</span>px <span class="token number">16</span>px <span class="token number">0</span><span class="token punctuation">;</span>
|
||
<span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span></code></pre></div></section></section><section class="code-box" id="docs-spec-layout-demo-aside-collapse" data-reactid="490"><section class="code-box-demo" data-reactid="491"><article class="window-frame focus" data-reactid="492"><header class="top-bar" data-reactid="493"><div class="controls" data-reactid="494"><div class="control close" data-reactid="495"></div><div class="control minify" data-reactid="496"></div><div class="control expand" data-reactid="497"></div></div><input class="address-bar" value="http://www.example.com" data-reactid="498"/></header><section class="window-content" data-reactid="499"><div class="layout-aside layout-aside-collapse" data-reactid="500"><aside class="layout-sider" data-reactid="501"><div class="layout-logo" data-reactid="502"></div><ul class="ant-menu ant-menu-inline ant-menu-dark ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="503"><li style="padding-left:24px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="504"><i class="anticon anticon-user" data-reactid="505"></i></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="506"><i class="anticon anticon-setting" data-reactid="507"></i></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="508"><i class="anticon anticon-laptop" data-reactid="509"></i></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="510"><i class="anticon anticon-notification" data-reactid="511"></i></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="512"><i class="anticon anticon-folder" data-reactid="513"></i></li></ul><div class="aside-action" data-reactid="514"><i class="anticon anticon-right" data-reactid="515"></i></div></aside><div class="layout-main" data-reactid="516"><div class="layout-header" data-reactid="517"></div><div class="layout-container" data-reactid="518"><div class="ant-breadcrumb" data-reactid="519"><span data-reactid="520"><span class="ant-breadcrumb-link" data-reactid="521">Home</span><span class="ant-breadcrumb-separator" data-reactid="522">/</span></span><span data-reactid="523"><span class="ant-breadcrumb-link" data-reactid="524">App list</span><span class="ant-breadcrumb-separator" data-reactid="525">/</span></span><span data-reactid="526"><span class="ant-breadcrumb-link" data-reactid="527">Any app</span><span class="ant-breadcrumb-separator" data-reactid="528">/</span></span></div><div class="layout-content" data-reactid="529"><div style="height:220px;" data-reactid="530">Contents</div></div></div><div class="layout-footer" data-reactid="531">Ant Design all rights reserved © 2015 Created by Ant UED</div></div></div></section></article><style data-reactid="532">.layout-aside {
|
||
position: relative;
|
||
min-height: 100%;
|
||
}
|
||
|
||
.layout-aside .layout-logo {
|
||
height: 32px;
|
||
background: #333;
|
||
border-radius: 4px;
|
||
margin: 16px 24px;
|
||
transition: all .3s;
|
||
}
|
||
|
||
.layout-aside-collapse .layout-logo {
|
||
width: 32px;
|
||
margin: 16px;
|
||
transition: all .3s;
|
||
}
|
||
|
||
.layout-aside .layout-sider {
|
||
width: 224px;
|
||
background: #404040;
|
||
position: absolute;
|
||
overflow: visible;
|
||
padding-bottom: 24px;
|
||
height: 100%;
|
||
transition: all .3s;
|
||
}
|
||
|
||
.layout-aside-collapse .layout-sider {
|
||
width: 64px;
|
||
transition: all .3s;
|
||
}
|
||
|
||
.layout-aside .layout-sider > .menu {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.layout-aside .layout-sider > .menu > .menu-item {
|
||
margin: 16px 0;
|
||
}
|
||
|
||
.layout-aside .layout-sider > .menu > .menu-item .nav-text {
|
||
vertical-align: baseline;
|
||
display: inline-block;
|
||
}
|
||
|
||
.layout-aside .layout-sider > .menu > .menu-item > .anticon {
|
||
transition: font-size .3s;
|
||
}
|
||
|
||
.layout-aside-collapse .layout-sider > .menu > .menu-item {
|
||
transition: all 0s ease;
|
||
}
|
||
|
||
.layout-aside-collapse .layout-sider > .menu > .menu-item > .anticon {
|
||
font-size: 16px;
|
||
display: inline-block;
|
||
}
|
||
|
||
.layout-aside-collapse .layout-sider > .menu > .menu-item .nav-text {
|
||
display: none;
|
||
}
|
||
|
||
.layout-aside-collapse .layout-sider > .menu > .menu-item:hover {
|
||
background: #2db7f5;
|
||
color: #fff;
|
||
transition: all 0s ease;
|
||
}
|
||
|
||
.layout-aside-collapse .layout-sider > .menu > .menu-item:hover .nav-text {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
background: #2db7f5;
|
||
color: #fff;
|
||
padding-right: 16px;
|
||
border-radius: 0 5px 5px 0;
|
||
}
|
||
|
||
/* 实际使用中需要改成 position: fixed */
|
||
.layout-aside .aside-action {
|
||
height: 42px;
|
||
width: 224px;
|
||
position: absolute;
|
||
bottom: 0;
|
||
background: #656565;
|
||
color: #fff;
|
||
text-align: center;
|
||
line-height: 42px;
|
||
cursor: pointer;
|
||
transition: all .3s;
|
||
}
|
||
|
||
.layout-aside-collapse .aside-action {
|
||
width: 64px;
|
||
transition: all .3s;
|
||
}
|
||
|
||
.layout-aside .layout-header {
|
||
background: #fff;
|
||
height: 64px;
|
||
border-bottom: 1px solid #e9e9e9;
|
||
}
|
||
|
||
.layout-aside .layout-main {
|
||
margin-left: 224px;
|
||
transition: all .3s;
|
||
}
|
||
|
||
.layout-aside-collapse .layout-main {
|
||
margin-left: 64px;
|
||
transition: all .3s;
|
||
}
|
||
|
||
.layout-aside .layout-container {
|
||
margin: 12px 16px 24px;
|
||
}
|
||
|
||
.layout-aside .layout-content {
|
||
background: #fff;
|
||
padding: 24px;
|
||
margin-top: 12px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.layout-aside .layout-footer {
|
||
height: 64px;
|
||
line-height: 64px;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
color: #999;
|
||
background: #fff;
|
||
border-top: 1px solid #e9e9e9;
|
||
width: 100%;
|
||
}</style></section><section class="code-box-meta markdown" data-reactid="533"><div class="code-box-title" data-reactid="534"><a href="#docs-spec-layout-demo-aside-collapse" data-reactid="535">Collapsed aside</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/docs/spec/layout/demo/aside-collapse.md" data-reactid="536"><i class="anticon anticon-edit" data-reactid="537"></i></a></div><div data-reactid="538"><p data-reactid="539"><!-- react-text: 540 -->This pattern is used when the horizontal space is limited. By default, Aside navigation is collapsed. You can click the button at the bottom to expand it.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="541"></i></section><section class="highlight-wrapper" data-reactid="542"><div class="highlight" data-reactid="543"><i class="anticon anticon-copy code-box-code-copy" data-reactid="544"></i><pre class="language-jsx" data-reactid="545"><code data-reactid="546"><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">"layout-aside layout-aside-collapse"</span> <span class="token punctuation">:</span> <span class="token string">"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>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>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>Navigation <span class="token number">1</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>Navigation <span class="token number">2</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>Navigation <span class="token number">3</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>Navigation <span class="token number">4</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>Navigation <span class="token number">5</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>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>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>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>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>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>Home<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>App list<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>Any app<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 attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>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>
|
||
Contents
|
||
<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>layout-footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||
Ant Design all rights reserved © <span class="token number">2015</span> Created by Ant UED
|
||
<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="547"><pre data-reactid="548"><code class="css" data-reactid="549"><span class="token selector"><span class="token class">.layout-aside</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
|
||
<span class="token property">min-height</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-logo</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">32</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#333</span><span class="token punctuation">;</span>
|
||
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">4</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">16</span>px <span class="token number">24</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">.3</span>s<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-aside-collapse</span> <span class="token class">.layout-logo</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">32</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">16</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">.3</span>s<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-sider</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">224</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#404040</span><span class="token punctuation">;</span>
|
||
<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
|
||
<span class="token property">overflow</span><span class="token punctuation">:</span> visible<span class="token punctuation">;</span>
|
||
<span class="token property">padding-bottom</span><span class="token punctuation">:</span> <span class="token number">24</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
|
||
<span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">.3</span>s<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-aside-collapse</span> <span class="token class">.layout-sider</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">64</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">.3</span>s<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-sider</span> > <span class="token class">.menu</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token number">20</span>px<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-sider</span> > <span class="token class">.menu</span> > <span class="token class">.menu-item</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">16</span>px <span class="token number">0</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-sider</span> > <span class="token class">.menu</span> > <span class="token class">.menu-item</span> <span class="token class">.nav-text</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">vertical-align</span><span class="token punctuation">:</span> baseline<span class="token punctuation">;</span>
|
||
<span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-sider</span> > <span class="token class">.menu</span> > <span class="token class">.menu-item</span> > <span class="token class">.anticon</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">transition</span><span class="token punctuation">:</span> font-size <span class="token number">.3</span>s<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-aside-collapse</span> <span class="token class">.layout-sider</span> > <span class="token class">.menu</span> > <span class="token class">.menu-item</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">0</span>s ease<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-aside-collapse</span> <span class="token class">.layout-sider</span> > <span class="token class">.menu</span> > <span class="token class">.menu-item</span> > <span class="token class">.anticon</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">16</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-aside-collapse</span> <span class="token class">.layout-sider</span> > <span class="token class">.menu</span> > <span class="token class">.menu-item</span> <span class="token class">.nav-text</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-aside-collapse</span> <span class="token class">.layout-sider</span> > <span class="token class">.menu</span> > <span class="token class">.menu-item</span><span class="token pseudo-class">:hover</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#2db7f5</span><span class="token punctuation">;</span>
|
||
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
|
||
<span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">0</span>s ease<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-aside-collapse</span> <span class="token class">.layout-sider</span> > <span class="token class">.menu</span> > <span class="token class">.menu-item</span><span class="token pseudo-class">:hover</span> <span class="token class">.nav-text</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
|
||
<span class="token property">vertical-align</span><span class="token punctuation">:</span> top<span class="token punctuation">;</span>
|
||
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#2db7f5</span><span class="token punctuation">;</span>
|
||
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
|
||
<span class="token property">padding-right</span><span class="token punctuation">:</span> <span class="token number">16</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">5</span>px <span class="token number">5</span>px <span class="token number">0</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token comment" spellcheck="true">/* 实际使用中需要改成 position: fixed */</span>
|
||
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.aside-action</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">42</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">224</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
|
||
<span class="token property">bottom</span><span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#656565</span><span class="token punctuation">;</span>
|
||
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
|
||
<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
|
||
<span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">42</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
|
||
<span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">.3</span>s<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-aside-collapse</span> <span class="token class">.aside-action</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">64</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">.3</span>s<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-header</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
|
||
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">64</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">border-bottom</span><span class="token punctuation">:</span> <span class="token number">1</span>px solid <span class="token hexcode">#e9e9e9</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-main</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token number">224</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">.3</span>s<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-aside-collapse</span> <span class="token class">.layout-main</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token number">64</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">transition</span><span class="token punctuation">:</span> all <span class="token number">.3</span>s<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-container</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">12</span>px <span class="token number">16</span>px <span class="token number">24</span>px<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-content</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
|
||
<span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">24</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token number">12</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">4</span>px<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token selector"><span class="token class">.layout-aside</span> <span class="token class">.layout-footer</span> </span><span class="token punctuation">{</span>
|
||
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">64</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">64</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
|
||
<span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">12</span>px<span class="token punctuation">;</span>
|
||
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#999</span><span class="token punctuation">;</span>
|
||
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
|
||
<span class="token property">border-top</span><span class="token punctuation">:</span> <span class="token number">1</span>px solid <span class="token hexcode">#e9e9e9</span><span class="token punctuation">;</span>
|
||
<span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">100%</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span></code></pre></div></section></section></div></div><section class="markdown api-container" data-reactid="550"></section></article></div></div><div class="ant-row" data-reactid="551"><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="552"><section class="prev-next-nav" data-reactid="553"><a class="prev-page" href="/docs/spec/colors" data-reactid="554">Colors</a><a class="next-page" href="/docs/spec/motion" data-reactid="555">Motion</a></section></div></div></div><footer id="footer" data-reactid="556"><ul data-reactid="557"><li data-reactid="558"><h2 data-reactid="559"><i class="anticon anticon-github" data-reactid="560"></i><!-- react-text: 561 --> GitHub<!-- /react-text --></h2><div data-reactid="562"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="563"><span data-reactid="564">Repository</span></a></div><div data-reactid="565"><a target="_blank " href="https://ant.design/docs/react/customize-theme" data-reactid="566"><span data-reactid="567">Customize Theme</span></a></div><div data-reactid="568"><a target="_blank " href="https://github.com/websemantics/awesome-ant-design" data-reactid="569"><span data-reactid="570">Awesome Ant Design</span></a></div></li><li data-reactid="571"><h2 data-reactid="572"><i class="anticon anticon-link" data-reactid="573"></i><!-- react-text: 574 --> <!-- /react-text --><span data-reactid="575">Links</span></h2><div data-reactid="576"><a href="http://mobile.ant.design" data-reactid="577">Ant Design Mobile</a><span data-reactid="578"> - </span><span data-reactid="579">Mobile UI</span></div><div data-reactid="580"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="581">dva</a><!-- react-text: 582 --> - <!-- /react-text --><span data-reactid="583">Framework</span></div><div data-reactid="584"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="585">dva-cli</a><!-- react-text: 586 --> -<!-- /react-text --><span data-reactid="587">Developer Tools</span></div><div data-reactid="588"><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/" data-reactid="589">Egg</a><span data-reactid="590"> - </span><span data-reactid="591">Enterprise Node Framework</span></div><div data-reactid="592"><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/" data-reactid="593">AntV</a><span data-reactid="594"> - </span><span data-reactid="595">Data Visualization</span></div><div data-reactid="596"><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design" data-reactid="597">Ant Motion</a><span data-reactid="598"> - </span><span data-reactid="599">Motion Soluction</span></div><div data-reactid="600"><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/" data-reactid="601">AntD Library</a><span data-reactid="602"> - </span><span data-reactid="603">Axure library</span></div><div data-reactid="604"><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design" data-reactid="605">Ant UX</a><span data-reactid="606"> - </span><span data-reactid="607">Sitemap Template</span></div></li><li data-reactid="608"><h2 data-reactid="609"><i class="anticon anticon-customer-service" data-reactid="610"></i><!-- react-text: 611 --> <!-- /react-text --><span data-reactid="612">Community</span></h2><div data-reactid="613"><a href="/changelog" data-reactid="614"><span data-reactid="615">Change Log</span></a></div><div data-reactid="616"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ" data-reactid="617"><span data-reactid="618">FAQ</span></a></div><div data-reactid="619"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="620"><span data-reactid="621">Chat Room</span></a></div><div data-reactid="622"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="623"><span data-reactid="624">Bug Report</span></a></div><div data-reactid="625"><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd" data-reactid="626"><span data-reactid="627">StackOverflow</span></a></div><div data-reactid="628"><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd" data-reactid="629"><span data-reactid="630">SegmentFault</span></a></div></li><li data-reactid="631"><h2 data-reactid="632"><!-- react-text: 633 -->Copyright © <!-- /react-text --><!-- react-text: 634 -->2017<!-- /react-text --></h2><div data-reactid="635"><span data-reactid="636">Created by Ant UED</span></div><div data-reactid="637"><!-- react-text: 638 -->Built with <!-- /react-text --><a target="_blank" rel="noopener noreferrer" href="https://github.com/benjycui/bisheng" data-reactid="639">BiSheng</a></div></li></ul></footer></div>
|
||
</div>
|
||
<script src="/common.js"></script>
|
||
<script src="/index.js"></script>
|
||
</body>
|
||
</html>
|