mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-12 04:13:13 +08:00
chore: 迁移 button iconfont
- 手动加上 margin-right 8px
This commit is contained in:
elrrrrrrr
parent
a85898da62
commit
bcc4265201
@ -10,69 +10,75 @@
|
||||
|
||||
---
|
||||
|
||||
````html
|
||||
<h4>基本组合</h4>
|
||||
<div class="ant-btn-group">
|
||||
<button class="ant-btn ant-btn-primary">确 定</button>
|
||||
<button class="ant-btn ant-btn-primary">取 消</button>
|
||||
</div>
|
||||
<div class="ant-btn-group">
|
||||
<button class="ant-btn">左</button>
|
||||
<button class="ant-btn">中</button>
|
||||
<button class="ant-btn">右</button>
|
||||
</div>
|
||||
<div class="ant-btn-group">
|
||||
<button class="ant-btn ant-btn-primary">左</button>
|
||||
<button class="ant-btn ant-btn-ghost">中</button>
|
||||
<button class="ant-btn ant-btn-ghost">中</button>
|
||||
<button class="ant-btn">右</button>
|
||||
</div>
|
||||
<h4>带图标按钮组合 </h4>
|
||||
<div class="ant-btn-group">
|
||||
<button class="ant-btn ant-btn-primary">
|
||||
<span class="anticon anticon-left"></span>
|
||||
<span>后 退</span>
|
||||
</button>
|
||||
<button class="ant-btn ant-btn-primary">
|
||||
<span>前 进</span>
|
||||
<span class="anticon anticon-right"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="ant-btn-group">
|
||||
<button class="ant-btn ant-btn-primary">
|
||||
<span class="anticon anticon-cloud"></span>
|
||||
</button>
|
||||
<button class="ant-btn ant-btn-primary">
|
||||
<span class="anticon anticon-cloud-download"></span>
|
||||
</button>
|
||||
</div>
|
||||
<h4>多个组合</h4>
|
||||
<div class="ant-btn-group">
|
||||
<button class="ant-btn ant-btn-ghost">1</button>
|
||||
<button class="ant-btn ant-btn-ghost">2</button>
|
||||
<button class="ant-btn ant-btn-ghost">3</button>
|
||||
<button class="ant-btn ant-btn-ghost">4</button>
|
||||
<button class="ant-btn ant-btn-ghost">
|
||||
<span>前 进</span>
|
||||
<span class="anticon anticon-right"></span>
|
||||
</button>
|
||||
</div>
|
||||
<h4>尺寸</h4>
|
||||
<div class="ant-btn-group ant-btn-group-lg">
|
||||
<button class="ant-btn ant-btn-ghost">大</button>
|
||||
<button class="ant-btn ant-btn-ghost">大</button>
|
||||
<button class="ant-btn ant-btn-ghost">大</button>
|
||||
</div>
|
||||
<div class="ant-btn-group">
|
||||
<button class="ant-btn ant-btn-ghost">默 认</button>
|
||||
<button class="ant-btn ant-btn-ghost">默 认</button>
|
||||
<button class="ant-btn ant-btn-ghost">默 认</button>
|
||||
</div>
|
||||
<div class="ant-btn-group ant-btn-group-sm">
|
||||
<button class="ant-btn ant-btn-ghost">小</button>
|
||||
<button class="ant-btn ant-btn-ghost">小</button>
|
||||
<button class="ant-btn ant-btn-ghost">小</button>
|
||||
````jsx
|
||||
var Icon = antd.Icon;
|
||||
|
||||
React.render(
|
||||
<div className="nico-insert-code">
|
||||
<h4>基本组合</h4>
|
||||
<div className="ant-btn-group">
|
||||
<button className="ant-btn ant-btn-primary">确 定</button>
|
||||
<button className="ant-btn ant-btn-primary">取 消</button>
|
||||
</div>
|
||||
<div className="ant-btn-group">
|
||||
<button className="ant-btn">左</button>
|
||||
<button className="ant-btn">中</button>
|
||||
<button className="ant-btn">右</button>
|
||||
</div>
|
||||
<div className="ant-btn-group">
|
||||
<button className="ant-btn ant-btn-primary">左</button>
|
||||
<button className="ant-btn ant-btn-ghost">中</button>
|
||||
<button className="ant-btn ant-btn-ghost">中</button>
|
||||
<button className="ant-btn">右</button>
|
||||
</div>
|
||||
<h4>带图标按钮组合 </h4>
|
||||
<div className="ant-btn-group">
|
||||
<button className="ant-btn ant-btn-primary">
|
||||
<Icon type="left" />
|
||||
<span>后 退</span>
|
||||
</button>
|
||||
<button className="ant-btn ant-btn-primary">
|
||||
<span>前 进</span>
|
||||
<Icon type="right" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="ant-btn-group">
|
||||
<button className="ant-btn ant-btn-primary">
|
||||
<Icon type="cloud" />
|
||||
</button>
|
||||
<button className="ant-btn ant-btn-primary">
|
||||
<Icon type="cloud-download" />
|
||||
</button>
|
||||
</div>
|
||||
<h4>多个组合</h4>
|
||||
<div className="ant-btn-group">
|
||||
<button className="ant-btn ant-btn-ghost">1</button>
|
||||
<button className="ant-btn ant-btn-ghost">2</button>
|
||||
<button className="ant-btn ant-btn-ghost">3</button>
|
||||
<button className="ant-btn ant-btn-ghost">4</button>
|
||||
<button className="ant-btn ant-btn-ghost">
|
||||
<span>前 进</span>
|
||||
<Icon type="right" />
|
||||
</button>
|
||||
</div>
|
||||
<h4>尺寸</h4>
|
||||
<div className="ant-btn-group ant-btn-group-lg">
|
||||
<button className="ant-btn ant-btn-ghost">大</button>
|
||||
<button className="ant-btn ant-btn-ghost">大</button>
|
||||
<button className="ant-btn ant-btn-ghost">大</button>
|
||||
</div>
|
||||
<div className="ant-btn-group">
|
||||
<button className="ant-btn ant-btn-ghost">默 认</button>
|
||||
<button className="ant-btn ant-btn-ghost">默 认</button>
|
||||
<button className="ant-btn ant-btn-ghost">默 认</button>
|
||||
</div>
|
||||
<div className="ant-btn-group ant-btn-group-sm">
|
||||
<button className="ant-btn ant-btn-ghost">小</button>
|
||||
<button className="ant-btn ant-btn-ghost">小</button>
|
||||
<button className="ant-btn ant-btn-ghost">小</button>
|
||||
</div>
|
||||
</div>
|
||||
, document.getElementById('components-button-demo-button-group'));
|
||||
````
|
||||
|
||||
<style>
|
||||
@ -88,4 +94,7 @@
|
||||
.nico-insert-code .ant-btn {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.nico-insert-code .ant-btn-group {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -6,40 +6,53 @@
|
||||
|
||||
---
|
||||
|
||||
````html
|
||||
<button class="ant-btn ant-btn-primary ant-btn-circle ant-btn-lg">
|
||||
<i class="anticon anticon-search"></i>
|
||||
</button>
|
||||
<button class="ant-btn ant-btn-primary ant-btn-lg">
|
||||
<i class="anticon anticon-search"></i>
|
||||
大按钮
|
||||
</button>
|
||||
````jsx
|
||||
var Icon = antd.Icon;
|
||||
|
||||
<button class="ant-btn ant-btn-primary ant-btn-circle">
|
||||
<i class="anticon anticon-search"></i>
|
||||
</button>
|
||||
<button class="ant-btn ant-btn-primary">
|
||||
<i class="anticon anticon-search"></i>
|
||||
中按钮
|
||||
</button>
|
||||
React.render(
|
||||
<div className="nico-insert-code">
|
||||
<button className="ant-btn ant-btn-primary ant-btn-circle ant-btn-lg">
|
||||
<i className="anticon anticon-search"></i>
|
||||
</button>
|
||||
<button className="ant-btn ant-btn-primary ant-btn-lg">
|
||||
<i className="anticon anticon-search"></i>
|
||||
大按钮
|
||||
</button>
|
||||
|
||||
<button class="ant-btn ant-btn-primary ant-btn-circle ant-btn-sm">
|
||||
<i class="anticon anticon-search"></i>
|
||||
</button>
|
||||
<button class="ant-btn ant-btn-primary ant-btn-sm">
|
||||
<i class="anticon anticon-search"></i>
|
||||
小按钮
|
||||
</button>
|
||||
<button className="ant-btn ant-btn-primary ant-btn-circle">
|
||||
<i className="anticon anticon-search"></i>
|
||||
</button>
|
||||
<button className="ant-btn ant-btn-primary">
|
||||
<i className="anticon anticon-search"></i>
|
||||
中按钮
|
||||
</button>
|
||||
|
||||
<p></p>
|
||||
<button className="ant-btn ant-btn-primary ant-btn-circle ant-btn-sm">
|
||||
<i className="anticon anticon-search"></i>
|
||||
</button>
|
||||
<button className="ant-btn ant-btn-primary ant-btn-sm">
|
||||
<i className="anticon anticon-search"></i>
|
||||
小按钮
|
||||
</button>
|
||||
|
||||
<p></p>
|
||||
|
||||
<button className="ant-btn ant-btn-ghost ant-btn-circle-outline ant-btn-lg">
|
||||
<i className="anticon anticon-search"></i>
|
||||
</button>
|
||||
<button className="ant-btn ant-btn-ghost ant-btn-circle-outline">
|
||||
<i className="anticon anticon-search"></i>
|
||||
</button>
|
||||
<button className="ant-btn ant-btn-circle-outline ant-btn-sm">
|
||||
<i className="anticon anticon-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
, document.getElementById('components-button-demo-icon'));
|
||||
|
||||
<button class="ant-btn ant-btn-ghost ant-btn-circle-outline ant-btn-lg">
|
||||
<i class="anticon anticon-search"></i>
|
||||
</button>
|
||||
<button class="ant-btn ant-btn-ghost ant-btn-circle-outline">
|
||||
<i class="anticon anticon-search"></i>
|
||||
</button>
|
||||
<button class="ant-btn ant-btn-circle-outline ant-btn-sm">
|
||||
<i class="anticon anticon-search"></i>
|
||||
</button>
|
||||
````
|
||||
<style>
|
||||
.nico-insert-code .ant-btn {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -8,12 +8,18 @@
|
||||
|
||||
---
|
||||
|
||||
````html
|
||||
<button class="ant-btn ant-btn-primary ant-btn-menu">
|
||||
<span>菜单按钮</span>
|
||||
<span class="anticon anticon-down"></span>
|
||||
</button>
|
||||
<button class="ant-btn ant-btn-ghost ant-btn-circle ant-btn-menu">
|
||||
<span class="anticon anticon-down"></span>
|
||||
</button>
|
||||
````jsx
|
||||
var Icon = antd.Icon;
|
||||
|
||||
React.render(
|
||||
<div className="nico-insert-code">
|
||||
<button className="ant-btn ant-btn-primary ant-btn-menu">
|
||||
<span>菜单按钮</span>
|
||||
<Icon type="down" />
|
||||
</button>
|
||||
<button className="ant-btn ant-btn-ghost ant-btn-circle ant-btn-menu">
|
||||
<Icon type="down" />
|
||||
</button>
|
||||
</div>
|
||||
, document.getElementById('components-button-demo-menu'));
|
||||
````
|
||||
|
||||
Loading…
Reference in New Issue
Block a user