home/ant-design
2
0
Fork 0
mirror of https://github.com/wahyd4/ant-design.git synced 2026-08-27 21:56:44 +10:00
Code Issues Packages Projects Releases Wiki Activity
Files
430ceeb4d1ecc2d281ef95f2cfa04876ad5db83d
ant-design/spec/layout/index.html
T
afc163 1b0d8c3f69 Updates
2015-11-20 21:53:15 +08:00

1408 lines
62 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">
<link rel="stylesheet" href="../../static/style.css">
<link rel="stylesheet" href="../../static/tomorrow.css">
<!--[if IE 8]>
<script src="https://t.alipayobjects.com/images/rmsweb/T1q8JiXftaXXXXXXXX.js"></script>
<![endif]-->
<script src="https://as.alipayobjects.com/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"></script>
<script src="https://a.alipayobjects.com/??bluebird/2.9.30/bluebird.js,jquery/jquery/1.11.1/jquery.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: '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: 'Timeline',
desc: '时间轴'
});
ANT_COMPONENTS.push({
title: 'Timepicker',
desc: '时间选择框'
});
ANT_COMPONENTS.push({
title: 'Tooltip',
desc: '文字提示'
});
ANT_COMPONENTS.push({
title: 'Tree',
desc: '树形控件'
});
ANT_COMPONENTS.push({
title: 'Upload',
desc: '文件上传'
});
ANT_COMPONENTS.push({
title: 'Validation',
desc: '表单校验'
});
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 src="../../static/script.js"></script>
<script>
window.antdVersion = {
latest: '0.10.1',
stable: '0.10.1'
};
</script>
<script src="../../dist/demo.js"></script>
<script>
window.require = function (path) {
var result = window;
var namespaces = path.split('/');
namespaces.forEach(function (key, i) {
if (i === 2) {
key = capitalizeFirstLetter(key);
}
if (key !== 'lib') {
if (result[key]) {
result = result[key];
} else {
throw 'There should not have modules here 2.';
}
}
});
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
return result;
};
</script>
<script src="https://t.alipayobjects.com/images/T1DrxhXe0mXXXXXXXX.js"></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">
<span class="bar"></span>
<ul>
<li class="">
<a href="../.." data-no-instant>首页</a>
</li>
<li class="current">
<a href="../introduce">设计</a>
</li>
<li>
<a class="nav-link-disabled" href="">案例</a>
</li>
<li class="">
<a href="../../docs/introduce">React</a>
</li>
<li>
<a target="_blank" href="https://github.com/ant-design/ant-design">Github</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>
<li class="">
<a href="../pattern" class="nav-link-disabled">
设计模式
<span class="chinese"></span>
</a>
</li>
<li class="">
<a href="../tools" class="nav-link-disabled">
资源下载
<span class="chinese"></span>
</a>
</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="demo-top">
<div class="code-box-demo">
<div id="spec-layout-demo-top"></div>
<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 由蚂蚁金服体验技术部支持"
)
)
), document.getElementById('spec-layout-demo-top'));})()</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>
, document.getElementById('spec-layout-demo-top'));</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">.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;
}</code></pre></div>
</div>
<div class="code-box-meta markdown">
<div class="code-box-title">
<a href="#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" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
</div>
</div><div class="code-box" id="demo-top-aside">
<div class="code-box-demo">
<div id="spec-layout-demo-top-aside"></div>
<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",
{ className: "ant-layout-footer" },
"Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持"
)
)
)
), document.getElementById('spec-layout-demo-top-aside'));})()</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>&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>
, document.getElementById('spec-layout-demo-top-aside'));</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;
margin-left: 223px;
}
.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">.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;
margin-left: 223px;
}
.ant-layout-topaside .ant-layout-footer {
height; 64px;
line-height: 64px;
text-align: center;
font-size: 12px;
color: #999;
}</code></pre></div>
</div>
<div class="code-box-meta markdown">
<div class="code-box-title">
<a href="#demo-top-aside">顶部导航 + 侧边栏</a>
</div>
<p>顶级导航在头部，次级导航在侧边栏。</p>
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
</div>
</div><div class="code-box" id="demo-aside">
<div class="code-box-demo">
<div id="spec-layout-demo-aside"></div>
<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 由蚂蚁金服体验技术部支持"
)
)
)
), document.getElementById('spec-layout-demo-aside'));})()</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>
, document.getElementById('spec-layout-demo-aside'));</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">.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 &gt; .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%;
}</code></pre></div>
</div>
<div class="code-box-meta markdown">
<div class="code-box-title">
<a href="#demo-aside">侧边导航</a>
</div>
<p>顶级导航在侧边栏。</p>
<p>侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。</p>
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
</div>
</div>
</div>
</div>
<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/ant-design/tree/master/style">样式</a>
<a target="_blank" href="https://github.com/ant-design/antd-bin">开发工具</a>
</li>
<li>
<h2>关于我们</h2>
<a href="https://github.com/alipay/x/issues">博客 - 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="https://github.com/ant-design/ant-design/issues/new?title=请填写简洁有效的标题&body=**问题描述**%0A%0A（描述一下问题）%0A%0A**发生环境**%0A%0A- antd 版本：%0A- 操作系统及版本：%0A- 浏览器及版本：%0A- 在线演示地址：%0A%0A**重现步骤**%0A%0A1. ...%0A2. ...%0A">报告 Bug</a>
</li>
<li>
<h3>©2015 蚂蚁金服体验技术部出品</h3>
<h3>文档版本：<span id="versions-select"></span></h3>
</li>
</ul>
</footer>
<script src="https://t.alipayobjects.com/images/rmsweb/T1AmXhXg0kXXXXXXXX.js" data-no-instant></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