mirror of
https://github.com/wahyd4/ant-design.git
synced 2026-08-28 06:06:49 +10:00
93 lines
4.8 KiB
HTML
93 lines
4.8 KiB
HTML
<div class="code-box">
|
|
<div class="code-box-demo">
|
|
<div id="components-dropdown-demo-trigger"></div>
|
|
<script>(function(){"use strict";
|
|
|
|
var Menu = antd.Menu;
|
|
var Dropdown = antd.Dropdown;
|
|
|
|
var menu = React.createElement(
|
|
Menu,
|
|
null,
|
|
React.createElement(
|
|
Menu.Item,
|
|
{ key: "0" },
|
|
React.createElement(
|
|
"a",
|
|
{ href: "http://www.alipay.com/" },
|
|
"第一个菜单项"
|
|
)
|
|
),
|
|
React.createElement(
|
|
Menu.Item,
|
|
{ key: "1" },
|
|
React.createElement(
|
|
"a",
|
|
{ href: "http://www.taobao.com/" },
|
|
"第二个菜单项"
|
|
)
|
|
),
|
|
React.createElement(Menu.Divider, null),
|
|
React.createElement(
|
|
Menu.Item,
|
|
{ key: "3" },
|
|
"第三个菜单项"
|
|
)
|
|
);
|
|
|
|
React.render(React.createElement(
|
|
"div",
|
|
null,
|
|
React.createElement(
|
|
Dropdown,
|
|
{ overlay: menu, trigger: "click" },
|
|
React.createElement(
|
|
"button",
|
|
{ className: "ant-btn ant-btn-primary ant-btn-menu" },
|
|
"点击触发 ",
|
|
React.createElement("i", { className: "anticon anticon-down" })
|
|
)
|
|
),
|
|
React.createElement(
|
|
Dropdown,
|
|
{ overlay: menu },
|
|
React.createElement(
|
|
"button",
|
|
{ className: "ant-btn ant-btn-menu" },
|
|
"鼠标移入 ",
|
|
React.createElement("i", { className: "anticon anticon-down" })
|
|
)
|
|
)
|
|
), document.getElementById('components-dropdown-demo-trigger'));})()</script><div class="highlight"><pre><code class="javascript"><span class="keyword">var</span> Menu = antd.Menu;
|
|
<span class="keyword">var</span> Dropdown = antd.Dropdown;
|
|
|
|
<span class="keyword">var</span> menu = <span class="xml"><span class="tag"><<span class="title">Menu</span>></span>
|
|
<span class="tag"><<span class="title">Menu.Item</span> <span class="attribute">key</span>=<span class="value">"0"</span>></span>
|
|
<span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"http://www.alipay.com/"</span>></span>第一个菜单项<span class="tag"></<span class="title">a</span>></span>
|
|
<span class="tag"></<span class="title">Menu.Item</span>></span>
|
|
<span class="tag"><<span class="title">Menu.Item</span> <span class="attribute">key</span>=<span class="value">"1"</span>></span>
|
|
<span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"http://www.taobao.com/"</span>></span>第二个菜单项<span class="tag"></<span class="title">a</span>></span>
|
|
<span class="tag"></<span class="title">Menu.Item</span>></span>
|
|
<span class="tag"><<span class="title">Menu.Divider</span>/></span>
|
|
<span class="tag"><<span class="title">Menu.Item</span> <span class="attribute">key</span>=<span class="value">"3"</span>></span>第三个菜单项<span class="tag"></<span class="title">Menu.Item</span>></span>
|
|
<span class="tag"></<span class="title">Menu</span>></span>;</span>
|
|
|
|
React.render(<span class="xml"><span class="tag"><<span class="title">div</span>></span>
|
|
<span class="tag"><<span class="title">Dropdown</span> <span class="attribute">overlay</span>=<span class="value">{menu}</span> <span class="attribute">trigger</span>=<span class="value">"click"</span>></span>
|
|
<span class="tag"><<span class="title">button</span> <span class="attribute">className</span>=<span class="value">"ant-btn ant-btn-primary ant-btn-menu"</span>></span>
|
|
点击触发 <span class="tag"><<span class="title">i</span> <span class="attribute">className</span>=<span class="value">"anticon anticon-down"</span>></span><span class="tag"></<span class="title">i</span>></span>
|
|
<span class="tag"></<span class="title">button</span>></span>
|
|
<span class="tag"></<span class="title">Dropdown</span>></span>
|
|
<span class="tag"><<span class="title">Dropdown</span> <span class="attribute">overlay</span>=<span class="value">{menu}</span>></span>
|
|
<span class="tag"><<span class="title">button</span> <span class="attribute">className</span>=<span class="value">"ant-btn ant-btn-menu"</span>></span>
|
|
鼠标移入 <span class="tag"><<span class="title">i</span> <span class="attribute">className</span>=<span class="value">"anticon anticon-down"</span>></span><span class="tag"></<span class="title">i</span>></span>
|
|
<span class="tag"></<span class="title">button</span>></span>
|
|
<span class="tag"></<span class="title">Dropdown</span>></span>
|
|
<span class="tag"></<span class="title">div</span>></span>, document.getElementById('components-dropdown-demo-trigger'));</span></code></pre></div>
|
|
</div>
|
|
<div class="code-box-meta markdown">
|
|
<div class="code-box-title">触发方式</div>
|
|
<p>点击或鼠标移入触发。</p>
|
|
<span class="collapse anticon anticon-circle-o-right"></span>
|
|
</div>
|
|
</div> |