同样的方法继续点击 “button”，就能一层一层看到具体是怎么写的。如果想深入了解可以看一看。
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：
type
->
shape
->
size
->
loading
->
disabled
。
3.1 type
default ：可以不写type属性，默认的样式。白色背景，文字黑色，鼠标悬停变边框和文字变为蓝色。
primary ：蓝色背景，文字白色。
dashed ：与default不同的是 边框为虚线
text：文本黑色，没有背景。
link：文本蓝色，没有背景。为点击文本跳转使用
ghost：虽然算是一种type但是与以上几种不同，type="ghost"无效。需要讲ghost写出属性
<Button ghost>
,幽灵按钮将按钮的内容反色，背景变为透明，常用在有色背景上。也可和其它的类型一起使用。
danger：在其他样式框架中（如elementUI）中都是作为type的一种类型，只是颜色变成了红色。但是在Ant Design中被作为一种属性。但是我也把它放到type中了，
<Button danger>
import { Button } from 'antd';
ReactDOM.render(
{/* primary */}
<Button type="primary">Primary Button</Button>
{/* default */}
<Button>Default Button</Button>
{/* dashed */}
<Button type="dashed">Dashed Button</Button> <br />
{/* text */}
<Button type="text">Text Button</Button>
{/* link */}
<Button type="link">Link Button</Button>
</>, mountNode, );
<Button type="primary" ghost>Primary</Button>
<Button ghost>Primary</Button>
<Button type="dashed" ghost>dashed</Button>
<Button type="primary" danger> Primary </Button>
<Button danger>Default</Button>
<Button type="dashed" danger> Dashed </Button>
<Button type="text" danger> Text </Button>
<Button type="link" danger> Link </Button>
3.2 shape
默认是矩形
circle是圆形
round圆角矩形
<Button>Default</Button>
<Button type="primary" shape="round">Round</Button>
<Button type="primary" shape="circle">Circle</Button>
3.3 size
small：小
不写：默认
large：大
<Button size="small">Small</Button>
<Button >Default</Button>
<Button size="large">Large</Button>
3.4 按钮使用图标
这也就是图标的使用
图标的使用请看另一篇文章
SearchOutlined是搜索的图标 🔍
import { SearchOutlined } from '@ant-design/icons';
可以为Button添加icon属性或者在Button内部写入Icon(能控制图标的位置)
<Button icon={<SearchOutlined/>}>
<Button><SearchOutlined/></Button>
3.5 禁止按钮 disabled
<Button type="dashed" disabled> Dashed(disabled) </Button>
3.6 Block按钮
就是适应父元素的大小
<Button type="primary" block> Primary </Button>
3.7 loading按钮
loading默认为true,可以赋值true/false
<Button type="primary" size="small" loading> Loading </Button>
<Button type="primary" size="small" loading={true}> Loading </Button>
<Button type="primary" size="small" loading={false}> Loading </Button>
4. 官网代码
4.1 点击 large、default、small 按钮变换所有按钮的大小
import { Button, Radio } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';
class ButtonSize extends React.Component {
state = {
size: 'large',
handleSizeChange = e => {
this.setState({ size: e.target.value });
render() {
const { size } = this.state;
return (
{/* 放到单选按钮组中 只能点击其中的一个按钮 onChange触发函数 */}
<Radio.Group value={size} onChange={this.handleSizeChange}>
<Radio.Button value="large">Large</Radio.Button>
<Radio.Button value="default">Default</Radio.Button>
<Radio.Button value="small">Small</Radio.Button>
</Radio.Group>
{/* 下面的按钮的size属性都是这个变量，按钮点击后size变量改变，属性也就改变了 */}
<Button type="primary" size={size}>
Primary
</Button>
<Button size={size}>Default</Button>
<Button type="dashed" size={size}>
Dashed
</Button>
<Button type="link" size={size}>
</Button>
<Button type="primary" icon={<DownloadOutlined />} size={size} />
<Button type="primary" shape="circle" icon={<DownloadOutlined />} size={size} />
<Button type="primary" shape="round" icon={<DownloadOutlined />} size={size} />
<Button type="primary" shape="round" icon={<DownloadOutlined />} size={size}>
Download
</Button>
<Button type="primary" icon={<DownloadOutlined />} size={size}>
Download
</Button>
ReactDOM.render(<ButtonSize />, mountNode);
4.2 按钮点击后加载，六秒后结束
import { Button } from 'antd';
import { PoweroffOutlined } from '@ant-design/icons';
class App extends React.Component {
state = {
loadings: [],
enterLoading = index => {
this.setState(({ loadings }) => {
const newLoadings = [...loadings];
newLoadings[index] = true;
return {
loadings: newLoadings,
setTimeout(() => {
this.setState(({ loadings }) => {
const newLoadings = [...loadings];
newLoadings[index] = false;
return {
loadings: newLoadings,
}, 6000);
render() {
const { loadings } = this.state;
return (
{/* loading是loadings数组的第一个值 点击按钮调用enterLoading方法并把索引0作为参数*/}
<Button type="primary" loading={loadings[0]} onClick={() => this.enterLoading(0)}>
Click me!
</Button>
<Button
type="primary"
icon={<PoweroffOutlined />}
loading={loadings[1]}
onClick={() => this.enterLoading(1)}
Click me!
</Button>
<Button
type="primary"
icon={<PoweroffOutlined />}
loading={loadings[2]}
onClick={() => this.enterLoading(2)}
ReactDOM.render(<App />, mountNode);
复制代码
