mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 11:08:45 +08:00
Add images carousel
This commit is contained in:
afc163
parent
f051e8828e
commit
658660a158
@ -15,7 +15,9 @@ Ant Design 是面向中后台的 UI 设计语言。
|
||||
|
||||
### 金融云
|
||||
|
||||
<img as-cover class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img as-cover class="preview-img" width="420" alt="图例1" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" width="420" alt="图例2" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" width="420" alt="图例3" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
是面向金融机构深度定制的行业云计算服务；助力金融机构向新金融转型升级，推动平台、数据和技术方面的能力全面对外开放。
|
||||
|
||||
@ -25,7 +27,7 @@ Ant Design 是面向中后台的 UI 设计语言。
|
||||
|
||||
### OceanBase Cloud Platform
|
||||
|
||||
<img class="preview-img" width="420" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
<img class="preview-img" width="420" alt="图例3" align="right" src="https://os.alipayobjects.com/rmsportal/OeChYAOTenMzJmG.png">
|
||||
|
||||
OceanBase是 一款真正意义上的云端分布式关系型数据库，而 OceanBase Cloud Platform（云平台）是以 OceanBase 数据库为基础的云服务，可以帮助用户快速创建、使用 OB 服务。
|
||||
|
||||
|
||||
@ -5,9 +5,9 @@
|
||||
|
||||
---
|
||||
|
||||
Ant Design 是一个 UI 设计语言，是一套提炼和应用于企业级后台产品的交互语言和视觉体系。
|
||||
Ant Design 是一个 UI 设计语言，是一套提炼和应用于企业级中后台产品的交互语言和视觉体系。
|
||||
|
||||
<img width="360" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
|
||||
<img width="300" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
|
||||
|
||||
Ant Design 源自蚂蚁金服体验技术部的后台产品开发，我们的设计师和前端工程师经过大量的项目实践和总结，希望能抽象出一套企业级的交互视觉规范，统一后台项目的前端 UI 设计，屏蔽各种不必要的设计差异和前端实现成本，解放设计和前端开发资源。
|
||||
|
||||
|
||||
@ -145,11 +145,20 @@ window.BrowserDemo = React.createClass({
|
||||
}
|
||||
});
|
||||
|
||||
var Modal = antd.Modal;
|
||||
var PriviewImg = React.createClass({
|
||||
/*
|
||||
<Carousel>
|
||||
<div><img src={this.props.src} /></div>
|
||||
<div><img src={this.props.src} /></div>
|
||||
<div><img src={this.props.src} /></div>
|
||||
</Carousel>
|
||||
*/
|
||||
|
||||
const { Modal, Carousel } = antd;
|
||||
const PriviewImg = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
visible: false,
|
||||
current: 0,
|
||||
};
|
||||
},
|
||||
showImageModal() {
|
||||
@ -162,21 +171,38 @@ var PriviewImg = React.createClass({
|
||||
visible: false
|
||||
});
|
||||
},
|
||||
handleImgChange(current) {
|
||||
this.setState({ current });
|
||||
},
|
||||
render() {
|
||||
const goodCls = this.props.good ? 'good' : '';
|
||||
const badCls = this.props.bad ? 'bad' : '';
|
||||
const imgsPack = this.props.imgsPack || [{
|
||||
src: this.props.src,
|
||||
alt: this.props.alt,
|
||||
}];
|
||||
const current = this.state.current;
|
||||
return (
|
||||
<div className="preview-image-box" style={{ width: this.props.width }}>
|
||||
<div className={`preview-image-wrapper ${goodCls} ${badCls}`}>
|
||||
<img src={this.props.src} onClick={this.showImageModal} alt="Sample Picture" />
|
||||
</div>
|
||||
<div className="preview-image-description">{this.props.alt}</div>
|
||||
<Modal className="image-modal" width="960" visible={this.state.visible} onCancel={this.handleCancel} footer="" title="">
|
||||
<div className="image-modal-container">
|
||||
<img src={this.props.src} />
|
||||
</div>
|
||||
<div className="preview-image-description">{this.props.alt}</div>
|
||||
<a className="outside-link" href={this.props.src} target="_blank">查看原图</a>
|
||||
<div className="preview-image-title">{this.props.alt}</div>
|
||||
<div className="preview-image-description">{this.props.description}</div>
|
||||
<Modal className="image-modal" width="840" visible={this.state.visible} onCancel={this.handleCancel} footer="" title="">
|
||||
<Carousel afterChange={this.handleImgChange}>
|
||||
{
|
||||
imgsPack.map((img, i) =>
|
||||
<div key={i}>
|
||||
<div className="image-modal-container">
|
||||
<img src={img.src} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</Carousel>
|
||||
<div className="preview-image-title">{imgsPack[current].alt}</div>
|
||||
<a className="outside-link" href={imgsPack[current].src} target="_blank">查看原图</a>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
@ -187,24 +213,46 @@ InstantClickChangeFns.push(function() {
|
||||
const previewImageBoxes = $('.preview-img').parent();
|
||||
previewImageBoxes.each(function(i, box) {
|
||||
box = $(box);
|
||||
const priviewImgs = [];
|
||||
let priviewImgs = [];
|
||||
const priviewImgNodes = box.find('.preview-img');
|
||||
|
||||
// 判断是否要做成图片集合
|
||||
// 指定了封面图片就是
|
||||
let coverImg;
|
||||
priviewImgNodes.each(function(i, img) {
|
||||
priviewImgs.push(
|
||||
<PriviewImg key={i} src={img.src} width={100.0/priviewImgNodes.length + '%'}
|
||||
alt={img.alt} good={!!img.hasAttribute('good')} bad={!!img.hasAttribute('bad')} />
|
||||
);
|
||||
});
|
||||
let mountNode = $('<div class="preview-image-boxes"></div>');
|
||||
if (priviewImgNodes.length === 1) {
|
||||
let width = priviewImgNodes.eq(0).attr('width') || '';
|
||||
if (width && width.indexOf('%') < 0) {
|
||||
width += 'px';
|
||||
if (img.hasAttribute('as-cover')) {
|
||||
coverImg = img;
|
||||
return false;
|
||||
}
|
||||
mountNode = $('<div class="preview-image-boxes" style="width: ' + width + '"></div>');
|
||||
});
|
||||
|
||||
if (coverImg) {
|
||||
const imgs = [];
|
||||
priviewImgNodes.each((i, img) => imgs.push(img));
|
||||
priviewImgs = <PriviewImg src={coverImg.src} alt={coverImg.alt} imgsPack={imgs} />;
|
||||
} else {
|
||||
priviewImgNodes.each(function(i, img) {
|
||||
priviewImgs.push(
|
||||
<PriviewImg key={i} src={img.src} width={100.0/priviewImgNodes.length + '%'}
|
||||
alt={img.alt} good={!!img.hasAttribute('good')} bad={!!img.hasAttribute('bad')} />
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
// 计算宽度
|
||||
let width = 'auto';
|
||||
if (priviewImgs.length === 1) {
|
||||
width = priviewImgNodes[0].getAttribute('width') || '';
|
||||
} else if (coverImg) {
|
||||
width = coverImg.getAttribute('width');
|
||||
}
|
||||
if (width && width.indexOf('%') < 0 && width !== 'auto') {
|
||||
width += 'px';
|
||||
}
|
||||
|
||||
let mountNode = $('<div class="preview-image-boxes ' + (coverImg ? 'pack' : '') + '" style="width: ' + width + '"></div>')[0];
|
||||
box.replaceWith(mountNode);
|
||||
ReactDOM.render(<span>{priviewImgs}</span>, mountNode[0]);
|
||||
ReactDOM.render(<span>{priviewImgs}</span>, mountNode);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -1298,6 +1298,12 @@ a.entry-link:hover .anticon-smile {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.preview-image-title {
|
||||
font-size: 12px;
|
||||
margin-top: 8px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.preview-image-description {
|
||||
font-size: 12px;
|
||||
margin-top: 8px;
|
||||
@ -1311,7 +1317,7 @@ a.entry-link:hover .anticon-smile {
|
||||
}
|
||||
|
||||
.preview-image-box img:hover {
|
||||
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.outside-link:after {
|
||||
@ -1326,19 +1332,40 @@ a.entry-link:hover .anticon-smile {
|
||||
}
|
||||
|
||||
.image-modal-container {
|
||||
padding: 8px 8px 32px 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.image-modal .ant-modal-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.image-modal .ant-carousel .slick-slider {
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.image-modal .ant-carousel .slick-dots {
|
||||
text-align: left;
|
||||
bottom: -6px;
|
||||
}
|
||||
|
||||
.image-modal .ant-carousel .slick-dots li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.image-modal .preview-image-title {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
left: 50%;
|
||||
display: inline-block;
|
||||
transform: translateX(-50%);;
|
||||
}
|
||||
|
||||
.image-modal .outside-link {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
bottom: 12px;
|
||||
}
|
||||
|
||||
.image-modal img {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -231,6 +231,10 @@
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.anticon-right {
|
||||
transform: scale(0.6);
|
||||
}
|
||||
|
||||
footer ul li > h2 {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user