mirror of
https://github.com/wahyd4/ant-design.git
synced 2026-08-23 03:36:30 +10:00
Updates
This commit is contained in:
afc163
+12
-12
@@ -594,18 +594,6 @@ Affix 固钉 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="偏移" href="#demo-offset">
|
||||
<span>偏移</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-basic">
|
||||
<div class="code-box-demo">
|
||||
@@ -674,6 +662,18 @@ ReactDOM.render(
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="偏移" href="#demo-offset">
|
||||
<span>偏移</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
+32
-32
@@ -632,38 +632,6 @@ Alert 警告提示 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="四种样式" href="#demo-style">
|
||||
<span>四种样式</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="可关闭的警告提示" href="#demo-closable">
|
||||
<span>可关闭的警告提示</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="含有辅助性文字介绍" href="#demo-description">
|
||||
<span>含有辅助性文字介绍</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="图标" href="#demo-icon">
|
||||
<span>图标</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="自定义关闭" href="#demo-close-text">
|
||||
<span>自定义关闭</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-basic">
|
||||
<div class="code-box-demo">
|
||||
@@ -910,6 +878,38 @@ ReactDOM.render(
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="四种样式" href="#demo-style">
|
||||
<span>四种样式</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="可关闭的警告提示" href="#demo-closable">
|
||||
<span>可关闭的警告提示</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="含有辅助性文字介绍" href="#demo-description">
|
||||
<span>含有辅助性文字介绍</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="图标" href="#demo-icon">
|
||||
<span>图标</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="自定义关闭" href="#demo-close-text">
|
||||
<span>自定义关闭</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
+37
-37
@@ -611,43 +611,6 @@ Badge 徽标数 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="独立使用" href="#demo-no-wrapper">
|
||||
<span>独立使用</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="大数字" href="#demo-99plus">
|
||||
<span>大数字</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="可点击" href="#demo-link">
|
||||
<span>可点击</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="讨嫌的小红点" href="#demo-dot">
|
||||
<span>讨嫌的小红点</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="动态" href="#demo-change">
|
||||
<span>动态</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="封顶数字" href="#demo-overflow">
|
||||
<span>封顶数字</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-basic">
|
||||
<div class="code-box-demo">
|
||||
@@ -1048,6 +1011,43 @@ ReactDOM.render(
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="独立使用" href="#demo-no-wrapper">
|
||||
<span>独立使用</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="大数字" href="#demo-99plus">
|
||||
<span>大数字</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="可点击" href="#demo-link">
|
||||
<span>可点击</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="讨嫌的小红点" href="#demo-dot">
|
||||
<span>讨嫌的小红点</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="动态" href="#demo-change">
|
||||
<span>动态</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="封顶数字" href="#demo-overflow">
|
||||
<span>封顶数字</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -645,28 +645,6 @@ Breadcrumb 面包屑 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="带有图标的" href="#demo-withicon">
|
||||
<span>带有图标的</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="路由" href="#demo-router">
|
||||
<span>路由</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="分隔符" href="#demo-separator">
|
||||
<span>分隔符</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-basic">
|
||||
<div class="code-box-demo">
|
||||
@@ -977,6 +955,28 @@ ReactDOM.render(
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="带有图标的" href="#demo-withicon">
|
||||
<span>带有图标的</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="路由" href="#demo-router">
|
||||
<span>路由</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="分隔符" href="#demo-separator">
|
||||
<span>分隔符</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -637,43 +637,6 @@ Button 按钮 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="按钮类型" href="#demo-basic">
|
||||
<span>按钮类型</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="按钮形状" href="#demo-shape">
|
||||
<span>按钮形状</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="按钮尺寸" href="#demo-size">
|
||||
<span>按钮尺寸</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="不可用" href="#demo-disabled">
|
||||
<span>不可用</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="加载中" href="#demo-loading">
|
||||
<span>加载中</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="按钮组合" href="#demo-button-group">
|
||||
<span>按钮组合</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="图标按钮" href="#demo-icon">
|
||||
<span>图标按钮</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-basic">
|
||||
<div class="code-box-demo">
|
||||
@@ -1486,6 +1449,43 @@ ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-t
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="按钮类型" href="#demo-basic">
|
||||
<span>按钮类型</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="按钮形状" href="#demo-shape">
|
||||
<span>按钮形状</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="按钮尺寸" href="#demo-size">
|
||||
<span>按钮尺寸</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="不可用" href="#demo-disabled">
|
||||
<span>不可用</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="加载中" href="#demo-loading">
|
||||
<span>加载中</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="按钮组合" href="#demo-button-group">
|
||||
<span>按钮组合</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="图标按钮" href="#demo-icon">
|
||||
<span>图标按钮</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
+113
-115
@@ -639,35 +639,8 @@ Calendar 日历 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="自定义渲染" href="#demo-custom-render">
|
||||
<span>自定义渲染</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="通知事项日历演示" href="#demo-notice-calendar">
|
||||
<span>通知事项日历演示</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="国际化" href="#demo-locale">
|
||||
<span>国际化</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="卡片模式" href="#demo-card">
|
||||
<span>卡片模式</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-basic">
|
||||
<div class="code-boxes-col-1-1"><div class="code-box" id="demo-basic">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-calendar-demo-basic"></div>
|
||||
<script>mountNode = document.getElementById('components-calendar-demo-basic');</script>
|
||||
@@ -696,6 +669,55 @@ ReactDOM.render(
|
||||
<p>一个通用的日历面板，支持年/月切换。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div><div class="code-box" id="demo-custom-render">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-calendar-demo-custom-render"></div>
|
||||
<script>mountNode = document.getElementById('components-calendar-demo-custom-render');</script>
|
||||
<script>(function(){'use strict';
|
||||
|
||||
var _antd = require('antd');
|
||||
|
||||
function dateCellRender(value) {
|
||||
return React.createElement(
|
||||
'div',
|
||||
null,
|
||||
'自定义日数据 ',
|
||||
value.getDayOfMonth()
|
||||
);
|
||||
}
|
||||
|
||||
function monthCellRender(value) {
|
||||
return React.createElement(
|
||||
'div',
|
||||
null,
|
||||
'自定义月数据 ',
|
||||
value.getMonth()
|
||||
);
|
||||
}
|
||||
|
||||
ReactDOM.render(React.createElement(_antd.Calendar, { defaultValue: new Date('2010-10-10'),
|
||||
dateCellRender: dateCellRender, monthCellRender: monthCellRender }), mountNode);})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Calendar } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
|
||||
|
||||
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">dateCellRender</span>(<span class="hljs-params">value</span>) </span>{
|
||||
<span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span>></span>自定义日数据 {value.getDayOfMonth()}<span class="hljs-tag"></<span class="hljs-title">div</span>></span>;</span>
|
||||
}
|
||||
|
||||
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">monthCellRender</span>(<span class="hljs-params">value</span>) </span>{
|
||||
<span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span>></span>自定义月数据 {value.getMonth()}<span class="hljs-tag"></<span class="hljs-title">div</span>></span>;</span>
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">Calendar</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{new</span> <span class="hljs-attribute">Date</span>('<span class="hljs-attribute">2010-10-10</span>')}
|
||||
<span class="hljs-attribute">dateCellRender</span>=<span class="hljs-value">{dateCellRender}</span> <span class="hljs-attribute">monthCellRender</span>=<span class="hljs-value">{monthCellRender}</span> /></span>
|
||||
, mountNode);</span></code></pre></div>
|
||||
</div>
|
||||
<div class="code-box-meta markdown">
|
||||
<div class="code-box-title">
|
||||
<a href="#demo-custom-render">自定义渲染</a>
|
||||
</div>
|
||||
<p>用 <code>dateCellRender</code> 和 <code>monthCellRender</code> 函数来自定义需要渲染的数据。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div><div class="code-box" id="demo-notice-calendar">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-calendar-demo-notice-calendar"></div>
|
||||
@@ -910,92 +932,6 @@ ReactDOM.render(
|
||||
<p>一个复杂的应用实例。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div><div class="code-box" id="demo-card">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-calendar-demo-card"></div>
|
||||
<script>mountNode = document.getElementById('components-calendar-demo-card');</script>
|
||||
<script>(function(){'use strict';
|
||||
|
||||
var _antd = require('antd');
|
||||
|
||||
function onPanelChange(value, mode) {
|
||||
console.log(value, mode);
|
||||
}
|
||||
|
||||
ReactDOM.render(React.createElement(
|
||||
'div',
|
||||
{ style: { width: 290, border: '1px solid #d9d9d9', borderRadius: 4 } },
|
||||
React.createElement(_antd.Calendar, { fullscreen: false, onPanelChange: onPanelChange })
|
||||
), mountNode);})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Calendar } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
|
||||
|
||||
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">onPanelChange</span>(<span class="hljs-params">value, mode</span>) </span>{
|
||||
<span class="hljs-built_in">console</span>.log(value, mode);
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{{</span> <span class="hljs-attribute">width:</span> <span class="hljs-attribute">290</span>, <span class="hljs-attribute">border:</span> '<span class="hljs-attribute">1px</span> <span class="hljs-attribute">solid</span> #<span class="hljs-attribute">d9d9d9</span>', <span class="hljs-attribute">borderRadius:</span> <span class="hljs-attribute">4</span> }}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Calendar</span> <span class="hljs-attribute">fullscreen</span>=<span class="hljs-value">{false}</span> <span class="hljs-attribute">onPanelChange</span>=<span class="hljs-value">{onPanelChange}</span> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
, mountNode);</span></code></pre></div>
|
||||
</div>
|
||||
<div class="code-box-meta markdown">
|
||||
<div class="code-box-title">
|
||||
<a href="#demo-card">卡片模式</a>
|
||||
</div>
|
||||
<p>用于嵌套在空间有限的容器中。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-custom-render">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-calendar-demo-custom-render"></div>
|
||||
<script>mountNode = document.getElementById('components-calendar-demo-custom-render');</script>
|
||||
<script>(function(){'use strict';
|
||||
|
||||
var _antd = require('antd');
|
||||
|
||||
function dateCellRender(value) {
|
||||
return React.createElement(
|
||||
'div',
|
||||
null,
|
||||
'自定义日数据 ',
|
||||
value.getDayOfMonth()
|
||||
);
|
||||
}
|
||||
|
||||
function monthCellRender(value) {
|
||||
return React.createElement(
|
||||
'div',
|
||||
null,
|
||||
'自定义月数据 ',
|
||||
value.getMonth()
|
||||
);
|
||||
}
|
||||
|
||||
ReactDOM.render(React.createElement(_antd.Calendar, { defaultValue: new Date('2010-10-10'),
|
||||
dateCellRender: dateCellRender, monthCellRender: monthCellRender }), mountNode);})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Calendar } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
|
||||
|
||||
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">dateCellRender</span>(<span class="hljs-params">value</span>) </span>{
|
||||
<span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span>></span>自定义日数据 {value.getDayOfMonth()}<span class="hljs-tag"></<span class="hljs-title">div</span>></span>;</span>
|
||||
}
|
||||
|
||||
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">monthCellRender</span>(<span class="hljs-params">value</span>) </span>{
|
||||
<span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span>></span>自定义月数据 {value.getMonth()}<span class="hljs-tag"></<span class="hljs-title">div</span>></span>;</span>
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">Calendar</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{new</span> <span class="hljs-attribute">Date</span>('<span class="hljs-attribute">2010-10-10</span>')}
|
||||
<span class="hljs-attribute">dateCellRender</span>=<span class="hljs-value">{dateCellRender}</span> <span class="hljs-attribute">monthCellRender</span>=<span class="hljs-value">{monthCellRender}</span> /></span>
|
||||
, mountNode);</span></code></pre></div>
|
||||
</div>
|
||||
<div class="code-box-meta markdown">
|
||||
<div class="code-box-title">
|
||||
<a href="#demo-custom-render">自定义渲染</a>
|
||||
</div>
|
||||
<p>用 <code>dateCellRender</code> 和 <code>monthCellRender</code> 函数来自定义需要渲染的数据。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div><div class="code-box" id="demo-locale">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-calendar-demo-locale"></div>
|
||||
@@ -1032,9 +968,71 @@ ReactDOM.render(
|
||||
<p>通过 <code>locale</code> 配置时区、语言等, 默认支持 en_US, zh_CN</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="code-box" id="demo-card">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-calendar-demo-card"></div>
|
||||
<script>mountNode = document.getElementById('components-calendar-demo-card');</script>
|
||||
<script>(function(){'use strict';
|
||||
|
||||
var _antd = require('antd');
|
||||
|
||||
function onPanelChange(value, mode) {
|
||||
console.log(value, mode);
|
||||
}
|
||||
|
||||
ReactDOM.render(React.createElement(
|
||||
'div',
|
||||
{ style: { width: 290, border: '1px solid #d9d9d9', borderRadius: 4 } },
|
||||
React.createElement(_antd.Calendar, { fullscreen: false, onPanelChange: onPanelChange })
|
||||
), mountNode);})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Calendar } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
|
||||
|
||||
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">onPanelChange</span>(<span class="hljs-params">value, mode</span>) </span>{
|
||||
<span class="hljs-built_in">console</span>.log(value, mode);
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{{</span> <span class="hljs-attribute">width:</span> <span class="hljs-attribute">290</span>, <span class="hljs-attribute">border:</span> '<span class="hljs-attribute">1px</span> <span class="hljs-attribute">solid</span> #<span class="hljs-attribute">d9d9d9</span>', <span class="hljs-attribute">borderRadius:</span> <span class="hljs-attribute">4</span> }}></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Calendar</span> <span class="hljs-attribute">fullscreen</span>=<span class="hljs-value">{false}</span> <span class="hljs-attribute">onPanelChange</span>=<span class="hljs-value">{onPanelChange}</span> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
, mountNode);</span></code></pre></div>
|
||||
</div>
|
||||
<div class="code-box-meta markdown">
|
||||
<div class="code-box-title">
|
||||
<a href="#demo-card">卡片模式</a>
|
||||
</div>
|
||||
<p>用于嵌套在空间有限的容器中。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="自定义渲染" href="#demo-custom-render">
|
||||
<span>自定义渲染</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="通知事项日历演示" href="#demo-notice-calendar">
|
||||
<span>通知事项日历演示</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="国际化" href="#demo-locale">
|
||||
<span>国际化</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="卡片模式" href="#demo-card">
|
||||
<span>卡片模式</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -647,28 +647,6 @@ Carousel 走马灯 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="垂直" href="#demo-vertical">
|
||||
<span>垂直</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="渐显" href="#demo-fade">
|
||||
<span>渐显</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="自动切换" href="#demo-autoplay">
|
||||
<span>自动切换</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-basic">
|
||||
<div class="code-box-demo">
|
||||
@@ -943,6 +921,28 @@ ReactDOM.render(
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="垂直" href="#demo-vertical">
|
||||
<span>垂直</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="渐显" href="#demo-fade">
|
||||
<span>渐显</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="自动切换" href="#demo-autoplay">
|
||||
<span>自动切换</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -653,28 +653,6 @@ Checkbox 多选框 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本用法" href="#demo-basic">
|
||||
<span>基本用法</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="不可用" href="#demo-disable">
|
||||
<span>不可用</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="和外部组件通信" href="#demo-controller">
|
||||
<span>和外部组件通信</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="Checkbox 组" href="#demo-group">
|
||||
<span>Checkbox 组</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-basic">
|
||||
<div class="code-box-demo">
|
||||
@@ -900,6 +878,28 @@ ReactDOM.render(
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本用法" href="#demo-basic">
|
||||
<span>基本用法</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="不可用" href="#demo-disable">
|
||||
<span>不可用</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="和外部组件通信" href="#demo-controller">
|
||||
<span>和外部组件通信</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="Checkbox 组" href="#demo-group">
|
||||
<span>Checkbox 组</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -632,23 +632,6 @@ Collapse 折叠面板 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="折叠面板" href="#demo-basic">
|
||||
<span>折叠面板</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="手风琴" href="#demo-accordion">
|
||||
<span>手风琴</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="面板嵌套" href="#demo-mix">
|
||||
<span>面板嵌套</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-basic">
|
||||
<div class="code-box-demo">
|
||||
@@ -899,6 +882,23 @@ ReactDOM.render(
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="折叠面板" href="#demo-basic">
|
||||
<span>折叠面板</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="手风琴" href="#demo-accordion">
|
||||
<span>手风琴</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="面板嵌套" href="#demo-mix">
|
||||
<span>面板嵌套</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -704,58 +704,6 @@ DatePicker 日期选择框 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#picker-demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="日期格式" href="#picker-demo-formatter">
|
||||
<span>日期格式</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="三种大小" href="#picker-demo-size">
|
||||
<span>三种大小</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="日期时间选择" href="#picker-demo-time">
|
||||
<span>日期时间选择</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="禁用" href="#picker-demo-disabled">
|
||||
<span>禁用</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="指定不可选择日期" href="#picker-demo-disabled-date">
|
||||
<span>指定不可选择日期</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="日期范围一" href="#picker-demo-start-end">
|
||||
<span>日期范围一</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="日期范围二" href="#picker-demo-range">
|
||||
<span>日期范围二</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="月选择器" href="#picker-demo-month-picker">
|
||||
<span>月选择器</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="国际化" href="#picker-demo-locale">
|
||||
<span>国际化</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="picker-demo-basic">
|
||||
<div class="code-box-demo">
|
||||
@@ -1147,6 +1095,58 @@ ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-t
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#picker-demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="日期格式" href="#picker-demo-formatter">
|
||||
<span>日期格式</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="三种大小" href="#picker-demo-size">
|
||||
<span>三种大小</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="日期时间选择" href="#picker-demo-time">
|
||||
<span>日期时间选择</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="禁用" href="#picker-demo-disabled">
|
||||
<span>禁用</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="指定不可选择日期" href="#picker-demo-disabled-date">
|
||||
<span>指定不可选择日期</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="日期范围一" href="#picker-demo-start-end">
|
||||
<span>日期范围一</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="日期范围二" href="#picker-demo-range">
|
||||
<span>日期范围二</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="月选择器" href="#picker-demo-month-picker">
|
||||
<span>月选择器</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="国际化" href="#picker-demo-locale">
|
||||
<span>国际化</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -640,38 +640,6 @@ Dropdown 下拉菜单 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="其他元素" href="#demo-item">
|
||||
<span>其他元素</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="触发方式" href="#demo-trigger">
|
||||
<span>触发方式</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="触发事件" href="#demo-event">
|
||||
<span>触发事件</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="带下拉框的按钮" href="#demo-dropdown-button">
|
||||
<span>带下拉框的按钮</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="多级菜单" href="#demo-sub-menu">
|
||||
<span>多级菜单</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-basic">
|
||||
<div class="code-box-demo">
|
||||
@@ -1126,6 +1094,38 @@ ReactDOM.render(
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="其他元素" href="#demo-item">
|
||||
<span>其他元素</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="触发方式" href="#demo-trigger">
|
||||
<span>触发方式</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="触发事件" href="#demo-event">
|
||||
<span>触发事件</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="带下拉框的按钮" href="#demo-dropdown-button">
|
||||
<span>带下拉框的按钮</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="多级菜单" href="#demo-sub-menu">
|
||||
<span>多级菜单</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
+882
-884
File diff suppressed because it is too large
Load Diff
@@ -636,23 +636,6 @@ InputNumber 数字输入框 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#number-demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="三种大小" href="#number-demo-size">
|
||||
<span>三种大小</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="不可用" href="#number-demo-disabled">
|
||||
<span>不可用</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="number-demo-basic">
|
||||
<div class="code-box-demo">
|
||||
@@ -801,6 +784,23 @@ ReactDOM.render(
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#number-demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="三种大小" href="#number-demo-size">
|
||||
<span>三种大小</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="不可用" href="#number-demo-disabled">
|
||||
<span>不可用</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
+288
-290
@@ -693,40 +693,8 @@ Layout 布局 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基础布局" href="#demo-basic">
|
||||
<span>基础布局</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="左右偏移" href="#demo-offset">
|
||||
<span>左右偏移</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="布局排序" href="#demo-sort">
|
||||
<span>布局排序</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="Flex布局" href="#demo-flex">
|
||||
<span>Flex布局</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="Flex对齐" href="#demo-flex-align">
|
||||
<span>Flex对齐</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="Flex排序" href="#demo-flex-order">
|
||||
<span>Flex排序</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-basic">
|
||||
<div class="code-boxes-col-1-1"><div class="code-box" id="demo-basic">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-layout-demo-basic"></div>
|
||||
<script>mountNode = document.getElementById('components-layout-demo-basic');</script>
|
||||
@@ -833,262 +801,7 @@ div.testColClassName {
|
||||
<p>使用单一的一组 <code>.col-*</code> 栅格类，就可以创建一个基本的栅格系统，所有列（column）必须放在 <code>.row</code> 内。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div><div class="code-box" id="demo-sort">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-layout-demo-sort"></div>
|
||||
<script>mountNode = document.getElementById('components-layout-demo-sort');</script>
|
||||
<script>(function(){"use strict";
|
||||
|
||||
var _antd = require("antd");
|
||||
|
||||
ReactDOM.render(React.createElement(
|
||||
"div",
|
||||
null,
|
||||
React.createElement(
|
||||
_antd.Row,
|
||||
null,
|
||||
React.createElement(
|
||||
_antd.Col,
|
||||
{ span: "18", push: "6" },
|
||||
".col-18 .col-push-6"
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Col,
|
||||
{ span: "6", pull: "18" },
|
||||
".col-6 .col-pull-18"
|
||||
)
|
||||
)
|
||||
), mountNode);})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Row, Col } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
|
||||
|
||||
ReactDOM.render(
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Row</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Col</span> <span class="hljs-attribute">span</span>=<span class="hljs-value">"18"</span> <span class="hljs-attribute">push</span>=<span class="hljs-value">"6"</span>></span>.col-18 .col-push-6<span class="hljs-tag"></<span class="hljs-title">Col</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Col</span> <span class="hljs-attribute">span</span>=<span class="hljs-value">"6"</span> <span class="hljs-attribute">pull</span>=<span class="hljs-value">"18"</span>></span>.col-6 .col-pull-18<span class="hljs-tag"></<span class="hljs-title">Col</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">Row</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>,
|
||||
mountNode
|
||||
);</span></code></pre></div>
|
||||
</div>
|
||||
<div class="code-box-meta markdown">
|
||||
<div class="code-box-title">
|
||||
<a href="#demo-sort">布局排序</a>
|
||||
</div>
|
||||
<p>列排序。</p>
|
||||
<p>通过使用 <code>.col-push-*</code> 和 <code>.col-pull-*</code> 类就可以很容易的改变列（column）的顺序。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div><div class="code-box" id="demo-flex-align">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-layout-demo-flex-align"></div>
|
||||
<script>mountNode = document.getElementById('components-layout-demo-flex-align');</script>
|
||||
<script>(function(){"use strict";
|
||||
|
||||
var _antd = require("antd");
|
||||
|
||||
var DemoBox = React.createClass({
|
||||
displayName: "DemoBox",
|
||||
render: function render() {
|
||||
var value = this.props.value;
|
||||
|
||||
var className = "hight-" + value;
|
||||
return React.createElement(
|
||||
"p",
|
||||
{ className: className },
|
||||
this.props.children
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(React.createElement(
|
||||
"div",
|
||||
null,
|
||||
React.createElement(
|
||||
"p",
|
||||
null,
|
||||
"顶部对齐"
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Row,
|
||||
{ type: "flex", justify: "center", align: "top" },
|
||||
React.createElement(
|
||||
_antd.Col,
|
||||
{ span: "4" },
|
||||
React.createElement(
|
||||
DemoBox,
|
||||
{ value: "100" },
|
||||
".col-4"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Col,
|
||||
{ span: "4" },
|
||||
React.createElement(
|
||||
DemoBox,
|
||||
{ value: "50" },
|
||||
".col-4"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Col,
|
||||
{ span: "4" },
|
||||
React.createElement(
|
||||
DemoBox,
|
||||
{ value: "120" },
|
||||
".col-4"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Col,
|
||||
{ span: "4" },
|
||||
React.createElement(
|
||||
DemoBox,
|
||||
{ value: "80" },
|
||||
".col-4"
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"p",
|
||||
null,
|
||||
"居中对齐"
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Row,
|
||||
{ type: "flex", justify: "space-around", align: "middle" },
|
||||
React.createElement(
|
||||
_antd.Col,
|
||||
{ span: "4" },
|
||||
React.createElement(
|
||||
DemoBox,
|
||||
{ value: "100" },
|
||||
".col-4"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Col,
|
||||
{ span: "4" },
|
||||
React.createElement(
|
||||
DemoBox,
|
||||
{ value: "50" },
|
||||
".col-4"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Col,
|
||||
{ span: "4" },
|
||||
React.createElement(
|
||||
DemoBox,
|
||||
{ value: "120" },
|
||||
".col-4"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Col,
|
||||
{ span: "4" },
|
||||
React.createElement(
|
||||
DemoBox,
|
||||
{ value: "80" },
|
||||
".col-4"
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"p",
|
||||
null,
|
||||
"底部对齐"
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Row,
|
||||
{ type: "flex", justify: "space-between", align: "bottom" },
|
||||
React.createElement(
|
||||
_antd.Col,
|
||||
{ span: "4" },
|
||||
React.createElement(
|
||||
DemoBox,
|
||||
{ value: "100" },
|
||||
".col-4"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Col,
|
||||
{ span: "4" },
|
||||
React.createElement(
|
||||
DemoBox,
|
||||
{ value: "50" },
|
||||
".col-4"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Col,
|
||||
{ span: "4" },
|
||||
React.createElement(
|
||||
DemoBox,
|
||||
{ value: "120" },
|
||||
".col-4"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Col,
|
||||
{ span: "4" },
|
||||
React.createElement(
|
||||
DemoBox,
|
||||
{ value: "80" },
|
||||
".col-4"
|
||||
)
|
||||
)
|
||||
)
|
||||
), mountNode);})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Row, Col } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
|
||||
|
||||
<span class="hljs-keyword">const</span> DemoBox = React.createClass({
|
||||
render() {
|
||||
<span class="hljs-keyword">const</span> { value } = <span class="hljs-keyword">this</span>.props;
|
||||
<span class="hljs-keyword">const</span> className = <span class="hljs-string">`hight-<span class="hljs-subst">${value}</span>`</span>;
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">{className}</span>></span>{this.props.children}<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
)</span>;
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>顶部对齐<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Row</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"flex"</span> <span class="hljs-attribute">justify</span>=<span class="hljs-value">"center"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"top"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Col</span> <span class="hljs-attribute">span</span>=<span class="hljs-value">"4"</span>></span><span class="hljs-tag"><<span class="hljs-title">DemoBox</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"100"</span>></span>.col-4<span class="hljs-tag"></<span class="hljs-title">DemoBox</span>></span><span class="hljs-tag"></<span class="hljs-title">Col</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Col</span> <span class="hljs-attribute">span</span>=<span class="hljs-value">"4"</span>></span><span class="hljs-tag"><<span class="hljs-title">DemoBox</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"50"</span>></span>.col-4<span class="hljs-tag"></<span class="hljs-title">DemoBox</span>></span><span class="hljs-tag"></<span class="hljs-title">Col</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Col</span> <span class="hljs-attribute">span</span>=<span class="hljs-value">"4"</span>></span><span class="hljs-tag"><<span class="hljs-title">DemoBox</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"120"</span>></span>.col-4<span class="hljs-tag"></<span class="hljs-title">DemoBox</span>></span><span class="hljs-tag"></<span class="hljs-title">Col</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Col</span> <span class="hljs-attribute">span</span>=<span class="hljs-value">"4"</span>></span><span class="hljs-tag"><<span class="hljs-title">DemoBox</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"80"</span>></span>.col-4<span class="hljs-tag"></<span class="hljs-title">DemoBox</span>></span><span class="hljs-tag"></<span class="hljs-title">Col</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">Row</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>居中对齐<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Row</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"flex"</span> <span class="hljs-attribute">justify</span>=<span class="hljs-value">"space-around"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"middle"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Col</span> <span class="hljs-attribute">span</span>=<span class="hljs-value">"4"</span>></span><span class="hljs-tag"><<span class="hljs-title">DemoBox</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"100"</span>></span>.col-4<span class="hljs-tag"></<span class="hljs-title">DemoBox</span>></span><span class="hljs-tag"></<span class="hljs-title">Col</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Col</span> <span class="hljs-attribute">span</span>=<span class="hljs-value">"4"</span>></span><span class="hljs-tag"><<span class="hljs-title">DemoBox</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"50"</span>></span>.col-4<span class="hljs-tag"></<span class="hljs-title">DemoBox</span>></span><span class="hljs-tag"></<span class="hljs-title">Col</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Col</span> <span class="hljs-attribute">span</span>=<span class="hljs-value">"4"</span>></span><span class="hljs-tag"><<span class="hljs-title">DemoBox</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"120"</span>></span>.col-4<span class="hljs-tag"></<span class="hljs-title">DemoBox</span>></span><span class="hljs-tag"></<span class="hljs-title">Col</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Col</span> <span class="hljs-attribute">span</span>=<span class="hljs-value">"4"</span>></span><span class="hljs-tag"><<span class="hljs-title">DemoBox</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"80"</span>></span>.col-4<span class="hljs-tag"></<span class="hljs-title">DemoBox</span>></span><span class="hljs-tag"></<span class="hljs-title">Col</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">Row</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>底部对齐<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Row</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"flex"</span> <span class="hljs-attribute">justify</span>=<span class="hljs-value">"space-between"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"bottom"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Col</span> <span class="hljs-attribute">span</span>=<span class="hljs-value">"4"</span>></span><span class="hljs-tag"><<span class="hljs-title">DemoBox</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"100"</span>></span>.col-4<span class="hljs-tag"></<span class="hljs-title">DemoBox</span>></span><span class="hljs-tag"></<span class="hljs-title">Col</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Col</span> <span class="hljs-attribute">span</span>=<span class="hljs-value">"4"</span>></span><span class="hljs-tag"><<span class="hljs-title">DemoBox</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"50"</span>></span>.col-4<span class="hljs-tag"></<span class="hljs-title">DemoBox</span>></span><span class="hljs-tag"></<span class="hljs-title">Col</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Col</span> <span class="hljs-attribute">span</span>=<span class="hljs-value">"4"</span>></span><span class="hljs-tag"><<span class="hljs-title">DemoBox</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"120"</span>></span>.col-4<span class="hljs-tag"></<span class="hljs-title">DemoBox</span>></span><span class="hljs-tag"></<span class="hljs-title">Col</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Col</span> <span class="hljs-attribute">span</span>=<span class="hljs-value">"4"</span>></span><span class="hljs-tag"><<span class="hljs-title">DemoBox</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"80"</span>></span>.col-4<span class="hljs-tag"></<span class="hljs-title">DemoBox</span>></span><span class="hljs-tag"></<span class="hljs-title">Col</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">Row</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>,
|
||||
mountNode
|
||||
);</span></code></pre></div>
|
||||
</div>
|
||||
<div class="code-box-meta markdown">
|
||||
<div class="code-box-title">
|
||||
<a href="#demo-flex-align">Flex对齐</a>
|
||||
</div>
|
||||
<p>Flex 子元素垂直对齐。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-offset">
|
||||
</div><div class="code-box" id="demo-offset">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-layout-demo-offset"></div>
|
||||
<script>mountNode = document.getElementById('components-layout-demo-offset');</script>
|
||||
@@ -1163,6 +876,51 @@ ReactDOM.render(
|
||||
<p>使用 <code>.col-offset-*</code> 类可以将列向右侧偏。例如，<code>.col-offset-4</code> 类将 <code>.col-4</code> 元素向右侧偏移了4个列（column）的宽度。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div><div class="code-box" id="demo-sort">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-layout-demo-sort"></div>
|
||||
<script>mountNode = document.getElementById('components-layout-demo-sort');</script>
|
||||
<script>(function(){"use strict";
|
||||
|
||||
var _antd = require("antd");
|
||||
|
||||
ReactDOM.render(React.createElement(
|
||||
"div",
|
||||
null,
|
||||
React.createElement(
|
||||
_antd.Row,
|
||||
null,
|
||||
React.createElement(
|
||||
_antd.Col,
|
||||
{ span: "18", push: "6" },
|
||||
".col-18 .col-push-6"
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Col,
|
||||
{ span: "6", pull: "18" },
|
||||
".col-6 .col-pull-18"
|
||||
)
|
||||
)
|
||||
), mountNode);})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Row, Col } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
|
||||
|
||||
ReactDOM.render(
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Row</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Col</span> <span class="hljs-attribute">span</span>=<span class="hljs-value">"18"</span> <span class="hljs-attribute">push</span>=<span class="hljs-value">"6"</span>></span>.col-18 .col-push-6<span class="hljs-tag"></<span class="hljs-title">Col</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Col</span> <span class="hljs-attribute">span</span>=<span class="hljs-value">"6"</span> <span class="hljs-attribute">pull</span>=<span class="hljs-value">"18"</span>></span>.col-6 .col-pull-18<span class="hljs-tag"></<span class="hljs-title">Col</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">Row</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>,
|
||||
mountNode
|
||||
);</span></code></pre></div>
|
||||
</div>
|
||||
<div class="code-box-meta markdown">
|
||||
<div class="code-box-title">
|
||||
<a href="#demo-sort">布局排序</a>
|
||||
</div>
|
||||
<p>列排序。</p>
|
||||
<p>通过使用 <code>.col-push-*</code> 和 <code>.col-pull-*</code> 类就可以很容易的改变列（column）的顺序。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div><div class="code-box" id="demo-flex">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-layout-demo-flex"></div>
|
||||
@@ -1374,6 +1132,214 @@ ReactDOM.render(
|
||||
<p>使用 <code>row-flex</code> 定义 <code>flex</code> 布局，其子元素根据不同的值 <code>start</code>,<code>center</code>,<code>end</code>,<code>space-between</code>,<code>space-around</code>，分别定义其在父节点里面的排版方式。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div><div class="code-box" id="demo-flex-align">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-layout-demo-flex-align"></div>
|
||||
<script>mountNode = document.getElementById('components-layout-demo-flex-align');</script>
|
||||
<script>(function(){"use strict";
|
||||
|
||||
var _antd = require("antd");
|
||||
|
||||
var DemoBox = React.createClass({
|
||||
displayName: "DemoBox",
|
||||
render: function render() {
|
||||
var value = this.props.value;
|
||||
|
||||
var className = "hight-" + value;
|
||||
return React.createElement(
|
||||
"p",
|
||||
{ className: className },
|
||||
this.props.children
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(React.createElement(
|
||||
"div",
|
||||
null,
|
||||
React.createElement(
|
||||
"p",
|
||||
null,
|
||||
"顶部对齐"
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Row,
|
||||
{ type: "flex", justify: "center", align: "top" },
|
||||
React.createElement(
|
||||
_antd.Col,
|
||||
{ span: "4" },
|
||||
React.createElement(
|
||||
DemoBox,
|
||||
{ value: "100" },
|
||||
".col-4"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Col,
|
||||
{ span: "4" },
|
||||
React.createElement(
|
||||
DemoBox,
|
||||
{ value: "50" },
|
||||
".col-4"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Col,
|
||||
{ span: "4" },
|
||||
React.createElement(
|
||||
DemoBox,
|
||||
{ value: "120" },
|
||||
".col-4"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Col,
|
||||
{ span: "4" },
|
||||
React.createElement(
|
||||
DemoBox,
|
||||
{ value: "80" },
|
||||
".col-4"
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"p",
|
||||
null,
|
||||
"居中对齐"
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Row,
|
||||
{ type: "flex", justify: "space-around", align: "middle" },
|
||||
React.createElement(
|
||||
_antd.Col,
|
||||
{ span: "4" },
|
||||
React.createElement(
|
||||
DemoBox,
|
||||
{ value: "100" },
|
||||
".col-4"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Col,
|
||||
{ span: "4" },
|
||||
React.createElement(
|
||||
DemoBox,
|
||||
{ value: "50" },
|
||||
".col-4"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Col,
|
||||
{ span: "4" },
|
||||
React.createElement(
|
||||
DemoBox,
|
||||
{ value: "120" },
|
||||
".col-4"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Col,
|
||||
{ span: "4" },
|
||||
React.createElement(
|
||||
DemoBox,
|
||||
{ value: "80" },
|
||||
".col-4"
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"p",
|
||||
null,
|
||||
"底部对齐"
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Row,
|
||||
{ type: "flex", justify: "space-between", align: "bottom" },
|
||||
React.createElement(
|
||||
_antd.Col,
|
||||
{ span: "4" },
|
||||
React.createElement(
|
||||
DemoBox,
|
||||
{ value: "100" },
|
||||
".col-4"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Col,
|
||||
{ span: "4" },
|
||||
React.createElement(
|
||||
DemoBox,
|
||||
{ value: "50" },
|
||||
".col-4"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Col,
|
||||
{ span: "4" },
|
||||
React.createElement(
|
||||
DemoBox,
|
||||
{ value: "120" },
|
||||
".col-4"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Col,
|
||||
{ span: "4" },
|
||||
React.createElement(
|
||||
DemoBox,
|
||||
{ value: "80" },
|
||||
".col-4"
|
||||
)
|
||||
)
|
||||
)
|
||||
), mountNode);})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Row, Col } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
|
||||
|
||||
<span class="hljs-keyword">const</span> DemoBox = React.createClass({
|
||||
render() {
|
||||
<span class="hljs-keyword">const</span> { value } = <span class="hljs-keyword">this</span>.props;
|
||||
<span class="hljs-keyword">const</span> className = <span class="hljs-string">`hight-<span class="hljs-subst">${value}</span>`</span>;
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">p</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">{className}</span>></span>{this.props.children}<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
)</span>;
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>顶部对齐<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Row</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"flex"</span> <span class="hljs-attribute">justify</span>=<span class="hljs-value">"center"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"top"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Col</span> <span class="hljs-attribute">span</span>=<span class="hljs-value">"4"</span>></span><span class="hljs-tag"><<span class="hljs-title">DemoBox</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"100"</span>></span>.col-4<span class="hljs-tag"></<span class="hljs-title">DemoBox</span>></span><span class="hljs-tag"></<span class="hljs-title">Col</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Col</span> <span class="hljs-attribute">span</span>=<span class="hljs-value">"4"</span>></span><span class="hljs-tag"><<span class="hljs-title">DemoBox</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"50"</span>></span>.col-4<span class="hljs-tag"></<span class="hljs-title">DemoBox</span>></span><span class="hljs-tag"></<span class="hljs-title">Col</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Col</span> <span class="hljs-attribute">span</span>=<span class="hljs-value">"4"</span>></span><span class="hljs-tag"><<span class="hljs-title">DemoBox</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"120"</span>></span>.col-4<span class="hljs-tag"></<span class="hljs-title">DemoBox</span>></span><span class="hljs-tag"></<span class="hljs-title">Col</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Col</span> <span class="hljs-attribute">span</span>=<span class="hljs-value">"4"</span>></span><span class="hljs-tag"><<span class="hljs-title">DemoBox</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"80"</span>></span>.col-4<span class="hljs-tag"></<span class="hljs-title">DemoBox</span>></span><span class="hljs-tag"></<span class="hljs-title">Col</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">Row</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>居中对齐<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Row</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"flex"</span> <span class="hljs-attribute">justify</span>=<span class="hljs-value">"space-around"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"middle"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Col</span> <span class="hljs-attribute">span</span>=<span class="hljs-value">"4"</span>></span><span class="hljs-tag"><<span class="hljs-title">DemoBox</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"100"</span>></span>.col-4<span class="hljs-tag"></<span class="hljs-title">DemoBox</span>></span><span class="hljs-tag"></<span class="hljs-title">Col</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Col</span> <span class="hljs-attribute">span</span>=<span class="hljs-value">"4"</span>></span><span class="hljs-tag"><<span class="hljs-title">DemoBox</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"50"</span>></span>.col-4<span class="hljs-tag"></<span class="hljs-title">DemoBox</span>></span><span class="hljs-tag"></<span class="hljs-title">Col</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Col</span> <span class="hljs-attribute">span</span>=<span class="hljs-value">"4"</span>></span><span class="hljs-tag"><<span class="hljs-title">DemoBox</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"120"</span>></span>.col-4<span class="hljs-tag"></<span class="hljs-title">DemoBox</span>></span><span class="hljs-tag"></<span class="hljs-title">Col</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Col</span> <span class="hljs-attribute">span</span>=<span class="hljs-value">"4"</span>></span><span class="hljs-tag"><<span class="hljs-title">DemoBox</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"80"</span>></span>.col-4<span class="hljs-tag"></<span class="hljs-title">DemoBox</span>></span><span class="hljs-tag"></<span class="hljs-title">Col</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">Row</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>底部对齐<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Row</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"flex"</span> <span class="hljs-attribute">justify</span>=<span class="hljs-value">"space-between"</span> <span class="hljs-attribute">align</span>=<span class="hljs-value">"bottom"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Col</span> <span class="hljs-attribute">span</span>=<span class="hljs-value">"4"</span>></span><span class="hljs-tag"><<span class="hljs-title">DemoBox</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"100"</span>></span>.col-4<span class="hljs-tag"></<span class="hljs-title">DemoBox</span>></span><span class="hljs-tag"></<span class="hljs-title">Col</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Col</span> <span class="hljs-attribute">span</span>=<span class="hljs-value">"4"</span>></span><span class="hljs-tag"><<span class="hljs-title">DemoBox</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"50"</span>></span>.col-4<span class="hljs-tag"></<span class="hljs-title">DemoBox</span>></span><span class="hljs-tag"></<span class="hljs-title">Col</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Col</span> <span class="hljs-attribute">span</span>=<span class="hljs-value">"4"</span>></span><span class="hljs-tag"><<span class="hljs-title">DemoBox</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"120"</span>></span>.col-4<span class="hljs-tag"></<span class="hljs-title">DemoBox</span>></span><span class="hljs-tag"></<span class="hljs-title">Col</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Col</span> <span class="hljs-attribute">span</span>=<span class="hljs-value">"4"</span>></span><span class="hljs-tag"><<span class="hljs-title">DemoBox</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"80"</span>></span>.col-4<span class="hljs-tag"></<span class="hljs-title">DemoBox</span>></span><span class="hljs-tag"></<span class="hljs-title">Col</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">Row</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>,
|
||||
mountNode
|
||||
);</span></code></pre></div>
|
||||
</div>
|
||||
<div class="code-box-meta markdown">
|
||||
<div class="code-box-title">
|
||||
<a href="#demo-flex-align">Flex对齐</a>
|
||||
</div>
|
||||
<p>Flex 子元素垂直对齐。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div><div class="code-box" id="demo-flex-order">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-layout-demo-flex-order"></div>
|
||||
@@ -1431,8 +1397,40 @@ ReactDOM.render(
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基础布局" href="#demo-basic">
|
||||
<span>基础布局</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="左右偏移" href="#demo-offset">
|
||||
<span>左右偏移</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="布局排序" href="#demo-sort">
|
||||
<span>布局排序</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="Flex布局" href="#demo-flex">
|
||||
<span>Flex布局</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="Flex对齐" href="#demo-flex-align">
|
||||
<span>Flex对齐</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="Flex排序" href="#demo-flex-order">
|
||||
<span>Flex排序</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
+404
-406
@@ -725,35 +725,8 @@ Menu 导航菜单 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="顶部导航" href="#demo-horizontal">
|
||||
<span>顶部导航</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="内嵌菜单" href="#demo-sider">
|
||||
<span>内嵌菜单</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="只展开当前父级菜单" href="#demo-sider-current">
|
||||
<span>只展开当前父级菜单</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="垂直菜单" href="#demo-vertical">
|
||||
<span>垂直菜单</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="主题" href="#demo-theme">
|
||||
<span>主题</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-horizontal">
|
||||
<div class="code-boxes-col-1-1"><div class="code-box" id="demo-horizontal">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-menu-demo-horizontal"></div>
|
||||
<script>mountNode = document.getElementById('components-menu-demo-horizontal');</script>
|
||||
@@ -901,6 +874,210 @@ ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-t
|
||||
<p>水平的顶部导航菜单。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div><div class="code-box" id="demo-sider">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-menu-demo-sider"></div>
|
||||
<script>mountNode = document.getElementById('components-menu-demo-sider');</script>
|
||||
<script>(function(){'use strict';
|
||||
|
||||
var _antd = require('antd');
|
||||
|
||||
var SubMenu = _antd.Menu.SubMenu;
|
||||
var MenuItemGroup = _antd.Menu.ItemGroup;
|
||||
|
||||
var Sider = React.createClass({
|
||||
displayName: 'Sider',
|
||||
getInitialState: function getInitialState() {
|
||||
return {
|
||||
current: '1'
|
||||
};
|
||||
},
|
||||
handleClick: function handleClick(e) {
|
||||
console.log('click ', e);
|
||||
this.setState({
|
||||
current: e.key
|
||||
});
|
||||
},
|
||||
render: function render() {
|
||||
return React.createElement(
|
||||
_antd.Menu,
|
||||
{ onClick: this.handleClick,
|
||||
style: { width: 240 },
|
||||
defaultOpenKeys: ['sub1'],
|
||||
selectedKeys: [this.state.current],
|
||||
mode: 'inline' },
|
||||
React.createElement(
|
||||
SubMenu,
|
||||
{ key: 'sub1', title: React.createElement(
|
||||
'span',
|
||||
null,
|
||||
React.createElement(_antd.Icon, { type: 'mail' }),
|
||||
React.createElement(
|
||||
'span',
|
||||
null,
|
||||
'导航一'
|
||||
)
|
||||
) },
|
||||
React.createElement(
|
||||
MenuItemGroup,
|
||||
{ title: '分组1' },
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '1' },
|
||||
'选项1'
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '2' },
|
||||
'选项2'
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
MenuItemGroup,
|
||||
{ title: '分组2' },
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '3' },
|
||||
'选项3'
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '4' },
|
||||
'选项4'
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
SubMenu,
|
||||
{ key: 'sub2', title: React.createElement(
|
||||
'span',
|
||||
null,
|
||||
React.createElement(_antd.Icon, { type: 'appstore' }),
|
||||
React.createElement(
|
||||
'span',
|
||||
null,
|
||||
'导航二'
|
||||
)
|
||||
) },
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '5' },
|
||||
'选项5'
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '6' },
|
||||
'选项6'
|
||||
),
|
||||
React.createElement(
|
||||
SubMenu,
|
||||
{ key: 'sub3', title: '三级导航' },
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '7' },
|
||||
'选项7'
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '8' },
|
||||
'选项8'
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
SubMenu,
|
||||
{ key: 'sub4', title: React.createElement(
|
||||
'span',
|
||||
null,
|
||||
React.createElement(_antd.Icon, { type: 'setting' }),
|
||||
React.createElement(
|
||||
'span',
|
||||
null,
|
||||
'导航三'
|
||||
)
|
||||
) },
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '9' },
|
||||
'选项9'
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '10' },
|
||||
'选项10'
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '11' },
|
||||
'选项11'
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '12' },
|
||||
'选项12'
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
});
|
||||
ReactDOM.render(React.createElement(Sider, null), mountNode);})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Menu, Icon } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
|
||||
<span class="hljs-keyword">const</span> SubMenu = Menu.SubMenu;
|
||||
<span class="hljs-keyword">const</span> MenuItemGroup = Menu.ItemGroup;
|
||||
|
||||
<span class="hljs-keyword">const</span> Sider = React.createClass({
|
||||
getInitialState() {
|
||||
<span class="hljs-keyword">return</span> {
|
||||
current: <span class="hljs-string">'1'</span>
|
||||
};
|
||||
},
|
||||
handleClick(e) {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'click '</span>, e);
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
current: e.key
|
||||
});
|
||||
},
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag"><<span class="hljs-title">Menu</span> <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{this.handleClick}</span>
|
||||
<span class="hljs-attribute">style</span>=<span class="hljs-value">{{width:240}}</span>
|
||||
<span class="hljs-attribute">defaultOpenKeys</span>=<span class="hljs-value">{['sub1']}</span>
|
||||
<span class="hljs-attribute">selectedKeys</span>=<span class="hljs-value">{[this.state.current]}</span>
|
||||
<span class="hljs-attribute">mode</span>=<span class="hljs-value">"inline"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">SubMenu</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"sub1"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">{<span</span>></span><span class="hljs-tag"><<span class="hljs-title">Icon</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"mail"</span> /></span><span class="hljs-tag"><<span class="hljs-title">span</span>></span>导航一<span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span>}>
|
||||
<span class="hljs-tag"><<span class="hljs-title">MenuItemGroup</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">"分组1"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"1"</span>></span>选项1<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"2"</span>></span>选项2<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">MenuItemGroup</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">MenuItemGroup</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">"分组2"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"3"</span>></span>选项3<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"4"</span>></span>选项4<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">MenuItemGroup</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">SubMenu</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">SubMenu</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"sub2"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">{<span</span>></span><span class="hljs-tag"><<span class="hljs-title">Icon</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"appstore"</span> /></span><span class="hljs-tag"><<span class="hljs-title">span</span>></span>导航二<span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span>}>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"5"</span>></span>选项5<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"6"</span>></span>选项6<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">SubMenu</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"sub3"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">"三级导航"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"7"</span>></span>选项7<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"8"</span>></span>选项8<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">SubMenu</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">SubMenu</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">SubMenu</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"sub4"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">{<span</span>></span><span class="hljs-tag"><<span class="hljs-title">Icon</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"setting"</span> /></span><span class="hljs-tag"><<span class="hljs-title">span</span>></span>导航三<span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span>}>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"9"</span>></span>选项9<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"10"</span>></span>选项10<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"11"</span>></span>选项11<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"12"</span>></span>选项12<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">SubMenu</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">Menu</span>></span>;</span>
|
||||
}
|
||||
});
|
||||
ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-title">Sider</span> /></span>, mountNode);</span></code></pre></div>
|
||||
</div>
|
||||
<div class="code-box-meta markdown">
|
||||
<div class="code-box-title">
|
||||
<a href="#demo-sider">内嵌菜单</a>
|
||||
</div>
|
||||
<p>垂直菜单，子菜单内嵌在菜单区域。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div><div class="code-box" id="demo-sider-current">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-menu-demo-sider-current"></div>
|
||||
@@ -1109,6 +1286,178 @@ ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-t
|
||||
<p>点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div><div class="code-box" id="demo-vertical">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-menu-demo-vertical"></div>
|
||||
<script>mountNode = document.getElementById('components-menu-demo-vertical');</script>
|
||||
<script>(function(){'use strict';
|
||||
|
||||
var _antd = require('antd');
|
||||
|
||||
var SubMenu = _antd.Menu.SubMenu;
|
||||
var MenuItemGroup = _antd.Menu.ItemGroup;
|
||||
|
||||
function handleClick(e) {
|
||||
console.log('click', e);
|
||||
}
|
||||
|
||||
ReactDOM.render(React.createElement(
|
||||
_antd.Menu,
|
||||
{ onClick: handleClick, style: { width: 240 }, mode: 'vertical' },
|
||||
React.createElement(
|
||||
SubMenu,
|
||||
{ key: 'sub1', title: React.createElement(
|
||||
'span',
|
||||
null,
|
||||
React.createElement(_antd.Icon, { type: 'mail' }),
|
||||
React.createElement(
|
||||
'span',
|
||||
null,
|
||||
'导航一'
|
||||
)
|
||||
) },
|
||||
React.createElement(
|
||||
MenuItemGroup,
|
||||
{ title: '分组1' },
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '1' },
|
||||
'选项1'
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '2' },
|
||||
'选项2'
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
MenuItemGroup,
|
||||
{ title: '分组2' },
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '3' },
|
||||
'选项3'
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '4' },
|
||||
'选项4'
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
SubMenu,
|
||||
{ key: 'sub2', title: React.createElement(
|
||||
'span',
|
||||
null,
|
||||
React.createElement(_antd.Icon, { type: 'appstore' }),
|
||||
React.createElement(
|
||||
'span',
|
||||
null,
|
||||
'导航二'
|
||||
)
|
||||
) },
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '5' },
|
||||
'选项5'
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '6' },
|
||||
'选项6'
|
||||
),
|
||||
React.createElement(
|
||||
SubMenu,
|
||||
{ key: 'sub3', title: '三级导航' },
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '7' },
|
||||
'选项7'
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '8' },
|
||||
'选项8'
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
SubMenu,
|
||||
{ key: 'sub4', title: React.createElement(
|
||||
'span',
|
||||
null,
|
||||
React.createElement('icon', { type: 'setting' }),
|
||||
React.createElement(
|
||||
'span',
|
||||
null,
|
||||
'导航三'
|
||||
)
|
||||
) },
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '9' },
|
||||
'选项9'
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '10' },
|
||||
'选项10'
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '11' },
|
||||
'选项11'
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '12' },
|
||||
'选项12'
|
||||
)
|
||||
)
|
||||
), mountNode);})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Menu, Icon } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
|
||||
<span class="hljs-keyword">const</span> SubMenu = Menu.SubMenu;
|
||||
<span class="hljs-keyword">const</span> MenuItemGroup = Menu.ItemGroup;
|
||||
|
||||
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">handleClick</span>(<span class="hljs-params">e</span>) </span>{
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'click'</span>, e);
|
||||
}
|
||||
|
||||
ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-title">Menu</span> <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{handleClick}</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{{width:240}}</span> <span class="hljs-attribute">mode</span>=<span class="hljs-value">"vertical"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">SubMenu</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"sub1"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">{<span</span>></span><span class="hljs-tag"><<span class="hljs-title">Icon</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"mail"</span> /></span><span class="hljs-tag"><<span class="hljs-title">span</span>></span>导航一<span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span>}>
|
||||
<span class="hljs-tag"><<span class="hljs-title">MenuItemGroup</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">"分组1"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"1"</span>></span>选项1<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"2"</span>></span>选项2<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">MenuItemGroup</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">MenuItemGroup</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">"分组2"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"3"</span>></span>选项3<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"4"</span>></span>选项4<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">MenuItemGroup</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">SubMenu</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">SubMenu</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"sub2"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">{<span</span>></span><span class="hljs-tag"><<span class="hljs-title">Icon</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"appstore"</span> /></span><span class="hljs-tag"><<span class="hljs-title">span</span>></span>导航二<span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span>}>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"5"</span>></span>选项5<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"6"</span>></span>选项6<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">SubMenu</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"sub3"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">"三级导航"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"7"</span>></span>选项7<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"8"</span>></span>选项8<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">SubMenu</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">SubMenu</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">SubMenu</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"sub4"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">{<span</span>></span><span class="hljs-tag"><<span class="hljs-title">icon</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"setting"</span> /></span><span class="hljs-tag"><<span class="hljs-title">span</span>></span>导航三<span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span>}>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"9"</span>></span>选项9<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"10"</span>></span>选项10<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"11"</span>></span>选项11<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"12"</span>></span>选项12<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">SubMenu</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">Menu</span>></span>
|
||||
, mountNode);</span></code></pre></div>
|
||||
</div>
|
||||
<div class="code-box-meta markdown">
|
||||
<div class="code-box-title">
|
||||
<a href="#demo-vertical">垂直菜单</a>
|
||||
</div>
|
||||
<p>子菜单是弹出的形式。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div><div class="code-box" id="demo-theme">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-menu-demo-theme"></div>
|
||||
@@ -1324,386 +1673,35 @@ ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-t
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-sider">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-menu-demo-sider"></div>
|
||||
<script>mountNode = document.getElementById('components-menu-demo-sider');</script>
|
||||
<script>(function(){'use strict';
|
||||
|
||||
var _antd = require('antd');
|
||||
|
||||
var SubMenu = _antd.Menu.SubMenu;
|
||||
var MenuItemGroup = _antd.Menu.ItemGroup;
|
||||
|
||||
var Sider = React.createClass({
|
||||
displayName: 'Sider',
|
||||
getInitialState: function getInitialState() {
|
||||
return {
|
||||
current: '1'
|
||||
};
|
||||
},
|
||||
handleClick: function handleClick(e) {
|
||||
console.log('click ', e);
|
||||
this.setState({
|
||||
current: e.key
|
||||
});
|
||||
},
|
||||
render: function render() {
|
||||
return React.createElement(
|
||||
_antd.Menu,
|
||||
{ onClick: this.handleClick,
|
||||
style: { width: 240 },
|
||||
defaultOpenKeys: ['sub1'],
|
||||
selectedKeys: [this.state.current],
|
||||
mode: 'inline' },
|
||||
React.createElement(
|
||||
SubMenu,
|
||||
{ key: 'sub1', title: React.createElement(
|
||||
'span',
|
||||
null,
|
||||
React.createElement(_antd.Icon, { type: 'mail' }),
|
||||
React.createElement(
|
||||
'span',
|
||||
null,
|
||||
'导航一'
|
||||
)
|
||||
) },
|
||||
React.createElement(
|
||||
MenuItemGroup,
|
||||
{ title: '分组1' },
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '1' },
|
||||
'选项1'
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '2' },
|
||||
'选项2'
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
MenuItemGroup,
|
||||
{ title: '分组2' },
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '3' },
|
||||
'选项3'
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '4' },
|
||||
'选项4'
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
SubMenu,
|
||||
{ key: 'sub2', title: React.createElement(
|
||||
'span',
|
||||
null,
|
||||
React.createElement(_antd.Icon, { type: 'appstore' }),
|
||||
React.createElement(
|
||||
'span',
|
||||
null,
|
||||
'导航二'
|
||||
)
|
||||
) },
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '5' },
|
||||
'选项5'
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '6' },
|
||||
'选项6'
|
||||
),
|
||||
React.createElement(
|
||||
SubMenu,
|
||||
{ key: 'sub3', title: '三级导航' },
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '7' },
|
||||
'选项7'
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '8' },
|
||||
'选项8'
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
SubMenu,
|
||||
{ key: 'sub4', title: React.createElement(
|
||||
'span',
|
||||
null,
|
||||
React.createElement(_antd.Icon, { type: 'setting' }),
|
||||
React.createElement(
|
||||
'span',
|
||||
null,
|
||||
'导航三'
|
||||
)
|
||||
) },
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '9' },
|
||||
'选项9'
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '10' },
|
||||
'选项10'
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '11' },
|
||||
'选项11'
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '12' },
|
||||
'选项12'
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
});
|
||||
ReactDOM.render(React.createElement(Sider, null), mountNode);})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Menu, Icon } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
|
||||
<span class="hljs-keyword">const</span> SubMenu = Menu.SubMenu;
|
||||
<span class="hljs-keyword">const</span> MenuItemGroup = Menu.ItemGroup;
|
||||
|
||||
<span class="hljs-keyword">const</span> Sider = React.createClass({
|
||||
getInitialState() {
|
||||
<span class="hljs-keyword">return</span> {
|
||||
current: <span class="hljs-string">'1'</span>
|
||||
};
|
||||
},
|
||||
handleClick(e) {
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'click '</span>, e);
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
current: e.key
|
||||
});
|
||||
},
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag"><<span class="hljs-title">Menu</span> <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{this.handleClick}</span>
|
||||
<span class="hljs-attribute">style</span>=<span class="hljs-value">{{width:240}}</span>
|
||||
<span class="hljs-attribute">defaultOpenKeys</span>=<span class="hljs-value">{['sub1']}</span>
|
||||
<span class="hljs-attribute">selectedKeys</span>=<span class="hljs-value">{[this.state.current]}</span>
|
||||
<span class="hljs-attribute">mode</span>=<span class="hljs-value">"inline"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">SubMenu</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"sub1"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">{<span</span>></span><span class="hljs-tag"><<span class="hljs-title">Icon</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"mail"</span> /></span><span class="hljs-tag"><<span class="hljs-title">span</span>></span>导航一<span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span>}>
|
||||
<span class="hljs-tag"><<span class="hljs-title">MenuItemGroup</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">"分组1"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"1"</span>></span>选项1<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"2"</span>></span>选项2<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">MenuItemGroup</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">MenuItemGroup</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">"分组2"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"3"</span>></span>选项3<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"4"</span>></span>选项4<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">MenuItemGroup</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">SubMenu</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">SubMenu</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"sub2"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">{<span</span>></span><span class="hljs-tag"><<span class="hljs-title">Icon</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"appstore"</span> /></span><span class="hljs-tag"><<span class="hljs-title">span</span>></span>导航二<span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span>}>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"5"</span>></span>选项5<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"6"</span>></span>选项6<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">SubMenu</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"sub3"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">"三级导航"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"7"</span>></span>选项7<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"8"</span>></span>选项8<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">SubMenu</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">SubMenu</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">SubMenu</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"sub4"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">{<span</span>></span><span class="hljs-tag"><<span class="hljs-title">Icon</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"setting"</span> /></span><span class="hljs-tag"><<span class="hljs-title">span</span>></span>导航三<span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span>}>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"9"</span>></span>选项9<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"10"</span>></span>选项10<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"11"</span>></span>选项11<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"12"</span>></span>选项12<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">SubMenu</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">Menu</span>></span>;</span>
|
||||
}
|
||||
});
|
||||
ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-title">Sider</span> /></span>, mountNode);</span></code></pre></div>
|
||||
</div>
|
||||
<div class="code-box-meta markdown">
|
||||
<div class="code-box-title">
|
||||
<a href="#demo-sider">内嵌菜单</a>
|
||||
</div>
|
||||
<p>垂直菜单，子菜单内嵌在菜单区域。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div><div class="code-box" id="demo-vertical">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-menu-demo-vertical"></div>
|
||||
<script>mountNode = document.getElementById('components-menu-demo-vertical');</script>
|
||||
<script>(function(){'use strict';
|
||||
|
||||
var _antd = require('antd');
|
||||
|
||||
var SubMenu = _antd.Menu.SubMenu;
|
||||
var MenuItemGroup = _antd.Menu.ItemGroup;
|
||||
|
||||
function handleClick(e) {
|
||||
console.log('click', e);
|
||||
}
|
||||
|
||||
ReactDOM.render(React.createElement(
|
||||
_antd.Menu,
|
||||
{ onClick: handleClick, style: { width: 240 }, mode: 'vertical' },
|
||||
React.createElement(
|
||||
SubMenu,
|
||||
{ key: 'sub1', title: React.createElement(
|
||||
'span',
|
||||
null,
|
||||
React.createElement(_antd.Icon, { type: 'mail' }),
|
||||
React.createElement(
|
||||
'span',
|
||||
null,
|
||||
'导航一'
|
||||
)
|
||||
) },
|
||||
React.createElement(
|
||||
MenuItemGroup,
|
||||
{ title: '分组1' },
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '1' },
|
||||
'选项1'
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '2' },
|
||||
'选项2'
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
MenuItemGroup,
|
||||
{ title: '分组2' },
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '3' },
|
||||
'选项3'
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '4' },
|
||||
'选项4'
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
SubMenu,
|
||||
{ key: 'sub2', title: React.createElement(
|
||||
'span',
|
||||
null,
|
||||
React.createElement(_antd.Icon, { type: 'appstore' }),
|
||||
React.createElement(
|
||||
'span',
|
||||
null,
|
||||
'导航二'
|
||||
)
|
||||
) },
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '5' },
|
||||
'选项5'
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '6' },
|
||||
'选项6'
|
||||
),
|
||||
React.createElement(
|
||||
SubMenu,
|
||||
{ key: 'sub3', title: '三级导航' },
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '7' },
|
||||
'选项7'
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '8' },
|
||||
'选项8'
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
SubMenu,
|
||||
{ key: 'sub4', title: React.createElement(
|
||||
'span',
|
||||
null,
|
||||
React.createElement('icon', { type: 'setting' }),
|
||||
React.createElement(
|
||||
'span',
|
||||
null,
|
||||
'导航三'
|
||||
)
|
||||
) },
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '9' },
|
||||
'选项9'
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '10' },
|
||||
'选项10'
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '11' },
|
||||
'选项11'
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: '12' },
|
||||
'选项12'
|
||||
)
|
||||
)
|
||||
), mountNode);})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Menu, Icon } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
|
||||
<span class="hljs-keyword">const</span> SubMenu = Menu.SubMenu;
|
||||
<span class="hljs-keyword">const</span> MenuItemGroup = Menu.ItemGroup;
|
||||
|
||||
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">handleClick</span>(<span class="hljs-params">e</span>) </span>{
|
||||
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'click'</span>, e);
|
||||
}
|
||||
|
||||
ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-title">Menu</span> <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{handleClick}</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{{width:240}}</span> <span class="hljs-attribute">mode</span>=<span class="hljs-value">"vertical"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">SubMenu</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"sub1"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">{<span</span>></span><span class="hljs-tag"><<span class="hljs-title">Icon</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"mail"</span> /></span><span class="hljs-tag"><<span class="hljs-title">span</span>></span>导航一<span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span>}>
|
||||
<span class="hljs-tag"><<span class="hljs-title">MenuItemGroup</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">"分组1"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"1"</span>></span>选项1<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"2"</span>></span>选项2<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">MenuItemGroup</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">MenuItemGroup</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">"分组2"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"3"</span>></span>选项3<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"4"</span>></span>选项4<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">MenuItemGroup</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">SubMenu</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">SubMenu</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"sub2"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">{<span</span>></span><span class="hljs-tag"><<span class="hljs-title">Icon</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"appstore"</span> /></span><span class="hljs-tag"><<span class="hljs-title">span</span>></span>导航二<span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span>}>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"5"</span>></span>选项5<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"6"</span>></span>选项6<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">SubMenu</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"sub3"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">"三级导航"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"7"</span>></span>选项7<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"8"</span>></span>选项8<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">SubMenu</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">SubMenu</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">SubMenu</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"sub4"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">{<span</span>></span><span class="hljs-tag"><<span class="hljs-title">icon</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"setting"</span> /></span><span class="hljs-tag"><<span class="hljs-title">span</span>></span>导航三<span class="hljs-tag"></<span class="hljs-title">span</span>></span><span class="hljs-tag"></<span class="hljs-title">span</span>></span>}>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"9"</span>></span>选项9<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"10"</span>></span>选项10<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"11"</span>></span>选项11<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"12"</span>></span>选项12<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">SubMenu</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">Menu</span>></span>
|
||||
, mountNode);</span></code></pre></div>
|
||||
</div>
|
||||
<div class="code-box-meta markdown">
|
||||
<div class="code-box-title">
|
||||
<a href="#demo-vertical">垂直菜单</a>
|
||||
</div>
|
||||
<p>子菜单是弹出的形式。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="顶部导航" href="#demo-horizontal">
|
||||
<span>顶部导航</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="内嵌菜单" href="#demo-sider">
|
||||
<span>内嵌菜单</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="只展开当前父级菜单" href="#demo-sider-current">
|
||||
<span>只展开当前父级菜单</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="垂直菜单" href="#demo-vertical">
|
||||
<span>垂直菜单</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="主题" href="#demo-theme">
|
||||
<span>主题</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -633,28 +633,6 @@ Message 全局提示 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="普通提示" href="#demo-info">
|
||||
<span>普通提示</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="其他提示类型" href="#demo-other">
|
||||
<span>其他提示类型</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="修改延时" href="#demo-duration">
|
||||
<span>修改延时</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="加载中" href="#demo-loading">
|
||||
<span>加载中</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-info">
|
||||
<div class="code-box-demo">
|
||||
@@ -831,6 +809,28 @@ ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-t
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="普通提示" href="#demo-info">
|
||||
<span>普通提示</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="其他提示类型" href="#demo-other">
|
||||
<span>其他提示类型</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="修改延时" href="#demo-duration">
|
||||
<span>修改延时</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="加载中" href="#demo-loading">
|
||||
<span>加载中</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
+37
-37
@@ -709,43 +709,6 @@ Modal 对话框 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="异步关闭" href="#demo-async">
|
||||
<span>异步关闭</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="自定义页脚" href="#demo-footer">
|
||||
<span>自定义页脚</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="确认对话框" href="#demo-confirm">
|
||||
<span>确认对话框</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="确认对话框" href="#demo-confirm-promise">
|
||||
<span>确认对话框</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="信息提示" href="#demo-info">
|
||||
<span>信息提示</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="国际化" href="#demo-locale">
|
||||
<span>国际化</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-basic">
|
||||
<div class="code-box-demo">
|
||||
@@ -1451,6 +1414,43 @@ ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-t
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="异步关闭" href="#demo-async">
|
||||
<span>异步关闭</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="自定义页脚" href="#demo-footer">
|
||||
<span>自定义页脚</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="确认对话框" href="#demo-confirm">
|
||||
<span>确认对话框</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="确认对话框" href="#demo-confirm-promise">
|
||||
<span>确认对话框</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="信息提示" href="#demo-info">
|
||||
<span>信息提示</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="国际化" href="#demo-locale">
|
||||
<span>国际化</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -661,33 +661,6 @@ Notification 通知提醒框 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="自动关闭的延时" href="#demo-duration">
|
||||
<span>自动关闭的延时</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="带有Icon的通知提醒框" href="#demo-with-icon">
|
||||
<span>带有Icon的通知提醒框</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="回调函数" href="#demo-onclose">
|
||||
<span>回调函数</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="自定义" href="#demo-with-btn">
|
||||
<span>自定义</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-basic">
|
||||
<div class="code-box-demo">
|
||||
@@ -981,6 +954,33 @@ mountNode);</span></code></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="自动关闭的延时" href="#demo-duration">
|
||||
<span>自动关闭的延时</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="带有Icon的通知提醒框" href="#demo-with-icon">
|
||||
<span>带有Icon的通知提醒框</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="回调函数" href="#demo-onclose">
|
||||
<span>回调函数</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="自定义" href="#demo-with-btn">
|
||||
<span>自定义</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -650,48 +650,6 @@ Pagination 分页 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="更多" href="#demo-more">
|
||||
<span>更多</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="改变" href="#demo-changer">
|
||||
<span>改变</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="跳转" href="#demo-jump">
|
||||
<span>跳转</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="迷你" href="#demo-mini">
|
||||
<span>迷你</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="简洁" href="#demo-simple">
|
||||
<span>简洁</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="国际化" href="#demo-locale">
|
||||
<span>国际化</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="受控" href="#demo-controlled">
|
||||
<span>受控</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-basic">
|
||||
<div class="code-box-demo">
|
||||
@@ -924,6 +882,48 @@ mountNode);</span></code></pre></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="更多" href="#demo-more">
|
||||
<span>更多</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="改变" href="#demo-changer">
|
||||
<span>改变</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="跳转" href="#demo-jump">
|
||||
<span>跳转</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="迷你" href="#demo-mini">
|
||||
<span>迷你</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="简洁" href="#demo-simple">
|
||||
<span>简洁</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="国际化" href="#demo-locale">
|
||||
<span>国际化</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="受控" href="#demo-controlled">
|
||||
<span>受控</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -624,28 +624,6 @@ Popconfirm 气泡确认框 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="位置" href="#demo-placement">
|
||||
<span>位置</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="国际化" href="#demo-locale">
|
||||
<span>国际化</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="条件触发" href="#demo-dynamic-trigger">
|
||||
<span>条件触发</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-basic">
|
||||
<div class="code-box-demo">
|
||||
@@ -1061,6 +1039,28 @@ ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-t
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="位置" href="#demo-placement">
|
||||
<span>位置</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="国际化" href="#demo-locale">
|
||||
<span>国际化</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="条件触发" href="#demo-dynamic-trigger">
|
||||
<span>条件触发</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -630,28 +630,6 @@ Popover 气泡卡片 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="位置" href="#demo-placement">
|
||||
<span>位置</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="三种触发方式" href="#demo-triggertype">
|
||||
<span>三种触发方式</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="从浮层内关闭" href="#demo-control">
|
||||
<span>从浮层内关闭</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-basic">
|
||||
<div class="code-box-demo">
|
||||
@@ -1093,6 +1071,28 @@ ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-t
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="位置" href="#demo-placement">
|
||||
<span>位置</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="三种触发方式" href="#demo-triggertype">
|
||||
<span>三种触发方式</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="从浮层内关闭" href="#demo-control">
|
||||
<span>从浮层内关闭</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -663,38 +663,6 @@ Progress 进度条 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="进度条" href="#demo-line">
|
||||
<span>进度条</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="进度圈" href="#demo-circle">
|
||||
<span>进度圈</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="小型进度条" href="#demo-line-mini">
|
||||
<span>小型进度条</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="小型进度圈" href="#demo-circle-mini">
|
||||
<span>小型进度圈</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="进度圈动态展示" href="#demo-circle-dynamic">
|
||||
<span>进度圈动态展示</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="动态展示" href="#demo-dynamic">
|
||||
<span>动态展示</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-line">
|
||||
<div class="code-box-demo">
|
||||
@@ -1056,6 +1024,38 @@ ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-t
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="进度条" href="#demo-line">
|
||||
<span>进度条</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="进度圈" href="#demo-circle">
|
||||
<span>进度圈</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="小型进度条" href="#demo-line-mini">
|
||||
<span>小型进度条</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="小型进度圈" href="#demo-circle-mini">
|
||||
<span>小型进度圈</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="进度圈动态展示" href="#demo-circle-dynamic">
|
||||
<span>进度圈动态展示</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="动态展示" href="#demo-dynamic">
|
||||
<span>动态展示</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -818,48 +818,6 @@ QueueAnim 进出场动画 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="默认" href="#anim-demo-simple">
|
||||
<span>默认</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="进场和离场" href="#anim-demo-basic">
|
||||
<span>进场和离场</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="进场和离场" href="#anim-demo-enter-leave">
|
||||
<span>进场和离场</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="自定义动画进出场" href="#anim-demo-custom">
|
||||
<span>自定义动画进出场</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="表单动画进出场" href="#anim-demo-form">
|
||||
<span>表单动画进出场</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="添加与删除" href="#anim-demo-change">
|
||||
<span>添加与删除</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="一个复杂些的例子" href="#anim-demo-page">
|
||||
<span>一个复杂些的例子</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="Router 默认进出场" href="#anim-demo-router">
|
||||
<span>Router 默认进出场</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="anim-demo-simple">
|
||||
<div class="code-box-demo">
|
||||
@@ -2213,6 +2171,48 @@ ReactDOM.render((
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="默认" href="#anim-demo-simple">
|
||||
<span>默认</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="进场和离场" href="#anim-demo-basic">
|
||||
<span>进场和离场</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="进场和离场" href="#anim-demo-enter-leave">
|
||||
<span>进场和离场</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="自定义动画进出场" href="#anim-demo-custom">
|
||||
<span>自定义动画进出场</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="表单动画进出场" href="#anim-demo-form">
|
||||
<span>表单动画进出场</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="添加与删除" href="#anim-demo-change">
|
||||
<span>添加与删除</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="一个复杂些的例子" href="#anim-demo-page">
|
||||
<span>一个复杂些的例子</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="Router 默认进出场" href="#anim-demo-router">
|
||||
<span>Router 默认进出场</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
+22
-22
@@ -647,28 +647,6 @@ Radio 单选框 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="不可用" href="#demo-disable">
|
||||
<span>不可用</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="RadioGroup 组合" href="#demo-radiogroup">
|
||||
<span>RadioGroup 组合</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="按钮样式" href="#demo-radiobutton">
|
||||
<span>按钮样式</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-basic">
|
||||
<div class="code-box-demo">
|
||||
@@ -988,6 +966,28 @@ ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-t
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="不可用" href="#demo-disable">
|
||||
<span>不可用</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="RadioGroup 组合" href="#demo-radiogroup">
|
||||
<span>RadioGroup 组合</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="按钮样式" href="#demo-radiobutton">
|
||||
<span>按钮样式</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -751,48 +751,6 @@ Select 选择器 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本使用" href="#demo-basic">
|
||||
<span>基本使用</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="三种大小" href="#demo-size">
|
||||
<span>三种大小</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="带搜索框" href="#demo-search">
|
||||
<span>带搜索框</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="多选" href="#demo-multiple">
|
||||
<span>多选</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="标签" href="#demo-tags">
|
||||
<span>标签</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="智能提示" href="#demo-combobox">
|
||||
<span>智能提示</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="分组" href="#demo-optgroup">
|
||||
<span>分组</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="联动" href="#demo-coordinate">
|
||||
<span>联动</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-basic">
|
||||
<div class="code-box-demo">
|
||||
@@ -1470,6 +1428,48 @@ ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-t
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本使用" href="#demo-basic">
|
||||
<span>基本使用</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="三种大小" href="#demo-size">
|
||||
<span>三种大小</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="带搜索框" href="#demo-search">
|
||||
<span>带搜索框</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="多选" href="#demo-multiple">
|
||||
<span>多选</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="标签" href="#demo-tags">
|
||||
<span>标签</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="智能提示" href="#demo-combobox">
|
||||
<span>智能提示</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="分组" href="#demo-optgroup">
|
||||
<span>分组</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="联动" href="#demo-coordinate">
|
||||
<span>联动</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -659,38 +659,6 @@ Slider 滑动输入条 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="带输入框的滑块" href="#demo-input-number">
|
||||
<span>带输入框的滑块</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="带 icon 的滑块" href="#demo-icon-slider">
|
||||
<span>带 icon 的滑块</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="分段式滑块" href="#demo-mark">
|
||||
<span>分段式滑块</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="事件" href="#demo-event">
|
||||
<span>事件</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="格式化 <code>Tooltip</code> 内容" href="#demo-tip-formatter">
|
||||
<span>格式化 <code>Tooltip</code> 内容</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-basic">
|
||||
<div class="code-box-demo">
|
||||
@@ -1160,6 +1128,38 @@ ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-t
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="带输入框的滑块" href="#demo-input-number">
|
||||
<span>带输入框的滑块</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="带 icon 的滑块" href="#demo-icon-slider">
|
||||
<span>带 icon 的滑块</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="分段式滑块" href="#demo-mark">
|
||||
<span>分段式滑块</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="事件" href="#demo-event">
|
||||
<span>事件</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="格式化 <code>Tooltip</code> 内容" href="#demo-tip-formatter">
|
||||
<span>格式化 <code>Tooltip</code> 内容</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
+22
-22
@@ -599,28 +599,6 @@ Spin 加载中 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本用法" href="#demo-basic">
|
||||
<span>基本用法</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="各种大小" href="#demo-size">
|
||||
<span>各种大小</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="容器" href="#demo-inside">
|
||||
<span>容器</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="卡片加载中" href="#demo-nested">
|
||||
<span>卡片加载中</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-basic">
|
||||
<div class="code-box-demo">
|
||||
@@ -809,6 +787,28 @@ ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-t
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本用法" href="#demo-basic">
|
||||
<span>基本用法</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="各种大小" href="#demo-size">
|
||||
<span>各种大小</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="容器" href="#demo-inside">
|
||||
<span>容器</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="卡片加载中" href="#demo-nested">
|
||||
<span>卡片加载中</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
+201
-203
@@ -663,45 +663,8 @@ Steps 步骤条 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本用法" href="#demo-simple">
|
||||
<span>基本用法</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="迷你版" href="#demo-small-size">
|
||||
<span>迷你版</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="带ICON图标的步骤条" href="#demo-icon">
|
||||
<span>带ICON图标的步骤条</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="切换到下一步" href="#demo-step-next">
|
||||
<span>切换到下一步</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="竖直方向的步骤条" href="#demo-vertical">
|
||||
<span>竖直方向的步骤条</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="竖直方向的小型步骤条" href="#demo-vertical-small">
|
||||
<span>竖直方向的小型步骤条</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="自定义状态" href="#demo-status">
|
||||
<span>自定义状态</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-simple">
|
||||
<div class="code-boxes-col-1-1"><div class="code-box" id="demo-simple">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-steps-demo-simple"></div>
|
||||
<script>mountNode = document.getElementById('components-steps-demo-simple');</script>
|
||||
@@ -761,170 +724,7 @@ ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-t
|
||||
<p>简单的步骤条。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div><div class="code-box" id="demo-icon">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-steps-demo-icon"></div>
|
||||
<script>mountNode = document.getElementById('components-steps-demo-icon');</script>
|
||||
<script>(function(){"use strict";
|
||||
|
||||
var _antd = require("antd");
|
||||
|
||||
var Step = _antd.Steps.Step;
|
||||
|
||||
ReactDOM.render(React.createElement(
|
||||
_antd.Steps,
|
||||
null,
|
||||
React.createElement(Step, { status: "finish", title: "步骤1", icon: "cloud" }),
|
||||
React.createElement(Step, { status: "process", title: "步骤2", icon: "apple" }),
|
||||
React.createElement(Step, { status: "wait", title: "步骤3", icon: "github" })
|
||||
), mountNode);})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Steps } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
|
||||
<span class="hljs-keyword">const</span> Step = Steps.Step;
|
||||
|
||||
ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-title">Steps</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Step</span> <span class="hljs-attribute">status</span>=<span class="hljs-value">"finish"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">"步骤1"</span> <span class="hljs-attribute">icon</span>=<span class="hljs-value">"cloud"</span> /></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Step</span> <span class="hljs-attribute">status</span>=<span class="hljs-value">"process"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">"步骤2"</span> <span class="hljs-attribute">icon</span>=<span class="hljs-value">"apple"</span> /></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Step</span> <span class="hljs-attribute">status</span>=<span class="hljs-value">"wait"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">"步骤3"</span> <span class="hljs-attribute">icon</span>=<span class="hljs-value">"github"</span> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">Steps</span>></span>, mountNode);</span></code></pre></div>
|
||||
</div>
|
||||
<div class="code-box-meta markdown">
|
||||
<div class="code-box-title">
|
||||
<a href="#demo-icon">带ICON图标的步骤条</a>
|
||||
</div>
|
||||
<p>通过设置 <code>Steps.Step</code> 的 <code>icon</code> 属性，可以启用自定义图标。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div><div class="code-box" id="demo-vertical">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-steps-demo-vertical"></div>
|
||||
<script>mountNode = document.getElementById('components-steps-demo-vertical');</script>
|
||||
<script>(function(){'use strict';
|
||||
|
||||
var _antd = require('antd');
|
||||
|
||||
var Step = _antd.Steps.Step;
|
||||
|
||||
var steps = [{
|
||||
title: '已完成',
|
||||
description: '这里是信息的描述'
|
||||
}, {
|
||||
title: '进行中',
|
||||
description: '这里是信息的描述'
|
||||
}, {
|
||||
title: '待运行',
|
||||
description: '这里是信息的描述'
|
||||
}, {
|
||||
title: '又一个待运行',
|
||||
description: '这里是信息的描述'
|
||||
}].map(function (s, i) {
|
||||
return React.createElement(Step, { key: i, title: s.title, description: s.description });
|
||||
});
|
||||
|
||||
ReactDOM.render(React.createElement(
|
||||
_antd.Steps,
|
||||
{ direction: 'vertical', current: 1 },
|
||||
steps
|
||||
), mountNode);})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Steps } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
|
||||
<span class="hljs-keyword">const</span> Step = Steps.Step;
|
||||
|
||||
<span class="hljs-keyword">const</span> steps = [{
|
||||
title: <span class="hljs-string">'已完成'</span>,
|
||||
description: <span class="hljs-string">'这里是信息的描述'</span>
|
||||
}, {
|
||||
title: <span class="hljs-string">'进行中'</span>,
|
||||
description: <span class="hljs-string">'这里是信息的描述'</span>
|
||||
}, {
|
||||
title: <span class="hljs-string">'待运行'</span>,
|
||||
description: <span class="hljs-string">'这里是信息的描述'</span>
|
||||
}, {
|
||||
title: <span class="hljs-string">'又一个待运行'</span>,
|
||||
description: <span class="hljs-string">'这里是信息的描述'</span>
|
||||
}].map(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">s, i</span>) </span>{
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">Step</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">{i}</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">{s.title}</span> <span class="hljs-attribute">description</span>=<span class="hljs-value">{s.description}</span> /></span>
|
||||
)</span>;
|
||||
});
|
||||
|
||||
ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-title">Steps</span> <span class="hljs-attribute">direction</span>=<span class="hljs-value">"vertical"</span> <span class="hljs-attribute">current</span>=<span class="hljs-value">{1}</span>></span>{steps}<span class="hljs-tag"></<span class="hljs-title">Steps</span>></span>,
|
||||
mountNode);</span></code></pre></div>
|
||||
</div>
|
||||
<div class="code-box-meta markdown">
|
||||
<div class="code-box-title">
|
||||
<a href="#demo-vertical">竖直方向的步骤条</a>
|
||||
</div>
|
||||
<p>简单的竖直方向的步骤条。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div><div class="code-box" id="demo-status">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-steps-demo-status"></div>
|
||||
<script>mountNode = document.getElementById('components-steps-demo-status');</script>
|
||||
<script>(function(){'use strict';
|
||||
|
||||
var _antd = require('antd');
|
||||
|
||||
var Step = _antd.Steps.Step;
|
||||
|
||||
var steps = [{
|
||||
status: 'finish',
|
||||
title: '已完成',
|
||||
description: '这里是多信息的描述啊'
|
||||
}, {
|
||||
status: 'process',
|
||||
title: '进行中',
|
||||
description: '这里是多信息的耶哦耶哦哦耶哦耶'
|
||||
}, {
|
||||
status: 'wait',
|
||||
title: '又一个待运行',
|
||||
description: '描述啊描述啊'
|
||||
}, {
|
||||
status: 'wait',
|
||||
title: '待运行',
|
||||
description: '这里是多信息的描述啊'
|
||||
}].map(function (s, i) {
|
||||
return React.createElement(Step, { key: i, title: s.title, status: s.status, description: s.description });
|
||||
});
|
||||
|
||||
ReactDOM.render(React.createElement(
|
||||
_antd.Steps,
|
||||
null,
|
||||
steps
|
||||
), mountNode);})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Steps } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
|
||||
<span class="hljs-keyword">const</span> Step = Steps.Step;
|
||||
|
||||
<span class="hljs-keyword">const</span> steps = [{
|
||||
status: <span class="hljs-string">'finish'</span>,
|
||||
title: <span class="hljs-string">'已完成'</span>,
|
||||
description: <span class="hljs-string">'这里是多信息的描述啊'</span>
|
||||
}, {
|
||||
status: <span class="hljs-string">'process'</span>,
|
||||
title: <span class="hljs-string">'进行中'</span>,
|
||||
description: <span class="hljs-string">'这里是多信息的耶哦耶哦哦耶哦耶'</span>
|
||||
}, {
|
||||
status: <span class="hljs-string">'wait'</span>,
|
||||
title: <span class="hljs-string">'又一个待运行'</span>,
|
||||
description: <span class="hljs-string">'描述啊描述啊'</span>
|
||||
}, {
|
||||
status: <span class="hljs-string">'wait'</span>,
|
||||
title: <span class="hljs-string">'待运行'</span>,
|
||||
description: <span class="hljs-string">'这里是多信息的描述啊'</span>
|
||||
}].map(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">s, i</span>) </span>{
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">Step</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">{i}</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">{s.title}</span> <span class="hljs-attribute">status</span>=<span class="hljs-value">{s.status}</span> <span class="hljs-attribute">description</span>=<span class="hljs-value">{s.description}</span> /></span>
|
||||
)</span>;
|
||||
});
|
||||
|
||||
ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-title">Steps</span>></span>{steps}<span class="hljs-tag"></<span class="hljs-title">Steps</span>></span>, mountNode);</span></code></pre></div>
|
||||
</div>
|
||||
<div class="code-box-meta markdown">
|
||||
<div class="code-box-title">
|
||||
<a href="#demo-status">自定义状态</a>
|
||||
</div>
|
||||
<p>可以使用 <code>status</code> 定义每个步骤的状态。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-small-size">
|
||||
</div><div class="code-box" id="demo-small-size">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-steps-demo-small-size"></div>
|
||||
<script>mountNode = document.getElementById('components-steps-demo-small-size');</script>
|
||||
@@ -984,6 +784,38 @@ ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-t
|
||||
<p>迷你版的步骤条，通过设置 <code><Steps size="small"></code> 启用.</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div><div class="code-box" id="demo-icon">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-steps-demo-icon"></div>
|
||||
<script>mountNode = document.getElementById('components-steps-demo-icon');</script>
|
||||
<script>(function(){"use strict";
|
||||
|
||||
var _antd = require("antd");
|
||||
|
||||
var Step = _antd.Steps.Step;
|
||||
|
||||
ReactDOM.render(React.createElement(
|
||||
_antd.Steps,
|
||||
null,
|
||||
React.createElement(Step, { status: "finish", title: "步骤1", icon: "cloud" }),
|
||||
React.createElement(Step, { status: "process", title: "步骤2", icon: "apple" }),
|
||||
React.createElement(Step, { status: "wait", title: "步骤3", icon: "github" })
|
||||
), mountNode);})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Steps } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
|
||||
<span class="hljs-keyword">const</span> Step = Steps.Step;
|
||||
|
||||
ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-title">Steps</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Step</span> <span class="hljs-attribute">status</span>=<span class="hljs-value">"finish"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">"步骤1"</span> <span class="hljs-attribute">icon</span>=<span class="hljs-value">"cloud"</span> /></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Step</span> <span class="hljs-attribute">status</span>=<span class="hljs-value">"process"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">"步骤2"</span> <span class="hljs-attribute">icon</span>=<span class="hljs-value">"apple"</span> /></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Step</span> <span class="hljs-attribute">status</span>=<span class="hljs-value">"wait"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">"步骤3"</span> <span class="hljs-attribute">icon</span>=<span class="hljs-value">"github"</span> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">Steps</span>></span>, mountNode);</span></code></pre></div>
|
||||
</div>
|
||||
<div class="code-box-meta markdown">
|
||||
<div class="code-box-title">
|
||||
<a href="#demo-icon">带ICON图标的步骤条</a>
|
||||
</div>
|
||||
<p>通过设置 <code>Steps.Step</code> 的 <code>icon</code> 属性，可以启用自定义图标。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div><div class="code-box" id="demo-step-next">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-steps-demo-step-next"></div>
|
||||
@@ -1101,6 +933,67 @@ ReactDOM.render(<App />, mountNode);</code></pre></div>
|
||||
<p>随机生成 3~6 个步骤，初始随机进行到其中一个步骤。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div><div class="code-box" id="demo-vertical">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-steps-demo-vertical"></div>
|
||||
<script>mountNode = document.getElementById('components-steps-demo-vertical');</script>
|
||||
<script>(function(){'use strict';
|
||||
|
||||
var _antd = require('antd');
|
||||
|
||||
var Step = _antd.Steps.Step;
|
||||
|
||||
var steps = [{
|
||||
title: '已完成',
|
||||
description: '这里是信息的描述'
|
||||
}, {
|
||||
title: '进行中',
|
||||
description: '这里是信息的描述'
|
||||
}, {
|
||||
title: '待运行',
|
||||
description: '这里是信息的描述'
|
||||
}, {
|
||||
title: '又一个待运行',
|
||||
description: '这里是信息的描述'
|
||||
}].map(function (s, i) {
|
||||
return React.createElement(Step, { key: i, title: s.title, description: s.description });
|
||||
});
|
||||
|
||||
ReactDOM.render(React.createElement(
|
||||
_antd.Steps,
|
||||
{ direction: 'vertical', current: 1 },
|
||||
steps
|
||||
), mountNode);})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Steps } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
|
||||
<span class="hljs-keyword">const</span> Step = Steps.Step;
|
||||
|
||||
<span class="hljs-keyword">const</span> steps = [{
|
||||
title: <span class="hljs-string">'已完成'</span>,
|
||||
description: <span class="hljs-string">'这里是信息的描述'</span>
|
||||
}, {
|
||||
title: <span class="hljs-string">'进行中'</span>,
|
||||
description: <span class="hljs-string">'这里是信息的描述'</span>
|
||||
}, {
|
||||
title: <span class="hljs-string">'待运行'</span>,
|
||||
description: <span class="hljs-string">'这里是信息的描述'</span>
|
||||
}, {
|
||||
title: <span class="hljs-string">'又一个待运行'</span>,
|
||||
description: <span class="hljs-string">'这里是信息的描述'</span>
|
||||
}].map(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">s, i</span>) </span>{
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">Step</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">{i}</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">{s.title}</span> <span class="hljs-attribute">description</span>=<span class="hljs-value">{s.description}</span> /></span>
|
||||
)</span>;
|
||||
});
|
||||
|
||||
ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-title">Steps</span> <span class="hljs-attribute">direction</span>=<span class="hljs-value">"vertical"</span> <span class="hljs-attribute">current</span>=<span class="hljs-value">{1}</span>></span>{steps}<span class="hljs-tag"></<span class="hljs-title">Steps</span>></span>,
|
||||
mountNode);</span></code></pre></div>
|
||||
</div>
|
||||
<div class="code-box-meta markdown">
|
||||
<div class="code-box-title">
|
||||
<a href="#demo-vertical">竖直方向的步骤条</a>
|
||||
</div>
|
||||
<p>简单的竖直方向的步骤条。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div><div class="code-box" id="demo-vertical-small">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-steps-demo-vertical-small"></div>
|
||||
@@ -1156,9 +1049,114 @@ ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-t
|
||||
<p>简单的竖直方向的小型步骤条。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div><div class="code-box" id="demo-status">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-steps-demo-status"></div>
|
||||
<script>mountNode = document.getElementById('components-steps-demo-status');</script>
|
||||
<script>(function(){'use strict';
|
||||
|
||||
var _antd = require('antd');
|
||||
|
||||
var Step = _antd.Steps.Step;
|
||||
|
||||
var steps = [{
|
||||
status: 'finish',
|
||||
title: '已完成',
|
||||
description: '这里是多信息的描述啊'
|
||||
}, {
|
||||
status: 'process',
|
||||
title: '进行中',
|
||||
description: '这里是多信息的耶哦耶哦哦耶哦耶'
|
||||
}, {
|
||||
status: 'wait',
|
||||
title: '又一个待运行',
|
||||
description: '描述啊描述啊'
|
||||
}, {
|
||||
status: 'wait',
|
||||
title: '待运行',
|
||||
description: '这里是多信息的描述啊'
|
||||
}].map(function (s, i) {
|
||||
return React.createElement(Step, { key: i, title: s.title, status: s.status, description: s.description });
|
||||
});
|
||||
|
||||
ReactDOM.render(React.createElement(
|
||||
_antd.Steps,
|
||||
null,
|
||||
steps
|
||||
), mountNode);})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Steps } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
|
||||
<span class="hljs-keyword">const</span> Step = Steps.Step;
|
||||
|
||||
<span class="hljs-keyword">const</span> steps = [{
|
||||
status: <span class="hljs-string">'finish'</span>,
|
||||
title: <span class="hljs-string">'已完成'</span>,
|
||||
description: <span class="hljs-string">'这里是多信息的描述啊'</span>
|
||||
}, {
|
||||
status: <span class="hljs-string">'process'</span>,
|
||||
title: <span class="hljs-string">'进行中'</span>,
|
||||
description: <span class="hljs-string">'这里是多信息的耶哦耶哦哦耶哦耶'</span>
|
||||
}, {
|
||||
status: <span class="hljs-string">'wait'</span>,
|
||||
title: <span class="hljs-string">'又一个待运行'</span>,
|
||||
description: <span class="hljs-string">'描述啊描述啊'</span>
|
||||
}, {
|
||||
status: <span class="hljs-string">'wait'</span>,
|
||||
title: <span class="hljs-string">'待运行'</span>,
|
||||
description: <span class="hljs-string">'这里是多信息的描述啊'</span>
|
||||
}].map(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">s, i</span>) </span>{
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">Step</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">{i}</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">{s.title}</span> <span class="hljs-attribute">status</span>=<span class="hljs-value">{s.status}</span> <span class="hljs-attribute">description</span>=<span class="hljs-value">{s.description}</span> /></span>
|
||||
)</span>;
|
||||
});
|
||||
|
||||
ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-title">Steps</span>></span>{steps}<span class="hljs-tag"></<span class="hljs-title">Steps</span>></span>, mountNode);</span></code></pre></div>
|
||||
</div>
|
||||
<div class="code-box-meta markdown">
|
||||
<div class="code-box-title">
|
||||
<a href="#demo-status">自定义状态</a>
|
||||
</div>
|
||||
<p>可以使用 <code>status</code> 定义每个步骤的状态。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本用法" href="#demo-simple">
|
||||
<span>基本用法</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="迷你版" href="#demo-small-size">
|
||||
<span>迷你版</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="带ICON图标的步骤条" href="#demo-icon">
|
||||
<span>带ICON图标的步骤条</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="切换到下一步" href="#demo-step-next">
|
||||
<span>切换到下一步</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="竖直方向的步骤条" href="#demo-vertical">
|
||||
<span>竖直方向的步骤条</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="竖直方向的小型步骤条" href="#demo-vertical-small">
|
||||
<span>竖直方向的小型步骤条</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="自定义状态" href="#demo-status">
|
||||
<span>自定义状态</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -633,28 +633,6 @@ Switch 开关 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="简单" href="#demo-basic">
|
||||
<span>简单</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="不可用" href="#demo-disabled">
|
||||
<span>不可用</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="文字和图标" href="#demo-text">
|
||||
<span>文字和图标</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="两种大小" href="#demo-size">
|
||||
<span>两种大小</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-basic">
|
||||
<div class="code-box-demo">
|
||||
@@ -821,6 +799,28 @@ ReactDOM.render(
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="简单" href="#demo-basic">
|
||||
<span>简单</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="不可用" href="#demo-disabled">
|
||||
<span>不可用</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="文字和图标" href="#demo-text">
|
||||
<span>文字和图标</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="两种大小" href="#demo-size">
|
||||
<span>两种大小</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
+731
-733
File diff suppressed because it is too large
Load Diff
+52
-52
@@ -665,58 +665,6 @@ Tabs 标签页 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="禁用" href="#demo-disabled">
|
||||
<span>禁用</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="图标" href="#demo-icon">
|
||||
<span>图标</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="滑动" href="#demo-slide">
|
||||
<span>滑动</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="附加内容" href="#demo-extra">
|
||||
<span>附加内容</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="迷你型" href="#demo-size">
|
||||
<span>迷你型</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="位置" href="#demo-position">
|
||||
<span>位置</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="卡片式页签" href="#demo-card">
|
||||
<span>卡片式页签</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="新增和关闭页签" href="#demo-editable-card">
|
||||
<span>新增和关闭页签</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="卡片式页签容器" href="#demo-card-top">
|
||||
<span>卡片式页签容器</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-basic">
|
||||
<div class="code-box-demo">
|
||||
@@ -1451,6 +1399,58 @@ ReactDOM.render(
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="禁用" href="#demo-disabled">
|
||||
<span>禁用</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="图标" href="#demo-icon">
|
||||
<span>图标</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="滑动" href="#demo-slide">
|
||||
<span>滑动</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="附加内容" href="#demo-extra">
|
||||
<span>附加内容</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="迷你型" href="#demo-size">
|
||||
<span>迷你型</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="位置" href="#demo-position">
|
||||
<span>位置</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="卡片式页签" href="#demo-card">
|
||||
<span>卡片式页签</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="新增和关闭页签" href="#demo-editable-card">
|
||||
<span>新增和关闭页签</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="卡片式页签容器" href="#demo-card-top">
|
||||
<span>卡片式页签容器</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
+12
-12
@@ -619,18 +619,6 @@ Tag 标签 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="各种类型" href="#demo-colorful">
|
||||
<span>各种类型</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-basic">
|
||||
<div class="code-box-demo">
|
||||
@@ -739,6 +727,18 @@ ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-t
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="各种类型" href="#demo-colorful">
|
||||
<span>各种类型</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -657,43 +657,6 @@ TimePicker 时间选择框 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#picker-demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="受控组件" href="#picker-demo-value">
|
||||
<span>受控组件</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="三种大小" href="#picker-demo-size">
|
||||
<span>三种大小</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="不展示秒" href="#picker-demo-without-seconds">
|
||||
<span>不展示秒</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="禁用" href="#picker-demo-disabled">
|
||||
<span>禁用</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="禁止选项" href="#picker-demo-disable-options">
|
||||
<span>禁止选项</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="只显示部分选项" href="#picker-demo-hide-options">
|
||||
<span>只显示部分选项</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="picker-demo-basic">
|
||||
<div class="code-box-demo">
|
||||
@@ -988,6 +951,43 @@ ReactDOM.render(
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#picker-demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="受控组件" href="#picker-demo-value">
|
||||
<span>受控组件</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="三种大小" href="#picker-demo-size">
|
||||
<span>三种大小</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="不展示秒" href="#picker-demo-without-seconds">
|
||||
<span>不展示秒</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="禁用" href="#picker-demo-disabled">
|
||||
<span>禁用</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="禁止选项" href="#picker-demo-disable-options">
|
||||
<span>禁止选项</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="只显示部分选项" href="#picker-demo-hide-options">
|
||||
<span>只显示部分选项</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -625,23 +625,6 @@ Timeline 时间轴 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本用法" href="#demo-basic">
|
||||
<span>基本用法</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="圆圈颜色" href="#demo-color">
|
||||
<span>圆圈颜色</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="最后一个" href="#demo-pending">
|
||||
<span>最后一个</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-basic">
|
||||
<div class="code-box-demo">
|
||||
@@ -825,6 +808,23 @@ ReactDOM.render(
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本用法" href="#demo-basic">
|
||||
<span>基本用法</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="圆圈颜色" href="#demo-color">
|
||||
<span>圆圈颜色</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="最后一个" href="#demo-pending">
|
||||
<span>最后一个</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -600,18 +600,6 @@ Tooltip 文字提示 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="位置" href="#demo-placement">
|
||||
<span>位置</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-basic">
|
||||
<div class="code-box-demo">
|
||||
@@ -863,6 +851,18 @@ ReactDOM.render(
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="位置" href="#demo-placement">
|
||||
<span>位置</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
+122
-124
@@ -653,25 +653,8 @@ Transfer 穿梭框 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本用法" href="#demo-basic">
|
||||
<span>基本用法</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="带搜索框" href="#demo-search">
|
||||
<span>带搜索框</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="高级用法" href="#demo-advanced">
|
||||
<span>高级用法</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-basic">
|
||||
<div class="code-boxes-col-1-1"><div class="code-box" id="demo-basic">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-transfer-demo-basic"></div>
|
||||
<script>mountNode = document.getElementById('components-transfer-demo-basic');</script>
|
||||
@@ -785,6 +768,110 @@ ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-t
|
||||
<p>最基本的用法。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div><div class="code-box" id="demo-search">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-transfer-demo-search"></div>
|
||||
<script>mountNode = document.getElementById('components-transfer-demo-search');</script>
|
||||
<script>(function(){'use strict';
|
||||
|
||||
var _antd = require('antd');
|
||||
|
||||
var App = React.createClass({
|
||||
displayName: 'App',
|
||||
getInitialState: function getInitialState() {
|
||||
return {
|
||||
mockData: [],
|
||||
targetKeys: []
|
||||
};
|
||||
},
|
||||
componentDidMount: function componentDidMount() {
|
||||
this.getMock();
|
||||
},
|
||||
getMock: function getMock() {
|
||||
var targetKeys = [];
|
||||
var mockData = [];
|
||||
for (var i = 0; i < 20; i++) {
|
||||
var data = {
|
||||
key: i,
|
||||
title: '内容' + (i + 1),
|
||||
description: '内容' + (i + 1) + '的描述',
|
||||
chosen: Math.random() * 2 > 1
|
||||
};
|
||||
if (data.chosen) {
|
||||
targetKeys.push(data.key);
|
||||
}
|
||||
mockData.push(data);
|
||||
}
|
||||
this.setState({ mockData: mockData, targetKeys: targetKeys });
|
||||
},
|
||||
handleChange: function handleChange(targetKeys) {
|
||||
this.setState({ targetKeys: targetKeys });
|
||||
},
|
||||
render: function render() {
|
||||
return React.createElement(_antd.Transfer, {
|
||||
dataSource: this.state.mockData,
|
||||
showSearch: true,
|
||||
targetKeys: this.state.targetKeys,
|
||||
onChange: this.handleChange,
|
||||
render: function render(item) {
|
||||
return item.title;
|
||||
} });
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(React.createElement(App, null), mountNode);})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Transfer } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
|
||||
|
||||
<span class="hljs-keyword">const</span> App = React.createClass({
|
||||
getInitialState() {
|
||||
<span class="hljs-keyword">return</span> {
|
||||
mockData: [],
|
||||
targetKeys: [],
|
||||
};
|
||||
},
|
||||
componentDidMount() {
|
||||
<span class="hljs-keyword">this</span>.getMock();
|
||||
},
|
||||
getMock() {
|
||||
<span class="hljs-keyword">let</span> targetKeys = [];
|
||||
<span class="hljs-keyword">let</span> mockData = [];
|
||||
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < <span class="hljs-number">20</span>; i++) {
|
||||
<span class="hljs-keyword">const</span> data = {
|
||||
key: i,
|
||||
title: <span class="hljs-string">'内容'</span> + (i + <span class="hljs-number">1</span>),
|
||||
description: <span class="hljs-string">'内容'</span> + (i + <span class="hljs-number">1</span>) + <span class="hljs-string">'的描述'</span>,
|
||||
chosen: <span class="hljs-built_in">Math</span>.random() * <span class="hljs-number">2</span> > <span class="hljs-number">1</span>
|
||||
};
|
||||
<span class="hljs-keyword">if</span> (data.chosen) {
|
||||
targetKeys.push(data.key);
|
||||
}
|
||||
mockData.push(data);
|
||||
}
|
||||
<span class="hljs-keyword">this</span>.setState({ mockData, targetKeys });
|
||||
},
|
||||
handleChange(targetKeys) {
|
||||
<span class="hljs-keyword">this</span>.setState({ targetKeys });
|
||||
},
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">Transfer</span>
|
||||
<span class="hljs-attribute">dataSource</span>=<span class="hljs-value">{this.state.mockData}</span>
|
||||
<span class="hljs-attribute">showSearch</span>
|
||||
<span class="hljs-attribute">targetKeys</span>=<span class="hljs-value">{this.state.targetKeys}</span>
|
||||
<span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.handleChange}</span>
|
||||
<span class="hljs-attribute">render</span>=<span class="hljs-value">{item</span> =></span> item.title} />
|
||||
)</span>;
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-title">App</span> /></span>, mountNode);</span></code></pre></div>
|
||||
</div>
|
||||
<div class="code-box-meta markdown">
|
||||
<div class="code-box-title">
|
||||
<a href="#demo-search">带搜索框</a>
|
||||
</div>
|
||||
<p>带搜索框的穿梭框。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div><div class="code-box" id="demo-advanced">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-transfer-demo-advanced"></div>
|
||||
@@ -917,114 +1004,25 @@ ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-t
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-search">
|
||||
<div class="code-box-demo">
|
||||
<div id="components-transfer-demo-search"></div>
|
||||
<script>mountNode = document.getElementById('components-transfer-demo-search');</script>
|
||||
<script>(function(){'use strict';
|
||||
|
||||
var _antd = require('antd');
|
||||
|
||||
var App = React.createClass({
|
||||
displayName: 'App',
|
||||
getInitialState: function getInitialState() {
|
||||
return {
|
||||
mockData: [],
|
||||
targetKeys: []
|
||||
};
|
||||
},
|
||||
componentDidMount: function componentDidMount() {
|
||||
this.getMock();
|
||||
},
|
||||
getMock: function getMock() {
|
||||
var targetKeys = [];
|
||||
var mockData = [];
|
||||
for (var i = 0; i < 20; i++) {
|
||||
var data = {
|
||||
key: i,
|
||||
title: '内容' + (i + 1),
|
||||
description: '内容' + (i + 1) + '的描述',
|
||||
chosen: Math.random() * 2 > 1
|
||||
};
|
||||
if (data.chosen) {
|
||||
targetKeys.push(data.key);
|
||||
}
|
||||
mockData.push(data);
|
||||
}
|
||||
this.setState({ mockData: mockData, targetKeys: targetKeys });
|
||||
},
|
||||
handleChange: function handleChange(targetKeys) {
|
||||
this.setState({ targetKeys: targetKeys });
|
||||
},
|
||||
render: function render() {
|
||||
return React.createElement(_antd.Transfer, {
|
||||
dataSource: this.state.mockData,
|
||||
showSearch: true,
|
||||
targetKeys: this.state.targetKeys,
|
||||
onChange: this.handleChange,
|
||||
render: function render(item) {
|
||||
return item.title;
|
||||
} });
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(React.createElement(App, null), mountNode);})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Transfer } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
|
||||
|
||||
<span class="hljs-keyword">const</span> App = React.createClass({
|
||||
getInitialState() {
|
||||
<span class="hljs-keyword">return</span> {
|
||||
mockData: [],
|
||||
targetKeys: [],
|
||||
};
|
||||
},
|
||||
componentDidMount() {
|
||||
<span class="hljs-keyword">this</span>.getMock();
|
||||
},
|
||||
getMock() {
|
||||
<span class="hljs-keyword">let</span> targetKeys = [];
|
||||
<span class="hljs-keyword">let</span> mockData = [];
|
||||
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < <span class="hljs-number">20</span>; i++) {
|
||||
<span class="hljs-keyword">const</span> data = {
|
||||
key: i,
|
||||
title: <span class="hljs-string">'内容'</span> + (i + <span class="hljs-number">1</span>),
|
||||
description: <span class="hljs-string">'内容'</span> + (i + <span class="hljs-number">1</span>) + <span class="hljs-string">'的描述'</span>,
|
||||
chosen: <span class="hljs-built_in">Math</span>.random() * <span class="hljs-number">2</span> > <span class="hljs-number">1</span>
|
||||
};
|
||||
<span class="hljs-keyword">if</span> (data.chosen) {
|
||||
targetKeys.push(data.key);
|
||||
}
|
||||
mockData.push(data);
|
||||
}
|
||||
<span class="hljs-keyword">this</span>.setState({ mockData, targetKeys });
|
||||
},
|
||||
handleChange(targetKeys) {
|
||||
<span class="hljs-keyword">this</span>.setState({ targetKeys });
|
||||
},
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">Transfer</span>
|
||||
<span class="hljs-attribute">dataSource</span>=<span class="hljs-value">{this.state.mockData}</span>
|
||||
<span class="hljs-attribute">showSearch</span>
|
||||
<span class="hljs-attribute">targetKeys</span>=<span class="hljs-value">{this.state.targetKeys}</span>
|
||||
<span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.handleChange}</span>
|
||||
<span class="hljs-attribute">render</span>=<span class="hljs-value">{item</span> =></span> item.title} />
|
||||
)</span>;
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-title">App</span> /></span>, mountNode);</span></code></pre></div>
|
||||
</div>
|
||||
<div class="code-box-meta markdown">
|
||||
<div class="code-box-title">
|
||||
<a href="#demo-search">带搜索框</a>
|
||||
</div>
|
||||
<p>带搜索框的穿梭框。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本用法" href="#demo-basic">
|
||||
<span>基本用法</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="带搜索框" href="#demo-search">
|
||||
<span>带搜索框</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="高级用法" href="#demo-advanced">
|
||||
<span>高级用法</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
+22
-22
@@ -682,28 +682,6 @@ Tree 树形控件 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="可选择" href="#demo-checkbox">
|
||||
<span>可选择</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="接收外部传参" href="#demo-special">
|
||||
<span>接收外部传参</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="异步数据加载" href="#demo-dynamic">
|
||||
<span>异步数据加载</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-basic">
|
||||
<div class="code-box-demo">
|
||||
@@ -1176,6 +1154,28 @@ ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-t
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="基本" href="#demo-basic">
|
||||
<span>基本</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="可选择" href="#demo-checkbox">
|
||||
<span>可选择</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="接收外部传参" href="#demo-special">
|
||||
<span>接收外部传参</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="异步数据加载" href="#demo-dynamic">
|
||||
<span>异步数据加载</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -674,48 +674,6 @@ Upload 文件上传 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="点击上传" href="#demo-basic">
|
||||
<span>点击上传</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="传入已上传的文件" href="#demo-defaultfilelist">
|
||||
<span>传入已上传的文件</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="完全控制的上传列表" href="#demo-filelist">
|
||||
<span>完全控制的上传列表</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="拖拽上传" href="#demo-drag">
|
||||
<span>拖拽上传</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="拖拽上传" href="#demo-drag-simple">
|
||||
<span>拖拽上传</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="多文件选择" href="#demo-multiple">
|
||||
<span>多文件选择</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="图片列表样式" href="#demo-picture-style">
|
||||
<span>图片列表样式</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="限制用户上传的文件" href="#demo-beforeupload">
|
||||
<span>限制用户上传的文件</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-basic">
|
||||
<div class="code-box-demo">
|
||||
@@ -1300,6 +1258,48 @@ ReactDOM.render(
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="点击上传" href="#demo-basic">
|
||||
<span>点击上传</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="传入已上传的文件" href="#demo-defaultfilelist">
|
||||
<span>传入已上传的文件</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="完全控制的上传列表" href="#demo-filelist">
|
||||
<span>完全控制的上传列表</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="拖拽上传" href="#demo-drag">
|
||||
<span>拖拽上传</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="拖拽上传" href="#demo-drag-simple">
|
||||
<span>拖拽上传</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="多文件选择" href="#demo-multiple">
|
||||
<span>多文件选择</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="图片列表样式" href="#demo-picture-style">
|
||||
<span>图片列表样式</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="限制用户上传的文件" href="#demo-beforeupload">
|
||||
<span>限制用户上传的文件</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -658,23 +658,6 @@ Validation 表单校验 - Ant Design
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="Input 表单域" href="#demo-basic">
|
||||
<span>Input 表单域</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="其他表单域校验" href="#demo-other-items">
|
||||
<span>其他表单域校验</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="自定义校验规则" href="#demo-customize">
|
||||
<span>自定义校验规则</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-basic">
|
||||
<div class="code-box-demo">
|
||||
@@ -2176,6 +2159,23 @@ ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-t
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="Input 表单域" href="#demo-basic">
|
||||
<span>Input 表单域</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="其他表单域校验" href="#demo-other-items">
|
||||
<span>其他表单域校验</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="自定义校验规则" href="#demo-customize">
|
||||
<span>自定义校验规则</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
+363
-365
@@ -361,30 +361,8 @@
|
||||
代码演示
|
||||
<i class="anticon anticon-appstore icon-all" title="展开全部代码"></i>
|
||||
</h2>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="顶部导航" href="#demo-top">
|
||||
<span>顶部导航</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="顶部导航 + 侧边栏" href="#demo-top-aside">
|
||||
<span>顶部导航 + 侧边栏</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="侧边导航" href="#demo-aside">
|
||||
<span>侧边导航</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="吊顶规范" href="#demo-ceiling">
|
||||
<span>吊顶规范</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="code-boxes">
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-top">
|
||||
<div class="code-boxes-col-1-1"><div class="code-box" id="demo-top">
|
||||
<div class="code-box-demo">
|
||||
<div id="spec-layout-demo-top"></div>
|
||||
<script>mountNode = document.getElementById('spec-layout-demo-top');</script>
|
||||
@@ -639,347 +617,7 @@ ReactDOM.render(
|
||||
<p><code><BrowserDemo /></code> 做演示用，无须复制。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div><div class="code-box" id="demo-aside">
|
||||
<div class="code-box-demo">
|
||||
<div id="spec-layout-demo-aside"></div>
|
||||
<script>mountNode = document.getElementById('spec-layout-demo-aside');</script>
|
||||
<script>(function(){"use strict";
|
||||
|
||||
var _antd = require("antd");
|
||||
|
||||
var SubMenu = _antd.Menu.SubMenu;
|
||||
|
||||
ReactDOM.render(React.createElement(
|
||||
BrowserDemo,
|
||||
null,
|
||||
React.createElement(
|
||||
"div",
|
||||
{ className: "ant-layout-aside" },
|
||||
React.createElement(
|
||||
"aside",
|
||||
{ className: "ant-layout-sider" },
|
||||
React.createElement("div", { className: "ant-layout-logo" }),
|
||||
React.createElement(
|
||||
_antd.Menu,
|
||||
{ mode: "inline", theme: "dark",
|
||||
defaultSelectedKeys: ['1'], defaultOpenKeys: ['sub1'] },
|
||||
React.createElement(
|
||||
SubMenu,
|
||||
{ key: "sub1", title: React.createElement(
|
||||
"span",
|
||||
null,
|
||||
React.createElement(_antd.Icon, { type: "user" }),
|
||||
"导航一"
|
||||
) },
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: "1" },
|
||||
"选项1"
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: "2" },
|
||||
"选项2"
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: "3" },
|
||||
"选项3"
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: "4" },
|
||||
"选项4"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
SubMenu,
|
||||
{ key: "sub2", title: React.createElement(
|
||||
"span",
|
||||
null,
|
||||
React.createElement(_antd.Icon, { type: "laptop" }),
|
||||
"导航二"
|
||||
) },
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: "5" },
|
||||
"选项5"
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: "6" },
|
||||
"选项6"
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: "7" },
|
||||
"选项7"
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: "8" },
|
||||
"选项8"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
SubMenu,
|
||||
{ key: "sub3", title: React.createElement(
|
||||
"span",
|
||||
null,
|
||||
React.createElement(_antd.Icon, { type: "notification" }),
|
||||
"导航三"
|
||||
) },
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: "9" },
|
||||
"选项9"
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: "10" },
|
||||
"选项10"
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: "11" },
|
||||
"选项11"
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: "12" },
|
||||
"选项12"
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"div",
|
||||
{ className: "ant-layout-main" },
|
||||
React.createElement("div", { className: "ant-layout-header" }),
|
||||
React.createElement(
|
||||
"div",
|
||||
{ className: "ant-layout-breadcrumb" },
|
||||
React.createElement(
|
||||
_antd.Breadcrumb,
|
||||
null,
|
||||
React.createElement(
|
||||
_antd.Breadcrumb.Item,
|
||||
null,
|
||||
"首页"
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Breadcrumb.Item,
|
||||
null,
|
||||
"应用列表"
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Breadcrumb.Item,
|
||||
null,
|
||||
"某应用"
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"div",
|
||||
{ className: "ant-layout-container" },
|
||||
React.createElement(
|
||||
"div",
|
||||
{ className: "ant-layout-content" },
|
||||
React.createElement(
|
||||
"div",
|
||||
{ style: { height: 590 } },
|
||||
"内容区域"
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"div",
|
||||
{ className: "ant-layout-footer" },
|
||||
"Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持"
|
||||
)
|
||||
)
|
||||
)
|
||||
), document.getElementById('spec-layout-demo-aside'));})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Menu, Breadcrumb, Icon } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
|
||||
<span class="hljs-keyword">const</span> SubMenu = Menu.SubMenu;
|
||||
|
||||
ReactDOM.render(
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">BrowserDemo</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-aside"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">aside</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-sider"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-logo"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu</span> <span class="hljs-attribute">mode</span>=<span class="hljs-value">"inline"</span> <span class="hljs-attribute">theme</span>=<span class="hljs-value">"dark"</span>
|
||||
<span class="hljs-attribute">defaultSelectedKeys</span>=<span class="hljs-value">{['1']}</span> <span class="hljs-attribute">defaultOpenKeys</span>=<span class="hljs-value">{['sub1']}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">SubMenu</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"sub1"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">{<span</span>></span><span class="hljs-tag"><<span class="hljs-title">Icon</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"user"</span> /></span>导航一<span class="hljs-tag"></<span class="hljs-title">span</span>></span>}>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"1"</span>></span>选项1<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"2"</span>></span>选项2<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"3"</span>></span>选项3<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"4"</span>></span>选项4<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">SubMenu</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">SubMenu</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"sub2"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">{<span</span>></span><span class="hljs-tag"><<span class="hljs-title">Icon</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"laptop"</span> /></span>导航二<span class="hljs-tag"></<span class="hljs-title">span</span>></span>}>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"5"</span>></span>选项5<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"6"</span>></span>选项6<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"7"</span>></span>选项7<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"8"</span>></span>选项8<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">SubMenu</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">SubMenu</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"sub3"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">{<span</span>></span><span class="hljs-tag"><<span class="hljs-title">Icon</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"notification"</span> /></span>导航三<span class="hljs-tag"></<span class="hljs-title">span</span>></span>}>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"9"</span>></span>选项9<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"10"</span>></span>选项10<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"11"</span>></span>选项11<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"12"</span>></span>选项12<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">SubMenu</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">Menu</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">aside</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-main"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-header"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-breadcrumb"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Breadcrumb</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Breadcrumb.Item</span>></span>首页<span class="hljs-tag"></<span class="hljs-title">Breadcrumb.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Breadcrumb.Item</span>></span>应用列表<span class="hljs-tag"></<span class="hljs-title">Breadcrumb.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Breadcrumb.Item</span>></span>某应用<span class="hljs-tag"></<span class="hljs-title">Breadcrumb.Item</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">Breadcrumb</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-container"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-content"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{{</span> <span class="hljs-attribute">height:</span> <span class="hljs-attribute">590</span> }}></span>
|
||||
内容区域
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-footer"</span>></span>
|
||||
Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">BrowserDemo</span>></span>
|
||||
, document.getElementById('spec-layout-demo-aside'));</span></code></pre></div><style type="text/css">.ant-layout-aside {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-logo {
|
||||
width: 150px;
|
||||
height: 32px;
|
||||
background: #333;
|
||||
border-radius: 6px;
|
||||
margin: 16px 24px 16px 28px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-sider {
|
||||
width: 224px;
|
||||
background: #404040;
|
||||
position: absolute;
|
||||
overflow: auto;
|
||||
padding-bottom: 24px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-sider > .ant-menu {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-header {
|
||||
background: #fff;
|
||||
height: 64px;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-breadcrumb {
|
||||
margin: 7px 0 -17px 24px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-main {
|
||||
margin-left: 224px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-container {
|
||||
margin: 24px 16px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-content {
|
||||
background: #fff;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-footer {
|
||||
height; 64px;
|
||||
line-height: 64px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
background: #fff;
|
||||
border-top: 1px solid #e9e9e9;
|
||||
width: 100%;
|
||||
}</style><div class="highlight"><pre><code class="css">.ant-layout-aside {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-logo {
|
||||
width: 150px;
|
||||
height: 32px;
|
||||
background: #333;
|
||||
border-radius: 6px;
|
||||
margin: 16px 24px 16px 28px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-sider {
|
||||
width: 224px;
|
||||
background: #404040;
|
||||
position: absolute;
|
||||
overflow: auto;
|
||||
padding-bottom: 24px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-sider > .ant-menu {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-header {
|
||||
background: #fff;
|
||||
height: 64px;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-breadcrumb {
|
||||
margin: 7px 0 -17px 24px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-main {
|
||||
margin-left: 224px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-container {
|
||||
margin: 24px 16px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-content {
|
||||
background: #fff;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-footer {
|
||||
height; 64px;
|
||||
line-height: 64px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
background: #fff;
|
||||
border-top: 1px solid #e9e9e9;
|
||||
width: 100%;
|
||||
}</code></pre></div>
|
||||
</div>
|
||||
<div class="code-box-meta markdown">
|
||||
<div class="code-box-title">
|
||||
<a href="#demo-aside">侧边导航</a>
|
||||
</div>
|
||||
<p>顶级导航在侧边栏。</p>
|
||||
<p>侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="code-boxes-col-2-1"><div class="code-box" id="demo-top-aside">
|
||||
</div><div class="code-box" id="demo-top-aside">
|
||||
<div class="code-box-demo">
|
||||
<div id="spec-layout-demo-top-aside"></div>
|
||||
<script>mountNode = document.getElementById('spec-layout-demo-top-aside');</script>
|
||||
@@ -1394,6 +1032,344 @@ ReactDOM.render(
|
||||
<p>顶级导航在头部，次级导航在侧边栏。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div><div class="code-box" id="demo-aside">
|
||||
<div class="code-box-demo">
|
||||
<div id="spec-layout-demo-aside"></div>
|
||||
<script>mountNode = document.getElementById('spec-layout-demo-aside');</script>
|
||||
<script>(function(){"use strict";
|
||||
|
||||
var _antd = require("antd");
|
||||
|
||||
var SubMenu = _antd.Menu.SubMenu;
|
||||
|
||||
ReactDOM.render(React.createElement(
|
||||
BrowserDemo,
|
||||
null,
|
||||
React.createElement(
|
||||
"div",
|
||||
{ className: "ant-layout-aside" },
|
||||
React.createElement(
|
||||
"aside",
|
||||
{ className: "ant-layout-sider" },
|
||||
React.createElement("div", { className: "ant-layout-logo" }),
|
||||
React.createElement(
|
||||
_antd.Menu,
|
||||
{ mode: "inline", theme: "dark",
|
||||
defaultSelectedKeys: ['1'], defaultOpenKeys: ['sub1'] },
|
||||
React.createElement(
|
||||
SubMenu,
|
||||
{ key: "sub1", title: React.createElement(
|
||||
"span",
|
||||
null,
|
||||
React.createElement(_antd.Icon, { type: "user" }),
|
||||
"导航一"
|
||||
) },
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: "1" },
|
||||
"选项1"
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: "2" },
|
||||
"选项2"
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: "3" },
|
||||
"选项3"
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: "4" },
|
||||
"选项4"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
SubMenu,
|
||||
{ key: "sub2", title: React.createElement(
|
||||
"span",
|
||||
null,
|
||||
React.createElement(_antd.Icon, { type: "laptop" }),
|
||||
"导航二"
|
||||
) },
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: "5" },
|
||||
"选项5"
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: "6" },
|
||||
"选项6"
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: "7" },
|
||||
"选项7"
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: "8" },
|
||||
"选项8"
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
SubMenu,
|
||||
{ key: "sub3", title: React.createElement(
|
||||
"span",
|
||||
null,
|
||||
React.createElement(_antd.Icon, { type: "notification" }),
|
||||
"导航三"
|
||||
) },
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: "9" },
|
||||
"选项9"
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: "10" },
|
||||
"选项10"
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: "11" },
|
||||
"选项11"
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Menu.Item,
|
||||
{ key: "12" },
|
||||
"选项12"
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"div",
|
||||
{ className: "ant-layout-main" },
|
||||
React.createElement("div", { className: "ant-layout-header" }),
|
||||
React.createElement(
|
||||
"div",
|
||||
{ className: "ant-layout-breadcrumb" },
|
||||
React.createElement(
|
||||
_antd.Breadcrumb,
|
||||
null,
|
||||
React.createElement(
|
||||
_antd.Breadcrumb.Item,
|
||||
null,
|
||||
"首页"
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Breadcrumb.Item,
|
||||
null,
|
||||
"应用列表"
|
||||
),
|
||||
React.createElement(
|
||||
_antd.Breadcrumb.Item,
|
||||
null,
|
||||
"某应用"
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"div",
|
||||
{ className: "ant-layout-container" },
|
||||
React.createElement(
|
||||
"div",
|
||||
{ className: "ant-layout-content" },
|
||||
React.createElement(
|
||||
"div",
|
||||
{ style: { height: 590 } },
|
||||
"内容区域"
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
"div",
|
||||
{ className: "ant-layout-footer" },
|
||||
"Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持"
|
||||
)
|
||||
)
|
||||
)
|
||||
), document.getElementById('spec-layout-demo-aside'));})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Menu, Breadcrumb, Icon } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
|
||||
<span class="hljs-keyword">const</span> SubMenu = Menu.SubMenu;
|
||||
|
||||
ReactDOM.render(
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">BrowserDemo</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-aside"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">aside</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-sider"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-logo"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu</span> <span class="hljs-attribute">mode</span>=<span class="hljs-value">"inline"</span> <span class="hljs-attribute">theme</span>=<span class="hljs-value">"dark"</span>
|
||||
<span class="hljs-attribute">defaultSelectedKeys</span>=<span class="hljs-value">{['1']}</span> <span class="hljs-attribute">defaultOpenKeys</span>=<span class="hljs-value">{['sub1']}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">SubMenu</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"sub1"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">{<span</span>></span><span class="hljs-tag"><<span class="hljs-title">Icon</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"user"</span> /></span>导航一<span class="hljs-tag"></<span class="hljs-title">span</span>></span>}>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"1"</span>></span>选项1<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"2"</span>></span>选项2<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"3"</span>></span>选项3<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"4"</span>></span>选项4<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">SubMenu</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">SubMenu</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"sub2"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">{<span</span>></span><span class="hljs-tag"><<span class="hljs-title">Icon</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"laptop"</span> /></span>导航二<span class="hljs-tag"></<span class="hljs-title">span</span>></span>}>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"5"</span>></span>选项5<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"6"</span>></span>选项6<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"7"</span>></span>选项7<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"8"</span>></span>选项8<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">SubMenu</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">SubMenu</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"sub3"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">{<span</span>></span><span class="hljs-tag"><<span class="hljs-title">Icon</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"notification"</span> /></span>导航三<span class="hljs-tag"></<span class="hljs-title">span</span>></span>}>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"9"</span>></span>选项9<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"10"</span>></span>选项10<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"11"</span>></span>选项11<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Menu.Item</span> <span class="hljs-attribute">key</span>=<span class="hljs-value">"12"</span>></span>选项12<span class="hljs-tag"></<span class="hljs-title">Menu.Item</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">SubMenu</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">Menu</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">aside</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-main"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-header"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-breadcrumb"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Breadcrumb</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Breadcrumb.Item</span>></span>首页<span class="hljs-tag"></<span class="hljs-title">Breadcrumb.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Breadcrumb.Item</span>></span>应用列表<span class="hljs-tag"></<span class="hljs-title">Breadcrumb.Item</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Breadcrumb.Item</span>></span>某应用<span class="hljs-tag"></<span class="hljs-title">Breadcrumb.Item</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">Breadcrumb</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-container"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-content"</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{{</span> <span class="hljs-attribute">height:</span> <span class="hljs-attribute">590</span> }}></span>
|
||||
内容区域
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">className</span>=<span class="hljs-value">"ant-layout-footer"</span>></span>
|
||||
Ant Design 版权所有 © 2015 由蚂蚁金服体验技术部支持
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">BrowserDemo</span>></span>
|
||||
, document.getElementById('spec-layout-demo-aside'));</span></code></pre></div><style type="text/css">.ant-layout-aside {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-logo {
|
||||
width: 150px;
|
||||
height: 32px;
|
||||
background: #333;
|
||||
border-radius: 6px;
|
||||
margin: 16px 24px 16px 28px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-sider {
|
||||
width: 224px;
|
||||
background: #404040;
|
||||
position: absolute;
|
||||
overflow: auto;
|
||||
padding-bottom: 24px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-sider > .ant-menu {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-header {
|
||||
background: #fff;
|
||||
height: 64px;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-breadcrumb {
|
||||
margin: 7px 0 -17px 24px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-main {
|
||||
margin-left: 224px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-container {
|
||||
margin: 24px 16px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-content {
|
||||
background: #fff;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-footer {
|
||||
height; 64px;
|
||||
line-height: 64px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
background: #fff;
|
||||
border-top: 1px solid #e9e9e9;
|
||||
width: 100%;
|
||||
}</style><div class="highlight"><pre><code class="css">.ant-layout-aside {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-logo {
|
||||
width: 150px;
|
||||
height: 32px;
|
||||
background: #333;
|
||||
border-radius: 6px;
|
||||
margin: 16px 24px 16px 28px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-sider {
|
||||
width: 224px;
|
||||
background: #404040;
|
||||
position: absolute;
|
||||
overflow: auto;
|
||||
padding-bottom: 24px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-sider > .ant-menu {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-header {
|
||||
background: #fff;
|
||||
height: 64px;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-breadcrumb {
|
||||
margin: 7px 0 -17px 24px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-main {
|
||||
margin-left: 224px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-container {
|
||||
margin: 24px 16px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-content {
|
||||
background: #fff;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.ant-layout-aside .ant-layout-footer {
|
||||
height; 64px;
|
||||
line-height: 64px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
background: #fff;
|
||||
border-top: 1px solid #e9e9e9;
|
||||
width: 100%;
|
||||
}</code></pre></div>
|
||||
</div>
|
||||
<div class="code-box-meta markdown">
|
||||
<div class="code-box-title">
|
||||
<a href="#demo-aside">侧边导航</a>
|
||||
</div>
|
||||
<p>顶级导航在侧边栏。</p>
|
||||
<p>侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。</p>
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div><div class="code-box" id="demo-ceiling">
|
||||
<div class="code-box-demo">
|
||||
<div id="spec-layout-demo-ceiling"></div>
|
||||
@@ -1565,8 +1541,30 @@ ReactDOM.render(
|
||||
<span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="demos-anchor">
|
||||
<li>
|
||||
<a title="顶部导航" href="#demo-top">
|
||||
<span>顶部导航</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="顶部导航 + 侧边栏" href="#demo-top-aside">
|
||||
<span>顶部导航 + 侧边栏</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="侧边导航" href="#demo-aside">
|
||||
<span>侧边导航</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a title="吊顶规范" href="#demo-ceiling">
|
||||
<span>吊顶规范</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="api-container markdown"></div>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user