mirror of
https://github.com/wahyd4/ant-design.git
synced 2026-08-22 19:28:47 +10:00
77 lines
3.9 KiB
HTML
77 lines
3.9 KiB
HTML
<div class="code-box">
|
|
<div class="code-box-demo">
|
|
<div id="components-collapse-demo-basic"></div>
|
|
<script>(function(){"use strict";
|
|
|
|
var Collapse = antd.Collapse;
|
|
var Panel = Collapse.Panel;
|
|
|
|
function callback(key) {
|
|
console.log(key);
|
|
}
|
|
|
|
var text = "\n A dog is a type of domesticated animal.\n Known for its loyalty and faithfulness,\n it can be found as a welcome guest in many households across the world.\n";
|
|
|
|
React.render(React.createElement(
|
|
Collapse,
|
|
{ defaultActiveKey: ["1"], onChange: callback },
|
|
React.createElement(
|
|
Panel,
|
|
{ header: "This is panel header 1", key: "1" },
|
|
React.createElement(
|
|
"p",
|
|
null,
|
|
text
|
|
)
|
|
),
|
|
React.createElement(
|
|
Panel,
|
|
{ header: "This is panel header 2", key: "2" },
|
|
React.createElement(
|
|
"p",
|
|
null,
|
|
text
|
|
)
|
|
),
|
|
React.createElement(
|
|
Panel,
|
|
{ header: "This is panel header 3", key: "3" },
|
|
React.createElement(
|
|
"p",
|
|
null,
|
|
text
|
|
)
|
|
)
|
|
), document.getElementById('components-collapse-demo-basic'));})()</script><div class="highlight"><pre><code class="javascript"><span class="keyword">var</span> Collapse = antd.Collapse;
|
|
<span class="keyword">var</span> Panel = Collapse.Panel;
|
|
|
|
<span class="function"><span class="keyword">function</span> <span class="title">callback</span><span class="params">(key)</span> {</span>
|
|
console.log(key);
|
|
}
|
|
|
|
<span class="keyword">var</span> text = `
|
|
A dog is a type of domesticated animal.
|
|
Known <span class="keyword">for</span> its loyalty and faithfulness,
|
|
it can be found as a welcome guest <span class="keyword">in</span> many households across the world.
|
|
`;
|
|
|
|
React.render(
|
|
<span class="xml"><span class="tag"><<span class="title">Collapse</span> <span class="attribute">defaultActiveKey</span>=<span class="value">{["1"]}</span> <span class="attribute">onChange</span>=<span class="value">{callback}</span>></span>
|
|
<span class="tag"><<span class="title">Panel</span> <span class="attribute">header</span>=<span class="value">{`This</span> <span class="attribute">is</span> <span class="attribute">panel</span> <span class="attribute">header</span> <span class="attribute">1</span>`} <span class="attribute">key</span>=<span class="value">"1"</span>></span>
|
|
<span class="tag"><<span class="title">p</span>></span>{text}<span class="tag"></<span class="title">p</span>></span>
|
|
<span class="tag"></<span class="title">Panel</span>></span>
|
|
<span class="tag"><<span class="title">Panel</span> <span class="attribute">header</span>=<span class="value">{`This</span> <span class="attribute">is</span> <span class="attribute">panel</span> <span class="attribute">header</span> <span class="attribute">2</span>`} <span class="attribute">key</span>=<span class="value">"2"</span>></span>
|
|
<span class="tag"><<span class="title">p</span>></span>{text}<span class="tag"></<span class="title">p</span>></span>
|
|
<span class="tag"></<span class="title">Panel</span>></span>
|
|
<span class="tag"><<span class="title">Panel</span> <span class="attribute">header</span>=<span class="value">{`This</span> <span class="attribute">is</span> <span class="attribute">panel</span> <span class="attribute">header</span> <span class="attribute">3</span>`} <span class="attribute">key</span>=<span class="value">"3"</span>></span>
|
|
<span class="tag"><<span class="title">p</span>></span>{text}<span class="tag"></<span class="title">p</span>></span>
|
|
<span class="tag"></<span class="title">Panel</span>></span>
|
|
<span class="tag"></<span class="title">Collapse</span>></span>
|
|
, document.getElementById('components-collapse-demo-basic'));</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> |