56 lines
1.9 KiB
JavaScript
56 lines
1.9 KiB
JavaScript
|
import React from 'react';
|
||
|
|
import ScrollSync from '../ScrollSync/ScrollSync';
|
||
|
|
import ScrollSyncPane from '../ScrollSync/ScrollSyncPane';
|
||
|
|
import { storiesOf } from '@kadira/storybook';
|
||
|
|
|
||
|
|
const paneStyle = {
|
||
|
|
border: '1px solid green',
|
||
|
|
overflow: 'auto',
|
||
|
|
};
|
||
|
|
|
||
|
|
storiesOf('ScrollSync', module)
|
||
|
|
.add('Default', () => (
|
||
|
|
<ScrollSync>
|
||
|
|
<div style={{ display: 'flex', position: 'relative', height: 500 }}>
|
||
|
|
<ScrollSyncPane>
|
||
|
|
<div style={paneStyle}>
|
||
|
|
<section style={{ height: 5000 }}>
|
||
|
|
<h1>Left Pane Content</h1>
|
||
|
|
<p>
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
|
||
|
|
dolorum est eum eveniet exercitationem iste labore minus, neque nobis odit officiis
|
||
|
|
omnis possimus quasi rerum sed soluta veritatis.
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</ScrollSyncPane>
|
||
|
|
|
||
|
|
<ScrollSyncPane>
|
||
|
|
<div style={paneStyle}>
|
||
|
|
<section style={{ height: 10000 }}>
|
||
|
|
<h1>Right Pane Content</h1>
|
||
|
|
<p>
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
|
||
|
|
dolorum est eum eveniet exercitationem iste labore minus, neque nobis odit officiis
|
||
|
|
omnis possimus quasi rerum sed soluta veritatis.
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</ScrollSyncPane>
|
||
|
|
|
||
|
|
<ScrollSyncPane>
|
||
|
|
<div style={paneStyle}>
|
||
|
|
<section style={{ height: 2000 }}>
|
||
|
|
<h1>Third Pane Content</h1>
|
||
|
|
<p>
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aperiam doloribus
|
||
|
|
dolorum est eum eveniet exercitationem iste labore minus, neque nobis odit officiis
|
||
|
|
omnis possimus quasi rerum sed soluta veritatis.
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</ScrollSyncPane>
|
||
|
|
</div>
|
||
|
|
</ScrollSync>
|
||
|
|
));
|