mirror of
https://github.com/wahyd4/ant-design.git
synced 2026-08-23 19:56:20 +10:00
35 lines
3.2 KiB
HTML
35 lines
3.2 KiB
HTML
<div class="code-box">
|
|
<div class="code-box-demo">
|
|
<div id="components-button-demo-basic"></div>
|
|
<div class="nico-insert-code"><button class="ant-btn">Button</button>
|
|
<a href="javascript:;" class="ant-btn" role="button">Link</a>
|
|
<input class="ant-btn" type="button" value="Input" />
|
|
<input class="ant-btn" type="submit" value="Submit" />
|
|
|
|
<br>
|
|
|
|
<!-- Styled Button -->
|
|
<button class="ant-btn ant-btn-primary">主按钮</button>
|
|
<button class="ant-btn">次按钮</button>
|
|
<button class="ant-btn ant-btn-ghost">幽灵按钮</button></div><div class="highlight"><pre><code class="xml"><span class="tag"><<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"ant-btn"</span>></span>Button<span class="tag"></<span class="title">button</span>></span>
|
|
<span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"javascript:;"</span> <span class="attribute">class</span>=<span class="value">"ant-btn"</span> <span class="attribute">role</span>=<span class="value">"button"</span>></span>Link<span class="tag"></<span class="title">a</span>></span>
|
|
<span class="tag"><<span class="title">input</span> <span class="attribute">class</span>=<span class="value">"ant-btn"</span> <span class="attribute">type</span>=<span class="value">"button"</span> <span class="attribute">value</span>=<span class="value">"Input"</span> /></span>
|
|
<span class="tag"><<span class="title">input</span> <span class="attribute">class</span>=<span class="value">"ant-btn"</span> <span class="attribute">type</span>=<span class="value">"submit"</span> <span class="attribute">value</span>=<span class="value">"Submit"</span> /></span>
|
|
|
|
<span class="tag"><<span class="title">br</span>></span>
|
|
|
|
<span class="comment"><!-- Styled Button --></span>
|
|
<span class="tag"><<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"ant-btn ant-btn-primary"</span>></span>主按钮<span class="tag"></<span class="title">button</span>></span>
|
|
<span class="tag"><<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"ant-btn"</span>></span>次按钮<span class="tag"></<span class="title">button</span>></span>
|
|
<span class="tag"><<span class="title">button</span> <span class="attribute">class</span>=<span class="value">"ant-btn ant-btn-ghost"</span>></span>幽灵按钮<span class="tag"></<span class="title">button</span>></span></code></pre></div>
|
|
</div>
|
|
<div class="code-box-meta markdown">
|
|
<div class="code-box-title">标准按钮</div>
|
|
<p>为 <code><button></code> <code><a></code> 或 <code><input></code> 元素添加 <code>.ant-btn</code> 类即可使用 ant-design 提供的样式。</p>
|
|
<p>另外，通过使用下面的类可创建带有预定义样式的按钮，我们通过样式来显示重要程度的不同。</p>
|
|
<p><code>.ant-btn-primary</code> <code>.ant-btn-ghost</code></p>
|
|
<p>其中 <code>.ant-btn</code> 类定义了按钮的默认样式，语义上代表次按钮。</p>
|
|
<p><strong>注</strong>: 当按钮文字为两个字时，中间需要<strong>间隔一个字符</strong>。</p>
|
|
<span class="collapse anticon anticon-circle-o-right"></span>
|
|
</div>
|
|
</div> |