react-image-timeline
所属分类：图形图象
开发工具：JavaScript
文件大小：9200KB
下载次数：0
上传日期：2023-01-06 01:54:44
上 传 者：
sh-1993
说明： React.js的以图像为中心的时间轴组件
(An image-centric timeline component for React.js)
文件列表:
.babelrc (63, 2020-09-04)
.circleci (0, 2020-09-04)
.circleci\config.yml (260, 2020-09-04)
.npmignore (189, 2020-09-04)
.prettierrc (90, 2020-09-04)
LICENSE (1080, 2020-09-04)
eslintrc.js (603, 2020-09-04)
index.d.ts (50, 2020-09-04)
index.js (45, 2020-09-04)
package-lock.json (813314, 2020-09-04)
package.json (1984, 2020-09-04)
public (0, 2020-09-04)
public\favicon.ico (3870, 2020-09-04)
public\icon.ai (1649676, 2020-09-04)
public\index.html (1586, 2020-09-04)
public\manifest.json (309, 2020-09-04)
public\props.csv (355, 2020-09-04)
public\sample_data.js (10759, 2020-09-04)
public\screenshot.png (1872910, 2020-09-04)
src (0, 2020-09-04)
src\App.css (1509, 2020-09-04)
src\App.test.js (290, 2020-09-04)
src\App.tsx (3988, 2020-09-04)
src\assets (0, 2020-09-04)
src\assets\background-texture.jpg (4596, 2020-09-04)
src\assets\berlin.jpg (141765, 2020-09-04)
src\assets\berlin_normalized.jpg (141765, 2020-09-04)
src\assets\berlin_odd.jpg (114128, 2020-09-04)
src\assets\cairo.jpg (179593, 2020-09-04)
src\assets\cairo_normalized.jpg (179593, 2020-09-04)
src\assets\cairo_odd.jpg (179593, 2020-09-04)
src\assets\chicago.jpg (178078, 2020-09-04)
src\assets\chicago_normalized.jpg (169644, 2020-09-04)
src\assets\chicago_odd.jpg (178078, 2020-09-04)
src\assets\icon.png (2548, 2020-09-04)
src\assets\london.jpg (187387, 2020-09-04)
src\assets\london_normalized.jpg (213409, 2020-09-04)
... ...
[](https://circleci.com/gh/aaron9000/react-image-timeline/tree/master)
# React Image Timeline
An image-centric timeline component for React.js. View chronological events in a pleasant way.
[View Sample Timeline](http://aaron9000.github.io/react-image-timeline/)
### Features:
- Responsive layout
- Graceful handling of non-uniform content
- Customizable (use your own CSS and components)
- Memoized, pure, & typed (Typescript definitions included)
- Only 32kb
- ***Zero*** extra dependencies
## How to Use
`npm install react-image-timeline --save`
```js
import React from 'react';
import ReactDOM from 'react-dom';
import Timeline from 'react-image-timeline';
require('react-image-timeline/dist/timeline.css'); // .scss also available
const events = [
{
date: new Date(2013, 9, 27),
text: "Sed leo elit, pellentesque sit amet congue quis, ornare nec lorem.",
title: "Cairo, Egypt",
buttonText: 'Click Me',
imageUrl: "http://github.com/aaron9000/react-image-timeline/blob/master/src/assets/cairo.jpg?raw=true",
onClick: console.log,
}
];
ReactDOM.render(
, document.getElementById('root'));
```
## Customization
#### Custom Styles
To customize the timeline, add your own CSS to override the [default styles](https://github.com/aaron9000/react-image-timeline/blob/master/src/lib/timeline.scss/).
#### Event Metadata
To pass extra data into custom components, use `extras` on `TimelineEvent`.
#### Custom Dot Pattern
The dots are defined in CSS using a [base***-encoded image](https://www.base***-image.de/). Encode a new image and override the corresponding CSS class.
#### Custom Components
For more advanced customization, you can pass in custom components to replace the defaults. Custom components will be passed a `TimelineEvent` model in props.
```js
const CustomHeader = (props) => {
const {title, extras} = props.event;
const {customField} = extras;
return
;
};
ReactDOM.render(
, document.getElementById('root'));
```
---
#### Run Example Project (you will need `create-react-app` to run)
```
*install create-react-app*
*clone repository*
yarn
yarn --debug
yarn start
```
#### Run Tests
```
*clone repository*
yarn test
```
## TypeScript & Models
Typescript definitions are included in the library.
---
#### Importing TypeScript Definitions
```js
import {
TimelineProps,
TimelineEventProps,
TimelineEvent,
TimelineCustomComponents
} from 'react-image-timeline';
```
---
#### TimelineProps
```js
export interface TimelineProps {
customComponents?: TimelineCustomComponents | null;
events: Array
;
reverseOrder?: boolean;
denseLayout?: boolean;
}
```
| Key | Type | Required?
|--------------------------|--------------------------|--------------------------|
| events | Array | Yes |
| customComponents |TimelineCustomComponents | |
| reverseOrder | boolean | |
| denseLayout | boolean | |
---
#### TimelineCustomComponents
```js
export interface TimelineCustomComponents {
topLabel?: React.PureComponent | React.ReactNode | null;
bottomLabel?: React.PureComponent | React.ReactNode | null;
header?: React.PureComponent | React.ReactNode | null;
imageBody?: React.PureComponent | React.ReactNode | null;
textBody?: React.PureComponent | React.ReactNode | null;
footer?: React.PureComponent | React.ReactNode | null;
}
```
| Key | Type | Required?
|--------------------------|--------------------------|--------------------------|
| topLabel | component | |
| bottomLabel | component | |
| header | component | |
| imageBody | component | |
| textBody | component | |
| footer | component | |
---
#### TimelineEventProps
```js
export interface TimelineEventProps {
event: TimelineEvent;
}
```
| Key | Type | Required?
|--------------------------|--------------------------|--------------------------|
| event | TimelineEvent | Yes |
---
#### TimelineEvent
```js
export interface TimelineEvent {
date: Date;
title: string;
imageUrl: string;
text: string;
onClick?: TimelineEventClickHandler | null;
buttonText?: string | null;
extras?: object | null;
}
```
| Key | Type | Required?
|--------------------------|--------------------------|--------------------------|
| date | date | Yes |
| title | string | Yes |
| imageUrl | string | Yes |
| text | string | Yes |
| onClick | function | |
| buttonText | string | |
| extras | object | |
近期下载者：
相关文件：
收藏者：