mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-12 23:35:38 +08:00
1.4 KiB
1.4 KiB
order | title | ||||
---|---|---|---|---|---|
2 |
|
zh-CN
位置有 4 个方向。
en-US
There are 4 position options available.
import { Carousel, Radio } from 'antd';
class PositionCarouselDemo extends React.Component {
state = {
dotPosition: 'top',
};
handlePositionChange = ({ target: { value: dotPosition } }) => this.setState({ dotPosition });
render() {
const { dotPosition } = this.state;
return (
<div>
<Radio.Group
onChange={this.handlePositionChange}
value={dotPosition}
style={{ marginBottom: 8 }}
>
<Radio.Button value="top">Top</Radio.Button>
<Radio.Button value="bottom">Bottom</Radio.Button>
<Radio.Button value="left">Left</Radio.Button>
<Radio.Button value="right">Right</Radio.Button>
</Radio.Group>
<Carousel dotPosition={dotPosition}>
<div>
<h3>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
</Carousel>
</div>
);
}
}
ReactDOM.render(<PositionCarouselDemo />, mountNode);
/* For demo */
.ant-carousel .slick-slide {
text-align: center;
height: 160px;
line-height: 160px;
background: #364d79;
overflow: hidden;
}
.ant-carousel .slick-slide h3 {
color: #fff;
}