mirror of
https://github.com/wahyd4/ant-design.git
synced 2026-08-21 02:36:28 +10:00
1011 lines
181 KiB
HTML
1011 lines
181 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Ant Design - An enterprise-class UI design language and React-based implementation">
|
|
<title>Ant Design - One Design Language</title>
|
|
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
|
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.cnpmjs.org/css?family=Lato:400,700|Raleway"/>
|
|
<link rel="stylesheet" type="text/css" href="/index-1.css"/>
|
|
<link rel="stylesheet" type="text/css" href="/index-2.css"/>
|
|
<!--[if lte IE 10]>
|
|
<script
|
|
src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
|
|
<![endif]-->
|
|
<script>
|
|
if (!window.Intl) {
|
|
document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
|
|
}
|
|
if (!window.Promise) {
|
|
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>');
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="react-content" hidden>
|
|
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="-1409630680"><header id="header" class="clearfix" data-reactid="2"><div class="ant-row" data-reactid="3"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="4"><a id="logo" href="/" data-reactid="5"><img alt="logo" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" data-reactid="6"/><span data-reactid="7">Ant Design</span></a></div><div style="display:block;" class="ant-col-xs-0 ant-col-sm-17 ant-col-md-18 ant-col-lg-20" data-reactid="8"><div id="search-box" data-reactid="9"><div class="ant-select ant-select-combobox ant-select-enabled" data-reactid="10"><div class="ant-select-selection
|
|
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="11"><div class="ant-select-selection__rendered" data-reactid="12"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="13">Search Components...</div><ul data-reactid="14"><li class="ant-select-search ant-select-search--inline" data-reactid="15"><div class="ant-select-search__field__wrap" data-reactid="16"><input value="" class="ant-select-search__field" data-reactid="17"/><span class="ant-select-search__field__mirror" data-reactid="18"></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="19"><b data-reactid="20"></b></span></div></div></div><button type="button" class="ant-btn ant-btn-ghost ant-btn-sm lang" data-reactid="21"><span data-reactid="22">中文</span></button><ul class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" id="nav" tabindex="0" data-reactid="23"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="24"><a href="/" data-reactid="25"><span data-reactid="26">Home</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="27"><a href="/docs/spec/introduce" data-reactid="28"><span data-reactid="29">Specification</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="30"><a href="/docs/react/introduce" data-reactid="31"><span data-reactid="32">Components</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="33"><a href="/docs/pattern/navigation" data-reactid="34"><span data-reactid="35">Pattern</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="36"><a href="/docs/practice/cases" data-reactid="37"><span data-reactid="38">Practice</span></a></li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="39"><a href="/docs/resource/download" data-reactid="40"><span data-reactid="41">Resource</span></a></li></ul></div></div></header><div class="main-wrapper" data-reactid="42"><div class="ant-row" data-reactid="43"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="44"><ul class="ant-menu ant-menu-inline aside-container ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="45"><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="46"><a href="docs/spec/introduce" data-reactid="47">Ant Design</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="48"><a href="docs/spec/feature" data-reactid="49">Features</a></li><li class="ant-menu-submenu-inline ant-menu-submenu" data-reactid="50"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-open="false" aria-owns="1480046024143_71" aria-haspopup="true" data-reactid="51"><h4 data-reactid="52">Principles</h4></div><!-- react-empty: 53 --></li><li class="ant-menu-submenu-inline ant-menu-submenu-selected ant-menu-submenu" data-reactid="54"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-open="false" aria-owns="1480046024144_72" aria-haspopup="true" data-reactid="55"><h4 data-reactid="56">Design Fundamental</h4></div><!-- react-empty: 57 --></li></ul></div><div class="main-container ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-lg-20" data-reactid="58"><article data-reactid="59"><div class="toc-affix" data-reactid="60"><div class="" data-reactid="61"><ul class="toc demos-anchor" data-reactid="62"><li title="顶部导航" data-reactid="63"><a href="#docs-spec-layout-demo-top" data-reactid="64">顶部导航</a></li><li title="顶部导航 + 侧边栏" data-reactid="65"><a href="#docs-spec-layout-demo-top-aside" data-reactid="66">顶部导航 + 侧边栏</a></li><li title="侧边导航" data-reactid="67"><a href="#docs-spec-layout-demo-aside" data-reactid="68">侧边导航</a></li><li title="吊顶规范" data-reactid="69"><a href="#docs-spec-layout-demo-ceiling" data-reactid="70">吊顶规范</a></li><li title="可收起展开的侧边导航" data-reactid="71"><a href="#docs-spec-layout-demo-aside-collapse" data-reactid="72">可收起展开的侧边导航</a></li></ul></div></div><section class="markdown" data-reactid="73"><h1 data-reactid="74"><!-- react-text: 75 -->Layout<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/docs/spec/layout/index.md" data-reactid="76"><i class="anticon anticon-edit" data-reactid="77"></i></a></h1><section class="markdown" data-reactid="78"><p data-reactid="79"><!-- react-text: 80 -->布局和导航是产品的骨架，是页面的重要构成模式之一，是作为后续展开页面设计的基础，可以为产品奠定交互和视觉风格。<!-- /react-text --></p><p data-reactid="81"><!-- react-text: 82 -->Ant Design 的布局和导航设计规范如下：<!-- /react-text --></p><h3 id="尺寸规则" data-reactid="83"><span data-reactid="84"><!-- react-text: 85 -->尺寸规则<!-- /react-text --></span><a href="#尺寸规则" class="anchor" data-reactid="86">#</a></h3><p data-reactid="87"><!-- react-text: 88 -->一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。<!-- /react-text --></p><ul data-reactid="89"><li data-reactid="90"><p data-reactid="91"><!-- react-text: 92 -->顶部导航（大部分系统）：一级导航高度 <!-- /react-text --><code data-reactid="93"><!-- react-text: 94 -->64px<!-- /react-text --></code><!-- react-text: 95 -->，二级导航 <!-- /react-text --><code data-reactid="96"><!-- react-text: 97 -->48px<!-- /react-text --></code><!-- react-text: 98 -->。<!-- /react-text --></p></li><li data-reactid="99"><p data-reactid="100"><!-- react-text: 101 -->顶部导航（展示类页面）：一级导航高度 <!-- /react-text --><code data-reactid="102"><!-- react-text: 103 -->80px<!-- /react-text --></code><!-- react-text: 104 -->,二级导航 <!-- /react-text --><code data-reactid="105"><!-- react-text: 106 -->56px<!-- /react-text --></code><!-- react-text: 107 -->。<!-- /react-text --></p></li><li data-reactid="108"><p data-reactid="109"><!-- react-text: 110 -->顶部导航高度的范围计算公式为：<!-- /react-text --><code data-reactid="111"><!-- react-text: 112 -->48+8n<!-- /react-text --></code><!-- react-text: 113 -->。<!-- /react-text --></p></li><li data-reactid="114"><p data-reactid="115"><!-- react-text: 116 -->侧边导航宽度的范围计算公式：<!-- /react-text --><code data-reactid="117"><!-- react-text: 118 -->200+8n<!-- /react-text --></code><!-- react-text: 119 -->。<!-- /react-text --></p></li></ul><h3 id="交互原则" data-reactid="120"><span data-reactid="121"><!-- react-text: 122 -->交互原则<!-- /react-text --></span><a href="#交互原则" class="anchor" data-reactid="123">#</a></h3><ul data-reactid="124"><li data-reactid="125"><p data-reactid="126"><!-- react-text: 127 -->一级导航和末级的导航需要在可视化的层面被强调出来；<!-- /react-text --></p></li><li data-reactid="128"><p data-reactid="129"><!-- react-text: 130 -->当前项应该在呈现上优先级最高；<!-- /react-text --></p></li><li data-reactid="131"><p data-reactid="132"><!-- react-text: 133 -->当导航收起的时候，当前项的样式自动赋予给它的上一个层级；<!-- /react-text --></p></li><li data-reactid="134"><p data-reactid="135"><!-- react-text: 136 -->左侧导航栏的收放交互同时支持手风琴和全展开的样式，根据业务的要求进行适当的选择。<!-- /react-text --></p></li></ul><h3 id="视觉原则" data-reactid="137"><span data-reactid="138"><!-- react-text: 139 -->视觉原则<!-- /react-text --></span><a href="#视觉原则" class="anchor" data-reactid="140">#</a></h3><p data-reactid="141"><!-- react-text: 142 -->导航样式上需要根据信息层级合理的选择样式：<!-- /react-text --></p><ul data-reactid="143"><li data-reactid="144"><p data-reactid="145"><strong data-reactid="146"><!-- react-text: 147 -->大色块强调<!-- /react-text --></strong></p><p data-reactid="148"><!-- react-text: 149 -->建议用于底色为深色系时，当前页面父级的导航项。<!-- /react-text --></p></li><li data-reactid="150"><p data-reactid="151"><strong data-reactid="152"><!-- react-text: 153 -->高亮火柴棍<!-- /react-text --></strong></p><p data-reactid="154"><!-- react-text: 155 -->当导航栏底色为浅色系时使用，可用于当前页面对应导航项，建议尽量在导航路径的最终项使用。<!-- /react-text --></p></li><li data-reactid="156"><p data-reactid="157"><strong data-reactid="158"><!-- react-text: 159 -->字体高亮变色<!-- /react-text --></strong></p><p data-reactid="160"><!-- react-text: 161 -->从可视化层面，字体高亮的视觉强化力度低于大色块，通常在当前项的上一级使用。<!-- /react-text --></p></li><li data-reactid="162"><p data-reactid="163"><strong data-reactid="164"><!-- react-text: 165 -->字体放大<!-- /react-text --></strong></p><p data-reactid="166"><code data-reactid="167"><!-- react-text: 168 -->12px<!-- /react-text --></code><!-- react-text: 169 -->、<!-- /react-text --><code data-reactid="170"><!-- react-text: 171 -->14px<!-- /react-text --></code><!-- react-text: 172 --> 是导航的标准字号，14 号字体用在一、二级导航中。字号可以考虑导航项的等级做相应选择。<!-- /react-text --></p></li></ul><p data-reactid="173"><!-- react-text: 174 -->在大中后台系统中，Ant Design 使用两种常见的布局形式，顶部导航布局和侧边导航布局，以下收集了使用 Ant Design 设计的中后台产品的基本布局。<!-- /react-text --></p></section><h2 data-reactid="175"><span data-reactid="176">Examples</span><i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码" data-reactid="177"></i></h2></section><div class="ant-row" style="margin-left:-8px;margin-right:-8px;" data-reactid="178"><div style="padding-left:8px;padding-right:8px;" class="ant-col-24 code-boxes-col-1-1" data-reactid="179"><section class="code-box" id="docs-spec-layout-demo-top" data-reactid="180"><section class="code-box-demo" data-reactid="181"><article class="window-frame focus" data-reactid="182"><header class="top-bar" data-reactid="183"><div class="controls" data-reactid="184"><div class="control close" data-reactid="185"></div><div class="control minify" data-reactid="186"></div><div class="control expand" data-reactid="187"></div></div><input class="address-bar" value="http://www.example.com" data-reactid="188"/></header><section class="window-content" data-reactid="189"><div class="ant-layout-top" data-reactid="190"><div class="ant-layout-header" data-reactid="191"><div class="ant-layout-wrapper" data-reactid="192"><div class="ant-layout-logo" data-reactid="193"></div><ul style="line-height:64px;" class="ant-menu ant-menu-horizontal ant-menu-dark ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="194"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="195">导航一</li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="196">导航二</li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="197">导航三</li></ul></div></div><div class="ant-layout-subheader" data-reactid="198"><div class="ant-layout-wrapper" data-reactid="199"><ul style="margin-left:124px;" class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="200"><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="201">二级导航</li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="202">二级导航</li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="203">二级导航</li></ul></div></div><div class="ant-layout-wrapper" data-reactid="204"><div class="ant-layout-breadcrumb" data-reactid="205"><div class="ant-breadcrumb" data-reactid="206"><span data-reactid="207"><span class="ant-breadcrumb-link" data-reactid="208">首页</span><span class="ant-breadcrumb-separator" data-reactid="209">/</span></span><span data-reactid="210"><span class="ant-breadcrumb-link" data-reactid="211">应用列表</span><span class="ant-breadcrumb-separator" data-reactid="212">/</span></span><span data-reactid="213"><span class="ant-breadcrumb-link" data-reactid="214">某应用</span><span class="ant-breadcrumb-separator" data-reactid="215">/</span></span></div></div><div class="ant-layout-container" data-reactid="216"><div style="height:210px;" data-reactid="217"></div></div></div><div class="ant-layout-footer" data-reactid="218">Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持</div></div></section></article><style data-reactid="219">.ant-layout-top {
|
|
height: 100%;
|
|
}
|
|
|
|
.ant-layout-top .ant-layout-wrapper {
|
|
padding: 0 50px;
|
|
}
|
|
|
|
.ant-layout-top .ant-layout-header {
|
|
background: #404040;
|
|
height: 64px;
|
|
}
|
|
|
|
.ant-layout-top .ant-layout-logo {
|
|
width: 120px;
|
|
height: 32px;
|
|
background: #333;
|
|
border-radius: 6px;
|
|
margin: 16px 28px 16px 0;
|
|
float: left;
|
|
}
|
|
|
|
.ant-layout-top .ant-layout-subheader {
|
|
height: 48px;
|
|
border-bottom: 1px solid #e9e9e9;
|
|
background: #fff;
|
|
}
|
|
|
|
.ant-layout-top .ant-layout-breadcrumb {
|
|
margin: 7px 0 -17px 24px;
|
|
}
|
|
|
|
.ant-layout-top .ant-layout-container {
|
|
background: #fff;
|
|
margin: 24px 0 0;
|
|
position: relative;
|
|
padding-top: 24px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ant-layout-top .ant-layout-footer {
|
|
height: 64px;
|
|
line-height: 64px;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: #999;
|
|
}</style></section><section class="code-box-meta markdown" data-reactid="220"><div class="code-box-title" data-reactid="221"><a href="#docs-spec-layout-demo-top" data-reactid="222">顶部导航</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/docs/spec/layout/demo/top.md" data-reactid="223"><i class="anticon anticon-edit" data-reactid="224"></i></a></div><div data-reactid="225"><p data-reactid="226"><!-- react-text: 227 -->一二级导航都在顶部。<!-- /react-text --></p><p data-reactid="228"><!-- react-text: 229 -->顶部导航在页面布局上采用的是上下的结构，一般主导航放置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器影响；上下级的结构符合用户上下浏览的习惯，也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不适合那些一级导航项很多的信息结构。<!-- /react-text --></p><blockquote data-reactid="230"><p data-reactid="231"><code data-reactid="232"><!-- react-text: 233 --><BrowserDemo /><!-- /react-text --></code><!-- react-text: 234 --> 做演示用，无须复制。<!-- /react-text --></p></blockquote></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="235"></i></section><section class="highlight-wrapper" data-reactid="236"><div class="highlight" data-reactid="237"><pre class="language-jsx" data-reactid="238"><code data-reactid="239"><span class="token keyword" >import</span> <span class="token punctuation" >{</span> Menu<span class="token punctuation" >,</span> Breadcrumb <span class="token punctuation" >}</span> <span class="token keyword" >from</span> <span class="token string" >'antd'</span><span class="token punctuation" >;</span>
|
|
<span class="token keyword" >import</span> BrowserDemo <span class="token keyword" >from</span> <span class="token string" >'site/theme/template/BrowserDemo'</span><span class="token punctuation" >;</span>
|
|
|
|
ReactDOM<span class="token punctuation" >.</span><span class="token function" >render</span><span class="token punctuation" >(</span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>BrowserDemo</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-top<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-header<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-wrapper<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-logo<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu</span> <span class="token attr-name" >theme</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dark<span class="token punctuation" >"</span></span> <span class="token attr-name" >mode</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>horizontal<span class="token punctuation" >"</span></span>
|
|
<span class="token attr-name" >defaultSelectedKeys</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token punctuation" >[</span><span class="token string" >'2'</span><span class="token punctuation" >]</span><span class="token punctuation" >}</span></span> <span class="token attr-name" >style</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token punctuation" >{</span>lineHeight<span class="token punctuation" >:</span> <span class="token string" >'64px'</span><span class="token punctuation" >}</span><span class="token punctuation" >}</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>1<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>导航一<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>2<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>导航二<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>3<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>导航三<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-subheader<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-wrapper<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu</span> <span class="token attr-name" >mode</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>horizontal<span class="token punctuation" >"</span></span>
|
|
<span class="token attr-name" >defaultSelectedKeys</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token punctuation" >[</span><span class="token string" >'1'</span><span class="token punctuation" >]</span><span class="token punctuation" >}</span></span> <span class="token attr-name" >style</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token punctuation" >{</span>marginLeft<span class="token punctuation" >:</span> <span class="token number" >124</span><span class="token punctuation" >}</span><span class="token punctuation" >}</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>1<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>二级导航<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>2<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>二级导航<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>3<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>二级导航<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-wrapper<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-breadcrumb<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Breadcrumb</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Breadcrumb.Item</span><span class="token punctuation" >></span></span>首页<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Breadcrumb.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Breadcrumb.Item</span><span class="token punctuation" >></span></span>应用列表<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Breadcrumb.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Breadcrumb.Item</span><span class="token punctuation" >></span></span>某应用<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Breadcrumb.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Breadcrumb</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-container<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >style</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token punctuation" >{</span> height<span class="token punctuation" >:</span> <span class="token number" >210</span> <span class="token punctuation" >}</span><span class="token punctuation" >}</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-footer<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
Ant Design 版权所有 © <span class="token number" >2015</span> 由蚂蚁金服体验技术部支持
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>BrowserDemo</span><span class="token punctuation" >></span></span>
|
|
<span class="token punctuation" >,</span> mountNode<span class="token punctuation" >)</span><span class="token punctuation" >;</span></code></pre></div><div class="highlight" data-reactid="240"><pre data-reactid="241"><code class="css" data-reactid="242"><span class="token selector" ><span class="token class" >.ant-layout-top</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >100%</span><span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-top</span> <span class="token class" >.ant-layout-wrapper</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >padding</span><span class="token punctuation" >:</span> <span class="token number" >0</span> <span class="token number" >50</span>px<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-top</span> <span class="token class" >.ant-layout-header</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >background</span><span class="token punctuation" >:</span> <span class="token hexcode" >#404040</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >64</span>px<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-top</span> <span class="token class" >.ant-layout-logo</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >120</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >32</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >background</span><span class="token punctuation" >:</span> <span class="token hexcode" >#333</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >border-radius</span><span class="token punctuation" >:</span> <span class="token number" >6</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >margin</span><span class="token punctuation" >:</span> <span class="token number" >16</span>px <span class="token number" >28</span>px <span class="token number" >16</span>px <span class="token number" >0</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >float</span><span class="token punctuation" >:</span> left<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-top</span> <span class="token class" >.ant-layout-subheader</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >48</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >border-bottom</span><span class="token punctuation" >:</span> <span class="token number" >1</span>px solid <span class="token hexcode" >#e9e9e9</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >background</span><span class="token punctuation" >:</span> <span class="token hexcode" >#fff</span><span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-top</span> <span class="token class" >.ant-layout-breadcrumb</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >margin</span><span class="token punctuation" >:</span> <span class="token number" >7</span>px <span class="token number" >0</span> -<span class="token number" >17</span>px <span class="token number" >24</span>px<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-top</span> <span class="token class" >.ant-layout-container</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >background</span><span class="token punctuation" >:</span> <span class="token hexcode" >#fff</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >margin</span><span class="token punctuation" >:</span> <span class="token number" >24</span>px <span class="token number" >0</span> <span class="token number" >0</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >position</span><span class="token punctuation" >:</span> relative<span class="token punctuation" >;</span>
|
|
<span class="token property" >padding-top</span><span class="token punctuation" >:</span> <span class="token number" >24</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >overflow</span><span class="token punctuation" >:</span> hidden<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-top</span> <span class="token class" >.ant-layout-footer</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >64</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >line-height</span><span class="token punctuation" >:</span> <span class="token number" >64</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >text-align</span><span class="token punctuation" >:</span> center<span class="token punctuation" >;</span>
|
|
<span class="token property" >font-size</span><span class="token punctuation" >:</span> <span class="token number" >12</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >color</span><span class="token punctuation" >:</span> <span class="token hexcode" >#999</span><span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span></code></pre></div></section></section><section class="code-box" id="docs-spec-layout-demo-top-aside" data-reactid="243"><section class="code-box-demo" data-reactid="244"><article class="window-frame focus" data-reactid="245"><header class="top-bar" data-reactid="246"><div class="controls" data-reactid="247"><div class="control close" data-reactid="248"></div><div class="control minify" data-reactid="249"></div><div class="control expand" data-reactid="250"></div></div><input class="address-bar" value="http://www.example.com" data-reactid="251"/></header><section class="window-content" data-reactid="252"><div class="ant-layout-topaside" data-reactid="253"><div class="ant-layout-header" data-reactid="254"><div class="ant-layout-wrapper" data-reactid="255"><div class="ant-layout-logo" data-reactid="256"></div><ul style="line-height:64px;" class="ant-menu ant-menu-horizontal ant-menu-dark ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="257"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="258">导航一</li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="259">导航二</li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="260">导航三</li></ul></div></div><div class="ant-layout-subheader" data-reactid="261"><div class="ant-layout-wrapper" data-reactid="262"><ul style="margin-left:124px;" class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="263"><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="264">二级导航</li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="265">二级导航</li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="266">二级导航</li></ul></div></div><div class="ant-layout-wrapper" data-reactid="267"><div class="ant-layout-breadcrumb" data-reactid="268"><div class="ant-breadcrumb" data-reactid="269"><span data-reactid="270"><span class="ant-breadcrumb-link" data-reactid="271">首页</span><span class="ant-breadcrumb-separator" data-reactid="272">/</span></span><span data-reactid="273"><span class="ant-breadcrumb-link" data-reactid="274">应用列表</span><span class="ant-breadcrumb-separator" data-reactid="275">/</span></span><span data-reactid="276"><span class="ant-breadcrumb-link" data-reactid="277">某应用</span><span class="ant-breadcrumb-separator" data-reactid="278">/</span></span></div></div><div class="ant-layout-container" data-reactid="279"><aside class="ant-layout-sider" data-reactid="280"><ul class="ant-menu ant-menu-inline ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="281"><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu" data-reactid="282"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" data-reactid="283"><span data-reactid="284"><i class="anticon anticon-user " data-reactid="285"></i><!-- react-text: 286 -->导航一<!-- /react-text --></span></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="sub1$Menu" data-reactid="287"><li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="288">选项1</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="289">选项2</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="290">选项3</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="291">选项4</li></ul></li><li class="ant-menu-submenu-inline ant-menu-submenu" data-reactid="292"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="false" aria-owns="sub2$Menu" aria-haspopup="true" data-reactid="293"><span data-reactid="294"><i class="anticon anticon-laptop " data-reactid="295"></i><!-- react-text: 296 -->导航二<!-- /react-text --></span></div><!-- react-empty: 297 --></li><li class="ant-menu-submenu-inline ant-menu-submenu" data-reactid="298"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="false" aria-owns="sub3$Menu" aria-haspopup="true" data-reactid="299"><span data-reactid="300"><i class="anticon anticon-notification " data-reactid="301"></i><!-- react-text: 302 -->导航三<!-- /react-text --></span></div><!-- react-empty: 303 --></li></ul></aside><div class="ant-layout-content" data-reactid="304"><div style="height:240px;" data-reactid="305"><div style="clear:both;" data-reactid="306">内容区域</div></div></div></div><div class="ant-layout-footer" data-reactid="307">Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持</div></div></div></section></article><style data-reactid="308">.ant-layout-topaside {
|
|
height: 100%;
|
|
}
|
|
|
|
.ant-layout-topaside .ant-layout-wrapper {
|
|
padding: 0 50px;
|
|
}
|
|
|
|
.ant-layout-topaside .ant-layout-header {
|
|
background: #404040;
|
|
height: 64px;
|
|
}
|
|
|
|
.ant-layout-topaside .ant-layout-logo {
|
|
width: 120px;
|
|
height: 32px;
|
|
background: #333;
|
|
border-radius: 6px;
|
|
margin: 16px 28px 16px 0;
|
|
float: left;
|
|
}
|
|
|
|
.ant-layout-topaside .ant-layout-subheader {
|
|
height: 48px;
|
|
border-bottom: 1px solid #e9e9e9;
|
|
background: #fff;
|
|
}
|
|
|
|
.ant-layout-topaside .ant-layout-breadcrumb {
|
|
margin: 7px 0 -17px 24px;
|
|
}
|
|
|
|
.ant-layout-topaside .ant-layout-container {
|
|
background: #fff;
|
|
margin: 24px 0 0;
|
|
position: relative;
|
|
padding: 24px 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ant-layout-topaside .ant-layout-sider {
|
|
width: 224px;
|
|
float: left;
|
|
}
|
|
|
|
.ant-layout-topaside .ant-layout-content {
|
|
border-left: 1px solid #e9e9e9;
|
|
padding: 0 24px;
|
|
overflow: auto;
|
|
position: relative;
|
|
left: -1px;
|
|
}
|
|
|
|
.ant-layout-topaside .ant-layout-footer {
|
|
height: 64px;
|
|
line-height: 64px;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: #999;
|
|
}</style></section><section class="code-box-meta markdown" data-reactid="309"><div class="code-box-title" data-reactid="310"><a href="#docs-spec-layout-demo-top-aside" data-reactid="311">顶部导航 + 侧边栏</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/docs/spec/layout/demo/top-aside.md" data-reactid="312"><i class="anticon anticon-edit" data-reactid="313"></i></a></div><div data-reactid="314"><p data-reactid="315"><!-- react-text: 316 -->顶级导航在头部，次级导航在侧边栏。<!-- /react-text --></p></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="317"></i></section><section class="highlight-wrapper" data-reactid="318"><div class="highlight" data-reactid="319"><pre class="language-jsx" data-reactid="320"><code data-reactid="321"><span class="token keyword" >import</span> <span class="token punctuation" >{</span> Menu<span class="token punctuation" >,</span> Breadcrumb<span class="token punctuation" >,</span> Icon <span class="token punctuation" >}</span> <span class="token keyword" >from</span> <span class="token string" >'antd'</span><span class="token punctuation" >;</span>
|
|
<span class="token keyword" >import</span> BrowserDemo <span class="token keyword" >from</span> <span class="token string" >'site/theme/template/BrowserDemo'</span><span class="token punctuation" >;</span>
|
|
<span class="token keyword" >const</span> SubMenu <span class="token operator" >=</span> Menu<span class="token punctuation" >.</span>SubMenu<span class="token punctuation" >;</span>
|
|
|
|
ReactDOM<span class="token punctuation" >.</span><span class="token function" >render</span><span class="token punctuation" >(</span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>BrowserDemo</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-topaside<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-header<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-wrapper<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-logo<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu</span> <span class="token attr-name" >theme</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dark<span class="token punctuation" >"</span></span> <span class="token attr-name" >mode</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>horizontal<span class="token punctuation" >"</span></span>
|
|
<span class="token attr-name" >defaultSelectedKeys</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token punctuation" >[</span><span class="token string" >'2'</span><span class="token punctuation" >]</span><span class="token punctuation" >}</span></span> <span class="token attr-name" >style</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token punctuation" >{</span>lineHeight<span class="token punctuation" >:</span> <span class="token string" >'64px'</span><span class="token punctuation" >}</span><span class="token punctuation" >}</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>1<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>导航一<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>2<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>导航二<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>3<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>导航三<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-subheader<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-wrapper<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu</span> <span class="token attr-name" >mode</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>horizontal<span class="token punctuation" >"</span></span>
|
|
<span class="token attr-name" >defaultSelectedKeys</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token punctuation" >[</span><span class="token string" >'1'</span><span class="token punctuation" >]</span><span class="token punctuation" >}</span></span> <span class="token attr-name" >style</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token punctuation" >{</span>marginLeft<span class="token punctuation" >:</span> <span class="token number" >124</span><span class="token punctuation" >}</span><span class="token punctuation" >}</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>1<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>二级导航<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>2<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>二级导航<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>3<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>二级导航<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-wrapper<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-breadcrumb<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Breadcrumb</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Breadcrumb.Item</span><span class="token punctuation" >></span></span>首页<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Breadcrumb.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Breadcrumb.Item</span><span class="token punctuation" >></span></span>应用列表<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Breadcrumb.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Breadcrumb.Item</span><span class="token punctuation" >></span></span>某应用<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Breadcrumb.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Breadcrumb</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-container<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>aside</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-sider<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu</span> <span class="token attr-name" >mode</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>inline<span class="token punctuation" >"</span></span> <span class="token attr-name" >defaultSelectedKeys</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token punctuation" >[</span><span class="token string" >'1'</span><span class="token punctuation" >]</span><span class="token punctuation" >}</span></span> <span class="token attr-name" >defaultOpenKeys</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token punctuation" >[</span><span class="token string" >'sub1'</span><span class="token punctuation" >]</span><span class="token punctuation" >}</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>SubMenu</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>sub1<span class="token punctuation" >"</span></span> <span class="token attr-name" >title={<span</span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Icon</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>user<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span>导航一<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span><span class="token punctuation" >}</span><span class="token operator" >></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>1<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>选项<span class="token number" >1</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>2<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>选项<span class="token number" >2</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>3<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>选项<span class="token number" >3</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>4<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>选项<span class="token number" >4</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>SubMenu</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>SubMenu</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>sub2<span class="token punctuation" >"</span></span> <span class="token attr-name" >title={<span</span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Icon</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>laptop<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span>导航二<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span><span class="token punctuation" >}</span><span class="token operator" >></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>5<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>选项<span class="token number" >5</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>6<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>选项<span class="token number" >6</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>7<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>选项<span class="token number" >7</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>8<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>选项<span class="token number" >8</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>SubMenu</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>SubMenu</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>sub3<span class="token punctuation" >"</span></span> <span class="token attr-name" >title={<span</span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Icon</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>notification<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span>导航三<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span><span class="token punctuation" >}</span><span class="token operator" >></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>9<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>选项<span class="token number" >9</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>10<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>选项<span class="token number" >10</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>11<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>选项<span class="token number" >11</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>12<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>选项<span class="token number" >12</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>SubMenu</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>aside</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-content<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >style</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token punctuation" >{</span> height<span class="token punctuation" >:</span> <span class="token number" >240</span> <span class="token punctuation" >}</span><span class="token punctuation" >}</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >style</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token punctuation" >{</span>clear<span class="token punctuation" >:</span> <span class="token string" >'both'</span><span class="token punctuation" >}</span><span class="token punctuation" >}</span></span><span class="token punctuation" >></span></span>内容区域<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-footer<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
Ant Design 版权所有 © <span class="token number" >2015</span> 由蚂蚁金服体验技术部支持
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>BrowserDemo</span><span class="token punctuation" >></span></span>
|
|
<span class="token punctuation" >,</span> mountNode<span class="token punctuation" >)</span><span class="token punctuation" >;</span></code></pre></div><div class="highlight" data-reactid="322"><pre data-reactid="323"><code class="css" data-reactid="324"><span class="token selector" ><span class="token class" >.ant-layout-topaside</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >100%</span><span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-topaside</span> <span class="token class" >.ant-layout-wrapper</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >padding</span><span class="token punctuation" >:</span> <span class="token number" >0</span> <span class="token number" >50</span>px<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-topaside</span> <span class="token class" >.ant-layout-header</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >background</span><span class="token punctuation" >:</span> <span class="token hexcode" >#404040</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >64</span>px<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-topaside</span> <span class="token class" >.ant-layout-logo</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >120</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >32</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >background</span><span class="token punctuation" >:</span> <span class="token hexcode" >#333</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >border-radius</span><span class="token punctuation" >:</span> <span class="token number" >6</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >margin</span><span class="token punctuation" >:</span> <span class="token number" >16</span>px <span class="token number" >28</span>px <span class="token number" >16</span>px <span class="token number" >0</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >float</span><span class="token punctuation" >:</span> left<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-topaside</span> <span class="token class" >.ant-layout-subheader</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >48</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >border-bottom</span><span class="token punctuation" >:</span> <span class="token number" >1</span>px solid <span class="token hexcode" >#e9e9e9</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >background</span><span class="token punctuation" >:</span> <span class="token hexcode" >#fff</span><span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-topaside</span> <span class="token class" >.ant-layout-breadcrumb</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >margin</span><span class="token punctuation" >:</span> <span class="token number" >7</span>px <span class="token number" >0</span> -<span class="token number" >17</span>px <span class="token number" >24</span>px<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-topaside</span> <span class="token class" >.ant-layout-container</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >background</span><span class="token punctuation" >:</span> <span class="token hexcode" >#fff</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >margin</span><span class="token punctuation" >:</span> <span class="token number" >24</span>px <span class="token number" >0</span> <span class="token number" >0</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >position</span><span class="token punctuation" >:</span> relative<span class="token punctuation" >;</span>
|
|
<span class="token property" >padding</span><span class="token punctuation" >:</span> <span class="token number" >24</span>px <span class="token number" >0</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >overflow</span><span class="token punctuation" >:</span> hidden<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-topaside</span> <span class="token class" >.ant-layout-sider</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >224</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >float</span><span class="token punctuation" >:</span> left<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-topaside</span> <span class="token class" >.ant-layout-content</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >border-left</span><span class="token punctuation" >:</span> <span class="token number" >1</span>px solid <span class="token hexcode" >#e9e9e9</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >padding</span><span class="token punctuation" >:</span> <span class="token number" >0</span> <span class="token number" >24</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >overflow</span><span class="token punctuation" >:</span> auto<span class="token punctuation" >;</span>
|
|
<span class="token property" >position</span><span class="token punctuation" >:</span> relative<span class="token punctuation" >;</span>
|
|
<span class="token property" >left</span><span class="token punctuation" >:</span> -<span class="token number" >1</span>px<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-topaside</span> <span class="token class" >.ant-layout-footer</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >64</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >line-height</span><span class="token punctuation" >:</span> <span class="token number" >64</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >text-align</span><span class="token punctuation" >:</span> center<span class="token punctuation" >;</span>
|
|
<span class="token property" >font-size</span><span class="token punctuation" >:</span> <span class="token number" >12</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >color</span><span class="token punctuation" >:</span> <span class="token hexcode" >#999</span><span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span></code></pre></div></section></section><section class="code-box" id="docs-spec-layout-demo-aside" data-reactid="325"><section class="code-box-demo" data-reactid="326"><article class="window-frame focus" data-reactid="327"><header class="top-bar" data-reactid="328"><div class="controls" data-reactid="329"><div class="control close" data-reactid="330"></div><div class="control minify" data-reactid="331"></div><div class="control expand" data-reactid="332"></div></div><input class="address-bar" value="http://www.example.com" data-reactid="333"/></header><section class="window-content" data-reactid="334"><div class="ant-layout-aside" data-reactid="335"><aside class="ant-layout-sider" data-reactid="336"><div class="ant-layout-logo" data-reactid="337"></div><ul class="ant-menu ant-menu-inline ant-menu-dark ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="338"><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu" data-reactid="339"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" data-reactid="340"><span data-reactid="341"><i class="anticon anticon-user " data-reactid="342"></i><!-- react-text: 343 -->导航一<!-- /react-text --></span></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="sub1$Menu" data-reactid="344"><li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="345">选项1</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="346">选项2</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="347">选项3</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="348">选项4</li></ul></li><li class="ant-menu-submenu-inline ant-menu-submenu" data-reactid="349"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="false" aria-owns="sub2$Menu" aria-haspopup="true" data-reactid="350"><span data-reactid="351"><i class="anticon anticon-laptop " data-reactid="352"></i><!-- react-text: 353 -->导航二<!-- /react-text --></span></div><!-- react-empty: 354 --></li><li class="ant-menu-submenu-inline ant-menu-submenu" data-reactid="355"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="false" aria-owns="sub3$Menu" aria-haspopup="true" data-reactid="356"><span data-reactid="357"><i class="anticon anticon-notification " data-reactid="358"></i><!-- react-text: 359 -->导航三<!-- /react-text --></span></div><!-- react-empty: 360 --></li></ul></aside><div class="ant-layout-main" data-reactid="361"><div class="ant-layout-header" data-reactid="362"></div><div class="ant-layout-breadcrumb" data-reactid="363"><div class="ant-breadcrumb" data-reactid="364"><span data-reactid="365"><span class="ant-breadcrumb-link" data-reactid="366">首页</span><span class="ant-breadcrumb-separator" data-reactid="367">/</span></span><span data-reactid="368"><span class="ant-breadcrumb-link" data-reactid="369">应用列表</span><span class="ant-breadcrumb-separator" data-reactid="370">/</span></span><span data-reactid="371"><span class="ant-breadcrumb-link" data-reactid="372">某应用</span><span class="ant-breadcrumb-separator" data-reactid="373">/</span></span></div></div><div class="ant-layout-container" data-reactid="374"><div class="ant-layout-content" data-reactid="375"><div style="height:590px;" data-reactid="376">内容区域</div></div></div><div class="ant-layout-footer" data-reactid="377">Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持</div></div></div></section></article><style data-reactid="378">.ant-layout-aside {
|
|
position: relative;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-logo {
|
|
width: 150px;
|
|
height: 32px;
|
|
background: #333;
|
|
border-radius: 6px;
|
|
margin: 16px 24px 16px 28px;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-sider {
|
|
width: 224px;
|
|
background: #404040;
|
|
position: absolute;
|
|
overflow: auto;
|
|
padding-bottom: 24px;
|
|
height: 100%;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-sider > .ant-menu {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-header {
|
|
background: #fff;
|
|
height: 64px;
|
|
border-bottom: 1px solid #e9e9e9;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-breadcrumb {
|
|
margin: 7px 0 -17px 24px;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-main {
|
|
margin-left: 224px;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-container {
|
|
margin: 24px 16px;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-content {
|
|
background: #fff;
|
|
padding: 24px;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-footer {
|
|
height: 64px;
|
|
line-height: 64px;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: #999;
|
|
background: #fff;
|
|
border-top: 1px solid #e9e9e9;
|
|
width: 100%;
|
|
}</style></section><section class="code-box-meta markdown" data-reactid="379"><div class="code-box-title" data-reactid="380"><a href="#docs-spec-layout-demo-aside" data-reactid="381">侧边导航</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/docs/spec/layout/demo/aside.md" data-reactid="382"><i class="anticon anticon-edit" data-reactid="383"></i></a></div><div data-reactid="384"><p data-reactid="385"><!-- react-text: 386 -->顶级导航在侧边栏。<!-- /react-text --></p><p data-reactid="387"><!-- react-text: 388 -->侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。<!-- /react-text --></p></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="389"></i></section><section class="highlight-wrapper" data-reactid="390"><div class="highlight" data-reactid="391"><pre class="language-jsx" data-reactid="392"><code data-reactid="393"><span class="token keyword" >import</span> <span class="token punctuation" >{</span> Menu<span class="token punctuation" >,</span> Breadcrumb<span class="token punctuation" >,</span> Icon <span class="token punctuation" >}</span> <span class="token keyword" >from</span> <span class="token string" >'antd'</span><span class="token punctuation" >;</span>
|
|
<span class="token keyword" >import</span> BrowserDemo <span class="token keyword" >from</span> <span class="token string" >'site/theme/template/BrowserDemo'</span><span class="token punctuation" >;</span>
|
|
<span class="token keyword" >const</span> SubMenu <span class="token operator" >=</span> Menu<span class="token punctuation" >.</span>SubMenu<span class="token punctuation" >;</span>
|
|
|
|
ReactDOM<span class="token punctuation" >.</span><span class="token function" >render</span><span class="token punctuation" >(</span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>BrowserDemo</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-aside<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>aside</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-sider<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-logo<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu</span> <span class="token attr-name" >mode</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>inline<span class="token punctuation" >"</span></span> <span class="token attr-name" >theme</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dark<span class="token punctuation" >"</span></span>
|
|
<span class="token attr-name" >defaultSelectedKeys</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token punctuation" >[</span><span class="token string" >'1'</span><span class="token punctuation" >]</span><span class="token punctuation" >}</span></span> <span class="token attr-name" >defaultOpenKeys</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token punctuation" >[</span><span class="token string" >'sub1'</span><span class="token punctuation" >]</span><span class="token punctuation" >}</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>SubMenu</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>sub1<span class="token punctuation" >"</span></span> <span class="token attr-name" >title={<span</span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Icon</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>user<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span>导航一<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span><span class="token punctuation" >}</span><span class="token operator" >></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>1<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>选项<span class="token number" >1</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>2<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>选项<span class="token number" >2</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>3<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>选项<span class="token number" >3</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>4<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>选项<span class="token number" >4</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>SubMenu</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>SubMenu</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>sub2<span class="token punctuation" >"</span></span> <span class="token attr-name" >title={<span</span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Icon</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>laptop<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span>导航二<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span><span class="token punctuation" >}</span><span class="token operator" >></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>5<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>选项<span class="token number" >5</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>6<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>选项<span class="token number" >6</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>7<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>选项<span class="token number" >7</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>8<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>选项<span class="token number" >8</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>SubMenu</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>SubMenu</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>sub3<span class="token punctuation" >"</span></span> <span class="token attr-name" >title={<span</span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Icon</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>notification<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span>导航三<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span><span class="token punctuation" >}</span><span class="token operator" >></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>9<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>选项<span class="token number" >9</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>10<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>选项<span class="token number" >10</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>11<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>选项<span class="token number" >11</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>12<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>选项<span class="token number" >12</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>SubMenu</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>aside</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-main<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-header<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-breadcrumb<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Breadcrumb</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Breadcrumb.Item</span><span class="token punctuation" >></span></span>首页<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Breadcrumb.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Breadcrumb.Item</span><span class="token punctuation" >></span></span>应用列表<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Breadcrumb.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Breadcrumb.Item</span><span class="token punctuation" >></span></span>某应用<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Breadcrumb.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Breadcrumb</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-container<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-content<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >style</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token punctuation" >{</span> height<span class="token punctuation" >:</span> <span class="token number" >590</span> <span class="token punctuation" >}</span><span class="token punctuation" >}</span></span><span class="token punctuation" >></span></span>
|
|
内容区域
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-footer<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
Ant Design 版权所有 © <span class="token number" >2015</span> 由蚂蚁金服体验技术部支持
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>BrowserDemo</span><span class="token punctuation" >></span></span>
|
|
<span class="token punctuation" >,</span> mountNode<span class="token punctuation" >)</span><span class="token punctuation" >;</span></code></pre></div><div class="highlight" data-reactid="394"><pre data-reactid="395"><code class="css" data-reactid="396"><span class="token selector" ><span class="token class" >.ant-layout-aside</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >position</span><span class="token punctuation" >:</span> relative<span class="token punctuation" >;</span>
|
|
<span class="token property" >min-height</span><span class="token punctuation" >:</span> <span class="token number" >100%</span><span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-aside</span> <span class="token class" >.ant-layout-logo</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >150</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >32</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >background</span><span class="token punctuation" >:</span> <span class="token hexcode" >#333</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >border-radius</span><span class="token punctuation" >:</span> <span class="token number" >6</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >margin</span><span class="token punctuation" >:</span> <span class="token number" >16</span>px <span class="token number" >24</span>px <span class="token number" >16</span>px <span class="token number" >28</span>px<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-aside</span> <span class="token class" >.ant-layout-sider</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >224</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >background</span><span class="token punctuation" >:</span> <span class="token hexcode" >#404040</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >position</span><span class="token punctuation" >:</span> absolute<span class="token punctuation" >;</span>
|
|
<span class="token property" >overflow</span><span class="token punctuation" >:</span> auto<span class="token punctuation" >;</span>
|
|
<span class="token property" >padding-bottom</span><span class="token punctuation" >:</span> <span class="token number" >24</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >100%</span><span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-aside</span> <span class="token class" >.ant-layout-sider</span> > <span class="token class" >.ant-menu</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >margin-bottom</span><span class="token punctuation" >:</span> <span class="token number" >20</span>px<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-aside</span> <span class="token class" >.ant-layout-header</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >background</span><span class="token punctuation" >:</span> <span class="token hexcode" >#fff</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >64</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >border-bottom</span><span class="token punctuation" >:</span> <span class="token number" >1</span>px solid <span class="token hexcode" >#e9e9e9</span><span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-aside</span> <span class="token class" >.ant-layout-breadcrumb</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >margin</span><span class="token punctuation" >:</span> <span class="token number" >7</span>px <span class="token number" >0</span> -<span class="token number" >17</span>px <span class="token number" >24</span>px<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-aside</span> <span class="token class" >.ant-layout-main</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >margin-left</span><span class="token punctuation" >:</span> <span class="token number" >224</span>px<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-aside</span> <span class="token class" >.ant-layout-container</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >margin</span><span class="token punctuation" >:</span> <span class="token number" >24</span>px <span class="token number" >16</span>px<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-aside</span> <span class="token class" >.ant-layout-content</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >background</span><span class="token punctuation" >:</span> <span class="token hexcode" >#fff</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >padding</span><span class="token punctuation" >:</span> <span class="token number" >24</span>px<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-aside</span> <span class="token class" >.ant-layout-footer</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >64</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >line-height</span><span class="token punctuation" >:</span> <span class="token number" >64</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >text-align</span><span class="token punctuation" >:</span> center<span class="token punctuation" >;</span>
|
|
<span class="token property" >font-size</span><span class="token punctuation" >:</span> <span class="token number" >12</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >color</span><span class="token punctuation" >:</span> <span class="token hexcode" >#999</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >background</span><span class="token punctuation" >:</span> <span class="token hexcode" >#fff</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >border-top</span><span class="token punctuation" >:</span> <span class="token number" >1</span>px solid <span class="token hexcode" >#e9e9e9</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >100%</span><span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span></code></pre></div></section></section><section class="code-box" id="docs-spec-layout-demo-ceiling" data-reactid="397"><section class="code-box-demo" data-reactid="398"><article class="window-frame focus" data-reactid="399"><header class="top-bar" data-reactid="400"><div class="controls" data-reactid="401"><div class="control close" data-reactid="402"></div><div class="control minify" data-reactid="403"></div><div class="control expand" data-reactid="404"></div></div><input class="address-bar" value="http://www.example.com" data-reactid="405"/></header><section class="window-content" data-reactid="406"><div class="ant-layout-ceiling-demo" data-reactid="407"><div class="ant-layout-ceiling" data-reactid="408"><div class="ant-layout-wrapper" data-reactid="409"><ul class="right" data-reactid="410"><li data-reactid="411">xxx@example.com</li><li data-reactid="412">|</li><li data-reactid="413">帮助中心</li><li data-reactid="414">|</li><li data-reactid="415">客服/投诉电话：400-826-7710</li></ul></div></div><div class="ant-layout-header" data-reactid="416"><div class="ant-layout-wrapper" data-reactid="417"><div class="ant-layout-logo" data-reactid="418"></div></div></div></div></section></article><style data-reactid="419">.ant-layout-ceiling-demo {
|
|
height: 100%;
|
|
}
|
|
|
|
.ant-layout-ceiling {
|
|
font-size: 12px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
background-color: #242736;
|
|
color: #ddd;
|
|
}
|
|
|
|
.ant-layout-ceiling .right {
|
|
float: right;
|
|
}
|
|
|
|
.ant-layout-ceiling ul li {
|
|
display: inline-block;
|
|
margin: 0 4px;
|
|
}
|
|
|
|
.ant-layout-ceiling-demo .ant-layout-wrapper {
|
|
padding: 0 50px;
|
|
}
|
|
|
|
.ant-layout-ceiling-demo .ant-layout-header {
|
|
background: #fff;
|
|
height: 64px;
|
|
border-bottom: 1px solid #d9d9d9;
|
|
}
|
|
|
|
.ant-layout-ceiling-demo .ant-layout-logo {
|
|
width: 120px;
|
|
height: 32px;
|
|
background: #eee;
|
|
border-radius: 6px;
|
|
margin: 16px 28px 16px 0;
|
|
float: left;
|
|
}</style></section><section class="code-box-meta markdown" data-reactid="420"><div class="code-box-title" data-reactid="421"><a href="#docs-spec-layout-demo-ceiling" data-reactid="422">吊顶规范</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/docs/spec/layout/demo/ceiling.md" data-reactid="423"><i class="anticon anticon-edit" data-reactid="424"></i></a></div><div data-reactid="425"><p data-reactid="426"><!-- react-text: 427 -->吊顶一般用于跨系统/应用场景，可以放置统一的登录/帮助信息。<!-- /react-text --></p><p data-reactid="428"><!-- react-text: 429 -->吊顶背景深色，高度 <!-- /react-text --><code data-reactid="430"><!-- react-text: 431 -->30px<!-- /react-text --></code><!-- react-text: 432 -->，和浅色调的主导航配合使用。<!-- /react-text --></p></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="433"></i></section><section class="highlight-wrapper" data-reactid="434"><div class="highlight" data-reactid="435"><pre class="language-jsx" data-reactid="436"><code data-reactid="437"><span class="token keyword" >import</span> <span class="token punctuation" >{</span> Menu<span class="token punctuation" >,</span> Breadcrumb <span class="token punctuation" >}</span> <span class="token keyword" >from</span> <span class="token string" >'antd'</span><span class="token punctuation" >;</span>
|
|
<span class="token keyword" >import</span> BrowserDemo <span class="token keyword" >from</span> <span class="token string" >'site/theme/template/BrowserDemo'</span><span class="token punctuation" >;</span>
|
|
|
|
ReactDOM<span class="token punctuation" >.</span><span class="token function" >render</span><span class="token punctuation" >(</span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>BrowserDemo</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-ceiling-demo<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-ceiling<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-wrapper<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>ul</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>right<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>li</span><span class="token punctuation" >></span></span>xxx@example<span class="token punctuation" >.</span>com<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>li</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>li</span><span class="token punctuation" >></span></span><span class="token operator" >|</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>li</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>li</span><span class="token punctuation" >></span></span>帮助中心<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>li</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>li</span><span class="token punctuation" >></span></span><span class="token operator" >|</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>li</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>li</span><span class="token punctuation" >></span></span>客服<span class="token operator" >/</span>投诉电话：<span class="token number" >400</span><span class="token operator" >-</span><span class="token number" >826</span><span class="token operator" >-</span><span class="token number" >7710</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>li</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>ul</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-header<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-wrapper<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-logo<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>BrowserDemo</span><span class="token punctuation" >></span></span>
|
|
<span class="token punctuation" >,</span> mountNode<span class="token punctuation" >)</span><span class="token punctuation" >;</span></code></pre></div><div class="highlight" data-reactid="438"><pre data-reactid="439"><code class="css" data-reactid="440"><span class="token selector" ><span class="token class" >.ant-layout-ceiling-demo</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >100%</span><span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-ceiling</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >font-size</span><span class="token punctuation" >:</span> <span class="token number" >12</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >30</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >line-height</span><span class="token punctuation" >:</span> <span class="token number" >30</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >background-color</span><span class="token punctuation" >:</span> <span class="token hexcode" >#242736</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >color</span><span class="token punctuation" >:</span> <span class="token hexcode" >#ddd</span><span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-ceiling</span> <span class="token class" >.right</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >float</span><span class="token punctuation" >:</span> right<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-ceiling</span> ul li </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >display</span><span class="token punctuation" >:</span> inline-block<span class="token punctuation" >;</span>
|
|
<span class="token property" >margin</span><span class="token punctuation" >:</span> <span class="token number" >0</span> <span class="token number" >4</span>px<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-ceiling-demo</span> <span class="token class" >.ant-layout-wrapper</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >padding</span><span class="token punctuation" >:</span> <span class="token number" >0</span> <span class="token number" >50</span>px<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-ceiling-demo</span> <span class="token class" >.ant-layout-header</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >background</span><span class="token punctuation" >:</span> <span class="token hexcode" >#fff</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >64</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >border-bottom</span><span class="token punctuation" >:</span> <span class="token number" >1</span>px solid <span class="token hexcode" >#d9d9d9</span><span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-ceiling-demo</span> <span class="token class" >.ant-layout-logo</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >120</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >32</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >background</span><span class="token punctuation" >:</span> <span class="token hexcode" >#eee</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >border-radius</span><span class="token punctuation" >:</span> <span class="token number" >6</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >margin</span><span class="token punctuation" >:</span> <span class="token number" >16</span>px <span class="token number" >28</span>px <span class="token number" >16</span>px <span class="token number" >0</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >float</span><span class="token punctuation" >:</span> left<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span></code></pre></div></section></section><section class="code-box" id="docs-spec-layout-demo-aside-collapse" data-reactid="441"><section class="code-box-demo" data-reactid="442"><article class="window-frame focus" data-reactid="443"><header class="top-bar" data-reactid="444"><div class="controls" data-reactid="445"><div class="control close" data-reactid="446"></div><div class="control minify" data-reactid="447"></div><div class="control expand" data-reactid="448"></div></div><input class="address-bar" value="http://www.example.com" data-reactid="449"/></header><section class="window-content" data-reactid="450"><div class="ant-layout-aside ant-layout-aside-collapse" data-reactid="451"><aside class="ant-layout-sider" data-reactid="452"><div class="ant-layout-logo" data-reactid="453"></div><ul class="ant-menu ant-menu-inline ant-menu-dark ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="454"><li style="padding-left:24px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="455"><i class="anticon anticon-user " data-reactid="456"></i><span class="nav-text" data-reactid="457">导航一</span></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="458"><i class="anticon anticon-setting " data-reactid="459"></i><span class="nav-text" data-reactid="460">导航二</span></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="461"><i class="anticon anticon-laptop " data-reactid="462"></i><span class="nav-text" data-reactid="463">导航三</span></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="464"><i class="anticon anticon-notification " data-reactid="465"></i><span class="nav-text" data-reactid="466">导航四</span></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="467"><i class="anticon anticon-folder " data-reactid="468"></i><span class="nav-text" data-reactid="469">导航五</span></li></ul><div class="ant-aside-action" data-reactid="470"><i class="anticon anticon-right " data-reactid="471"></i></div></aside><div class="ant-layout-main" data-reactid="472"><div class="ant-layout-header" data-reactid="473"></div><div class="ant-layout-breadcrumb" data-reactid="474"><div class="ant-breadcrumb" data-reactid="475"><span data-reactid="476"><span class="ant-breadcrumb-link" data-reactid="477">首页</span><span class="ant-breadcrumb-separator" data-reactid="478">/</span></span><span data-reactid="479"><span class="ant-breadcrumb-link" data-reactid="480">应用列表</span><span class="ant-breadcrumb-separator" data-reactid="481">/</span></span><span data-reactid="482"><span class="ant-breadcrumb-link" data-reactid="483">某应用</span><span class="ant-breadcrumb-separator" data-reactid="484">/</span></span></div></div><div class="ant-layout-container" data-reactid="485"><div class="ant-layout-content" data-reactid="486"><div style="height:220px;" data-reactid="487">内容区域</div></div></div><div class="ant-layout-footer" data-reactid="488">Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持</div></div></div></section></article><style data-reactid="489">.ant-layout-aside {
|
|
position: relative;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-logo {
|
|
width: 150px;
|
|
height: 32px;
|
|
background: #333;
|
|
border-radius: 6px;
|
|
margin: 16px 24px 16px 28px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.ant-layout-aside-collapse .ant-layout-logo {
|
|
width: 32px;
|
|
margin: 16px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-sider {
|
|
width: 224px;
|
|
background: #404040;
|
|
position: absolute;
|
|
overflow: visible;
|
|
padding-bottom: 24px;
|
|
height: 100%;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.ant-layout-aside-collapse .ant-layout-sider {
|
|
width: 64px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-sider > .ant-menu {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item {
|
|
margin: 16px 0;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item .nav-text {
|
|
vertical-align: baseline;
|
|
display: inline-block;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-sider > .ant-menu > .ant-menu-item > .anticon {
|
|
transition: font-size .3s;
|
|
}
|
|
|
|
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item {
|
|
transition: all 0s ease;
|
|
}
|
|
|
|
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item > .anticon {
|
|
font-size: 16px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item .nav-text {
|
|
display: none;
|
|
}
|
|
|
|
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item:hover {
|
|
background: #2db7f5;
|
|
color: #fff;
|
|
transition: all 0s ease;
|
|
}
|
|
|
|
.ant-layout-aside-collapse .ant-layout-sider > .ant-menu > .ant-menu-item:hover .nav-text {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
background: #2db7f5;
|
|
color: #fff;
|
|
padding-right: 16px;
|
|
border-radius: 0 5px 5px 0;
|
|
}
|
|
|
|
/* 实际使用中需要改成 position: fixed */
|
|
.ant-layout-aside .ant-aside-action {
|
|
height: 42px;
|
|
width: 224px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
background: #656565;
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: 42px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.ant-layout-aside-collapse .ant-aside-action {
|
|
width: 64px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-header {
|
|
background: #fff;
|
|
height: 64px;
|
|
border-bottom: 1px solid #e9e9e9;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-breadcrumb {
|
|
margin: 7px 0 -17px 24px;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-main {
|
|
margin-left: 224px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.ant-layout-aside-collapse .ant-layout-main {
|
|
margin-left: 64px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-container {
|
|
margin: 24px 16px;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-content {
|
|
background: #fff;
|
|
padding: 24px;
|
|
}
|
|
|
|
.ant-layout-aside .ant-layout-footer {
|
|
height: 64px;
|
|
line-height: 64px;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: #999;
|
|
background: #fff;
|
|
border-top: 1px solid #e9e9e9;
|
|
width: 100%;
|
|
}</style></section><section class="code-box-meta markdown" data-reactid="490"><div class="code-box-title" data-reactid="491"><a href="#docs-spec-layout-demo-aside-collapse" data-reactid="492">可收起展开的侧边导航</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/docs/spec/layout/demo/aside-collapse.md" data-reactid="493"><i class="anticon anticon-edit" data-reactid="494"></i></a></div><div data-reactid="495"><p data-reactid="496"><!-- react-text: 497 -->页面横向空间有限时使用。侧边导航默认收起，点击底部按钮时展开。<!-- /react-text --></p></div><i class="collapse anticon anticon-down-circle-o" title="Show Code" data-reactid="498"></i></section><section class="highlight-wrapper" data-reactid="499"><div class="highlight" data-reactid="500"><pre class="language-jsx" data-reactid="501"><code data-reactid="502"><span class="token keyword" >import</span> <span class="token punctuation" >{</span> Menu<span class="token punctuation" >,</span> Breadcrumb<span class="token punctuation" >,</span> Icon <span class="token punctuation" >}</span> <span class="token keyword" >from</span> <span class="token string" >'antd'</span><span class="token punctuation" >;</span>
|
|
<span class="token keyword" >import</span> BrowserDemo <span class="token keyword" >from</span> <span class="token string" >'site/theme/template/BrowserDemo'</span><span class="token punctuation" >;</span>
|
|
<span class="token keyword" >const</span> SubMenu <span class="token operator" >=</span> Menu<span class="token punctuation" >.</span>SubMenu<span class="token punctuation" >;</span>
|
|
|
|
<span class="token keyword" >const</span> AsideCollapse <span class="token operator" >=</span> React<span class="token punctuation" >.</span><span class="token function" >createClass</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span>
|
|
<span class="token function" >getInitialState</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
|
|
<span class="token keyword" >return</span> <span class="token punctuation" >{</span>
|
|
collapse<span class="token punctuation" >:</span> <span class="token boolean" >true</span><span class="token punctuation" >,</span>
|
|
<span class="token punctuation" >}</span><span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
|
|
<span class="token function" >onCollapseChange</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
|
|
<span class="token keyword" >this</span><span class="token punctuation" >.</span><span class="token function" >setState</span><span class="token punctuation" >(</span><span class="token punctuation" >{</span>
|
|
collapse<span class="token punctuation" >:</span> <span class="token operator" >!</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >.</span>collapse<span class="token punctuation" >,</span>
|
|
<span class="token punctuation" >}</span><span class="token punctuation" >)</span>
|
|
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
|
|
<span class="token function" >render</span><span class="token punctuation" >(</span><span class="token punctuation" >)</span> <span class="token punctuation" >{</span>
|
|
<span class="token keyword" >const</span> collapse <span class="token operator" >=</span> <span class="token keyword" >this</span><span class="token punctuation" >.</span>state<span class="token punctuation" >.</span>collapse<span class="token punctuation" >;</span>
|
|
<span class="token keyword" >return</span> <span class="token punctuation" >(</span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span>collapse <span class="token operator" >?</span> <span class="token string" >"ant-layout-aside ant-layout-aside-collapse"</span> <span class="token punctuation" >:</span> <span class="token string" >"ant-layout-aside"</span><span class="token punctuation" >}</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>aside</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-sider<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-logo<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu</span> <span class="token attr-name" >mode</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>inline<span class="token punctuation" >"</span></span> <span class="token attr-name" >theme</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>dark<span class="token punctuation" >"</span></span> <span class="token attr-name" >defaultSelectedKeys</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token punctuation" >[</span><span class="token string" >'user'</span><span class="token punctuation" >]</span><span class="token punctuation" >}</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>user<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Icon</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>user<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>span</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>nav-text<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>导航一<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>setting<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Icon</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>setting<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>span</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>nav-text<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>导航二<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>laptop<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Icon</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>laptop<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>span</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>nav-text<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>导航三<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>notification<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Icon</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>notification<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>span</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>nav-text<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>导航四<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Menu.Item</span> <span class="token attr-name" >key</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>folder<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Icon</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>folder<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>span</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>nav-text<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>导航五<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Menu</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-aside-action<span class="token punctuation" >"</span></span> <span class="token attr-name" >onClick</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token keyword" >this</span><span class="token punctuation" >.</span>onCollapseChange<span class="token punctuation" >}</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token punctuation" >{</span>collapse <span class="token operator" >?</span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Icon</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>right<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span> <span class="token punctuation" >:</span> <span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Icon</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>left<span class="token punctuation" >"</span></span> <span class="token punctuation" >/></span></span><span class="token punctuation" >}</span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>aside</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-main<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-header<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-breadcrumb<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Breadcrumb</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Breadcrumb.Item</span><span class="token punctuation" >></span></span>首页<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Breadcrumb.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Breadcrumb.Item</span><span class="token punctuation" >></span></span>应用列表<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Breadcrumb.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>Breadcrumb.Item</span><span class="token punctuation" >></span></span>某应用<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Breadcrumb.Item</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>Breadcrumb</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-container<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-content<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >style</span><span class="token script language-javascript" ><span class="token punctuation" >=</span><span class="token punctuation" >{</span><span class="token punctuation" >{</span> height<span class="token punctuation" >:</span> <span class="token number" >220</span> <span class="token punctuation" >}</span><span class="token punctuation" >}</span></span><span class="token punctuation" >></span></span>
|
|
内容区域
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>div</span> <span class="token attr-name" >className</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>ant-layout-footer<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
Ant Design 版权所有 © <span class="token number" >2015</span> 由蚂蚁金服体验技术部支持
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
<span class="token punctuation" >)</span><span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span><span class="token punctuation" >,</span>
|
|
<span class="token punctuation" >}</span><span class="token punctuation" >)</span><span class="token punctuation" >;</span>
|
|
|
|
ReactDOM<span class="token punctuation" >.</span><span class="token function" >render</span><span class="token punctuation" >(</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>BrowserDemo</span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>AsideCollapse</span> <span class="token punctuation" >/></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>BrowserDemo</span><span class="token punctuation" >></span></span><span class="token punctuation" >,</span> mountNode<span class="token punctuation" >)</span><span class="token punctuation" >;</span></code></pre></div><div class="highlight" data-reactid="503"><pre data-reactid="504"><code class="css" data-reactid="505"><span class="token selector" ><span class="token class" >.ant-layout-aside</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >position</span><span class="token punctuation" >:</span> relative<span class="token punctuation" >;</span>
|
|
<span class="token property" >min-height</span><span class="token punctuation" >:</span> <span class="token number" >100%</span><span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-aside</span> <span class="token class" >.ant-layout-logo</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >150</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >32</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >background</span><span class="token punctuation" >:</span> <span class="token hexcode" >#333</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >border-radius</span><span class="token punctuation" >:</span> <span class="token number" >6</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >margin</span><span class="token punctuation" >:</span> <span class="token number" >16</span>px <span class="token number" >24</span>px <span class="token number" >16</span>px <span class="token number" >28</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >transition</span><span class="token punctuation" >:</span> all <span class="token number" >0.3</span>s ease<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-aside-collapse</span> <span class="token class" >.ant-layout-logo</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >32</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >margin</span><span class="token punctuation" >:</span> <span class="token number" >16</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >transition</span><span class="token punctuation" >:</span> all <span class="token number" >0.3</span>s ease<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-aside</span> <span class="token class" >.ant-layout-sider</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >224</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >background</span><span class="token punctuation" >:</span> <span class="token hexcode" >#404040</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >position</span><span class="token punctuation" >:</span> absolute<span class="token punctuation" >;</span>
|
|
<span class="token property" >overflow</span><span class="token punctuation" >:</span> visible<span class="token punctuation" >;</span>
|
|
<span class="token property" >padding-bottom</span><span class="token punctuation" >:</span> <span class="token number" >24</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >100%</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >transition</span><span class="token punctuation" >:</span> all <span class="token number" >0.3</span>s ease<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-aside-collapse</span> <span class="token class" >.ant-layout-sider</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >64</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >transition</span><span class="token punctuation" >:</span> all <span class="token number" >0.3</span>s ease<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-aside</span> <span class="token class" >.ant-layout-sider</span> > <span class="token class" >.ant-menu</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >margin-bottom</span><span class="token punctuation" >:</span> <span class="token number" >20</span>px<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-aside</span> <span class="token class" >.ant-layout-sider</span> > <span class="token class" >.ant-menu</span> > <span class="token class" >.ant-menu-item</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >margin</span><span class="token punctuation" >:</span> <span class="token number" >16</span>px <span class="token number" >0</span><span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-aside</span> <span class="token class" >.ant-layout-sider</span> > <span class="token class" >.ant-menu</span> > <span class="token class" >.ant-menu-item</span> <span class="token class" >.nav-text</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >vertical-align</span><span class="token punctuation" >:</span> baseline<span class="token punctuation" >;</span>
|
|
<span class="token property" >display</span><span class="token punctuation" >:</span> inline-block<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-aside</span> <span class="token class" >.ant-layout-sider</span> > <span class="token class" >.ant-menu</span> > <span class="token class" >.ant-menu-item</span> > <span class="token class" >.anticon</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >transition</span><span class="token punctuation" >:</span> font-size <span class="token number" >.3</span>s<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-aside-collapse</span> <span class="token class" >.ant-layout-sider</span> > <span class="token class" >.ant-menu</span> > <span class="token class" >.ant-menu-item</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >transition</span><span class="token punctuation" >:</span> all <span class="token number" >0</span>s ease<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-aside-collapse</span> <span class="token class" >.ant-layout-sider</span> > <span class="token class" >.ant-menu</span> > <span class="token class" >.ant-menu-item</span> > <span class="token class" >.anticon</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >font-size</span><span class="token punctuation" >:</span> <span class="token number" >16</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >display</span><span class="token punctuation" >:</span> inline-block<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-aside-collapse</span> <span class="token class" >.ant-layout-sider</span> > <span class="token class" >.ant-menu</span> > <span class="token class" >.ant-menu-item</span> <span class="token class" >.nav-text</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >display</span><span class="token punctuation" >:</span> none<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-aside-collapse</span> <span class="token class" >.ant-layout-sider</span> > <span class="token class" >.ant-menu</span> > <span class="token class" >.ant-menu-item</span><span class="token pseudo-class" >:hover</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >background</span><span class="token punctuation" >:</span> <span class="token hexcode" >#2db7f5</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >color</span><span class="token punctuation" >:</span> <span class="token hexcode" >#fff</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >transition</span><span class="token punctuation" >:</span> all <span class="token number" >0</span>s ease<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-aside-collapse</span> <span class="token class" >.ant-layout-sider</span> > <span class="token class" >.ant-menu</span> > <span class="token class" >.ant-menu-item</span><span class="token pseudo-class" >:hover</span> <span class="token class" >.nav-text</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >display</span><span class="token punctuation" >:</span> inline-block<span class="token punctuation" >;</span>
|
|
<span class="token property" >vertical-align</span><span class="token punctuation" >:</span> top<span class="token punctuation" >;</span>
|
|
<span class="token property" >background</span><span class="token punctuation" >:</span> <span class="token hexcode" >#2db7f5</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >color</span><span class="token punctuation" >:</span> <span class="token hexcode" >#fff</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >padding-right</span><span class="token punctuation" >:</span> <span class="token number" >16</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >border-radius</span><span class="token punctuation" >:</span> <span class="token number" >0</span> <span class="token number" >5</span>px <span class="token number" >5</span>px <span class="token number" >0</span><span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token comment" spellcheck="true">/* 实际使用中需要改成 position: fixed */</span>
|
|
<span class="token selector" ><span class="token class" >.ant-layout-aside</span> <span class="token class" >.ant-aside-action</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >42</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >224</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >position</span><span class="token punctuation" >:</span> absolute<span class="token punctuation" >;</span>
|
|
<span class="token property" >bottom</span><span class="token punctuation" >:</span> <span class="token number" >0</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >background</span><span class="token punctuation" >:</span> <span class="token hexcode" >#656565</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >color</span><span class="token punctuation" >:</span> <span class="token hexcode" >#fff</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >text-align</span><span class="token punctuation" >:</span> center<span class="token punctuation" >;</span>
|
|
<span class="token property" >line-height</span><span class="token punctuation" >:</span> <span class="token number" >42</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >cursor</span><span class="token punctuation" >:</span> pointer<span class="token punctuation" >;</span>
|
|
<span class="token property" >transition</span><span class="token punctuation" >:</span> all <span class="token number" >0.3</span>s ease<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-aside-collapse</span> <span class="token class" >.ant-aside-action</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >64</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >transition</span><span class="token punctuation" >:</span> all <span class="token number" >0.3</span>s ease<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-aside</span> <span class="token class" >.ant-layout-header</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >background</span><span class="token punctuation" >:</span> <span class="token hexcode" >#fff</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >64</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >border-bottom</span><span class="token punctuation" >:</span> <span class="token number" >1</span>px solid <span class="token hexcode" >#e9e9e9</span><span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-aside</span> <span class="token class" >.ant-layout-breadcrumb</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >margin</span><span class="token punctuation" >:</span> <span class="token number" >7</span>px <span class="token number" >0</span> -<span class="token number" >17</span>px <span class="token number" >24</span>px<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-aside</span> <span class="token class" >.ant-layout-main</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >margin-left</span><span class="token punctuation" >:</span> <span class="token number" >224</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >transition</span><span class="token punctuation" >:</span> all <span class="token number" >0.3</span>s ease<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-aside-collapse</span> <span class="token class" >.ant-layout-main</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >margin-left</span><span class="token punctuation" >:</span> <span class="token number" >64</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >transition</span><span class="token punctuation" >:</span> all <span class="token number" >0.3</span>s ease<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-aside</span> <span class="token class" >.ant-layout-container</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >margin</span><span class="token punctuation" >:</span> <span class="token number" >24</span>px <span class="token number" >16</span>px<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-aside</span> <span class="token class" >.ant-layout-content</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >background</span><span class="token punctuation" >:</span> <span class="token hexcode" >#fff</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >padding</span><span class="token punctuation" >:</span> <span class="token number" >24</span>px<span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span>
|
|
|
|
<span class="token selector" ><span class="token class" >.ant-layout-aside</span> <span class="token class" >.ant-layout-footer</span> </span><span class="token punctuation" >{</span>
|
|
<span class="token property" >height</span><span class="token punctuation" >:</span> <span class="token number" >64</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >line-height</span><span class="token punctuation" >:</span> <span class="token number" >64</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >text-align</span><span class="token punctuation" >:</span> center<span class="token punctuation" >;</span>
|
|
<span class="token property" >font-size</span><span class="token punctuation" >:</span> <span class="token number" >12</span>px<span class="token punctuation" >;</span>
|
|
<span class="token property" >color</span><span class="token punctuation" >:</span> <span class="token hexcode" >#999</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >background</span><span class="token punctuation" >:</span> <span class="token hexcode" >#fff</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >border-top</span><span class="token punctuation" >:</span> <span class="token number" >1</span>px solid <span class="token hexcode" >#e9e9e9</span><span class="token punctuation" >;</span>
|
|
<span class="token property" >width</span><span class="token punctuation" >:</span> <span class="token number" >100%</span><span class="token punctuation" >;</span>
|
|
<span class="token punctuation" >}</span></code></pre></div></section></section></div></div><section class="markdown api-container" data-reactid="506"></section></article></div></div><div class="ant-row" data-reactid="507"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-md-offset-6 ant-col-lg-20 ant-col-lg-offset-4" data-reactid="508"><section class="prev-next-nav" data-reactid="509"><a class="prev-page" href="docs/spec/colors" data-reactid="510">Colors</a><a class="next-page" href="docs/spec/motion" data-reactid="511">Motion</a></section></div></div></div><footer id="footer" data-reactid="512"><ul data-reactid="513"><li data-reactid="514"><h2 data-reactid="515">GitHub</h2><div data-reactid="516"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="517"><span data-reactid="518">Repository</span></a></div><div data-reactid="519"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="520">dva</a><!-- react-text: 521 --> - <!-- /react-text --><span data-reactid="522">Framework</span></div><div data-reactid="523"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="524">dva-cli</a><!-- react-text: 525 --> -<!-- /react-text --><span data-reactid="526">Scaffold</span></div><div data-reactid="527"><a target="_blank" rel="noopener noreferrer" href="http://ant-tool.github.io" data-reactid="528">ant-tool</a><!-- react-text: 529 --> - <!-- /react-text --><span data-reactid="530">Developer Tools</span></div></li><li data-reactid="531"><h2 data-reactid="532"><span data-reactid="533">Links</span></h2><div data-reactid="534"><a href="http://mobile.ant.design" data-reactid="535">Ant Design Mobile</a><span data-reactid="536"> - </span><span data-reactid="537">Mobile</span></div><div data-reactid="538"><a href="https://g2.alipay.com/" data-reactid="539">G2</a><span data-reactid="540"> - </span><span data-reactid="541">Data Visualization</span></div><div data-reactid="542"><a href="https://antv.alipay.com/" data-reactid="543">AntV</a><span data-reactid="544"> - </span><span data-reactid="545">Data Visualization Specification</span></div><div data-reactid="546"><a href="http://motion.ant.design" data-reactid="547">Ant Motion</a><span data-reactid="548"> - </span><span data-reactid="549">Motion</span></div><div data-reactid="550"><a href="http://library.ant.design/" data-reactid="551">AntD Library</a><span data-reactid="552"> - </span><span data-reactid="553">Axure library of Ant Design</span></div><div data-reactid="554"><a href="http://ux.ant.design" data-reactid="555">Ant UX</a><span data-reactid="556"> - </span><span data-reactid="557">Sitemap Template</span></div></li><li data-reactid="558"><h2 data-reactid="559"><span data-reactid="560">Community</span></h2><div data-reactid="561"><a rel="noopener noreferrer" href="/changelog" data-reactid="562"><span data-reactid="563">Change Log</span></a></div><div data-reactid="564"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues" data-reactid="565"><span data-reactid="566">Feedback</span></a></div><div data-reactid="567"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="568"><span data-reactid="569">Chat Room</span></a></div><div data-reactid="570"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="571"><span data-reactid="572">Bug Report</span></a></div></li><li data-reactid="573"><div data-reactid="574"><!-- react-text: 575 -->©2016 <!-- /react-text --><span data-reactid="576">Created by Ant UED</span></div><div data-reactid="577"><!-- react-text: 578 -->Powered by <!-- /react-text --><a href="https://github.com/benjycui/bisheng" data-reactid="579">BiSheng</a></div><div style="margin-top:10px;" data-reactid="580"><span data-reactid="581">Version: </span><div class="ant-select-sm ant-select ant-select-enabled" data-reactid="582"><div class="ant-select-selection
|
|
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="583"><div class="ant-select-selection__rendered" data-reactid="584"><div class="ant-select-selection-selected-value" title="1.11.4" style="display:block;opacity:1;" data-reactid="585">1.11.4</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="586"><b data-reactid="587"></b></span></div></div></div></li></ul></footer></div>
|
|
</div>
|
|
<div class="ant-site-loading" id="ant-site-loading">
|
|
<img src='https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg'/>
|
|
<div id="loading-text">One Design Language</div>
|
|
</div>
|
|
<script>
|
|
(function () {
|
|
var content = document.getElementById('loading-text');
|
|
if (content) {
|
|
content.innerHTML = content.innerHTML.split('').map(function (letter, i) {
|
|
var className;
|
|
if (i > 0 && i < content.innerText.length - 1) {
|
|
className = 'yoyo-x-' + (i % 6);
|
|
}
|
|
if (letter.trim() === '') {
|
|
className += ' blank';
|
|
}
|
|
return '<span class="' + className + '">' + letter + '</span>';
|
|
}).join('');
|
|
}
|
|
})();
|
|
|
|
// Enable Google Analytics
|
|
if (!location.port) {
|
|
/* eslint-disable */
|
|
(function (i, s, o, g, r, a, m) {
|
|
i['GoogleAnalyticsObject'] = r;
|
|
i[r] = i[r] || function () {
|
|
(i[r].q = i[r].q || []).push(arguments)
|
|
}, i[r].l = 1 * new Date();
|
|
a = s.createElement(o),
|
|
m = s.getElementsByTagName(o)[0];
|
|
a.async = 1;
|
|
a.src = g;
|
|
m.parentNode.insertBefore(a, m)
|
|
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
|
|
ga('create', 'UA-72788897-1', 'auto');
|
|
ga('send', 'pageview');
|
|
/* eslint-enable */
|
|
}
|
|
</script>
|
|
<script src="/common.js"></script>
|
|
<script src="/index.js"></script>
|
|
</body>
|
|
</html>
|