mirror of
https://github.com/wahyd4/ant-design.git
synced 2026-08-13 23:07:49 +10:00
1021 lines
181 KiB
HTML
1021 lines
181 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="-686177576"><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="/index-cn" 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">搜索组件...</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">EN</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="/index-cn" data-reactid="33"><span data-reactid="34">首页</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-cn" data-reactid="36"><span data-reactid="37">规范</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="38"><a href="/docs/react/introduce-cn" data-reactid="39"><span data-reactid="40">组件</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="41"><a href="/docs/pattern/navigation-cn" data-reactid="42"><span data-reactid="43">模式</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="44"><a href="/docs/resource/download-cn" data-reactid="45"><span data-reactid="46">资源</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-cn" 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-cn" data-reactid="54">实践案例</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="55"><a href="/docs/spec/feature-cn" data-reactid="56">基本理念</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="设计原则$Menu" aria-haspopup="true" data-reactid="58"><h4 data-reactid="59">设计原则</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="设计原则$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-cn" data-reactid="62">引言</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="63"><a href="/docs/spec/proximity-cn" data-reactid="64">亲密性</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="65"><a href="/docs/spec/alignment-cn" data-reactid="66">对齐</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="67"><a href="/docs/spec/contrast-cn" data-reactid="68">对比</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="69"><a href="/docs/spec/repetition-cn" data-reactid="70">重复</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="71"><a href="/docs/spec/direct-cn" data-reactid="72">直截了当</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="73"><a href="/docs/spec/lightweight-cn" data-reactid="74">简化交互</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="75"><a href="/docs/spec/stay-cn" data-reactid="76">足不出户</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="77"><a href="/docs/spec/invitation-cn" data-reactid="78">提供邀请</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="79"><a href="/docs/spec/transition-cn" data-reactid="80">巧用过渡</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="81"><a href="/docs/spec/reaction-cn" data-reactid="82">即时反应</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="设计基础$Menu" aria-haspopup="true" data-reactid="84"><h4 data-reactid="85">设计基础</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="设计基础$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-cn" data-reactid="88">字体</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="89"><a href="/docs/spec/typography-cn" data-reactid="90">排版</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="91"><a href="/docs/spec/colors-cn" data-reactid="92">色彩</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-cn" data-reactid="94">常用布局</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="95"><a href="/docs/spec/motion-cn" data-reactid="96">组件动画</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="顶部导航" data-reactid="102"><a href="#docs-spec-layout-demo-top" data-reactid="103">顶部导航</a></li><li title="顶部导航 + 侧边栏" data-reactid="104"><a href="#docs-spec-layout-demo-top-aside" data-reactid="105">顶部导航 + 侧边栏</a></li><li title="侧边导航" data-reactid="106"><a href="#docs-spec-layout-demo-aside" data-reactid="107">侧边导航</a></li><li title="吊顶规范" data-reactid="108"><a href="#docs-spec-layout-demo-ceiling" data-reactid="109">吊顶规范</a></li><li title="可收起展开的侧边导航" data-reactid="110"><a href="#docs-spec-layout-demo-aside-collapse" data-reactid="111">可收起展开的侧边导航</a></li></ul></div></div><section class="markdown" data-reactid="112"><h1 data-reactid="113"><!-- react-text: 114 -->常用布局<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/docs/spec/layout/index.zh-CN.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 -->布局和导航是产品的骨架，是页面的重要构成模式之一，是作为后续展开页面设计的基础，可以为产品奠定交互和视觉风格。<!-- /react-text --></p><p data-reactid="120"><!-- react-text: 121 -->Ant Design 的布局和导航设计规范如下：<!-- /react-text --></p><h3 id="尺寸规则" data-reactid="122"><span data-reactid="123"><!-- react-text: 124 -->尺寸规则<!-- /react-text --></span><a href="#尺寸规则" class="anchor" data-reactid="125">#</a></h3><p data-reactid="126"><!-- react-text: 127 -->一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。<!-- /react-text --></p><ul data-reactid="128"><li data-reactid="129"><p data-reactid="130"><!-- react-text: 131 -->顶部导航（大部分系统）：一级导航高度 <!-- /react-text --><code data-reactid="132"><!-- react-text: 133 -->64px<!-- /react-text --></code><!-- react-text: 134 -->，二级导航 <!-- /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 -->顶部导航（展示类页面）：一级导航高度 <!-- /react-text --><code data-reactid="141"><!-- react-text: 142 -->80px<!-- /react-text --></code><!-- react-text: 143 -->,二级导航 <!-- /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 -->顶部导航高度的范围计算公式为：<!-- /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 -->侧边导航宽度的范围计算公式：<!-- /react-text --><code data-reactid="156"><!-- react-text: 157 -->200+8n<!-- /react-text --></code><!-- react-text: 158 -->。<!-- /react-text --></p></li></ul><h3 id="交互原则" data-reactid="159"><span data-reactid="160"><!-- react-text: 161 -->交互原则<!-- /react-text --></span><a href="#交互原则" class="anchor" data-reactid="162">#</a></h3><ul data-reactid="163"><li data-reactid="164"><p data-reactid="165"><!-- react-text: 166 -->一级导航和末级的导航需要在可视化的层面被强调出来；<!-- /react-text --></p></li><li data-reactid="167"><p data-reactid="168"><!-- react-text: 169 -->当前项应该在呈现上优先级最高；<!-- /react-text --></p></li><li data-reactid="170"><p data-reactid="171"><!-- react-text: 172 -->当导航收起的时候，当前项的样式自动赋予给它的上一个层级；<!-- /react-text --></p></li><li data-reactid="173"><p data-reactid="174"><!-- react-text: 175 -->左侧导航栏的收放交互同时支持手风琴和全展开的样式，根据业务的要求进行适当的选择。<!-- /react-text --></p></li></ul><h3 id="视觉原则" data-reactid="176"><span data-reactid="177"><!-- react-text: 178 -->视觉原则<!-- /react-text --></span><a href="#视觉原则" class="anchor" data-reactid="179">#</a></h3><p data-reactid="180"><!-- react-text: 181 -->导航样式上需要根据信息层级合理的选择样式：<!-- /react-text --></p><ul data-reactid="182"><li data-reactid="183"><p data-reactid="184"><strong data-reactid="185"><!-- react-text: 186 -->大色块强调<!-- /react-text --></strong></p><p data-reactid="187"><!-- react-text: 188 -->建议用于底色为深色系时，当前页面父级的导航项。<!-- /react-text --></p></li><li data-reactid="189"><p data-reactid="190"><strong data-reactid="191"><!-- react-text: 192 -->高亮火柴棍<!-- /react-text --></strong></p><p data-reactid="193"><!-- react-text: 194 -->当导航栏底色为浅色系时使用，可用于当前页面对应导航项，建议尽量在导航路径的最终项使用。<!-- /react-text --></p></li><li data-reactid="195"><p data-reactid="196"><strong data-reactid="197"><!-- react-text: 198 -->字体高亮变色<!-- /react-text --></strong></p><p data-reactid="199"><!-- react-text: 200 -->从可视化层面，字体高亮的视觉强化力度低于大色块，通常在当前项的上一级使用。<!-- /react-text --></p></li><li data-reactid="201"><p data-reactid="202"><strong data-reactid="203"><!-- react-text: 204 -->字体放大<!-- /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 --> 是导航的标准字号，14 号字体用在一、二级导航中。字号可以考虑导航项的等级做相应选择。<!-- /react-text --></p></li></ul><p data-reactid="212"><!-- react-text: 213 -->在大中后台系统中，Ant Design 使用两种常见的布局形式，顶部导航布局和侧边导航布局，以下收集了使用 Ant Design 设计的中后台产品的基本布局。以下演示代码仅用于参考，可以直接使用 <!-- /react-text --><a href="/components/layout-cn/" data-reactid="214">Layout</a><!-- react-text: 215 --> 组件进行搭建。<!-- /react-text --></p></section><h2 data-reactid="216"><span data-reactid="217">代码演示</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">顶部导航</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 -->一二级导航都在顶部。<!-- /react-text --></p><p data-reactid="268"><!-- react-text: 269 -->顶部导航在页面布局上采用的是上下的结构，一般主导航放置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器影响；上下级的结构符合用户上下浏览的习惯，也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不适合那些一级导航项很多的信息结构。<!-- /react-text --></p><blockquote data-reactid="270"><p data-reactid="271"><code data-reactid="272"><!-- react-text: 273 --><BrowserDemo /><!-- /react-text --></code><!-- react-text: 274 --> 做演示用，无须复制。<!-- /react-text --></p></blockquote></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="275"></i></section><section class="highlight-wrapper" data-reactid="276"><div class="highlight" data-reactid="277"><i class="anticon anticon-copy code-box-code-copy" data-reactid="278"></i><pre class="language-jsx" data-reactid="279"><code data-reactid="280"><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="281"><pre data-reactid="282"><code class="css" data-reactid="283"><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="284"><section class="code-box-demo" data-reactid="285"><article class="window-frame focus" data-reactid="286"><header class="top-bar" data-reactid="287"><div class="controls" data-reactid="288"><div class="control close" data-reactid="289"></div><div class="control minify" data-reactid="290"></div><div class="control expand" data-reactid="291"></div></div><input class="address-bar" value="http://www.example.com" data-reactid="292"/></header><section class="window-content" data-reactid="293"><div class="layout-topaside" data-reactid="294"><div class="layout-header" data-reactid="295"><div class="layout-wrapper" data-reactid="296"><div class="layout-logo" data-reactid="297"></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="298"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="299">Navigation 1</li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="300">Navigation 2</li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="301">Navigation 3</li></ul></div></div><div class="layout-subheader" data-reactid="302"><div class="layout-wrapper" data-reactid="303"><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="304"><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="305">Second nav</li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="306">Second nav</li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="307">Second nav</li></ul></div></div><div class="layout-wrapper" data-reactid="308"><div class="ant-breadcrumb" data-reactid="309"><span data-reactid="310"><span class="ant-breadcrumb-link" data-reactid="311">Home</span><span class="ant-breadcrumb-separator" data-reactid="312">/</span></span><span data-reactid="313"><span class="ant-breadcrumb-link" data-reactid="314">App list</span><span class="ant-breadcrumb-separator" data-reactid="315">/</span></span><span data-reactid="316"><span class="ant-breadcrumb-link" data-reactid="317">Any app</span><span class="ant-breadcrumb-separator" data-reactid="318">/</span></span></div><div class="layout-container" data-reactid="319"><aside class="layout-sider" data-reactid="320"><ul class="ant-menu ant-menu-inline ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="321"><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu" data-reactid="322"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" data-reactid="323"><span data-reactid="324"><i class="anticon anticon-user" data-reactid="325"></i><!-- react-text: 326 -->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="327"><li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="328">item 1</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="329">item 2</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="330">item 3</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="331">item 4</li></ul></li><li class="ant-menu-submenu-inline ant-menu-submenu" data-reactid="332"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="false" aria-owns="sub2$Menu" aria-haspopup="true" data-reactid="333"><span data-reactid="334"><i class="anticon anticon-laptop" data-reactid="335"></i><!-- react-text: 336 -->Navigation 2<!-- /react-text --></span></div><!-- react-empty: 337 --></li><li class="ant-menu-submenu-inline ant-menu-submenu" data-reactid="338"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="false" aria-owns="sub3$Menu" aria-haspopup="true" data-reactid="339"><span data-reactid="340"><i class="anticon anticon-notification" data-reactid="341"></i><!-- react-text: 342 -->Navigation 3<!-- /react-text --></span></div><!-- react-empty: 343 --></li></ul></aside><div class="layout-content" data-reactid="344"><div style="height:240px;" data-reactid="345"><div style="clear:both;" data-reactid="346">Contents</div></div></div></div><div class="layout-footer" data-reactid="347">Ant Design all rights reserved © 2015 Created by Ant UED</div></div></div></section></article><style data-reactid="348">.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="349"><div class="code-box-title" data-reactid="350"><a href="#docs-spec-layout-demo-top-aside" data-reactid="351">顶部导航 + 侧边栏</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/docs/spec/layout/demo/top-aside.md" data-reactid="352"><i class="anticon anticon-edit" data-reactid="353"></i></a></div><div data-reactid="354"><p data-reactid="355"><!-- react-text: 356 -->顶级导航在头部，次级导航在侧边栏。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="357"></i></section><section class="highlight-wrapper" data-reactid="358"><div class="highlight" data-reactid="359"><i class="anticon anticon-copy code-box-code-copy" data-reactid="360"></i><pre class="language-jsx" data-reactid="361"><code data-reactid="362"><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="363"><pre data-reactid="364"><code class="css" data-reactid="365"><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="366"><section class="code-box-demo" data-reactid="367"><article class="window-frame focus" data-reactid="368"><header class="top-bar" data-reactid="369"><div class="controls" data-reactid="370"><div class="control close" data-reactid="371"></div><div class="control minify" data-reactid="372"></div><div class="control expand" data-reactid="373"></div></div><input class="address-bar" value="http://www.example.com" data-reactid="374"/></header><section class="window-content" data-reactid="375"><div class="layout-aside" data-reactid="376"><aside class="layout-sider" data-reactid="377"><div class="layout-logo" data-reactid="378"></div><ul class="ant-menu ant-menu-inline ant-menu-dark ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="379"><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu" data-reactid="380"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" data-reactid="381"><span data-reactid="382"><i class="anticon anticon-user" data-reactid="383"></i><!-- react-text: 384 -->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="385"><li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="386">item 1</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="387">item 2</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="388">item 3</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="389">item 4</li></ul></li><li class="ant-menu-submenu-inline ant-menu-submenu" data-reactid="390"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="false" aria-owns="sub2$Menu" aria-haspopup="true" data-reactid="391"><span data-reactid="392"><i class="anticon anticon-laptop" data-reactid="393"></i><!-- react-text: 394 -->Navigation 2<!-- /react-text --></span></div><!-- react-empty: 395 --></li><li class="ant-menu-submenu-inline ant-menu-submenu" data-reactid="396"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="false" aria-owns="sub3$Menu" aria-haspopup="true" data-reactid="397"><span data-reactid="398"><i class="anticon anticon-notification" data-reactid="399"></i><!-- react-text: 400 -->Navigation 3<!-- /react-text --></span></div><!-- react-empty: 401 --></li></ul></aside><div class="layout-main" data-reactid="402"><div class="layout-header" data-reactid="403"></div><div class="layout-container" data-reactid="404"><div class="ant-breadcrumb" data-reactid="405"><span data-reactid="406"><span class="ant-breadcrumb-link" data-reactid="407">Home</span><span class="ant-breadcrumb-separator" data-reactid="408">/</span></span><span data-reactid="409"><span class="ant-breadcrumb-link" data-reactid="410">App list</span><span class="ant-breadcrumb-separator" data-reactid="411">/</span></span><span data-reactid="412"><span class="ant-breadcrumb-link" data-reactid="413">Any App</span><span class="ant-breadcrumb-separator" data-reactid="414">/</span></span></div><div class="layout-content" data-reactid="415"><div style="height:590px;" data-reactid="416">Contents</div></div></div><div class="layout-footer" data-reactid="417">Ant Design all rights reserved © 2015 Created by Ant UED</div></div></div></section></article><style data-reactid="418">.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="419"><div class="code-box-title" data-reactid="420"><a href="#docs-spec-layout-demo-aside" data-reactid="421">侧边导航</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/docs/spec/layout/demo/aside.md" data-reactid="422"><i class="anticon anticon-edit" data-reactid="423"></i></a></div><div data-reactid="424"><p data-reactid="425"><!-- react-text: 426 -->顶级导航在侧边栏。<!-- /react-text --></p><p data-reactid="427"><!-- react-text: 428 -->侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="429"></i></section><section class="highlight-wrapper" data-reactid="430"><div class="highlight" data-reactid="431"><i class="anticon anticon-copy code-box-code-copy" data-reactid="432"></i><pre class="language-jsx" data-reactid="433"><code data-reactid="434"><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="435"><pre data-reactid="436"><code class="css" data-reactid="437"><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="438"><section class="code-box-demo" data-reactid="439"><article class="window-frame focus" data-reactid="440"><header class="top-bar" data-reactid="441"><div class="controls" data-reactid="442"><div class="control close" data-reactid="443"></div><div class="control minify" data-reactid="444"></div><div class="control expand" data-reactid="445"></div></div><input class="address-bar" value="http://www.example.com" data-reactid="446"/></header><section class="window-content" data-reactid="447"><div class="layout-ceiling-demo" data-reactid="448"><div class="layout-ceiling" data-reactid="449"><div class="layout-wrapper" data-reactid="450"><ul class="right" data-reactid="451"><li data-reactid="452">xxx@example.com</li><li data-reactid="453">|</li><li data-reactid="454">Help Center</li><li data-reactid="455">|</li><li data-reactid="456">Custom Service/Complaint Center phone：400-826-7710</li></ul></div></div><div class="layout-header" data-reactid="457"><div class="layout-wrapper" data-reactid="458"><div class="layout-logo" data-reactid="459"></div></div></div></div></section></article><style data-reactid="460">.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="461"><div class="code-box-title" data-reactid="462"><a href="#docs-spec-layout-demo-ceiling" data-reactid="463">吊顶规范</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/docs/spec/layout/demo/ceiling.md" data-reactid="464"><i class="anticon anticon-edit" data-reactid="465"></i></a></div><div data-reactid="466"><p data-reactid="467"><!-- react-text: 468 -->吊顶一般用于跨系统/应用场景，可以放置统一的登录/帮助信息。<!-- /react-text --></p><p data-reactid="469"><!-- react-text: 470 -->吊顶背景深色，高度 <!-- /react-text --><code data-reactid="471"><!-- react-text: 472 -->30px<!-- /react-text --></code><!-- react-text: 473 -->，和浅色调的主导航配合使用。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="474"></i></section><section class="highlight-wrapper" data-reactid="475"><div class="highlight" data-reactid="476"><i class="anticon anticon-copy code-box-code-copy" data-reactid="477"></i><pre class="language-jsx" data-reactid="478"><code data-reactid="479"><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="480"><pre data-reactid="481"><code class="css" data-reactid="482"><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="483"><section class="code-box-demo" data-reactid="484"><article class="window-frame focus" data-reactid="485"><header class="top-bar" data-reactid="486"><div class="controls" data-reactid="487"><div class="control close" data-reactid="488"></div><div class="control minify" data-reactid="489"></div><div class="control expand" data-reactid="490"></div></div><input class="address-bar" value="http://www.example.com" data-reactid="491"/></header><section class="window-content" data-reactid="492"><div class="layout-aside layout-aside-collapse" data-reactid="493"><aside class="layout-sider" data-reactid="494"><div class="layout-logo" data-reactid="495"></div><ul class="ant-menu ant-menu-inline ant-menu-dark ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="496"><li style="padding-left:24px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="497"><i class="anticon anticon-user" data-reactid="498"></i></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="499"><i class="anticon anticon-setting" data-reactid="500"></i></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="501"><i class="anticon anticon-laptop" data-reactid="502"></i></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="503"><i class="anticon anticon-notification" data-reactid="504"></i></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="505"><i class="anticon anticon-folder" data-reactid="506"></i></li></ul><div class="aside-action" data-reactid="507"><i class="anticon anticon-right" data-reactid="508"></i></div></aside><div class="layout-main" data-reactid="509"><div class="layout-header" data-reactid="510"></div><div class="layout-container" data-reactid="511"><div class="ant-breadcrumb" data-reactid="512"><span data-reactid="513"><span class="ant-breadcrumb-link" data-reactid="514">Home</span><span class="ant-breadcrumb-separator" data-reactid="515">/</span></span><span data-reactid="516"><span class="ant-breadcrumb-link" data-reactid="517">App list</span><span class="ant-breadcrumb-separator" data-reactid="518">/</span></span><span data-reactid="519"><span class="ant-breadcrumb-link" data-reactid="520">Any app</span><span class="ant-breadcrumb-separator" data-reactid="521">/</span></span></div><div class="layout-content" data-reactid="522"><div style="height:220px;" data-reactid="523">Contents</div></div></div><div class="layout-footer" data-reactid="524">Ant Design all rights reserved © 2015 Created by Ant UED</div></div></div></section></article><style data-reactid="525">.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="526"><div class="code-box-title" data-reactid="527"><a href="#docs-spec-layout-demo-aside-collapse" data-reactid="528">可收起展开的侧边导航</a><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/docs/spec/layout/demo/aside-collapse.md" data-reactid="529"><i class="anticon anticon-edit" data-reactid="530"></i></a></div><div data-reactid="531"><p data-reactid="532"><!-- react-text: 533 -->页面横向空间有限时使用。侧边导航默认收起，点击底部按钮时展开。<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="534"></i></section><section class="highlight-wrapper" data-reactid="535"><div class="highlight" data-reactid="536"><i class="anticon anticon-copy code-box-code-copy" data-reactid="537"></i><pre class="language-jsx" data-reactid="538"><code data-reactid="539"><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="540"><pre data-reactid="541"><code class="css" data-reactid="542"><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="543"></section></article></div></div><div class="ant-row" data-reactid="544"><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="545"><section class="prev-next-nav" data-reactid="546"><a class="prev-page" href="/docs/spec/colors-cn" data-reactid="547">色彩</a><a class="next-page" href="/docs/spec/motion-cn" data-reactid="548">组件动画</a></section></div></div></div><footer id="footer" data-reactid="549"><ul data-reactid="550"><li data-reactid="551"><h2 data-reactid="552"><i class="anticon anticon-github" data-reactid="553"></i><!-- react-text: 554 --> GitHub<!-- /react-text --></h2><div data-reactid="555"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="556"><span data-reactid="557">仓库</span></a></div><div data-reactid="558"><a target="_blank " href="https://ant.design/docs/react/customize-theme" data-reactid="559"><span data-reactid="560">定制主题</span></a></div><div data-reactid="561"><a target="_blank " href="https://github.com/websemantics/awesome-ant-design" data-reactid="562"><span data-reactid="563">Awesome Ant Design</span></a></div></li><li data-reactid="564"><h2 data-reactid="565"><i class="anticon anticon-link" data-reactid="566"></i><!-- react-text: 567 --> <!-- /react-text --><span data-reactid="568">相关站点</span></h2><div data-reactid="569"><a href="http://mobile.ant.design" data-reactid="570">Ant Design Mobile</a><span data-reactid="571"> - </span><span data-reactid="572">移动版</span></div><div data-reactid="573"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="574">dva</a><!-- react-text: 575 --> - <!-- /react-text --><span data-reactid="576">应用框架</span></div><div data-reactid="577"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="578">dva-cli</a><!-- react-text: 579 --> -<!-- /react-text --><span data-reactid="580">开发工具</span></div><div data-reactid="581"><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/" data-reactid="582">Egg</a><span data-reactid="583"> - </span><span data-reactid="584">企业级 Node 开发框架</span></div><div data-reactid="585"><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/" data-reactid="586">AntV</a><span data-reactid="587"> - </span><span data-reactid="588">数据可视化</span></div><div data-reactid="589"><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design" data-reactid="590">Ant Motion</a><span data-reactid="591"> - </span><span data-reactid="592">设计动效</span></div><div data-reactid="593"><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/" data-reactid="594">AntD Library</a><span data-reactid="595"> - </span><span data-reactid="596">Axure 部件库</span></div><div data-reactid="597"><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design" data-reactid="598">Ant UX</a><span data-reactid="599"> - </span><span data-reactid="600">页面逻辑素材</span></div></li><li data-reactid="601"><h2 data-reactid="602"><i class="anticon anticon-customer-service" data-reactid="603"></i><!-- react-text: 604 --> <!-- /react-text --><span data-reactid="605">社区</span></h2><div data-reactid="606"><a href="/changelog" data-reactid="607"><span data-reactid="608">更新记录</span></a></div><div data-reactid="609"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ" data-reactid="610"><span data-reactid="611">常见问题</span></a></div><div data-reactid="612"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="613"><span data-reactid="614">在线讨论</span></a></div><div data-reactid="615"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="616"><span data-reactid="617">报告 Bug</span></a></div><div data-reactid="618"><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd" data-reactid="619"><span data-reactid="620">StackOverflow</span></a></div><div data-reactid="621"><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd" data-reactid="622"><span data-reactid="623">SegmentFault</span></a></div></li><li data-reactid="624"><h2 data-reactid="625"><!-- react-text: 626 -->Copyright © <!-- /react-text --><!-- react-text: 627 -->2017<!-- /react-text --></h2><div data-reactid="628"><span data-reactid="629">蚂蚁金服体验技术部出品</span></div><div data-reactid="630"><!-- react-text: 631 -->Built with <!-- /react-text --><a target="_blank" rel="noopener noreferrer" href="https://github.com/benjycui/bisheng" data-reactid="632">BiSheng</a></div></li></ul></footer></div>
|
||
</div>
|
||
<script src="/common.js"></script>
|
||
<script src="/index.js"></script>
|
||
</body>
|
||
</html>
|