mirror of
https://github.com/infeng/react-viewer.git
synced 2025-12-08 17:36:40 +00:00
update docs
This commit is contained in:
infeng
parent
ac87936698
commit
457c7f5abc
1
demo/images/fork_me_ribbon.svg
Normal file
1
demo/images/fork_me_ribbon.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="-240 331.7 130.3 130.3"><style>.st0{fill:#3fa8f4}.st1{enable-background:new}.st2{fill:#fff}</style><path class="st0" d="M-109.7 462L-240 331.7h44.7l85.6 85.5z"/><g class="st1"><path class="st2" d="M-192.1 351.7l-2.1-2.1-1.3 1.6 1.9 2-1 1.2-1.9-2-2 2.5-1.3-1.4 5.2-6.6 3.4 3.5-.9 1.3zM-193.6 360.1c-.7-.7-1.1-1.5-1.1-2.4 0-.8.2-1.6.8-2.4.6-.8 1.3-1.2 2.1-1.2s1.5.3 2.2 1.1c.7.7 1.1 1.5 1.1 2.3 0 .8-.2 1.6-.8 2.3-.6.8-1.3 1.2-2.1 1.2-.8.2-1.5-.1-2.2-.9zm3-3.7c-.3-.3-.6-.4-1-.4-.4.1-.7.3-1.1.7-.7.9-.8 1.7-.1 2.4.6.6 1.3.5 2-.4.8-.9.9-1.7.2-2.3zM-185 362.7c-.1-.3-.2-.5-.4-.7-.3-.3-.6-.4-.9-.3-.3.1-.7.3-1 .7l-1.8 2.2-1.3-1.3 3.7-4.7 1.3 1.3-.7.9c.7-.4 1.3-.4 1.9.2.1.1.2.3.3.4l-1.1 1.3zM-182.9 371l-1.5-1.6.5-3.7-1.9 2.3-1.3-1.3 5.5-6.9 1.3 1.3-3.5 4.4 3-.9 1.5 1.6-3.3.7-.3 4.1zM-173.5 380.7l-1.3-1.3 2.1-2.7c.5-.7.6-1.3.1-1.7-.2-.2-.5-.3-.8-.2-.3.1-.6.3-.8.6l-2.1 2.6-1.3-1.3 2.2-2.7c.5-.7.6-1.2.1-1.7-.2-.2-.5-.3-.8-.3s-.6.3-.8.6l-2.1 2.6-1.3-1.3 3.7-4.7 1.3 1.3-.6.7c.3-.1.7-.1 1 0 .4.1.7.3 1 .6.6.6.8 1.3.5 2.1.8-.3 1.5-.1 2.1.6.9.9.9 2-.1 3.3l-2.1 2.9zM-167.2 383.7l-2.7-2.8c-.5.7-.4 1.5.3 2.2.5.5 1 .8 1.5.9l-.8 1c-.6-.2-1.2-.6-1.8-1.2-.7-.7-1-1.4-1.1-2.3 0-.8.2-1.6.8-2.3.6-.8 1.3-1.2 2.1-1.2s1.4.2 2 .9c.6.6.9 1.3.9 2.1s-.3 1.5-.8 2.2l-.4.5zm-.5-2.1c.5-.7.6-1.3.1-1.8-.2-.2-.5-.3-.8-.3-.3 0-.6.2-.8.4l1.5 1.7zM-163.8 391c-.7-.7-1.1-1.5-1.1-2.4s.2-1.6.8-2.4c.6-.8 1.3-1.2 2.1-1.2s1.5.3 2.2 1.1c.7.7 1.1 1.5 1.1 2.3 0 .8-.2 1.6-.8 2.3-.6.8-1.3 1.2-2.1 1.2-.8.2-1.5-.2-2.2-.9zm3.1-3.8c-.3-.3-.6-.4-1-.4-.4.1-.7.3-1 .7-.7.9-.8 1.7-.1 2.4.6.6 1.3.5 2-.4s.7-1.7.1-2.3zM-156.6 398.2l-1.3-1.3 2.1-2.6c.6-.7.6-1.3.2-1.8-.2-.2-.5-.3-.8-.3-.3 0-.6.2-.8.5l-2.1 2.7-1.3-1.3 3.7-4.7 1.3 1.3-.6.7c.8-.3 1.4-.1 2 .5.9 1 .9 2.1-.2 3.4l-2.2 2.9zM-148 406.3c-.9-.2-1.7-.8-2.6-1.6-.9-1-1.4-2-1.5-3.2-.1-1.1.3-2.2 1.1-3.3.8-1 1.8-1.6 2.9-1.6 1.1 0 2.2.5 3.1 1.5.6.6 1.1 1.3 1.4 2l-1.1 1.4c-.2-.8-.7-1.5-1.3-2.1-.5-.6-1.1-.8-1.8-.8s-1.3.4-1.8 1.1c-.5.7-.8 1.4-.8 2 0 .7.3 1.3.8 1.8.3.3.6.5.9.6l1-1.3-1.2-1.2.9-1.2 2.5 2.6-2.5 3.3zM-146 409.1l-1.3-1.3 3.7-4.7 1.3 1.3-3.7 4.7zm3.7-6c-.2-.2-.3-.5-.4-.8 0-.3.1-.5.2-.7.2-.2.4-.3.6-.3.2 0 .5.1.7.3.2.2.3.5.4.8s0 .5-.2.7c-.2.2-.4.3-.6.3-.3 0-.5-.1-.7-.3zM-142.4 412.8c-.3-.1-.6-.3-1-.7-.9-.9-.9-1.9-.1-3l1.7-2.1-.7-.7.9-1.1.7.7.8-1 1.6.9-1.1 1.4.9 1-.9 1.1-.9-1-1.5 1.9c-.4.5-.4.9-.1 1.3.1.1.3.2.5.3l-.8 1zM-136.5 419l-1.3-1.4 2.1-2.7-2.4-2.5-2.1 2.7-1.3-1.4 5.2-6.6 1.3 1.4-2.1 2.6 2.4 2.5 2.1-2.6 1.3 1.4-5.2 6.6zM-131.3 424.3l-1.3-1.3.6-.7c-.8.2-1.4.1-1.9-.5-1-1-.9-2.2.1-3.5l2.3-2.8 1.3 1.3-2.2 2.7c-.5.7-.6 1.2-.1 1.7.2.2.5.3.8.3.3 0 .6-.2.8-.5l2.1-2.7 1.3 1.3-3.8 4.7zM-128.5 426.2l-.5.5-1.3-1.3 5.5-6.9 1.3 1.3-2.4 3c.8-.2 1.4 0 2 .6.5.6.8 1.2.7 1.9 0 .7-.3 1.4-.9 2.2-.6.8-1.3 1.2-2 1.4-.7.1-1.4-.1-1.9-.7-.4-.6-.6-1.2-.5-2zm1.5-2l-.4.5c-.2.3-.4.6-.4 1s.1.7.4.9c.3.3.6.4 1 .3s.7-.4 1.1-.8c.3-.4.5-.8.5-1.1s-.1-.7-.4-1c-.3-.3-.6-.4-.9-.3s-.6.2-.9.5z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
93
demo/index.less
Normal file
93
demo/index.less
Normal file
@ -0,0 +1,93 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
ul, li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
@navbarHeight: 50px;
|
||||
|
||||
.navbar {
|
||||
width: 100%;
|
||||
height: @navbarHeight;
|
||||
background-color: #0074d9;
|
||||
}
|
||||
|
||||
.navbar-fixed-top {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.img-fork {
|
||||
position: absolute;
|
||||
width: 130px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
color: white;
|
||||
font-size: 2rem;
|
||||
line-height: @navbarHeight;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 24 auto;
|
||||
margin-top: 50px;
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.img-list {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@imgItemWidth: 150px;
|
||||
@imgOffset: 30px;
|
||||
|
||||
.img-item {
|
||||
width: @imgItemWidth;
|
||||
height: @imgItemWidth;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.img-item > img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
background-color: #0b2f3d;
|
||||
width: 100%;
|
||||
}
|
||||
.container-footer {
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
.signature {
|
||||
color: white;
|
||||
}
|
||||
@ -4,6 +4,8 @@ import Viewer from '../src/Viewer';
|
||||
const img2 = require('./images/landscape2.jpg');
|
||||
const img = require('./images/landscape.jpg');
|
||||
const img3 = require('./images/tibet-6.jpg');
|
||||
const forkImg = require('./images/fork_me_ribbon.svg');
|
||||
import './index.less';
|
||||
|
||||
class App extends React.Component<any, any> {
|
||||
constructor() {
|
||||
@ -11,33 +13,62 @@ class App extends React.Component<any, any> {
|
||||
|
||||
this.state = {
|
||||
visible: false,
|
||||
activeIndex: 0,
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
let images = [{
|
||||
src: img,
|
||||
alt: 'lake',
|
||||
}, {
|
||||
src: img2,
|
||||
alt: 'mountain',
|
||||
}, {
|
||||
src: img3,
|
||||
alt: '',
|
||||
}];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button onClick={() => { this.setState({ visible: !this.state.visible }); } }>show</button>
|
||||
<div id="container" style={{
|
||||
width: '500px',
|
||||
height: '500px',
|
||||
}}>
|
||||
<nav className="navbar navbar-fixed-top">
|
||||
<div className="container-fluid">
|
||||
<div className="navbar-brand">
|
||||
<a>react-viewer</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<a href="https://github.com/infeng/react-viewer">
|
||||
<img className="img-fork" src={forkImg} />
|
||||
</a>
|
||||
<div className="container">
|
||||
<h1 className="title">Demo</h1>
|
||||
<div className="img-list">
|
||||
{images.map((item, index) => {
|
||||
return (
|
||||
<div key={index.toString()} className="img-item">
|
||||
<img src={item.src} onClick={() => {
|
||||
this.setState({
|
||||
visible: true,
|
||||
activeIndex: index,
|
||||
});
|
||||
}}/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<Viewer
|
||||
visible={this.state.visible}
|
||||
onClose={() => { this.setState({ visible: false }); } }
|
||||
images={images}
|
||||
activeIndex={this.state.activeIndex}
|
||||
/>
|
||||
</div>
|
||||
<div className="footer">
|
||||
<div className="container-fluid container-footer">
|
||||
<a href="https://github.com/infeng" className="signature">@infeng</a>
|
||||
</div>
|
||||
</div>
|
||||
<Viewer
|
||||
visible={this.state.visible}
|
||||
onClose={() => { this.setState({ visible: false }); } }
|
||||
images={[{
|
||||
src: img,
|
||||
alt: 'lake',
|
||||
}, {
|
||||
src: img2,
|
||||
alt: 'mountain',
|
||||
}, {
|
||||
src: img3,
|
||||
alt: '',
|
||||
}]}
|
||||
container={document.getElementById('container')}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
<!DOCTYPE html> <html> <head> <title>react-viewer</title> <meta charset="utf-8"> <link href="/react-viewer/index.css?2ae81c1d3607f473759f" rel="stylesheet"></head> <body> <div id="root"></div> <script type="text/javascript" src="/react-viewer/index.js?2ae81c1d3607f473759f"></script></body> </html>
|
||||
<!DOCTYPE html> <html> <head> <title>react-viewer</title> <meta charset="utf-8"> <link href="/react-viewer/index.css?6672a0d3088ed8f32a87" rel="stylesheet"></head> <body> <div id="root"></div> <script type="text/javascript" src="/react-viewer/index.js?6672a0d3088ed8f32a87"></script></body> </html>
|
||||
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user