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