home/ant-design
2
0
Fork 0
mirror of https://github.com/wahyd4/ant-design.git synced 2026-08-22 19:28:47 +10:00
Code Issues Packages Projects Releases Wiki Activity
Files
1ebd8aade1eefa3c1ec9fa79be90be00947cc8e2
ant-design/docs/spec/layout/index.html
T
afc163 445854150e Updates
2016-03-07 23:38:41 +08:00

1612 lines
86 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="description" content="一个 UI 设计语言"/>
<title>
常用布局 - Ant Design
</title>
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="shortcut icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="stylesheet" href="../../../dist/demo.css?20160114">
<script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.1.14/es5-shim.min.js,es5-shim/4.1.14/es5-sham.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js,jquery/1.11.3/jquery.min.js,bluebird/3.1.1/bluebird.min.js"></script>
<script>
(function() {
window.ANT_COMPONENTS = [];
window.InstantClickChangeFns = [];
ANT_COMPONENTS.push({
title: 'Pagination',
desc: '分页'
});
ANT_COMPONENTS.push({
title: 'Affix',
desc: '固钉'
});
ANT_COMPONENTS.push({
title: 'Badge',
desc: '徽标数'
});
ANT_COMPONENTS.push({
title: 'Breadcrumb',
desc: '面包屑'
});
ANT_COMPONENTS.push({
title: 'Button',
desc: '按钮'
});
ANT_COMPONENTS.push({
title: 'Calendar',
desc: '日历'
});
ANT_COMPONENTS.push({
title: 'Carousel',
desc: '走马灯'
});
ANT_COMPONENTS.push({
title: 'Cascader',
desc: '级联选择'
});
ANT_COMPONENTS.push({
title: 'Checkbox',
desc: '多选框'
});
ANT_COMPONENTS.push({
title: 'Collapse',
desc: '折叠面板'
});
ANT_COMPONENTS.push({
title: 'DatePicker',
desc: '日期选择框'
});
ANT_COMPONENTS.push({
title: 'Dropdown',
desc: '下拉菜单'
});
ANT_COMPONENTS.push({
title: 'Form',
desc: '表单'
});
ANT_COMPONENTS.push({
title: 'Icon',
desc: '图标'
});
ANT_COMPONENTS.push({
title: 'InputNumber',
desc: '数字输入框'
});
ANT_COMPONENTS.push({
title: 'Layout',
desc: '布局'
});
ANT_COMPONENTS.push({
title: 'Menu',
desc: '导航菜单'
});
ANT_COMPONENTS.push({
title: 'Message',
desc: '全局提示'
});
ANT_COMPONENTS.push({
title: 'Modal',
desc: '对话框'
});
ANT_COMPONENTS.push({
title: 'Notification',
desc: '通知提醒框'
});
ANT_COMPONENTS.push({
title: 'Alert',
desc: '警告提示'
});
ANT_COMPONENTS.push({
title: 'Popconfirm',
desc: '气泡确认框'
});
ANT_COMPONENTS.push({
title: 'Popover',
desc: '气泡卡片'
});
ANT_COMPONENTS.push({
title: 'Progress',
desc: '进度条'
});
ANT_COMPONENTS.push({
title: 'QueueAnim',
desc: '进出场动画'
});
ANT_COMPONENTS.push({
title: 'Radio',
desc: '单选框'
});
ANT_COMPONENTS.push({
title: 'Select',
desc: '选择器'
});
ANT_COMPONENTS.push({
title: 'Slider',
desc: '滑动输入条'
});
ANT_COMPONENTS.push({
title: 'Spin',
desc: '加载中'
});
ANT_COMPONENTS.push({
title: 'Steps',
desc: '步骤条'
});
ANT_COMPONENTS.push({
title: 'Switch',
desc: '开关'
});
ANT_COMPONENTS.push({
title: 'Table',
desc: '表格'
});
ANT_COMPONENTS.push({
title: 'Tabs',
desc: '标签页'
});
ANT_COMPONENTS.push({
title: 'Tag',
desc: '标签'
});
ANT_COMPONENTS.push({
title: 'TimePicker',
desc: '时间选择框'
});
ANT_COMPONENTS.push({
title: 'Timeline',
desc: '时间轴'
});
ANT_COMPONENTS.push({
title: 'Tooltip',
desc: '文字提示'
});
ANT_COMPONENTS.push({
title: 'Transfer',
desc: '穿梭框'
});
ANT_COMPONENTS.push({
title: 'Tree',
desc: '树形控件'
});
ANT_COMPONENTS.push({
title: 'TreeSelect',
desc: '树选择'
});
ANT_COMPONENTS.push({
title: 'Upload',
desc: '文件上传'
});
// fix ie location origin
// http://stackoverflow.com/questions/22564167/window-location-origin-gives-wrong-value-when-using-ie
if (!window.location.origin) {
window.location.origin = window.location.protocol + "//"
+ window.location.hostname
+ (window.location.port ? ':' + window.location.port : '');
}
var i = location.pathname.split('/').lastIndexOf('ant-design');
if (i > 0) {
window.rootUrl = location.origin + location.pathname.split('/').slice(0, 2+1).join('/');
} else {
window.rootUrl = location.origin;
}
})();
</script>
<script>
window.antdVersion = {
latest: '0.12.8'
};
</script>
<script src="../../../dist/demo.js?20160114"></script>
</head>
<body >
<header id="header" class="clearfix">
<a class="logo" href="../../..">
<img width="60" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
Ant Design
</a>
<div class="search">
<div id="autoComplete"></div>
</div>
<nav class="nav" tabindex="-1">
<span class="bar"></span>
<ul>
<li class="">
<a href="../../..">首页</a>
</li>
<li class="">
<a href="../../practice/cases">实践</a>
</li>
<li class="">
<a href="../../pattern/navigation">模式</a>
</li>
<li class="">
<a href="../../react/introduce">组件</a>
</li>
<li class="current">
<a href="../introduce">语言</a>
</li>
<li class="">
<a href="../../resource/download">资源</a>
</li>
</ul>
</nav>
<div class="nav-phone-icon"></div>
</header>
<div class="main-wrapper">
<aside class="aside-container">
<ul>
<li class="">
<a href="../introduce"
class="">
Ant Design
<span class="chinese"></span>
</a>
</li>
<li open="open">
<h4>基础</h4>
<ul class="">
<li class="">
<a href="../font"
class="">
字体
<span class="chinese"></span>
</a>
</li>
<li class="">
<a href="../typography"
class="">
排版
<span class="chinese"></span>
</a>
</li>
<li class="">
<a href="../colors"
class="">
色彩
<span class="chinese"></span>
</a>
</li>
<li class="current">
<a href="./"
class="">
常用布局
<span class="chinese"></span>
</a>
</li>
</ul>
</li>
<li open="open">
<h4>动画</h4>
<ul class="">
<li class="">
<a href="../easing"
class="">
自然运动
<span class="chinese"></span>
</a>
</li>
<li class="">
<a href="../page-transition"
class="">
互动转换
<span class="chinese"></span>
</a>
</li>
<li class="">
<a href="../motion"
class="">
组件动画
<span class="chinese"></span>
</a>
</li>
</ul>
</li>
</ul>
</aside>
<section class="main-container">
<article class="markdown">
<h1>
常用布局
</h1>
<p>布局和导航是产品的骨架，是页面的重要构成模式之一，是作为后续展开页面设计的基础，可以为产品奠定交互和视觉风格。</p>
<p>Ant Design 的布局和导航设计规范如下：</p>
<h3 id="尺寸规则">尺寸规则<a href="#尺寸规则" class="anchor">#</a> </h3><p>一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。</p>
<ul>
<li>顶部导航（大部分系统）：一级导航高度 <code>64px</code>，二级导航 <code>48px</code>。</li>
<li>顶部导航（展示类页面）：一级导航高度 <code>80px</code>,二级导航 <code>56px</code>。</li>
<li>顶部导航高度的范围计算公式为：<code>48+8n</code>。</li>
<li>侧边导航宽度的范围计算公式：<code>200+8n</code>。</li>
</ul>
<h3 id="交互原则">交互原则<a href="#交互原则" class="anchor">#</a> </h3><ul>
<li>一级导航和末级的导航需要在可视化的层面被强调出来；</li>
<li>当前项应该在呈现上优先级最高；</li>
<li>当导航收起的时候，当前项的样式自动赋予给它的上一个层级；</li>
<li>左侧导航栏的收放交互同时支持手风琴和全展开的样式，根据业务的要求进行适当的选择。</li>
</ul>
<h3 id="视觉原则">视觉原则<a href="#视觉原则" class="anchor">#</a> </h3><p>导航样式上需要根据信息层级合理的选择样式：</p>
<ul>
<li><p><strong>大色块强调</strong></p>
<p>建议用于底色为深色系时，当前页面父级的导航项。</p>
</li>
<li><p><strong>高亮火柴棍</strong></p>
<p>当导航栏底色为浅色系时使用，可用于当前页面对应导航项，建议尽量在导航路径的最终项使用。</p>
</li>
<li><p><strong>字体高亮变色</strong></p>
<p>从可视化层面，字体高亮的视觉强化力度低于大色块，通常在当前项的上一级使用。</p>
</li>
<li><p><strong>字体放大</strong></p>
<p><code>12px</code>、<code>14px</code> 是导航的标准字号，14 号字体用在一、二级导航中。字号可以考虑导航项的等级做相应选择。</p>
</li>
</ul>
<p>在大中后台系统中，Ant Design 使用两种常见的布局形式，顶部导航布局和侧边导航布局，以下收集了使用 Ant Design 设计的中后台产品的基本布局。</p>
</article>
<h2 class="component-demos">
代码演示
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
</h2>
<div class="code-boxes">
<div class="code-boxes-col-1-1"><div class="code-box" id="layout-demo-top">
<div class="code-box-demo">
<div id="docs-spec-layout-demo-top"></div>
<script>mountNode = document.getElementById('docs-spec-layout-demo-top');</script>
<script>(function(){"use strict";
var _antd = require("antd");
ReactDOM.render(React.createElement(
BrowserDemo,
null,
React.createElement(
"div",
{ className: "ant-layout-top" },
React.createElement(
"div",
{ className: "ant-layout-header" },
React.createElement(
"div",
{ className: "ant-layout-wrapper" },
React.createElement("div", { className: "ant-layout-logo" }),
React.createElement(
_antd.Menu,
{ theme: "dark", mode: "horizontal",
defaultSelectedKeys: ['2'], style: { lineHeight: '64px' } },
React.createElement(
_antd.Menu.Item,
{ key: "1" },
"导航一"
),
React.createElement(
_antd.Menu.Item,
{ key: "2" },
"导航二"
),
React.createElement(
_antd.Menu.Item,
{ key: "3" },
"导航三"
)
)
)
),
React.createElement(
"div",
{ className: "ant-layout-subheader" },
React.createElement(
"div",
{ className: "ant-layout-wrapper" },
React.createElement(
_antd.Menu,
{ mode: "horizontal",
defaultSelectedKeys: ['1'], style: { marginLeft: 124 } },
React.createElement(
_antd.Menu.Item,
{ key: "1" },
"二级导航"
),
React.createElement(
_antd.Menu.Item,
{ key: "2" },
"二级导航"
),
React.createElement(
_antd.Menu.Item,
{ key: "3" },
"二级导航"
)
)
)
),
React.createElement(
"div",
{ className: "ant-layout-wrapper" },
React.createElement(
"div",
{ className: "ant-layout-breadcrumb" },
React.createElement(
_antd.Breadcrumb,
null,
React.createElement(
_antd.Breadcrumb.Item,
null,
"首页"
),
React.createElement(
_antd.Breadcrumb.Item,
null,
"应用列表"
),
React.createElement(
_antd.Breadcrumb.Item,
null,
"某应用"
)
)
),
React.createElement(
"div",
{ className: "ant-layout-container" },
React.createElement("div", { style: { height: 210 } })
)
),
React.createElement(
"div",
{ className: "ant-layout-footer" },
"Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持"
)
)
), mountNode);})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Menu, Breadcrumb } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
ReactDOM.render(
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">BrowserDemo</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-top"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-header"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-wrapper"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-logo"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu</span> <span class="hljs-attribute">theme</span>=<span class="hljs-value">"dark"</span> <span class="hljs-attribute">mode</span>=<span class="hljs-value">"horizontal"</span>
<span class="hljs-attribute">defaultSelectedKeys</span>=<span class="hljs-value">{['2']}</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{{lineHeight:</span> '<span class="hljs-attribute">64px</span>'}}&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"1"</span>&gt;</span>导航一<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"2"</span>&gt;</span>导航二<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"3"</span>&gt;</span>导航三<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">Menu</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-subheader"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-wrapper"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu</span> <span class="hljs-attribute">mode</span>=<span class="hljs-value">"horizontal"</span>
<span class="hljs-attribute">defaultSelectedKeys</span>=<span class="hljs-value">{['1']}</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{{marginLeft:</span> <span class="hljs-attribute">124</span>}}&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"1"</span>&gt;</span>二级导航<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"2"</span>&gt;</span>二级导航<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"3"</span>&gt;</span>二级导航<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">Menu</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-wrapper"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-breadcrumb"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Breadcrumb</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Breadcrumb.Item</span>&gt;</span>首页<span class="hljs-tag">&lt;/<span class="hljs-title">Breadcrumb.Item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Breadcrumb.Item</span>&gt;</span>应用列表<span class="hljs-tag">&lt;/<span class="hljs-title">Breadcrumb.Item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Breadcrumb.Item</span>&gt;</span>某应用<span class="hljs-tag">&lt;/<span class="hljs-title">Breadcrumb.Item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">Breadcrumb</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-container"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{{</span> <span class="hljs-attribute">height:</span> <span class="hljs-attribute">210</span> }}&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-footer"</span>&gt;</span>
Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">BrowserDemo</span>&gt;</span>
, mountNode);</span></code></pre></div><style type="text/css">.ant-layout-top {
height: 100%;
}
.ant-layout-top .ant-layout-wrapper {
padding: 0 50px;
}
.ant-layout-top .ant-layout-header {
background: #404040;
height: 64px;
}
.ant-layout-top .ant-layout-logo {
width: 120px;
height: 32px;
background: #333;
border-radius: 6px;
margin: 16px 28px 16px 0;
float: left;
}
.ant-layout-top .ant-layout-subheader {
height: 48px;
border-bottom: 1px solid #e9e9e9;
background: #fff;
}
.ant-layout-top .ant-layout-breadcrumb {
margin: 7px 0 -17px 24px;
}
.ant-layout-top .ant-layout-container {
background: #fff;
margin: 24px 0 0;
position: relative;
padding-top: 24px;
overflow: hidden;
}
.ant-layout-top .ant-layout-footer {
height: 64px;
line-height: 64px;
text-align: center;
font-size: 12px;
color: #999;
}</style><div class="highlight"><pre><code class="css"><span class="hljs-class">.ant-layout-top</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">100%</span></span></span>;
}</span>
<span class="hljs-class">.ant-layout-top</span> <span class="hljs-class">.ant-layout-wrapper</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"> <span class="hljs-number">0</span> <span class="hljs-number">50px</span></span></span>;
}</span>
<span class="hljs-class">.ant-layout-top</span> <span class="hljs-class">.ant-layout-header</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#404040</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">64px</span></span></span>;
}</span>
<span class="hljs-class">.ant-layout-top</span> <span class="hljs-class">.ant-layout-logo</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">120px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">32px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#333</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">border-radius</span>:<span class="hljs-value"> <span class="hljs-number">6px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-number">16px</span> <span class="hljs-number">28px</span> <span class="hljs-number">16px</span> <span class="hljs-number">0</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">float</span>:<span class="hljs-value"> left</span></span>;
}</span>
<span class="hljs-class">.ant-layout-top</span> <span class="hljs-class">.ant-layout-subheader</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">48px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">border-bottom</span>:<span class="hljs-value"> <span class="hljs-number">1px</span> solid <span class="hljs-hexcolor">#e9e9e9</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#fff</span></span></span>;
}</span>
<span class="hljs-class">.ant-layout-top</span> <span class="hljs-class">.ant-layout-breadcrumb</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-number">7px</span> <span class="hljs-number">0</span> -<span class="hljs-number">17px</span> <span class="hljs-number">24px</span></span></span>;
}</span>
<span class="hljs-class">.ant-layout-top</span> <span class="hljs-class">.ant-layout-container</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#fff</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-number">24px</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">position</span>:<span class="hljs-value"> relative</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">padding-top</span>:<span class="hljs-value"> <span class="hljs-number">24px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">overflow</span>:<span class="hljs-value"> hidden</span></span>;
}</span>
<span class="hljs-class">.ant-layout-top</span> <span class="hljs-class">.ant-layout-footer</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">64px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">line-height</span>:<span class="hljs-value"> <span class="hljs-number">64px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">text-align</span>:<span class="hljs-value"> center</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">12px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#999</span></span></span>;
}</span></code></pre></div>
</div>
<div class="code-box-meta markdown">
<div class="code-box-title">
<a href="#layout-demo-top">顶部导航</a>
</div>
<p>一二级导航都在顶部。</p>
<p>顶部导航在页面布局上采用的是上下的结构，一般主导航放置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器影响；上下级的结构符合用户上下浏览的习惯，也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不适合那些一级导航项很多的信息结构。</p>
<p><code>&lt;BrowserDemo /&gt;</code> 做演示用，无须复制。</p>
<span class="collapse anticon anticon-circle-o-right" unselectable="none"></span>
</div>
</div><div class="code-box" id="layout-demo-top-aside">
<div class="code-box-demo">
<div id="docs-spec-layout-demo-top-aside"></div>
<script>mountNode = document.getElementById('docs-spec-layout-demo-top-aside');</script>
<script>(function(){"use strict";
var _antd = require("antd");
var SubMenu = _antd.Menu.SubMenu;
ReactDOM.render(React.createElement(
BrowserDemo,
null,
React.createElement(
"div",
{ className: "ant-layout-topaside" },
React.createElement(
"div",
{ className: "ant-layout-header" },
React.createElement(
"div",
{ className: "ant-layout-wrapper" },
React.createElement("div", { className: "ant-layout-logo" }),
React.createElement(
_antd.Menu,
{ theme: "dark", mode: "horizontal",
defaultSelectedKeys: ['2'], style: { lineHeight: '64px' } },
React.createElement(
_antd.Menu.Item,
{ key: "1" },
"导航一"
),
React.createElement(
_antd.Menu.Item,
{ key: "2" },
"导航二"
),
React.createElement(
_antd.Menu.Item,
{ key: "3" },
"导航三"
)
)
)
),
React.createElement(
"div",
{ className: "ant-layout-subheader" },
React.createElement(
"div",
{ className: "ant-layout-wrapper" },
React.createElement(
_antd.Menu,
{ mode: "horizontal",
defaultSelectedKeys: ['1'], style: { marginLeft: 124 } },
React.createElement(
_antd.Menu.Item,
{ key: "1" },
"二级导航"
),
React.createElement(
_antd.Menu.Item,
{ key: "2" },
"二级导航"
),
React.createElement(
_antd.Menu.Item,
{ key: "3" },
"二级导航"
)
)
)
),
React.createElement(
"div",
{ className: "ant-layout-wrapper" },
React.createElement(
"div",
{ className: "ant-layout-breadcrumb" },
React.createElement(
_antd.Breadcrumb,
null,
React.createElement(
_antd.Breadcrumb.Item,
null,
"首页"
),
React.createElement(
_antd.Breadcrumb.Item,
null,
"应用列表"
),
React.createElement(
_antd.Breadcrumb.Item,
null,
"某应用"
)
)
),
React.createElement(
"div",
{ className: "ant-layout-container" },
React.createElement(
"aside",
{ className: "ant-layout-sider" },
React.createElement(
_antd.Menu,
{ mode: "inline", defaultSelectedKeys: ['1'], defaultOpenKeys: ['sub1'] },
React.createElement(
SubMenu,
{ key: "sub1", title: React.createElement(
"span",
null,
React.createElement(_antd.Icon, { type: "user" }),
"导航一"
) },
React.createElement(
_antd.Menu.Item,
{ key: "1" },
"选项1"
),
React.createElement(
_antd.Menu.Item,
{ key: "2" },
"选项2"
),
React.createElement(
_antd.Menu.Item,
{ key: "3" },
"选项3"
),
React.createElement(
_antd.Menu.Item,
{ key: "4" },
"选项4"
)
),
React.createElement(
SubMenu,
{ key: "sub2", title: React.createElement(
"span",
null,
React.createElement(_antd.Icon, { type: "laptop" }),
"导航二"
) },
React.createElement(
_antd.Menu.Item,
{ key: "5" },
"选项5"
),
React.createElement(
_antd.Menu.Item,
{ key: "6" },
"选项6"
),
React.createElement(
_antd.Menu.Item,
{ key: "7" },
"选项7"
),
React.createElement(
_antd.Menu.Item,
{ key: "8" },
"选项8"
)
),
React.createElement(
SubMenu,
{ key: "sub3", title: React.createElement(
"span",
null,
React.createElement(_antd.Icon, { type: "notification" }),
"导航三"
) },
React.createElement(
_antd.Menu.Item,
{ key: "9" },
"选项9"
),
React.createElement(
_antd.Menu.Item,
{ key: "10" },
"选项10"
),
React.createElement(
_antd.Menu.Item,
{ key: "11" },
"选项11"
),
React.createElement(
_antd.Menu.Item,
{ key: "12" },
"选项12"
)
)
)
),
React.createElement(
"div",
{ className: "ant-layout-content" },
React.createElement(
"div",
{ style: { height: 240 } },
React.createElement(
"div",
{ style: { clear: 'both' } },
"内容区域"
)
)
)
),
React.createElement(
"div",
{ className: "ant-layout-footer" },
"Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持"
)
)
)
), mountNode);})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Menu, Breadcrumb, Icon } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
<span class="hljs-keyword">const</span> SubMenu = Menu.SubMenu;
ReactDOM.render(
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">BrowserDemo</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-topaside"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-header"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-wrapper"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-logo"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu</span> <span class="hljs-attribute">theme</span>=<span class="hljs-value">"dark"</span> <span class="hljs-attribute">mode</span>=<span class="hljs-value">"horizontal"</span>
<span class="hljs-attribute">defaultSelectedKeys</span>=<span class="hljs-value">{['2']}</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{{lineHeight:</span> '<span class="hljs-attribute">64px</span>'}}&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"1"</span>&gt;</span>导航一<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"2"</span>&gt;</span>导航二<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"3"</span>&gt;</span>导航三<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">Menu</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-subheader"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-wrapper"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu</span> <span class="hljs-attribute">mode</span>=<span class="hljs-value">"horizontal"</span>
<span class="hljs-attribute">defaultSelectedKeys</span>=<span class="hljs-value">{['1']}</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{{marginLeft:</span> <span class="hljs-attribute">124</span>}}&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"1"</span>&gt;</span>二级导航<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"2"</span>&gt;</span>二级导航<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"3"</span>&gt;</span>二级导航<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">Menu</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-wrapper"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-breadcrumb"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Breadcrumb</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Breadcrumb.Item</span>&gt;</span>首页<span class="hljs-tag">&lt;/<span class="hljs-title">Breadcrumb.Item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Breadcrumb.Item</span>&gt;</span>应用列表<span class="hljs-tag">&lt;/<span class="hljs-title">Breadcrumb.Item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Breadcrumb.Item</span>&gt;</span>某应用<span class="hljs-tag">&lt;/<span class="hljs-title">Breadcrumb.Item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">Breadcrumb</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-container"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">aside</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-sider"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu</span> <span class="hljs-attribute">mode</span>=<span class="hljs-value">"inline"</span> <span class="hljs-attribute">defaultSelectedKeys</span>=<span class="hljs-value">{['1']}</span> <span class="hljs-attribute">defaultOpenKeys</span>=<span class="hljs-value">{['sub1']}</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">SubMenu</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"sub1"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">{&lt;span</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">Icon</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"user"</span> /&gt;</span>导航一<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span>}&gt;
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"1"</span>&gt;</span>选项1<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"2"</span>&gt;</span>选项2<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"3"</span>&gt;</span>选项3<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"4"</span>&gt;</span>选项4<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">SubMenu</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">SubMenu</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"sub2"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">{&lt;span</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">Icon</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"laptop"</span> /&gt;</span>导航二<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span>}&gt;
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"5"</span>&gt;</span>选项5<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"6"</span>&gt;</span>选项6<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"7"</span>&gt;</span>选项7<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"8"</span>&gt;</span>选项8<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">SubMenu</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">SubMenu</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"sub3"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">{&lt;span</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">Icon</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"notification"</span> /&gt;</span>导航三<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span>}&gt;
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"9"</span>&gt;</span>选项9<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"10"</span>&gt;</span>选项10<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"11"</span>&gt;</span>选项11<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"12"</span>&gt;</span>选项12<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">SubMenu</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">Menu</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">aside</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-content"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{{</span> <span class="hljs-attribute">height:</span> <span class="hljs-attribute">240</span> }}&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{{clear:</span> '<span class="hljs-attribute">both</span>'}}&gt;</span>内容区域<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-footer"</span>&gt;</span>
Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">BrowserDemo</span>&gt;</span>
, mountNode);</span></code></pre></div><style type="text/css">.ant-layout-topaside {
height: 100%;
}
.ant-layout-topaside .ant-layout-wrapper {
padding: 0 50px;
}
.ant-layout-topaside .ant-layout-header {
background: #404040;
height: 64px;
}
.ant-layout-topaside .ant-layout-logo {
width: 120px;
height: 32px;
background: #333;
border-radius: 6px;
margin: 16px 28px 16px 0;
float: left;
}
.ant-layout-topaside .ant-layout-subheader {
height: 48px;
border-bottom: 1px solid #e9e9e9;
background: #fff;
}
.ant-layout-topaside .ant-layout-breadcrumb {
margin: 7px 0 -17px 24px;
}
.ant-layout-topaside .ant-layout-container {
background: #fff;
margin: 24px 0 0;
position: relative;
padding: 24px 0;
overflow: hidden;
}
.ant-layout-topaside .ant-layout-sider {
width: 224px;
float: left;
}
.ant-layout-topaside .ant-layout-content {
border-left: 1px solid #e9e9e9;
padding: 0 24px;
overflow: auto;
position: relative;
left: -1px;
}
.ant-layout-topaside .ant-layout-footer {
height: 64px;
line-height: 64px;
text-align: center;
font-size: 12px;
color: #999;
}</style><div class="highlight"><pre><code class="css"><span class="hljs-class">.ant-layout-topaside</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">100%</span></span></span>;
}</span>
<span class="hljs-class">.ant-layout-topaside</span> <span class="hljs-class">.ant-layout-wrapper</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"> <span class="hljs-number">0</span> <span class="hljs-number">50px</span></span></span>;
}</span>
<span class="hljs-class">.ant-layout-topaside</span> <span class="hljs-class">.ant-layout-header</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#404040</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">64px</span></span></span>;
}</span>
<span class="hljs-class">.ant-layout-topaside</span> <span class="hljs-class">.ant-layout-logo</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">120px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">32px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#333</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">border-radius</span>:<span class="hljs-value"> <span class="hljs-number">6px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-number">16px</span> <span class="hljs-number">28px</span> <span class="hljs-number">16px</span> <span class="hljs-number">0</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">float</span>:<span class="hljs-value"> left</span></span>;
}</span>
<span class="hljs-class">.ant-layout-topaside</span> <span class="hljs-class">.ant-layout-subheader</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">48px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">border-bottom</span>:<span class="hljs-value"> <span class="hljs-number">1px</span> solid <span class="hljs-hexcolor">#e9e9e9</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#fff</span></span></span>;
}</span>
<span class="hljs-class">.ant-layout-topaside</span> <span class="hljs-class">.ant-layout-breadcrumb</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-number">7px</span> <span class="hljs-number">0</span> -<span class="hljs-number">17px</span> <span class="hljs-number">24px</span></span></span>;
}</span>
<span class="hljs-class">.ant-layout-topaside</span> <span class="hljs-class">.ant-layout-container</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#fff</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-number">24px</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">position</span>:<span class="hljs-value"> relative</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"> <span class="hljs-number">24px</span> <span class="hljs-number">0</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">overflow</span>:<span class="hljs-value"> hidden</span></span>;
}</span>
<span class="hljs-class">.ant-layout-topaside</span> <span class="hljs-class">.ant-layout-sider</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">224px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">float</span>:<span class="hljs-value"> left</span></span>;
}</span>
<span class="hljs-class">.ant-layout-topaside</span> <span class="hljs-class">.ant-layout-content</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">border-left</span>:<span class="hljs-value"> <span class="hljs-number">1px</span> solid <span class="hljs-hexcolor">#e9e9e9</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"> <span class="hljs-number">0</span> <span class="hljs-number">24px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">overflow</span>:<span class="hljs-value"> auto</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">position</span>:<span class="hljs-value"> relative</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">left</span>:<span class="hljs-value"> -<span class="hljs-number">1px</span></span></span>;
}</span>
<span class="hljs-class">.ant-layout-topaside</span> <span class="hljs-class">.ant-layout-footer</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">64px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">line-height</span>:<span class="hljs-value"> <span class="hljs-number">64px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">text-align</span>:<span class="hljs-value"> center</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">12px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#999</span></span></span>;
}</span></code></pre></div>
</div>
<div class="code-box-meta markdown">
<div class="code-box-title">
<a href="#layout-demo-top-aside">顶部导航 + 侧边栏</a>
</div>
<p>顶级导航在头部，次级导航在侧边栏。</p>
<span class="collapse anticon anticon-circle-o-right" unselectable="none"></span>
</div>
</div><div class="code-box" id="layout-demo-aside">
<div class="code-box-demo">
<div id="docs-spec-layout-demo-aside"></div>
<script>mountNode = document.getElementById('docs-spec-layout-demo-aside');</script>
<script>(function(){"use strict";
var _antd = require("antd");
var SubMenu = _antd.Menu.SubMenu;
ReactDOM.render(React.createElement(
BrowserDemo,
null,
React.createElement(
"div",
{ className: "ant-layout-aside" },
React.createElement(
"aside",
{ className: "ant-layout-sider" },
React.createElement("div", { className: "ant-layout-logo" }),
React.createElement(
_antd.Menu,
{ mode: "inline", theme: "dark",
defaultSelectedKeys: ['1'], defaultOpenKeys: ['sub1'] },
React.createElement(
SubMenu,
{ key: "sub1", title: React.createElement(
"span",
null,
React.createElement(_antd.Icon, { type: "user" }),
"导航一"
) },
React.createElement(
_antd.Menu.Item,
{ key: "1" },
"选项1"
),
React.createElement(
_antd.Menu.Item,
{ key: "2" },
"选项2"
),
React.createElement(
_antd.Menu.Item,
{ key: "3" },
"选项3"
),
React.createElement(
_antd.Menu.Item,
{ key: "4" },
"选项4"
)
),
React.createElement(
SubMenu,
{ key: "sub2", title: React.createElement(
"span",
null,
React.createElement(_antd.Icon, { type: "laptop" }),
"导航二"
) },
React.createElement(
_antd.Menu.Item,
{ key: "5" },
"选项5"
),
React.createElement(
_antd.Menu.Item,
{ key: "6" },
"选项6"
),
React.createElement(
_antd.Menu.Item,
{ key: "7" },
"选项7"
),
React.createElement(
_antd.Menu.Item,
{ key: "8" },
"选项8"
)
),
React.createElement(
SubMenu,
{ key: "sub3", title: React.createElement(
"span",
null,
React.createElement(_antd.Icon, { type: "notification" }),
"导航三"
) },
React.createElement(
_antd.Menu.Item,
{ key: "9" },
"选项9"
),
React.createElement(
_antd.Menu.Item,
{ key: "10" },
"选项10"
),
React.createElement(
_antd.Menu.Item,
{ key: "11" },
"选项11"
),
React.createElement(
_antd.Menu.Item,
{ key: "12" },
"选项12"
)
)
)
),
React.createElement(
"div",
{ className: "ant-layout-main" },
React.createElement("div", { className: "ant-layout-header" }),
React.createElement(
"div",
{ className: "ant-layout-breadcrumb" },
React.createElement(
_antd.Breadcrumb,
null,
React.createElement(
_antd.Breadcrumb.Item,
null,
"首页"
),
React.createElement(
_antd.Breadcrumb.Item,
null,
"应用列表"
),
React.createElement(
_antd.Breadcrumb.Item,
null,
"某应用"
)
)
),
React.createElement(
"div",
{ className: "ant-layout-container" },
React.createElement(
"div",
{ className: "ant-layout-content" },
React.createElement(
"div",
{ style: { height: 590 } },
"内容区域"
)
)
),
React.createElement(
"div",
{ className: "ant-layout-footer" },
"Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持"
)
)
)
), mountNode);})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Menu, Breadcrumb, Icon } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
<span class="hljs-keyword">const</span> SubMenu = Menu.SubMenu;
ReactDOM.render(
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">BrowserDemo</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-aside"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">aside</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-sider"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-logo"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu</span> <span class="hljs-attribute">mode</span>=<span class="hljs-value">"inline"</span> <span class="hljs-attribute">theme</span>=<span class="hljs-value">"dark"</span>
<span class="hljs-attribute">defaultSelectedKeys</span>=<span class="hljs-value">{['1']}</span> <span class="hljs-attribute">defaultOpenKeys</span>=<span class="hljs-value">{['sub1']}</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">SubMenu</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"sub1"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">{&lt;span</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">Icon</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"user"</span> /&gt;</span>导航一<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span>}&gt;
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"1"</span>&gt;</span>选项1<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"2"</span>&gt;</span>选项2<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"3"</span>&gt;</span>选项3<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"4"</span>&gt;</span>选项4<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">SubMenu</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">SubMenu</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"sub2"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">{&lt;span</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">Icon</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"laptop"</span> /&gt;</span>导航二<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span>}&gt;
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"5"</span>&gt;</span>选项5<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"6"</span>&gt;</span>选项6<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"7"</span>&gt;</span>选项7<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"8"</span>&gt;</span>选项8<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">SubMenu</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">SubMenu</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"sub3"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">{&lt;span</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">Icon</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"notification"</span> /&gt;</span>导航三<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span>}&gt;
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"9"</span>&gt;</span>选项9<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"10"</span>&gt;</span>选项10<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"11"</span>&gt;</span>选项11<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"12"</span>&gt;</span>选项12<span class="hljs-tag">&lt;/<span class="hljs-title">Menu.Item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">SubMenu</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">Menu</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">aside</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-main"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-header"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-breadcrumb"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Breadcrumb</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Breadcrumb.Item</span>&gt;</span>首页<span class="hljs-tag">&lt;/<span class="hljs-title">Breadcrumb.Item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Breadcrumb.Item</span>&gt;</span>应用列表<span class="hljs-tag">&lt;/<span class="hljs-title">Breadcrumb.Item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Breadcrumb.Item</span>&gt;</span>某应用<span class="hljs-tag">&lt;/<span class="hljs-title">Breadcrumb.Item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">Breadcrumb</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-container"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-content"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{{</span> <span class="hljs-attribute">height:</span> <span class="hljs-attribute">590</span> }}&gt;</span>
内容区域
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-footer"</span>&gt;</span>
Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">BrowserDemo</span>&gt;</span>
, mountNode);</span></code></pre></div><style type="text/css">.ant-layout-aside {
position: relative;
min-height: 100%;
}
.ant-layout-aside .ant-layout-logo {
width: 150px;
height: 32px;
background: #333;
border-radius: 6px;
margin: 16px 24px 16px 28px;
}
.ant-layout-aside .ant-layout-sider {
width: 224px;
background: #404040;
position: absolute;
overflow: auto;
padding-bottom: 24px;
height: 100%;
}
.ant-layout-aside .ant-layout-sider > .ant-menu {
margin-bottom: 20px;
}
.ant-layout-aside .ant-layout-header {
background: #fff;
height: 64px;
border-bottom: 1px solid #e9e9e9;
}
.ant-layout-aside .ant-layout-breadcrumb {
margin: 7px 0 -17px 24px;
}
.ant-layout-aside .ant-layout-main {
margin-left: 224px;
}
.ant-layout-aside .ant-layout-container {
margin: 24px 16px;
}
.ant-layout-aside .ant-layout-content {
background: #fff;
padding: 24px;
}
.ant-layout-aside .ant-layout-footer {
height: 64px;
line-height: 64px;
text-align: center;
font-size: 12px;
color: #999;
background: #fff;
border-top: 1px solid #e9e9e9;
width: 100%;
}</style><div class="highlight"><pre><code class="css"><span class="hljs-class">.ant-layout-aside</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">position</span>:<span class="hljs-value"> relative</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">min-height</span>:<span class="hljs-value"> <span class="hljs-number">100%</span></span></span>;
}</span>
<span class="hljs-class">.ant-layout-aside</span> <span class="hljs-class">.ant-layout-logo</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">150px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">32px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#333</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">border-radius</span>:<span class="hljs-value"> <span class="hljs-number">6px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-number">16px</span> <span class="hljs-number">24px</span> <span class="hljs-number">16px</span> <span class="hljs-number">28px</span></span></span>;
}</span>
<span class="hljs-class">.ant-layout-aside</span> <span class="hljs-class">.ant-layout-sider</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">224px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#404040</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">position</span>:<span class="hljs-value"> absolute</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">overflow</span>:<span class="hljs-value"> auto</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">padding-bottom</span>:<span class="hljs-value"> <span class="hljs-number">24px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">100%</span></span></span>;
}</span>
<span class="hljs-class">.ant-layout-aside</span> <span class="hljs-class">.ant-layout-sider</span> &gt; <span class="hljs-class">.ant-menu</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">margin-bottom</span>:<span class="hljs-value"> <span class="hljs-number">20px</span></span></span>;
}</span>
<span class="hljs-class">.ant-layout-aside</span> <span class="hljs-class">.ant-layout-header</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#fff</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">64px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">border-bottom</span>:<span class="hljs-value"> <span class="hljs-number">1px</span> solid <span class="hljs-hexcolor">#e9e9e9</span></span></span>;
}</span>
<span class="hljs-class">.ant-layout-aside</span> <span class="hljs-class">.ant-layout-breadcrumb</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-number">7px</span> <span class="hljs-number">0</span> -<span class="hljs-number">17px</span> <span class="hljs-number">24px</span></span></span>;
}</span>
<span class="hljs-class">.ant-layout-aside</span> <span class="hljs-class">.ant-layout-main</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">margin-left</span>:<span class="hljs-value"> <span class="hljs-number">224px</span></span></span>;
}</span>
<span class="hljs-class">.ant-layout-aside</span> <span class="hljs-class">.ant-layout-container</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-number">24px</span> <span class="hljs-number">16px</span></span></span>;
}</span>
<span class="hljs-class">.ant-layout-aside</span> <span class="hljs-class">.ant-layout-content</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#fff</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"> <span class="hljs-number">24px</span></span></span>;
}</span>
<span class="hljs-class">.ant-layout-aside</span> <span class="hljs-class">.ant-layout-footer</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">64px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">line-height</span>:<span class="hljs-value"> <span class="hljs-number">64px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">text-align</span>:<span class="hljs-value"> center</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">12px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#999</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#fff</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">border-top</span>:<span class="hljs-value"> <span class="hljs-number">1px</span> solid <span class="hljs-hexcolor">#e9e9e9</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">100%</span></span></span>;
}</span></code></pre></div>
</div>
<div class="code-box-meta markdown">
<div class="code-box-title">
<a href="#layout-demo-aside">侧边导航</a>
</div>
<p>顶级导航在侧边栏。</p>
<p>侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。</p>
<span class="collapse anticon anticon-circle-o-right" unselectable="none"></span>
</div>
</div><div class="code-box" id="layout-demo-ceiling">
<div class="code-box-demo">
<div id="docs-spec-layout-demo-ceiling"></div>
<script>mountNode = document.getElementById('docs-spec-layout-demo-ceiling');</script>
<script>(function(){"use strict";
var _antd = require("antd");
ReactDOM.render(React.createElement(
BrowserDemo,
null,
React.createElement(
"div",
{ className: "ant-layout-ceiling-demo" },
React.createElement(
"div",
{ className: "ant-layout-ceiling" },
React.createElement(
"div",
{ className: "ant-layout-wrapper" },
React.createElement(
"ul",
{ className: "right" },
React.createElement(
"li",
null,
"xxx@example.com"
),
React.createElement(
"li",
null,
"|"
),
React.createElement(
"li",
null,
"帮助中心"
),
React.createElement(
"li",
null,
"|"
),
React.createElement(
"li",
null,
"客服/投诉电话：400-826-7710"
)
)
)
),
React.createElement(
"div",
{ className: "ant-layout-header" },
React.createElement(
"div",
{ className: "ant-layout-wrapper" },
React.createElement("div", { className: "ant-layout-logo" })
)
)
)
), mountNode);})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Menu, Breadcrumb } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
ReactDOM.render(
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">BrowserDemo</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-ceiling-demo"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-ceiling"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-wrapper"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">ul</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"right"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span>xxx@example.com<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span>|<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span>帮助中心<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span>|<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span>客服/投诉电话：400-826-7710<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">ul</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-header"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-wrapper"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-logo"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">BrowserDemo</span>&gt;</span>
, mountNode);</span></code></pre></div><style type="text/css">.ant-layout-ceiling-demo {
height: 100%;
}
.ant-layout-ceiling {
font-size: 12px;
height: 30px;
line-height: 30px;
background-color: #242736;
color: #ddd;
}
.ant-layout-ceiling .right {
float: right;
}
.ant-layout-ceiling ul li {
display: inline-block;
margin: 0 4px;
}
.ant-layout-ceiling-demo .ant-layout-wrapper {
padding: 0 50px;
}
.ant-layout-ceiling-demo .ant-layout-header {
background: #fff;
height: 64px;
border-bottom: 1px solid #d9d9d9;
}
.ant-layout-ceiling-demo .ant-layout-logo {
width: 120px;
height: 32px;
background: #eee;
border-radius: 6px;
margin: 16px 28px 16px 0;
float: left;
}</style><div class="highlight"><pre><code class="css"><span class="hljs-class">.ant-layout-ceiling-demo</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">100%</span></span></span>;
}</span>
<span class="hljs-class">.ant-layout-ceiling</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">12px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">30px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">line-height</span>:<span class="hljs-value"> <span class="hljs-number">30px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#242736</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#ddd</span></span></span>;
}</span>
<span class="hljs-class">.ant-layout-ceiling</span> <span class="hljs-class">.right</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">float</span>:<span class="hljs-value"> right</span></span>;
}</span>
<span class="hljs-class">.ant-layout-ceiling</span> <span class="hljs-tag">ul</span> <span class="hljs-tag">li</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value"> inline-block</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-number">0</span> <span class="hljs-number">4px</span></span></span>;
}</span>
<span class="hljs-class">.ant-layout-ceiling-demo</span> <span class="hljs-class">.ant-layout-wrapper</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">padding</span>:<span class="hljs-value"> <span class="hljs-number">0</span> <span class="hljs-number">50px</span></span></span>;
}</span>
<span class="hljs-class">.ant-layout-ceiling-demo</span> <span class="hljs-class">.ant-layout-header</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#fff</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">64px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">border-bottom</span>:<span class="hljs-value"> <span class="hljs-number">1px</span> solid <span class="hljs-hexcolor">#d9d9d9</span></span></span>;
}</span>
<span class="hljs-class">.ant-layout-ceiling-demo</span> <span class="hljs-class">.ant-layout-logo</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">120px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">32px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#eee</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">border-radius</span>:<span class="hljs-value"> <span class="hljs-number">6px</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">margin</span>:<span class="hljs-value"> <span class="hljs-number">16px</span> <span class="hljs-number">28px</span> <span class="hljs-number">16px</span> <span class="hljs-number">0</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">float</span>:<span class="hljs-value"> left</span></span>;
}</span></code></pre></div>
</div>
<div class="code-box-meta markdown">
<div class="code-box-title">
<a href="#layout-demo-ceiling">吊顶规范</a>
</div>
<p>吊顶一般用于跨系统/应用场景，可以放置统一的登录/帮助信息。</p>
<p>吊顶背景深色，高度 <code>30px</code>，和浅色调的主导航配合使用。</p>
<span class="collapse anticon anticon-circle-o-right" unselectable="none"></span>
</div>
</div>
</div>
</div>
<ul class="toc demos-anchor">
<li>
<a title="顶部导航" href="#layout-demo-top">
<span>顶部导航</span>
</a>
</li>
<li>
<a title="顶部导航 + 侧边栏" href="#layout-demo-top-aside">
<span>顶部导航 + 侧边栏</span>
</a>
</li>
<li>
<a title="侧边导航" href="#layout-demo-aside">
<span>侧边导航</span>
</a>
</li>
<li>
<a title="吊顶规范" href="#layout-demo-ceiling">
<span>吊顶规范</span>
</a>
</li>
</ul>
<div class="api-container markdown"></div>
</section>
</div><footer id="footer">
<ul>
<li>
<h2>GitHub</h2>
<a target="_blank "href="https://github.com/ant-design/ant-design">仓库</a>
<a target="_blank" href="https://github.com/ant-design/antd-init">脚手架</a>
<a target="_blank" href="http://ant-tool.github.io/">开发工具</a>
</li>
<li>
<h2>关于我们</h2>
<a target="_blank" href="https://github.com/ant-ued/blog">博客 - Ant UED</a>
</li>
<li>
<h2>联系我们</h2>
<a target="_blank" href="https://github.com/ant-design/ant-design/issues">反馈和建议</a>
<a target="_blank" href="https://gitter.im/ant-design/ant-design">讨论</a>
<a target="_blank" href="http://dwz.cn/2AF9ao">报告 Bug</a>
</li>
<li>
<div>©2015 蚂蚁金服体验技术部出品</div>
<div>文档版本：<span id="versions-select"></span></div>
</li>
</ul>
</footer>
<script data-no-instant>
if (!location.port) {
(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');
InstantClick.on('change', function() {
ga('send', 'pageview', location.pathname + location.search);
});
}
</script>
<script data-no-instant>
InstantClick.on('change', function() {
InstantClickChangeFns.forEach(function(fn) {
fn();
});
});
InstantClick.init();
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink