mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 22:36:31 +08:00
* css: fix icon size in button, close: #4023 * test: update snapshot for Button demo
This commit is contained in:
Benjy Cui
偏右
parent
5370df346c
commit
f3ffae9e54
@ -53,20 +53,6 @@ ReactDOM.render(
|
||||
<Button type="primary" icon="cloud" />
|
||||
<Button type="primary" icon="cloud-download" />
|
||||
</ButtonGroup>
|
||||
|
||||
<h4>Size</h4>
|
||||
<ButtonGroup size="large">
|
||||
<Button type="ghost">Large</Button>
|
||||
<Button type="ghost">Large</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup>
|
||||
<Button type="ghost">Default</Button>
|
||||
<Button type="ghost">Default</Button>
|
||||
</ButtonGroup>
|
||||
<ButtonGroup size="small">
|
||||
<Button type="ghost">Small</Button>
|
||||
<Button type="ghost">Small</Button>
|
||||
</ButtonGroup>
|
||||
</div>,
|
||||
mountNode
|
||||
);
|
||||
@ -85,8 +71,4 @@ ReactDOM.render(
|
||||
#components-button-demo-button-group .ant-btn-group {
|
||||
margin-right: 8px;
|
||||
}
|
||||
#components-button-demo-button-group .ant-btn {
|
||||
margin-bottom: 12px;
|
||||
margin-right: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -18,14 +18,43 @@ Ant Design supports a default button size as well as a large and small size.
|
||||
If a large or small button is desired, set the `size` property to either `large` or `small` respectively. Omit the `size` property for a button with the default size.
|
||||
|
||||
````jsx
|
||||
import { Button } from 'antd';
|
||||
import { Button, Radio, Icon } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Button type="primary" size="large">Large</Button>
|
||||
<Button type="primary">Default</Button>
|
||||
<Button type="primary" size="small">Small</Button>
|
||||
</div>,
|
||||
mountNode
|
||||
);
|
||||
class ButtonSize extends React.Component {
|
||||
state = {
|
||||
size: 'default',
|
||||
};
|
||||
|
||||
handleSizeChange = (e) => {
|
||||
this.setState({ size: e.target.value });
|
||||
}
|
||||
|
||||
render() {
|
||||
const size = this.state.size;
|
||||
return (
|
||||
<div>
|
||||
<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>
|
||||
<br /><br />
|
||||
<Button type="primary" shape="circle" icon="download" size={size} />
|
||||
<Button type="primary" icon="download" size={size}>Download</Button>
|
||||
<Button type="primary" size={size}>Normal</Button>
|
||||
<br />
|
||||
<Button.Group size={size}>
|
||||
<Button type="primary">
|
||||
<Icon type="left" />Backward
|
||||
</Button>
|
||||
<Button type="primary">
|
||||
Forward<Icon type="right" />
|
||||
</Button>
|
||||
</Button.Group>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<ButtonSize />, mountNode);
|
||||
````
|
||||
|
||||
@ -31,4 +31,7 @@ onClick | set the handler to handle `click` event | function | -
|
||||
margin-right: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
[id^="components-button-demo-"] .ant-btn-group > .ant-btn {
|
||||
margin-right: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -34,4 +34,7 @@ onClick | `click` 事件的 handler | function | -
|
||||
margin-right: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
[id^="components-button-demo-"] .ant-btn-group > .ant-btn {
|
||||
margin-right: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -101,27 +101,27 @@
|
||||
}
|
||||
|
||||
&-clicked:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
bottom: -1px;
|
||||
right: -1px;
|
||||
border-radius: inherit;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
bottom: -1px;
|
||||
right: -1px;
|
||||
border-radius: inherit;
|
||||
border: 0 solid @primary-color;
|
||||
opacity: 0.4;
|
||||
opacity: 0.4;
|
||||
animation: buttonEffect 0.36s ease-out forwards;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes buttonEffect {
|
||||
to {
|
||||
opacity: 0;
|
||||
to {
|
||||
opacity: 0;
|
||||
top: -6px;
|
||||
left: -6px;
|
||||
bottom: -6px;
|
||||
right: -6px;
|
||||
left: -6px;
|
||||
bottom: -6px;
|
||||
right: -6px;
|
||||
border-width: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,6 +6,12 @@
|
||||
border-radius: @border-radius;
|
||||
}
|
||||
|
||||
.button-nested-icon(@icon-size) {
|
||||
> .@{iconfont-css-prefix} {
|
||||
font-size: @icon-size;
|
||||
}
|
||||
}
|
||||
|
||||
.button-disabled() {
|
||||
&.disabled,
|
||||
&[disabled] {
|
||||
@ -88,10 +94,12 @@
|
||||
// size
|
||||
&-lg > .@{btnClassName} {
|
||||
.button-size(@btn-padding-lg; @btn-font-size-lg; @btn-border-radius-base);
|
||||
.button-nested-icon(@btn-font-size-lg + 2);
|
||||
}
|
||||
|
||||
&-sm > .@{btnClassName} {
|
||||
.button-size(@btn-padding-sm; @font-size-base; @btn-border-radius-sm);
|
||||
.button-nested-icon(@font-size-base);
|
||||
> .@{iconfont-css-prefix} {
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
@ -112,6 +120,7 @@
|
||||
white-space: nowrap;
|
||||
line-height: @line-height-base;
|
||||
.button-size(@btn-padding-base; @font-size-base; @btn-border-radius-base);
|
||||
.button-nested-icon(@font-size-base + 2);
|
||||
user-select: none;
|
||||
transition: all .3s @ease-in-out;
|
||||
position: relative;
|
||||
@ -145,10 +154,12 @@
|
||||
|
||||
&-lg {
|
||||
.button-size(@btn-padding-lg; @btn-font-size-lg; @btn-border-radius-base);
|
||||
.button-nested-icon(@btn-font-size-lg + 2);
|
||||
}
|
||||
|
||||
&-sm {
|
||||
.button-size(@btn-padding-sm; @font-size-base; @btn-border-radius-sm);
|
||||
.button-nested-icon(@font-size-base);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -150,60 +150,6 @@ exports[`test renders ./components/button/demo/button-group.md correctly 1`] = `
|
||||
class="anticon anticon-cloud-download" />
|
||||
</button>
|
||||
</div>
|
||||
<h4>
|
||||
Size
|
||||
</h4>
|
||||
<div
|
||||
class="ant-btn-group ant-btn-group-lg">
|
||||
<button
|
||||
class="ant-btn ant-btn-ghost"
|
||||
type="button">
|
||||
<span>
|
||||
Large
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-ghost"
|
||||
type="button">
|
||||
<span>
|
||||
Large
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-btn-group">
|
||||
<button
|
||||
class="ant-btn ant-btn-ghost"
|
||||
type="button">
|
||||
<span>
|
||||
Default
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-ghost"
|
||||
type="button">
|
||||
<span>
|
||||
Default
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-btn-group ant-btn-group-sm">
|
||||
<button
|
||||
class="ant-btn ant-btn-ghost"
|
||||
type="button">
|
||||
<span>
|
||||
Small
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-ghost"
|
||||
type="button">
|
||||
<span>
|
||||
Small
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -411,26 +357,97 @@ exports[`test renders ./components/button/demo/multiple.md correctly 1`] = `
|
||||
|
||||
exports[`test renders ./components/button/demo/size.md correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="ant-radio-group">
|
||||
<label
|
||||
class="ant-radio-button-wrapper">
|
||||
<span
|
||||
class="ant-radio-button">
|
||||
<span
|
||||
class="ant-radio-button-inner" />
|
||||
<input
|
||||
class="ant-radio-button-input"
|
||||
type="radio" />
|
||||
</span>
|
||||
<span>
|
||||
Large
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked">
|
||||
<span
|
||||
class="ant-radio-button ant-radio-button-checked ant-radio-button ant-radio-button-checked ant-radio-button-checked-1">
|
||||
<span
|
||||
class="ant-radio-button-inner" />
|
||||
<input
|
||||
checked=""
|
||||
class="ant-radio-button-input"
|
||||
type="radio" />
|
||||
</span>
|
||||
<span>
|
||||
Default
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-button-wrapper">
|
||||
<span
|
||||
class="ant-radio-button">
|
||||
<span
|
||||
class="ant-radio-button-inner" />
|
||||
<input
|
||||
class="ant-radio-button-input"
|
||||
type="radio" />
|
||||
</span>
|
||||
<span>
|
||||
Small
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-lg"
|
||||
class="ant-btn ant-btn-primary ant-btn-circle ant-btn-icon-only"
|
||||
type="button">
|
||||
<i
|
||||
class="anticon anticon-download" />
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button">
|
||||
<i
|
||||
class="anticon anticon-download" />
|
||||
<span>
|
||||
Large
|
||||
Download
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button">
|
||||
<span>
|
||||
Default
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-sm"
|
||||
type="button">
|
||||
<span>
|
||||
Small
|
||||
Normal
|
||||
</span>
|
||||
</button>
|
||||
<br />
|
||||
<div
|
||||
class="ant-btn-group">
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button">
|
||||
<i
|
||||
class="anticon anticon-left" />
|
||||
<span>
|
||||
Backward
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button">
|
||||
<span>
|
||||
Forward
|
||||
</span>
|
||||
<i
|
||||
class="anticon anticon-right" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user