mirror of
https://github.com/wahyd4/ant-design.git
synced 2026-08-16 16:26:45 +10:00
476 lines
113 KiB
HTML
476 lines
113 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="An enterprise-class UI design language and React-based implementation">
|
|
<meta name="description" content="A set of high-quality React components">
|
|
<meta name="description" content="One of best React UI library for enterprise background">
|
|
<title>Ant Design - A UI Design Language</title>
|
|
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
|
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.cnpmjs.org/css?family=Lato:400,700|Raleway"/>
|
|
<link rel="stylesheet" type="text/css" href="/index.css"/>
|
|
<style id="nprogress-style">
|
|
#nprogress { display: none }
|
|
</style>
|
|
<!--[if lte IE 10]>
|
|
<script
|
|
src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
|
|
<![endif]-->
|
|
<script>
|
|
if (!window.Intl) {
|
|
document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
|
|
}
|
|
if (!window.Promise) {
|
|
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>');
|
|
}
|
|
</script>
|
|
<script>
|
|
// Enable Google Analytics
|
|
if (!location.port) {
|
|
/* eslint-disable */
|
|
(function (i, s, o, g, r, a, m) {
|
|
i['GoogleAnalyticsObject'] = r;
|
|
i[r] = i[r] || function () {
|
|
(i[r].q = i[r].q || []).push(arguments)
|
|
}, i[r].l = 1 * new Date();
|
|
a = s.createElement(o),
|
|
m = s.getElementsByTagName(o)[0];
|
|
a.async = 1;
|
|
a.src = g;
|
|
m.parentNode.insertBefore(a, m)
|
|
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
|
|
ga('create', 'UA-72788897-1', 'auto');
|
|
ga('send', 'pageview');
|
|
/* eslint-enable */
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="react-content">
|
|
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="1372742329"><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 class="ant-col-xs-0 ant-col-sm-0 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-selected ant-menu-item" role="menuitem" aria-selected="true" 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" role="menuitem" aria-selected="false" 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/react/introduce" data-reactid="47">Ant Design of React</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="48"><a href="/docs/react/getting-started" data-reactid="49">Getting Started</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="50"><a href="/docs/react/practical-projects" data-reactid="51">Real project with dva</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="52"><a href="/docs/react/use-with-create-react-app" data-reactid="53">Use in create-react-app</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="54"><a href="/docs/react/customize-theme" data-reactid="55">Customize Theme</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="56"><a href="/changelog" data-reactid="57">Change Log</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="58"><a href="/docs/react/recommendation" data-reactid="59">Third-Party Library</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="60"><a href="https://github.com/websemantics/awesome-ant-design" target="_blank" rel="noopener noreferrer" class="menu-item-link-outside" data-reactid="61"><!-- react-text: 62 -->Awesome Ant Design<!-- /react-text --><!-- react-text: 63 --> <!-- /react-text --><i class="anticon anticon-export" data-reactid="64"></i></a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="65"><a href="//github.com/ant-design/intl-example" target="_blank" rel="noopener noreferrer" class="menu-item-link-outside" data-reactid="66"><!-- react-text: 67 -->i18n Solution<!-- /react-text --><!-- react-text: 68 --> <!-- /react-text --><i class="anticon anticon-export" data-reactid="69"></i></a></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu" data-reactid="70"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Components$Menu" aria-haspopup="true" data-reactid="71"><h4 data-reactid="72">Components</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="Components$Menu" data-reactid="73"><li class=" ant-menu-item-group" data-reactid="74"><div class="ant-menu-item-group-title" data-reactid="75">General</div><ul class="ant-menu-item-group-list" data-reactid="76"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="77"><a href="/components/button/" data-reactid="78"><span data-reactid="79">Button</span><span class="chinese" data-reactid="80"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="81"><a href="/components/icon/" data-reactid="82"><span data-reactid="83">Icon</span><span class="chinese" data-reactid="84"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="85"><div class="ant-menu-item-group-title" data-reactid="86">Layout</div><ul class="ant-menu-item-group-list" data-reactid="87"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="88"><a href="/components/grid/" data-reactid="89"><span data-reactid="90">Grid</span><span class="chinese" data-reactid="91"></span></a></li><li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="92"><a href="/components/layout/" data-reactid="93"><span data-reactid="94">Layout</span><span class="chinese" data-reactid="95"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="96"><div class="ant-menu-item-group-title" data-reactid="97">Navigation</div><ul class="ant-menu-item-group-list" data-reactid="98"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="99"><a href="/components/affix/" data-reactid="100"><span data-reactid="101">Affix</span><span class="chinese" data-reactid="102"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="103"><a href="/components/back-top/" data-reactid="104"><span data-reactid="105">BackTop</span><span class="chinese" data-reactid="106"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="107"><a href="/components/breadcrumb/" data-reactid="108"><span data-reactid="109">Breadcrumb</span><span class="chinese" data-reactid="110"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="111"><a href="/components/dropdown/" data-reactid="112"><span data-reactid="113">Dropdown</span><span class="chinese" data-reactid="114"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="115"><a href="/components/menu/" data-reactid="116"><span data-reactid="117">Menu</span><span class="chinese" data-reactid="118"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="119"><a href="/components/pagination/" data-reactid="120"><span data-reactid="121">Pagination</span><span class="chinese" data-reactid="122"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="123"><a href="/components/steps/" data-reactid="124"><span data-reactid="125">Steps</span><span class="chinese" data-reactid="126"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="127"><a href="/components/tabs/" data-reactid="128"><span data-reactid="129">Tabs</span><span class="chinese" data-reactid="130"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="131"><div class="ant-menu-item-group-title" data-reactid="132">Data Entry</div><ul class="ant-menu-item-group-list" data-reactid="133"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="134"><a href="/components/auto-complete/" data-reactid="135"><span data-reactid="136">AutoComplete</span><span class="chinese" data-reactid="137"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="138"><a href="/components/checkbox/" data-reactid="139"><span data-reactid="140">Checkbox</span><span class="chinese" data-reactid="141"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="142"><a href="/components/cascader/" data-reactid="143"><span data-reactid="144">Cascader</span><span class="chinese" data-reactid="145"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="146"><a href="/components/date-picker/" data-reactid="147"><span data-reactid="148">DatePicker</span><span class="chinese" data-reactid="149"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="150"><a href="/components/form/" data-reactid="151"><span data-reactid="152">Form</span><span class="chinese" data-reactid="153"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="154"><a href="/components/input/" data-reactid="155"><span data-reactid="156">Input</span><span class="chinese" data-reactid="157"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="158"><a href="/components/input-number/" data-reactid="159"><span data-reactid="160">InputNumber</span><span class="chinese" data-reactid="161"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="162"><a href="/components/mention/" data-reactid="163"><span data-reactid="164">Mention</span><span class="chinese" data-reactid="165"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="166"><a href="/components/radio/" data-reactid="167"><span data-reactid="168">Radio</span><span class="chinese" data-reactid="169"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="170"><a href="/components/rate/" data-reactid="171"><span data-reactid="172">Rate</span><span class="chinese" data-reactid="173"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="174"><a href="/components/select/" data-reactid="175"><span data-reactid="176">Select</span><span class="chinese" data-reactid="177"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="178"><a href="/components/slider/" data-reactid="179"><span data-reactid="180">Slider</span><span class="chinese" data-reactid="181"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="182"><a href="/components/switch/" data-reactid="183"><span data-reactid="184">Switch</span><span class="chinese" data-reactid="185"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="186"><a href="/components/time-picker/" data-reactid="187"><span data-reactid="188">TimePicker</span><span class="chinese" data-reactid="189"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="190"><a href="/components/transfer/" data-reactid="191"><span data-reactid="192">Transfer</span><span class="chinese" data-reactid="193"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="194"><a href="/components/tree-select/" data-reactid="195"><span data-reactid="196">TreeSelect</span><span class="chinese" data-reactid="197"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="198"><a href="/components/upload/" data-reactid="199"><span data-reactid="200">Upload</span><span class="chinese" data-reactid="201"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="202"><div class="ant-menu-item-group-title" data-reactid="203">Data Display</div><ul class="ant-menu-item-group-list" data-reactid="204"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="205"><a href="/components/badge/" data-reactid="206"><span data-reactid="207">Badge</span><span class="chinese" data-reactid="208"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="209"><a href="/components/card/" data-reactid="210"><span data-reactid="211">Card</span><span class="chinese" data-reactid="212"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="213"><a href="/components/carousel/" data-reactid="214"><span data-reactid="215">Carousel</span><span class="chinese" data-reactid="216"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="217"><a href="/components/collapse/" data-reactid="218"><span data-reactid="219">Collapse</span><span class="chinese" data-reactid="220"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="221"><a href="/components/calendar/" data-reactid="222"><span data-reactid="223">Calendar</span><span class="chinese" data-reactid="224"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="225"><a href="/components/popover/" data-reactid="226"><span data-reactid="227">Popover</span><span class="chinese" data-reactid="228"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="229"><a href="/components/table/" data-reactid="230"><span data-reactid="231">Table</span><span class="chinese" data-reactid="232"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="233"><a href="/components/tag/" data-reactid="234"><span data-reactid="235">Tag</span><span class="chinese" data-reactid="236"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="237"><a href="/components/timeline/" data-reactid="238"><span data-reactid="239">Timeline</span><span class="chinese" data-reactid="240"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="241"><a href="/components/tooltip/" data-reactid="242"><span data-reactid="243">Tooltip</span><span class="chinese" data-reactid="244"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="245"><a href="/components/tree/" data-reactid="246"><span data-reactid="247">Tree</span><span class="chinese" data-reactid="248"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="249"><div class="ant-menu-item-group-title" data-reactid="250">Feedback</div><ul class="ant-menu-item-group-list" data-reactid="251"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="252"><a href="/components/alert/" data-reactid="253"><span data-reactid="254">Alert</span><span class="chinese" data-reactid="255"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="256"><a href="/components/message/" data-reactid="257"><span data-reactid="258">Message</span><span class="chinese" data-reactid="259"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="260"><a href="/components/modal/" data-reactid="261"><span data-reactid="262">Modal</span><span class="chinese" data-reactid="263"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="264"><a href="/components/notification/" data-reactid="265"><span data-reactid="266">Notification</span><span class="chinese" data-reactid="267"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="268"><a href="/components/popconfirm/" data-reactid="269"><span data-reactid="270">Popconfirm</span><span class="chinese" data-reactid="271"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="272"><a href="/components/progress/" data-reactid="273"><span data-reactid="274">Progress</span><span class="chinese" data-reactid="275"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="276"><a href="/components/spin/" data-reactid="277"><span data-reactid="278">Spin</span><span class="chinese" data-reactid="279"></span></a></li></ul></li><li class=" ant-menu-item-group" data-reactid="280"><div class="ant-menu-item-group-title" data-reactid="281">Other</div><ul class="ant-menu-item-group-list" data-reactid="282"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="283"><a href="/components/anchor/" data-reactid="284"><span data-reactid="285">Anchor</span><span class="chinese" data-reactid="286"></span></a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="287"><a href="/components/locale-provider/" data-reactid="288"><span data-reactid="289">LocaleProvider</span><span class="chinese" data-reactid="290"></span></a></li></ul></li></ul></li></ul></div><div class="main-container ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-lg-20" data-reactid="291"><article data-reactid="292"><div class="toc-affix" data-reactid="293"><div class="" data-reactid="294"><ul class="toc demos-anchor" data-reactid="295"><li title="Basic Structure" data-reactid="296"><a href="#components-layout-demo-basic" data-reactid="297">Basic Structure</a></li><li title="Header-Content-Footer" data-reactid="298"><a href="#components-layout-demo-top" data-reactid="299">Header-Content-Footer</a></li><li title="Header-Sider" data-reactid="300"><a href="#components-layout-demo-top-side" data-reactid="301">Header-Sider</a></li><li title="Sider" data-reactid="302"><a href="#components-layout-demo-side" data-reactid="303">Sider</a></li><li title="Custom trigger" data-reactid="304"><a href="#components-layout-demo-custom-trigger" data-reactid="305">Custom trigger</a></li></ul></div></div><section class="markdown" data-reactid="306"><h1 data-reactid="307"><!-- react-text: 308 -->Layout<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/layout/index.en-US.md" data-reactid="309"><i class="anticon anticon-edit" data-reactid="310"></i></a></h1><section class="markdown" data-reactid="311"><p data-reactid="312"><!-- react-text: 313 -->When you are handling the overall layout of a page, this component might be helpfull.<!-- /react-text --></p><h2 id="Overview" data-reactid="314"><span data-reactid="315"><!-- react-text: 316 -->Overview<!-- /react-text --></span><a href="#Overview" class="anchor" data-reactid="317">#</a></h2><ul data-reactid="318"><li data-reactid="319"><p data-reactid="320"><code data-reactid="321"><!-- react-text: 322 -->Layout<!-- /react-text --></code><!-- react-text: 323 -->: The layout wrapper, in which <!-- /react-text --><code data-reactid="324"><!-- react-text: 325 -->Header<!-- /react-text --></code><!-- react-text: 326 --> <!-- /react-text --><code data-reactid="327"><!-- react-text: 328 -->Sider<!-- /react-text --></code><!-- react-text: 329 --> <!-- /react-text --><code data-reactid="330"><!-- react-text: 331 -->Content<!-- /react-text --></code><!-- react-text: 332 --> <!-- /react-text --><code data-reactid="333"><!-- react-text: 334 -->Footer<!-- /react-text --></code><!-- react-text: 335 --> or <!-- /react-text --><code data-reactid="336"><!-- react-text: 337 -->Layout<!-- /react-text --></code><!-- react-text: 338 --> itself can be nested.<!-- /react-text --></p></li><li data-reactid="339"><p data-reactid="340"><code data-reactid="341"><!-- react-text: 342 -->Header<!-- /react-text --></code><!-- react-text: 343 -->: The top layout with default style.<!-- /react-text --></p></li><li data-reactid="344"><p data-reactid="345"><code data-reactid="346"><!-- react-text: 347 -->Sider<!-- /react-text --></code><!-- react-text: 348 -->: The sidebar with default style and basic functions.<!-- /react-text --></p></li><li data-reactid="349"><p data-reactid="350"><code data-reactid="351"><!-- react-text: 352 -->Content<!-- /react-text --></code><!-- react-text: 353 -->: The content layout with default style.<!-- /react-text --></p></li><li data-reactid="354"><p data-reactid="355"><code data-reactid="356"><!-- react-text: 357 -->Footer<!-- /react-text --></code><!-- react-text: 358 -->: The bottom layout with default style.<!-- /react-text --></p></li></ul><blockquote data-reactid="359"><p data-reactid="360"><!-- react-text: 361 -->Base on <!-- /react-text --><code data-reactid="362"><!-- react-text: 363 -->flex layout<!-- /react-text --></code><!-- react-text: 364 -->, please pay attention to the <!-- /react-text --><a href="http://caniuse.com/#search=flex" data-reactid="365"><!-- react-text: 366 -->compatibility<!-- /react-text --></a><!-- react-text: 367 -->.<!-- /react-text --></p></blockquote></section><h2 data-reactid="368"><span data-reactid="369">Examples</span><i class="anticon anticon-appstore code-box-expand-trigger" title="展开全部代码" data-reactid="370"></i></h2></section><div class="ant-row" style="margin-left:-8px;margin-right:-8px;" data-reactid="371"><div style="padding-left:8px;padding-right:8px;" class="ant-col-24 code-boxes-col-1-1" data-reactid="372"><section class="code-box" id="components-layout-demo-basic" data-reactid="373"><section class="code-box-demo" data-reactid="374"><div data-reactid="375"><div class="ant-layout" data-reactid="376"><div class="ant-layout-header" data-reactid="377">Header</div><div class="ant-layout-content" data-reactid="378">Content</div><div class="ant-layout-footer" data-reactid="379">Footer</div></div><div class="ant-layout" data-reactid="380"><div class="ant-layout-header" data-reactid="381">Header</div><div class="ant-layout ant-layout-has-sider" data-reactid="382"><div class="ant-layout-sider" style="flex:0 0 200px;" data-reactid="383"><!-- react-text: 384 -->Sider<!-- /react-text --></div><div class="ant-layout-content" data-reactid="385">Content</div></div><div class="ant-layout-footer" data-reactid="386">Footer</div></div><div class="ant-layout" data-reactid="387"><div class="ant-layout-header" data-reactid="388">Header</div><div class="ant-layout ant-layout-has-sider" data-reactid="389"><div class="ant-layout-content" data-reactid="390">Content</div><div class="ant-layout-sider" style="flex:0 0 200px;" data-reactid="391"><!-- react-text: 392 -->Sider<!-- /react-text --></div></div><div class="ant-layout-footer" data-reactid="393">Footer</div></div><div class="ant-layout ant-layout-has-sider" data-reactid="394"><div class="ant-layout-sider" style="flex:0 0 200px;" data-reactid="395"><!-- react-text: 396 -->Sider<!-- /react-text --></div><div class="ant-layout-content" data-reactid="397"><div class="ant-layout-header" data-reactid="398">Header</div><div class="ant-layout-content" data-reactid="399">Content</div><div class="ant-layout-footer" data-reactid="400">Footer</div></div></div></div><style data-reactid="401">
|
|
#components-layout-demo-basic .code-box-demo {
|
|
text-align: center;
|
|
}
|
|
#components-layout-demo-basic .ant-layout-header,
|
|
#components-layout-demo-basic .ant-layout-footer {
|
|
background: #7dbcea;
|
|
color: #fff;
|
|
}
|
|
#components-layout-demo-basic .ant-layout-footer {
|
|
line-height: 1.5;
|
|
}
|
|
#components-layout-demo-basic .ant-layout-sider {
|
|
background: #3ba0e9;
|
|
color: #fff;
|
|
line-height: 120px;
|
|
}
|
|
#components-layout-demo-basic .ant-layout-content {
|
|
background: rgba(16, 142, 233, 1);
|
|
color: #fff;
|
|
min-height: 120px;
|
|
line-height: 120px;
|
|
}
|
|
#components-layout-demo-basic > .code-box-demo > div > .ant-layout {
|
|
margin-bottom: 48px;
|
|
}
|
|
#components-layout-demo-basic > .code-box-demo > div > .ant-layout:last-child {
|
|
margin: 0;
|
|
}
|
|
</style></section><section class="code-box-meta markdown" data-reactid="402"><div class="code-box-title" data-reactid="403"><a href="#components-layout-demo-basic" data-reactid="404">Basic Structure</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/layout/demo/basic.md" data-reactid="405"><i class="anticon anticon-edit" data-reactid="406"></i></a></div><div data-reactid="407"><p data-reactid="408"><!-- react-text: 409 -->Classic page layouts.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="410"></i></section><section class="highlight-wrapper" data-reactid="411"><div class="highlight" data-reactid="412"><pre class="language-__react" data-reactid="413"><code data-reactid="414">import { Layout } from <span class="token string">'antd'</span><span class="token comment" spellcheck="true">;</span>
|
|
<span class="token keyword">const</span> { Header<span class="token punctuation">,</span> Footer<span class="token punctuation">,</span> Sider<span class="token punctuation">,</span> Content } <span class="token operator">=</span> Layout<span class="token comment" spellcheck="true">;</span>
|
|
|
|
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
|
|
<span class="token operator"><</span>div<span class="token operator">></span>
|
|
<span class="token operator"><</span>Layout<span class="token operator">></span>
|
|
<span class="token operator"><</span>Header<span class="token operator">></span>Header<span class="token operator"><</span><span class="token operator">/</span>Header<span class="token operator">></span>
|
|
<span class="token operator"><</span>Content<span class="token operator">></span>Content<span class="token operator"><</span><span class="token operator">/</span>Content<span class="token operator">></span>
|
|
<span class="token operator"><</span>Footer<span class="token operator">></span>Footer<span class="token operator"><</span><span class="token operator">/</span>Footer<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Layout<span class="token operator">></span>
|
|
|
|
<span class="token operator"><</span>Layout<span class="token operator">></span>
|
|
<span class="token operator"><</span>Header<span class="token operator">></span>Header<span class="token operator"><</span><span class="token operator">/</span>Header<span class="token operator">></span>
|
|
<span class="token operator"><</span>Layout<span class="token operator">></span>
|
|
<span class="token operator"><</span>Sider<span class="token operator">></span>Sider<span class="token operator"><</span><span class="token operator">/</span>Sider<span class="token operator">></span>
|
|
<span class="token operator"><</span>Content<span class="token operator">></span>Content<span class="token operator"><</span><span class="token operator">/</span>Content<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Layout<span class="token operator">></span>
|
|
<span class="token operator"><</span>Footer<span class="token operator">></span>Footer<span class="token operator"><</span><span class="token operator">/</span>Footer<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Layout<span class="token operator">></span>
|
|
|
|
<span class="token operator"><</span>Layout<span class="token operator">></span>
|
|
<span class="token operator"><</span>Header<span class="token operator">></span>Header<span class="token operator"><</span><span class="token operator">/</span>Header<span class="token operator">></span>
|
|
<span class="token operator"><</span>Layout<span class="token operator">></span>
|
|
<span class="token operator"><</span>Content<span class="token operator">></span>Content<span class="token operator"><</span><span class="token operator">/</span>Content<span class="token operator">></span>
|
|
<span class="token operator"><</span>Sider<span class="token operator">></span>Sider<span class="token operator"><</span><span class="token operator">/</span>Sider<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Layout<span class="token operator">></span>
|
|
<span class="token operator"><</span>Footer<span class="token operator">></span>Footer<span class="token operator"><</span><span class="token operator">/</span>Footer<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Layout<span class="token operator">></span>
|
|
|
|
<span class="token operator"><</span>Layout<span class="token operator">></span>
|
|
<span class="token operator"><</span>Sider<span class="token operator">></span>Sider<span class="token operator"><</span><span class="token operator">/</span>Sider<span class="token operator">></span>
|
|
<span class="token operator"><</span>Content<span class="token operator">></span>
|
|
<span class="token operator"><</span>Header<span class="token operator">></span>Header<span class="token operator"><</span><span class="token operator">/</span>Header<span class="token operator">></span>
|
|
<span class="token operator"><</span>Content<span class="token operator">></span>Content<span class="token operator"><</span><span class="token operator">/</span>Content<span class="token operator">></span>
|
|
<span class="token operator"><</span>Footer<span class="token operator">></span>Footer<span class="token operator"><</span><span class="token operator">/</span>Footer<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Content<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Layout<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
|
|
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span></code></pre></div></section></section><section class="code-box" id="components-layout-demo-top" data-reactid="415"><section class="code-box-demo" data-reactid="416"><div class="layout ant-layout" data-reactid="417"><div class="ant-layout-header" data-reactid="418"><div class="logo" data-reactid="419"></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="420"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="421">nav 1</li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="422">nav 2</li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="423">nav 3</li></ul></div><div class="ant-layout-content" style="padding:0 50px;" data-reactid="424"><div class="ant-breadcrumb" style="margin:12px 0;" data-reactid="425"><span data-reactid="426"><span class="ant-breadcrumb-link" data-reactid="427">Home</span><span class="ant-breadcrumb-separator" data-reactid="428">/</span></span><span data-reactid="429"><span class="ant-breadcrumb-link" data-reactid="430">List</span><span class="ant-breadcrumb-separator" data-reactid="431">/</span></span><span data-reactid="432"><span class="ant-breadcrumb-link" data-reactid="433">App</span><span class="ant-breadcrumb-separator" data-reactid="434">/</span></span></div><div style="background:#fff;padding:24px;min-height:280px;" data-reactid="435">Content</div></div><div class="ant-layout-footer" style="text-align:center;" data-reactid="436">Ant Design ©2016 Created by Ant UED</div></div><style data-reactid="437">#components-layout-demo-top .logo {
|
|
width: 120px;
|
|
height: 31px;
|
|
background: #333;
|
|
border-radius: 6px;
|
|
margin: 16px 24px 16px 0;
|
|
float: left;
|
|
}</style></section><section class="code-box-meta markdown" data-reactid="438"><div class="code-box-title" data-reactid="439"><a href="#components-layout-demo-top" data-reactid="440">Header-Content-Footer</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/layout/demo/top.md" data-reactid="441"><i class="anticon anticon-edit" data-reactid="442"></i></a></div><div data-reactid="443"><p data-reactid="444"><!-- react-text: 445 -->The most basic "header-content-footer" layout.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="446"></i></section><section class="highlight-wrapper" data-reactid="447"><div class="highlight" data-reactid="448"><pre class="language-__react" data-reactid="449"><code data-reactid="450">import { Layout<span class="token punctuation">,</span> Menu<span class="token punctuation">,</span> Breadcrumb } from <span class="token string">'antd'</span><span class="token comment" spellcheck="true">;</span>
|
|
<span class="token keyword">const</span> { Header<span class="token punctuation">,</span> Content<span class="token punctuation">,</span> Footer } <span class="token operator">=</span> Layout<span class="token comment" spellcheck="true">;</span>
|
|
|
|
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
|
|
<span class="token operator"><</span>Layout className<span class="token operator">=</span><span class="token string">"layout"</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>Header<span class="token operator">></span>
|
|
<span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"logo"</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>Menu
|
|
theme<span class="token operator">=</span><span class="token string">"dark"</span>
|
|
mode<span class="token operator">=</span><span class="token string">"horizontal"</span>
|
|
defaultSelectedKeys<span class="token operator">=</span>{<span class="token punctuation">[</span><span class="token string">'2'</span><span class="token punctuation">]</span>}
|
|
style<span class="token operator">=</span>{{ lineHeight<span class="token punctuation">:</span> <span class="token string">'64px'</span> }}
|
|
<span class="token operator">></span>
|
|
<span class="token operator"><</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"1"</span><span class="token operator">></span>nav <span class="token number">1</span><span class="token operator"><</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"2"</span><span class="token operator">></span>nav <span class="token number">2</span><span class="token operator"><</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"3"</span><span class="token operator">></span>nav <span class="token number">3</span><span class="token operator"><</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Menu<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Header<span class="token operator">></span>
|
|
<span class="token operator"><</span>Content style<span class="token operator">=</span>{{ padding<span class="token punctuation">:</span> <span class="token string">'0 50px'</span> }}<span class="token operator">></span>
|
|
<span class="token operator"><</span>Breadcrumb style<span class="token operator">=</span>{{ margin<span class="token punctuation">:</span> <span class="token string">'12px 0'</span> }}<span class="token operator">></span>
|
|
<span class="token operator"><</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>Home<span class="token operator"><</span><span class="token operator">/</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>List<span class="token operator"><</span><span class="token operator">/</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>App<span class="token operator"><</span><span class="token operator">/</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Breadcrumb<span class="token operator">></span>
|
|
<span class="token operator"><</span>div style<span class="token operator">=</span>{{ background<span class="token punctuation">:</span> <span class="token string">'#fff'</span><span class="token punctuation">,</span> padding<span class="token punctuation">:</span> <span class="token number">24</span><span class="token punctuation">,</span> minHeight<span class="token punctuation">:</span> <span class="token number">280</span> }}<span class="token operator">></span>Content<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Content<span class="token operator">></span>
|
|
<span class="token operator"><</span>Footer style<span class="token operator">=</span>{{ textAlign<span class="token punctuation">:</span> <span class="token string">'center'</span> }}<span class="token operator">></span>
|
|
Ant Design ©<span class="token number">2016</span> Created by Ant UED
|
|
<span class="token operator"><</span><span class="token operator">/</span>Footer<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Layout<span class="token operator">></span>
|
|
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span></code></pre></div><div class="highlight" data-reactid="451"><pre data-reactid="452"><code class="css" data-reactid="453"><span class="token selector"><span class="token id">#components-layout-demo-top</span> <span class="token class">.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">31</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">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="components-layout-demo-top-side" data-reactid="454"><section class="code-box-demo" data-reactid="455"><div class="ant-layout" data-reactid="456"><div class="header ant-layout-header" data-reactid="457"><div class="logo" data-reactid="458"></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="459"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="460">nav 1</li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="461">nav 2</li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="462">nav 3</li></ul></div><div class="ant-layout-content" style="padding:0 50px;" data-reactid="463"><div class="ant-breadcrumb" style="margin:12px 0;" data-reactid="464"><span data-reactid="465"><span class="ant-breadcrumb-link" data-reactid="466">Home</span><span class="ant-breadcrumb-separator" data-reactid="467">/</span></span><span data-reactid="468"><span class="ant-breadcrumb-link" data-reactid="469">List</span><span class="ant-breadcrumb-separator" data-reactid="470">/</span></span><span data-reactid="471"><span class="ant-breadcrumb-link" data-reactid="472">App</span><span class="ant-breadcrumb-separator" data-reactid="473">/</span></span></div><div class="ant-layout ant-layout-has-sider" style="padding:24px 0;background:#fff;" data-reactid="474"><div class="ant-layout-sider" style="background:#fff;flex:0 0 200px;" data-reactid="475"><ul style="height:100%;" class="ant-menu ant-menu-inline ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="476"><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu" data-reactid="477"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" data-reactid="478"><span data-reactid="479"><i class="anticon anticon-user" data-reactid="480"></i><!-- react-text: 481 -->subnav 1<!-- /react-text --></span></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="sub1$Menu" data-reactid="482"><li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="483">option1</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="484">option2</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="485">option3</li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="486">option4</li></ul></li><li class="ant-menu-submenu-inline ant-menu-submenu" data-reactid="487"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="false" aria-owns="sub2$Menu" aria-haspopup="true" data-reactid="488"><span data-reactid="489"><i class="anticon anticon-laptop" data-reactid="490"></i><!-- react-text: 491 -->subnav 2<!-- /react-text --></span></div><!-- react-empty: 492 --></li><li class="ant-menu-submenu-inline ant-menu-submenu" data-reactid="493"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="false" aria-owns="sub3$Menu" aria-haspopup="true" data-reactid="494"><span data-reactid="495"><i class="anticon anticon-notification" data-reactid="496"></i><!-- react-text: 497 -->subnav 3<!-- /react-text --></span></div><!-- react-empty: 498 --></li></ul></div><div class="ant-layout-content" style="padding:0 24px;min-height:280px;" data-reactid="499">Content</div></div></div><div class="ant-layout-footer" style="text-align:center;" data-reactid="500">Ant Design ©2016 Created by Ant UED</div></div><style data-reactid="501">#components-layout-demo-top-side .logo {
|
|
width: 120px;
|
|
height: 31px;
|
|
background: #333;
|
|
border-radius: 6px;
|
|
margin: 16px 28px 16px 0;
|
|
float: left;
|
|
}</style></section><section class="code-box-meta markdown" data-reactid="502"><div class="code-box-title" data-reactid="503"><a href="#components-layout-demo-top-side" data-reactid="504">Header-Sider</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/layout/demo/top-side.md" data-reactid="505"><i class="anticon anticon-edit" data-reactid="506"></i></a></div><div data-reactid="507"><p data-reactid="508"><!-- react-text: 509 -->Be used in the page which has both the top navigation and the sidebar.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="510"></i></section><section class="highlight-wrapper" data-reactid="511"><div class="highlight" data-reactid="512"><pre class="language-__react" data-reactid="513"><code data-reactid="514">import { Layout<span class="token punctuation">,</span> Menu<span class="token punctuation">,</span> Breadcrumb<span class="token punctuation">,</span> Icon } from <span class="token string">'antd'</span><span class="token comment" spellcheck="true">;</span>
|
|
<span class="token keyword">const</span> { SubMenu } <span class="token operator">=</span> Menu<span class="token comment" spellcheck="true">;</span>
|
|
<span class="token keyword">const</span> { Header<span class="token punctuation">,</span> Content<span class="token punctuation">,</span> Footer<span class="token punctuation">,</span> Sider } <span class="token operator">=</span> Layout<span class="token comment" spellcheck="true">;</span>
|
|
|
|
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
|
|
<span class="token operator"><</span>Layout<span class="token operator">></span>
|
|
<span class="token operator"><</span>Header className<span class="token operator">=</span><span class="token string">"header"</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"logo"</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>Menu
|
|
theme<span class="token operator">=</span><span class="token string">"dark"</span>
|
|
mode<span class="token operator">=</span><span class="token string">"horizontal"</span>
|
|
defaultSelectedKeys<span class="token operator">=</span>{<span class="token punctuation">[</span><span class="token string">'2'</span><span class="token punctuation">]</span>}
|
|
style<span class="token operator">=</span>{{ lineHeight<span class="token punctuation">:</span> <span class="token string">'64px'</span> }}
|
|
<span class="token operator">></span>
|
|
<span class="token operator"><</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"1"</span><span class="token operator">></span>nav <span class="token number">1</span><span class="token operator"><</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"2"</span><span class="token operator">></span>nav <span class="token number">2</span><span class="token operator"><</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"3"</span><span class="token operator">></span>nav <span class="token number">3</span><span class="token operator"><</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Menu<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Header<span class="token operator">></span>
|
|
<span class="token operator"><</span>Content style<span class="token operator">=</span>{{ padding<span class="token punctuation">:</span> <span class="token string">'0 50px'</span> }}<span class="token operator">></span>
|
|
<span class="token operator"><</span>Breadcrumb style<span class="token operator">=</span>{{ margin<span class="token punctuation">:</span> <span class="token string">'12px 0'</span> }}<span class="token operator">></span>
|
|
<span class="token operator"><</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>Home<span class="token operator"><</span><span class="token operator">/</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>List<span class="token operator"><</span><span class="token operator">/</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>App<span class="token operator"><</span><span class="token operator">/</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Breadcrumb<span class="token operator">></span>
|
|
<span class="token operator"><</span>Layout style<span class="token operator">=</span>{{ padding<span class="token punctuation">:</span> <span class="token string">'24px 0'</span><span class="token punctuation">,</span> background<span class="token punctuation">:</span> <span class="token string">'#fff'</span> }}<span class="token operator">></span>
|
|
<span class="token operator"><</span>Sider width<span class="token operator">=</span>{<span class="token number">200</span>} style<span class="token operator">=</span>{{ background<span class="token punctuation">:</span> <span class="token string">'#fff'</span> }}<span class="token operator">></span>
|
|
<span class="token operator"><</span>Menu
|
|
mode<span class="token operator">=</span><span class="token string">"inline"</span>
|
|
defaultSelectedKeys<span class="token operator">=</span>{<span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">]</span>}
|
|
defaultOpenKeys<span class="token operator">=</span>{<span class="token punctuation">[</span><span class="token string">'sub1'</span><span class="token punctuation">]</span>}
|
|
style<span class="token operator">=</span>{{ height<span class="token punctuation">:</span> <span class="token string">'100%'</span> }}
|
|
<span class="token operator">></span>
|
|
<span class="token operator"><</span>SubMenu key<span class="token operator">=</span><span class="token string">"sub1"</span> title<span class="token operator">=</span>{<span class="token operator"><</span>span<span class="token operator">></span><span class="token operator"><</span>Icon type<span class="token operator">=</span><span class="token string">"user"</span> <span class="token operator">/</span><span class="token operator">></span>subnav <span class="token number">1</span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>}<span class="token operator">></span>
|
|
<span class="token operator"><</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"1"</span><span class="token operator">></span>option1<span class="token operator"><</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"2"</span><span class="token operator">></span>option2<span class="token operator"><</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"3"</span><span class="token operator">></span>option3<span class="token operator"><</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"4"</span><span class="token operator">></span>option4<span class="token operator"><</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>SubMenu<span class="token operator">></span>
|
|
<span class="token operator"><</span>SubMenu key<span class="token operator">=</span><span class="token string">"sub2"</span> title<span class="token operator">=</span>{<span class="token operator"><</span>span<span class="token operator">></span><span class="token operator"><</span>Icon type<span class="token operator">=</span><span class="token string">"laptop"</span> <span class="token operator">/</span><span class="token operator">></span>subnav <span class="token number">2</span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>}<span class="token operator">></span>
|
|
<span class="token operator"><</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"5"</span><span class="token operator">></span>option5<span class="token operator"><</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"6"</span><span class="token operator">></span>option6<span class="token operator"><</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"7"</span><span class="token operator">></span>option7<span class="token operator"><</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"8"</span><span class="token operator">></span>option8<span class="token operator"><</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>SubMenu<span class="token operator">></span>
|
|
<span class="token operator"><</span>SubMenu key<span class="token operator">=</span><span class="token string">"sub3"</span> title<span class="token operator">=</span>{<span class="token operator"><</span>span<span class="token operator">></span><span class="token operator"><</span>Icon type<span class="token operator">=</span><span class="token string">"notification"</span> <span class="token operator">/</span><span class="token operator">></span>subnav <span class="token number">3</span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>}<span class="token operator">></span>
|
|
<span class="token operator"><</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"9"</span><span class="token operator">></span>option9<span class="token operator"><</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"10"</span><span class="token operator">></span>option10<span class="token operator"><</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"11"</span><span class="token operator">></span>option11<span class="token operator"><</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"12"</span><span class="token operator">></span>option12<span class="token operator"><</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>SubMenu<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Menu<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Sider<span class="token operator">></span>
|
|
<span class="token operator"><</span>Content style<span class="token operator">=</span>{{ padding<span class="token punctuation">:</span> <span class="token string">'0 24px'</span><span class="token punctuation">,</span> minHeight<span class="token punctuation">:</span> <span class="token number">280</span> }}<span class="token operator">></span>
|
|
Content
|
|
<span class="token operator"><</span><span class="token operator">/</span>Content<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Layout<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Content<span class="token operator">></span>
|
|
<span class="token operator"><</span>Footer style<span class="token operator">=</span>{{ textAlign<span class="token punctuation">:</span> <span class="token string">'center'</span> }}<span class="token operator">></span>
|
|
Ant Design ©<span class="token number">2016</span> Created by Ant UED
|
|
<span class="token operator"><</span><span class="token operator">/</span>Footer<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Layout<span class="token operator">></span>
|
|
<span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span></code></pre></div><div class="highlight" data-reactid="515"><pre data-reactid="516"><code class="css" data-reactid="517"><span class="token selector"><span class="token id">#components-layout-demo-top-side</span> <span class="token class">.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">31</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></code></pre></div></section></section><section class="code-box" id="components-layout-demo-side" data-reactid="518"><section class="code-box-demo" data-reactid="519"><div class="ant-layout ant-layout-has-sider" data-reactid="520"><div class="ant-layout-sider" style="flex:0 0 200px;" data-reactid="521"><div class="logo" data-reactid="522"></div><ul class="ant-menu ant-menu-inline ant-menu-dark ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="523"><li style="padding-left:24px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="524"><i class="anticon anticon-user" data-reactid="525"></i><span class="nav-text" data-reactid="526">nav 1</span></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="527"><i class="anticon anticon-video-camera" data-reactid="528"></i><span class="nav-text" data-reactid="529">nav 2</span></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="530"><i class="anticon anticon-upload" data-reactid="531"></i><span class="nav-text" data-reactid="532">nav 3</span></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="533"><i class="anticon anticon-user" data-reactid="534"></i><span class="nav-text" data-reactid="535">nav 4</span></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="536"><i class="anticon anticon-heart-o" data-reactid="537"></i><span class="nav-text" data-reactid="538">nav 5</span></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="539"><i class="anticon anticon-team" data-reactid="540"></i><span class="nav-text" data-reactid="541">nav 6</span></li></ul><div class="ant-layout-sider-trigger" data-reactid="542"><i class="anticon anticon-left" data-reactid="543"></i></div></div><div class="ant-layout" data-reactid="544"><div class="ant-layout-header" style="background:#fff;padding:0;" data-reactid="545"></div><div class="ant-layout-content" style="margin:0 16px;" data-reactid="546"><div class="ant-breadcrumb" style="margin:12px 0;" data-reactid="547"><span data-reactid="548"><span class="ant-breadcrumb-link" data-reactid="549">Home</span><span class="ant-breadcrumb-separator" data-reactid="550">/</span></span><span data-reactid="551"><span class="ant-breadcrumb-link" data-reactid="552">List</span><span class="ant-breadcrumb-separator" data-reactid="553">/</span></span><span data-reactid="554"><span class="ant-breadcrumb-link" data-reactid="555">App</span><span class="ant-breadcrumb-separator" data-reactid="556">/</span></span></div><div style="padding:24px;background:#fff;min-height:360px;" data-reactid="557">content</div></div><div class="ant-layout-footer" style="text-align:center;" data-reactid="558">Ant Design ©2016 Created by Ant UED</div></div></div><style data-reactid="559">#components-layout-demo-side .logo {
|
|
height: 32px;
|
|
background: #333;
|
|
border-radius: 6px;
|
|
margin: 16px;
|
|
}
|
|
|
|
#components-layout-demo-side .ant-layout-sider-collapsed .anticon {
|
|
font-size: 16px;
|
|
}
|
|
|
|
#components-layout-demo-side .ant-layout-sider-collapsed .nav-text {
|
|
display: none;
|
|
}</style></section><section class="code-box-meta markdown" data-reactid="560"><div class="code-box-title" data-reactid="561"><a href="#components-layout-demo-side" data-reactid="562">Sider</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/layout/demo/side.md" data-reactid="563"><i class="anticon anticon-edit" data-reactid="564"></i></a></div><div data-reactid="565"><p data-reactid="566"><!-- react-text: 567 -->Be used in the two-columns layout.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="568"></i></section><section class="highlight-wrapper" data-reactid="569"><div class="highlight" data-reactid="570"><pre class="language-__react" data-reactid="571"><code data-reactid="572">import { Layout<span class="token punctuation">,</span> Menu<span class="token punctuation">,</span> Breadcrumb<span class="token punctuation">,</span> Icon } from <span class="token string">'antd'</span><span class="token comment" spellcheck="true">;</span>
|
|
<span class="token keyword">const</span> { Header<span class="token punctuation">,</span> Content<span class="token punctuation">,</span> Footer<span class="token punctuation">,</span> Sider } <span class="token operator">=</span> Layout<span class="token comment" spellcheck="true">;</span>
|
|
|
|
class SiderDemo extends React<span class="token punctuation">.</span>Component {
|
|
state <span class="token operator">=</span> {
|
|
collapsed<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
|
}<span class="token comment" spellcheck="true">;</span>
|
|
onCollapse <span class="token operator">=</span> <span class="token punctuation">(</span>collapsed<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> {
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>collapsed<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
this<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span>{ collapsed }<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
}
|
|
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
|
|
return <span class="token punctuation">(</span>
|
|
<span class="token operator"><</span>Layout<span class="token operator">></span>
|
|
<span class="token operator"><</span>Sider
|
|
collapsible
|
|
collapsed<span class="token operator">=</span>{this<span class="token punctuation">.</span>state<span class="token punctuation">.</span>collapsed}
|
|
onCollapse<span class="token operator">=</span>{this<span class="token punctuation">.</span>onCollapse}
|
|
<span class="token operator">></span>
|
|
<span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"logo"</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>Menu theme<span class="token operator">=</span><span class="token string">"dark"</span> mode<span class="token operator">=</span><span class="token string">"inline"</span> defaultSelectedKeys<span class="token operator">=</span>{<span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">]</span>}<span class="token operator">></span>
|
|
<span class="token operator"><</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"1"</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>Icon type<span class="token operator">=</span><span class="token string">"user"</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>span className<span class="token operator">=</span><span class="token string">"nav-text"</span><span class="token operator">></span>nav <span class="token number">1</span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"2"</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>Icon type<span class="token operator">=</span><span class="token string">"video-camera"</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>span className<span class="token operator">=</span><span class="token string">"nav-text"</span><span class="token operator">></span>nav <span class="token number">2</span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"3"</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>Icon type<span class="token operator">=</span><span class="token string">"upload"</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>span className<span class="token operator">=</span><span class="token string">"nav-text"</span><span class="token operator">></span>nav <span class="token number">3</span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"4"</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>Icon type<span class="token operator">=</span><span class="token string">"user"</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>span className<span class="token operator">=</span><span class="token string">"nav-text"</span><span class="token operator">></span>nav <span class="token number">4</span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"5"</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>Icon type<span class="token operator">=</span><span class="token string">"heart-o"</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>span className<span class="token operator">=</span><span class="token string">"nav-text"</span><span class="token operator">></span>nav <span class="token number">5</span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"6"</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>Icon type<span class="token operator">=</span><span class="token string">"team"</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>span className<span class="token operator">=</span><span class="token string">"nav-text"</span><span class="token operator">></span>nav <span class="token number">6</span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Menu<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Sider<span class="token operator">></span>
|
|
<span class="token operator"><</span>Layout<span class="token operator">></span>
|
|
<span class="token operator"><</span>Header style<span class="token operator">=</span>{{ background<span class="token punctuation">:</span> <span class="token string">'#fff'</span><span class="token punctuation">,</span> padding<span class="token punctuation">:</span> <span class="token number">0</span> }} <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>Content style<span class="token operator">=</span>{{ margin<span class="token punctuation">:</span> <span class="token string">'0 16px'</span> }}<span class="token operator">></span>
|
|
<span class="token operator"><</span>Breadcrumb style<span class="token operator">=</span>{{ margin<span class="token punctuation">:</span> <span class="token string">'12px 0'</span> }}<span class="token operator">></span>
|
|
<span class="token operator"><</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>Home<span class="token operator"><</span><span class="token operator">/</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>List<span class="token operator"><</span><span class="token operator">/</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>App<span class="token operator"><</span><span class="token operator">/</span>Breadcrumb<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Breadcrumb<span class="token operator">></span>
|
|
<span class="token operator"><</span>div style<span class="token operator">=</span>{{ padding<span class="token punctuation">:</span> <span class="token number">24</span><span class="token punctuation">,</span> background<span class="token punctuation">:</span> <span class="token string">'#fff'</span><span class="token punctuation">,</span> minHeight<span class="token punctuation">:</span> <span class="token number">360</span> }}<span class="token operator">></span>
|
|
content
|
|
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Content<span class="token operator">></span>
|
|
<span class="token operator"><</span>Footer style<span class="token operator">=</span>{{ textAlign<span class="token punctuation">:</span> <span class="token string">'center'</span> }}<span class="token operator">></span>
|
|
Ant Design ©<span class="token number">2016</span> Created by Ant UED
|
|
<span class="token operator"><</span><span class="token operator">/</span>Footer<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Layout<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Layout<span class="token operator">></span>
|
|
<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
}
|
|
}
|
|
|
|
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>SiderDemo <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span></code></pre></div><div class="highlight" data-reactid="573"><pre data-reactid="574"><code class="css" data-reactid="575"><span class="token selector"><span class="token id">#components-layout-demo-side</span> <span class="token class">.logo</span> </span><span class="token punctuation">{</span>
|
|
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">32</span>px<span class="token punctuation">;</span>
|
|
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#333</span><span class="token punctuation">;</span>
|
|
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">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 punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token selector"><span class="token id">#components-layout-demo-side</span> <span class="token class">.ant-layout-sider-collapsed</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 punctuation">}</span>
|
|
|
|
<span class="token selector"><span class="token id">#components-layout-demo-side</span> <span class="token class">.ant-layout-sider-collapsed</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></code></pre></div></section></section><section class="code-box" id="components-layout-demo-custom-trigger" data-reactid="576"><section class="code-box-demo" data-reactid="577"><div class="ant-layout ant-layout-has-sider" data-reactid="578"><div class="ant-layout-sider" style="flex:0 0 200px;" data-reactid="579"><div class="logo" data-reactid="580"></div><ul class="ant-menu ant-menu-inline ant-menu-dark ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="581"><li style="padding-left:24px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="582"><i class="anticon anticon-user" data-reactid="583"></i><span class="nav-text" data-reactid="584">nav 1</span></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="585"><i class="anticon anticon-video-camera" data-reactid="586"></i><span class="nav-text" data-reactid="587">nav 2</span></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="588"><i class="anticon anticon-upload" data-reactid="589"></i><span class="nav-text" data-reactid="590">nav 3</span></li></ul></div><div class="ant-layout" data-reactid="591"><div class="ant-layout-header" style="background:#fff;padding:0;" data-reactid="592"><i class="anticon anticon-menu-fold trigger" data-reactid="593"></i></div><div class="ant-layout-content" style="margin:24px 16px;padding:24px;background:#fff;min-height:280px;" data-reactid="594">Content</div></div></div><style data-reactid="595">#components-layout-demo-custom-trigger .trigger {
|
|
font-size: 18px;
|
|
line-height: 64px;
|
|
padding: 0 16px;
|
|
cursor: pointer;
|
|
transition: color .3s;
|
|
}
|
|
|
|
#components-layout-demo-custom-trigger .trigger:hover {
|
|
color: #108ee9;
|
|
}
|
|
|
|
#components-layout-demo-custom-trigger .logo {
|
|
height: 32px;
|
|
background: #333;
|
|
border-radius: 6px;
|
|
margin: 16px;
|
|
}
|
|
|
|
#components-layout-demo-custom-trigger .ant-layout-sider-collapsed .anticon {
|
|
font-size: 16px;
|
|
}
|
|
|
|
#components-layout-demo-custom-trigger .ant-layout-sider-collapsed .nav-text {
|
|
display: none;
|
|
}</style></section><section class="code-box-meta markdown" data-reactid="596"><div class="code-box-title" data-reactid="597"><a href="#components-layout-demo-custom-trigger" data-reactid="598">Custom trigger</a><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/components/layout/demo/custom-trigger.md" data-reactid="599"><i class="anticon anticon-edit" data-reactid="600"></i></a></div><div data-reactid="601"><p data-reactid="602"><!-- react-text: 603 -->If you want to use a customized trigger, you can hide the default one by setting <!-- /react-text --><code data-reactid="604"><!-- react-text: 605 -->trigger={null}<!-- /react-text --></code><!-- react-text: 606 -->.<!-- /react-text --></p></div><i title="Show Code" class="anticon anticon-down-circle-o collapse" data-reactid="607"></i></section><section class="highlight-wrapper" data-reactid="608"><div class="highlight" data-reactid="609"><pre class="language-__react" data-reactid="610"><code data-reactid="611">import { Layout<span class="token punctuation">,</span> Menu<span class="token punctuation">,</span> Icon } from <span class="token string">'antd'</span><span class="token comment" spellcheck="true">;</span>
|
|
<span class="token keyword">const</span> { Header<span class="token punctuation">,</span> Sider<span class="token punctuation">,</span> Content } <span class="token operator">=</span> Layout<span class="token comment" spellcheck="true">;</span>
|
|
|
|
class SiderDemo extends React<span class="token punctuation">.</span>Component {
|
|
state <span class="token operator">=</span> {
|
|
collapsed<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
|
}<span class="token comment" spellcheck="true">;</span>
|
|
toggle <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> {
|
|
this<span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span>{
|
|
collapsed<span class="token punctuation">:</span> !this<span class="token punctuation">.</span>state<span class="token punctuation">.</span>collapsed<span class="token punctuation">,</span>
|
|
}<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
}
|
|
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
|
|
return <span class="token punctuation">(</span>
|
|
<span class="token operator"><</span>Layout<span class="token operator">></span>
|
|
<span class="token operator"><</span>Sider
|
|
trigger<span class="token operator">=</span>{<span class="token keyword">null</span>}
|
|
collapsible
|
|
collapsed<span class="token operator">=</span>{this<span class="token punctuation">.</span>state<span class="token punctuation">.</span>collapsed}
|
|
<span class="token operator">></span>
|
|
<span class="token operator"><</span>div className<span class="token operator">=</span><span class="token string">"logo"</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>Menu theme<span class="token operator">=</span><span class="token string">"dark"</span> mode<span class="token operator">=</span><span class="token string">"inline"</span> defaultSelectedKeys<span class="token operator">=</span>{<span class="token punctuation">[</span><span class="token string">'1'</span><span class="token punctuation">]</span>}<span class="token operator">></span>
|
|
<span class="token operator"><</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"1"</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>Icon type<span class="token operator">=</span><span class="token string">"user"</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>span className<span class="token operator">=</span><span class="token string">"nav-text"</span><span class="token operator">></span>nav <span class="token number">1</span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"2"</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>Icon type<span class="token operator">=</span><span class="token string">"video-camera"</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>span className<span class="token operator">=</span><span class="token string">"nav-text"</span><span class="token operator">></span>nav <span class="token number">2</span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span>Menu<span class="token punctuation">.</span>Item key<span class="token operator">=</span><span class="token string">"3"</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>Icon type<span class="token operator">=</span><span class="token string">"upload"</span> <span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span>span className<span class="token operator">=</span><span class="token string">"nav-text"</span><span class="token operator">></span>nav <span class="token number">3</span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Menu<span class="token punctuation">.</span>Item<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Menu<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Sider<span class="token operator">></span>
|
|
<span class="token operator"><</span>Layout<span class="token operator">></span>
|
|
<span class="token operator"><</span>Header style<span class="token operator">=</span>{{ background<span class="token punctuation">:</span> <span class="token string">'#fff'</span><span class="token punctuation">,</span> padding<span class="token punctuation">:</span> <span class="token number">0</span> }}<span class="token operator">></span>
|
|
<span class="token operator"><</span>Icon
|
|
className<span class="token operator">=</span><span class="token string">"trigger"</span>
|
|
type<span class="token operator">=</span>{this<span class="token punctuation">.</span>state<span class="token punctuation">.</span>collapsed <span class="token operator">?</span> <span class="token string">'menu-unfold'</span> <span class="token punctuation">:</span> <span class="token string">'menu-fold'</span>}
|
|
onClick<span class="token operator">=</span>{this<span class="token punctuation">.</span>toggle}
|
|
<span class="token operator">/</span><span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Header<span class="token operator">></span>
|
|
<span class="token operator"><</span>Content style<span class="token operator">=</span>{{ margin<span class="token punctuation">:</span> <span class="token string">'24px 16px'</span><span class="token punctuation">,</span> padding<span class="token punctuation">:</span> <span class="token number">24</span><span class="token punctuation">,</span> background<span class="token punctuation">:</span> <span class="token string">'#fff'</span><span class="token punctuation">,</span> minHeight<span class="token punctuation">:</span> <span class="token number">280</span> }}<span class="token operator">></span>
|
|
Content
|
|
<span class="token operator"><</span><span class="token operator">/</span>Content<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Layout<span class="token operator">></span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Layout<span class="token operator">></span>
|
|
<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span>
|
|
}
|
|
}
|
|
|
|
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>SiderDemo <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token comment" spellcheck="true">;</span></code></pre></div><div class="highlight" data-reactid="612"><pre data-reactid="613"><code class="css" data-reactid="614"><span class="token selector"><span class="token id">#components-layout-demo-custom-trigger</span> <span class="token class">.trigger</span> </span><span class="token punctuation">{</span>
|
|
<span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">18</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">padding</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">16</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> color <span class="token number">.3</span>s<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token selector"><span class="token id">#components-layout-demo-custom-trigger</span> <span class="token class">.trigger</span><span class="token pseudo-class">:hover</span> </span><span class="token punctuation">{</span>
|
|
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#108ee9</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token selector"><span class="token id">#components-layout-demo-custom-trigger</span> <span class="token class">.logo</span> </span><span class="token punctuation">{</span>
|
|
<span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">32</span>px<span class="token punctuation">;</span>
|
|
<span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#333</span><span class="token punctuation">;</span>
|
|
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">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 punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token selector"><span class="token id">#components-layout-demo-custom-trigger</span> <span class="token class">.ant-layout-sider-collapsed</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 punctuation">}</span>
|
|
|
|
<span class="token selector"><span class="token id">#components-layout-demo-custom-trigger</span> <span class="token class">.ant-layout-sider-collapsed</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></code></pre></div></section></section></div></div><section class="markdown api-container" data-reactid="615"><h2 id="API" data-reactid="616"><span data-reactid="617"><!-- react-text: 618 -->API<!-- /react-text --></span><a href="#API" class="anchor" data-reactid="619">#</a></h2><pre class="language-jsx" data-reactid="620"><code data-reactid="621"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Layout</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Header</span><span class="token punctuation">></span></span>header<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Header</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Layout</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Sider</span><span class="token punctuation">></span></span>left sidebar<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Sider</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Content</span><span class="token punctuation">></span></span>main content<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Content</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Sider</span><span class="token punctuation">></span></span>right sidebar<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Sider</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Layout</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Footer</span><span class="token punctuation">></span></span>footer<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Footer</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Layout</span><span class="token punctuation">></span></span></code></pre><h3 id="Layout" data-reactid="622"><span data-reactid="623"><!-- react-text: 624 -->Layout<!-- /react-text --></span><a href="#Layout" class="anchor" data-reactid="625">#</a></h3><p data-reactid="626"><!-- react-text: 627 -->The wrapper.<!-- /react-text --></p><table data-reactid="628"><thead data-reactid="629"><tr data-reactid="630"><th data-reactid="631"><!-- react-text: 632 -->Property<!-- /react-text --></th><th data-reactid="633"><!-- react-text: 634 -->Description<!-- /react-text --></th><th data-reactid="635"><!-- react-text: 636 -->Type<!-- /react-text --></th><th data-reactid="637"><!-- react-text: 638 -->Default<!-- /react-text --></th></tr></thead><tbody data-reactid="639"><tr data-reactid="640"><td data-reactid="641"><!-- react-text: 642 -->style<!-- /react-text --></td><td data-reactid="643"><!-- react-text: 644 -->to custom the styles<!-- /react-text --></td><td data-reactid="645"><!-- react-text: 646 -->object<!-- /react-text --></td><td data-reactid="647"><!-- react-text: 648 -->-<!-- /react-text --></td></tr><tr data-reactid="649"><td data-reactid="650"><!-- react-text: 651 -->className<!-- /react-text --></td><td data-reactid="652"><!-- react-text: 653 -->container className<!-- /react-text --></td><td data-reactid="654"><!-- react-text: 655 -->string<!-- /react-text --></td><td data-reactid="656"><!-- react-text: 657 -->-<!-- /react-text --></td></tr></tbody></table><blockquote data-reactid="658"><p data-reactid="659"><!-- react-text: 660 -->API of <!-- /react-text --><code data-reactid="661"><!-- react-text: 662 -->Layout.Header<!-- /react-text --></code><!-- react-text: 663 --> <!-- /react-text --><code data-reactid="664"><!-- react-text: 665 -->Layout.Footer<!-- /react-text --></code><!-- react-text: 666 --> <!-- /react-text --><code data-reactid="667"><!-- react-text: 668 -->Layout.Content<!-- /react-text --></code><!-- react-text: 669 --> is the same with <!-- /react-text --><code data-reactid="670"><!-- react-text: 671 -->Layout<!-- /react-text --></code><!-- react-text: 672 -->.<!-- /react-text --></p></blockquote><h3 id="Layout.Sider" data-reactid="673"><span data-reactid="674"><!-- react-text: 675 -->Layout.Sider<!-- /react-text --></span><a href="#Layout.Sider" class="anchor" data-reactid="676">#</a></h3><p data-reactid="677"><!-- react-text: 678 -->The sidebar.<!-- /react-text --></p><table data-reactid="679"><thead data-reactid="680"><tr data-reactid="681"><th data-reactid="682"><!-- react-text: 683 -->Property<!-- /react-text --></th><th data-reactid="684"><!-- react-text: 685 -->Description<!-- /react-text --></th><th data-reactid="686"><!-- react-text: 687 -->Type<!-- /react-text --></th><th data-reactid="688"><!-- react-text: 689 -->Default<!-- /react-text --></th></tr></thead><tbody data-reactid="690"><tr data-reactid="691"><td data-reactid="692"><!-- react-text: 693 -->collapsible<!-- /react-text --></td><td data-reactid="694"><!-- react-text: 695 -->whether can be collapsed<!-- /react-text --></td><td data-reactid="696"><!-- react-text: 697 -->boolean<!-- /react-text --></td><td data-reactid="698"><!-- react-text: 699 -->false<!-- /react-text --></td></tr><tr data-reactid="700"><td data-reactid="701"><!-- react-text: 702 -->defaultCollapsed<!-- /react-text --></td><td data-reactid="703"><!-- react-text: 704 -->to set the initial status<!-- /react-text --></td><td data-reactid="705"><!-- react-text: 706 -->boolean<!-- /react-text --></td><td data-reactid="707"><!-- react-text: 708 -->false<!-- /react-text --></td></tr><tr data-reactid="709"><td data-reactid="710"><!-- react-text: 711 -->collapsed<!-- /react-text --></td><td data-reactid="712"><!-- react-text: 713 -->to set the current status<!-- /react-text --></td><td data-reactid="714"><!-- react-text: 715 -->boolean<!-- /react-text --></td><td data-reactid="716"><!-- react-text: 717 -->-<!-- /react-text --></td></tr><tr data-reactid="718"><td data-reactid="719"><!-- react-text: 720 -->onCollapse<!-- /react-text --></td><td data-reactid="721"><!-- react-text: 722 -->the callback function, can be executed when you switch the sidebar, available only <!-- /react-text --><code data-reactid="723"><!-- react-text: 724 -->collapsible: true<!-- /react-text --></code></td><td data-reactid="725"><!-- react-text: 726 -->(collapsed) => {}<!-- /react-text --></td><td data-reactid="727"><!-- react-text: 728 -->-<!-- /react-text --></td></tr><tr data-reactid="729"><td data-reactid="730"><!-- react-text: 731 -->trigger<!-- /react-text --></td><td data-reactid="732"><!-- react-text: 733 -->specify the customized trigger, set to null to hide the trigger<!-- /react-text --></td><td data-reactid="734"><!-- react-text: 735 -->string<!-- /react-text --><!-- react-text: 736 -->|<!-- /react-text --><!-- react-text: 737 -->ReactNode<!-- /react-text --></td><td data-reactid="738"><!-- react-text: 739 -->-<!-- /react-text --></td></tr><tr data-reactid="740"><td data-reactid="741"><!-- react-text: 742 -->width<!-- /react-text --></td><td data-reactid="743"><!-- react-text: 744 -->width of the sidebar<!-- /react-text --></td><td data-reactid="745"><!-- react-text: 746 -->number<!-- /react-text --><!-- react-text: 747 -->|<!-- /react-text --><!-- react-text: 748 -->string<!-- /react-text --></td><td data-reactid="749"><!-- react-text: 750 -->200<!-- /react-text --></td></tr><tr data-reactid="751"><td data-reactid="752"><!-- react-text: 753 -->collapsedWidth<!-- /react-text --></td><td data-reactid="754"><!-- react-text: 755 -->width of the collapsed sidebar, available only <!-- /react-text --><code data-reactid="756"><!-- react-text: 757 -->collapsible: true<!-- /react-text --></code></td><td data-reactid="758"><!-- react-text: 759 -->number<!-- /react-text --></td><td data-reactid="760"><!-- react-text: 761 -->64<!-- /react-text --></td></tr><tr data-reactid="762"><td data-reactid="763"><!-- react-text: 764 -->style<!-- /react-text --></td><td data-reactid="765"><!-- react-text: 766 -->to custom the styles<!-- /react-text --></td><td data-reactid="767"><!-- react-text: 768 -->object<!-- /react-text --></td><td data-reactid="769"><!-- react-text: 770 -->-<!-- /react-text --></td></tr><tr data-reactid="771"><td data-reactid="772"><!-- react-text: 773 -->className<!-- /react-text --></td><td data-reactid="774"><!-- react-text: 775 -->container className<!-- /react-text --></td><td data-reactid="776"><!-- react-text: 777 -->string<!-- /react-text --></td><td data-reactid="778"><!-- react-text: 779 -->-<!-- /react-text --></td></tr></tbody></table></section></article></div></div><div class="ant-row" data-reactid="780"><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="781"><section class="prev-next-nav" data-reactid="782"><a class="prev-page" href="/components/grid/" data-reactid="783"><span data-reactid="784">Grid</span><span class="chinese" data-reactid="785"></span></a><a class="next-page" href="/components/affix/" data-reactid="786"><span data-reactid="787">Affix</span><span class="chinese" data-reactid="788"></span></a></section></div></div></div><footer id="footer" data-reactid="789"><ul data-reactid="790"><li data-reactid="791"><h2 data-reactid="792">GitHub</h2><div data-reactid="793"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="794"><span data-reactid="795">Repository</span></a></div><div data-reactid="796"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="797">dva</a><!-- react-text: 798 --> - <!-- /react-text --><span data-reactid="799">Framework</span></div><div data-reactid="800"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="801">dva-cli</a><!-- react-text: 802 --> -<!-- /react-text --><span data-reactid="803">Scaffold</span></div><div data-reactid="804"><a target="_blank" rel="noopener noreferrer" href="http://ant-tool.github.io" data-reactid="805">ant-tool</a><!-- react-text: 806 --> - <!-- /react-text --><span data-reactid="807">Developer Tools</span></div></li><li data-reactid="808"><h2 data-reactid="809"><span data-reactid="810">Links</span></h2><div data-reactid="811"><a href="http://mobile.ant.design" data-reactid="812">Ant Design Mobile</a><span data-reactid="813"> - </span><span data-reactid="814">Mobile</span></div><div data-reactid="815"><a href="https://g2.alipay.com/" data-reactid="816">G2</a><span data-reactid="817"> - </span><span data-reactid="818">Data Visualization</span></div><div data-reactid="819"><a href="https://antv.alipay.com/" data-reactid="820">AntV</a><span data-reactid="821"> - </span><span data-reactid="822">Data Visualization Specification</span></div><div data-reactid="823"><a href="http://motion.ant.design" data-reactid="824">Ant Motion</a><span data-reactid="825"> - </span><span data-reactid="826">Motion</span></div><div data-reactid="827"><a href="http://library.ant.design/" data-reactid="828">AntD Library</a><span data-reactid="829"> - </span><span data-reactid="830">Axure library of Ant Design</span></div><div data-reactid="831"><a href="http://ux.ant.design" data-reactid="832">Ant UX</a><span data-reactid="833"> - </span><span data-reactid="834">Sitemap Template</span></div></li><li data-reactid="835"><h2 data-reactid="836"><span data-reactid="837">Community</span></h2><div data-reactid="838"><a rel="noopener noreferrer" href="/changelog" data-reactid="839"><span data-reactid="840">Change Log</span></a></div><div data-reactid="841"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues" data-reactid="842"><span data-reactid="843">Feedback</span></a></div><div data-reactid="844"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="845"><span data-reactid="846">Chat Room</span></a></div><div data-reactid="847"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="848"><span data-reactid="849">Bug Report</span></a></div></li><li data-reactid="850"><div data-reactid="851"><!-- react-text: 852 -->©2016 <!-- /react-text --><span data-reactid="853">Created by Ant UED</span></div><div data-reactid="854"><!-- react-text: 855 -->Powered by <!-- /react-text --><a href="https://github.com/benjycui/bisheng" data-reactid="856">BiSheng</a></div><div style="margin-top:10px;" data-reactid="857"><span data-reactid="858">Version: </span><div class="ant-select-sm ant-select ant-select-enabled" data-reactid="859"><div class="ant-select-selection
|
|
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="860"><div class="ant-select-selection__rendered" data-reactid="861"><div class="ant-select-selection-selected-value" title="2.6.4" style="display:block;opacity:1;" data-reactid="862">2.6.4</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="863"><b data-reactid="864"></b></span></div></div></div></li></ul></footer></div>
|
|
</div>
|
|
<script>
|
|
function isZhCN(pathname) {
|
|
return /-cn\/?$/.test(pathname);
|
|
}
|
|
function getLocalizedPathname(path, zhCN) {
|
|
var pathname = path.startsWith('/') ? path : '/' + path;
|
|
if (!zhCN) { // to enUS
|
|
return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
|
|
} else if (pathname === '/') {
|
|
return '/index-cn';
|
|
} else if (pathname.endsWith('/')) {
|
|
return pathname.replace(/\/$/, '-cn/');
|
|
}
|
|
return pathname + '-cn';
|
|
}
|
|
var queryString = location.search;
|
|
if (queryString) {
|
|
var pathname = location.pathname;
|
|
var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
|
|
if (isZhCNConfig !== isZhCN(pathname)) {
|
|
location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
|
|
}
|
|
}
|
|
</script>
|
|
<script src="/common.js"></script>
|
|
<script src="/index.js"></script>
|
|
</body>
|
|
</html>
|