Skip to content

Commit 5531f2c

Browse files
ProskyneteProskynete
committed
chore: update readme file
1 parent 89b2fa4 commit 5531f2c

File tree

1 file changed

+78
-78
lines changed

1 file changed

+78
-78
lines changed

‎README.md

+78-78
Original file line numberDiff line numberDiff line change
@@ -57,13 +57,13 @@ This is the wrapper component that creates the vertical timeline.
5757

5858
- Props
5959

60-
| name | Type | Required | Values Allowed | default values | Description |
61-
| ---------- | ------- | -------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
62-
| theme | `object` | `false` | `colors` | { borderDotColor: '#ffffff', descriptionColor: '#cccccc', dotColor: '#c5c5c5', eventColor: '#cccccc', lineColor: '#c5c5c5', subtitleColor: '#c5c5c5', titleColor: '#cccccc', yearColor: '#888888' } | Set colors in all components |
63-
| lang | `string` | `false` | `en`, `es`, `de`, `tr` or `zh` | `en` | Change the language `from` and `to` texts and change the format in the dates |
64-
| dateFormat | `string` | `false` | `only-number`, `short`, `with-weekday` or `full` | `only-number` | Change the presentation format of dates |
65-
| collapse | `boolean` | `false` | `true` or `false` | `false` | Allow collapsing description of all Content components |
66-
| withoutDay | `boolean` | `false` | `true` or `false` | `false` | Will hide the day of the dates of all Content components |
60+
| name | Type | Required | Values Allowed | default values | Description |
61+
| ---------- | --------- | -------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
62+
| theme | `object` | `false` | `colors` | { borderDotColor: '#ffffff', descriptionColor: '#cccccc', dotColor: '#c5c5c5', eventColor: '#cccccc', lineColor: '#c5c5c5', subtitleColor: '#c5c5c5', titleColor: '#cccccc', yearColor: '#888888' } | Set colors in all components |
63+
| lang | `string` | `false` | `en`, `es`, `de`, `tr` or `zh` | `en` | Change the language `from` and `to` texts and change the format in the dates |
64+
| dateFormat | `string` | `false` | `only-number`, `short`, `with-weekday` or `full` | `only-number` | Change the presentation format of dates |
65+
| collapse | `boolean` | `false` | `true` or `false` | `false` | Allow collapsing description of all Content components |
66+
| withoutDay | `boolean` | `false` | `true` or `false` | `false` | Will hide the day of the dates of all Content components |
6767

6868
`dateFormat`: The next table shows the different formats that can be used in the `dateFormat` prop and the result that will be displayed.
6969

@@ -89,14 +89,14 @@ This component is the container of the content of each year. It is required to h
8989

9090
- Props
9191

92-
| Name | Type | Required | Values Allowed | default values | Description |
93-
| ------------- | ------- | -------- | --------------------------------- | -------------- | -------------------------------------------------------------------------------- |
94-
| title | `string`, `JSX.Element` | `true` | any string, or some component | does not apply | The title of this block time |
95-
| startDate | `string` | `true` | `YYYY/MM/DD` - `YYYY/MM` - `YYYY` | does not apply | The date of the start of the content or contents |
96-
| endDate | `string` | `false` | `YYYY/MM/DD` - `YYYY/MM` - `YYYY` | does not apply | The date of the end of the content or contents |
97-
| active | `boolean` | `false` | `true` or `false` | `false` | The value is the current year, it is recommended to use it in the last Container |
98-
| withoutDay | `boolean` | `false` | `true` or `false` | `false` | Will hide the day of the dates for this component only |
99-
| defaultClosed | `boolean` | `false` | `true` or `false` | `false` | Will collapse the content of this component only |
92+
| Name | Type | Required | Values Allowed | default values | Description |
93+
| ------------- | ----------------------- | -------- | --------------------------------- | -------------- | -------------------------------------------------------------------------------- |
94+
| title | `string`, `JSX.Element` | `true` | any string, or some component | does not apply | The title of this block time |
95+
| startDate | `string` | `true` | `YYYY/MM/DD` - `YYYY/MM` - `YYYY` | does not apply | The date of the start of the content or contents |
96+
| endDate | `string` | `false` | `YYYY/MM/DD` - `YYYY/MM` - `YYYY` | does not apply | The date of the end of the content or contents |
97+
| active | `boolean` | `false` | `true` or `false` | `false` | The value is the current year, it is recommended to use it in the last Container |
98+
| withoutDay | `boolean` | `false` | `true` or `false` | `false` | Will hide the day of the dates for this component only |
99+
| defaultClosed | `boolean` | `false` | `true` or `false` | `false` | Will collapse the content of this component only |
100100

101101
<p align="right"><a href="#top">🔝</a></p>
102102

@@ -106,10 +106,10 @@ For each `Events` you need one or more `Event` component.
106106

107107
- Props
108108

109-
| Name | Type | Required | Description |
110-
| ----------- | ---------------- | -------- | ---------------------------------------------------------------------------------- |
111-
| title | `string` | `false` | It's the title of one or many descriptions |
112-
| description | `array` of `strings` | `true` | You can write anything you want, but remember that it is consistent with the title |
109+
| Name | Type | Required | Description |
110+
| ----------- | -------------------- | -------- | ---------------------------------------------------------------------------------- |
111+
| title | `string` | `false` | It's the title of one or many descriptions |
112+
| description | `array` of `strings` | `true` | You can write anything you want, but remember that it is consistent with the title |
113113

114114
> If the title is not defined (or empty), the description will always be displayed even when the defaultClosed prop is in the Events component
115115
@@ -125,38 +125,38 @@ The following snippet will show you how to use the library:
125125
import { Timeline, Events, Event } from 'vertical-timeline-component-react';
126126

127127
const customTheme = {
128-
borderDotColor: '#ffffff',
129-
descriptionColor: '#262626',
130-
dotColor: '#d0cdc4',
131-
eventColor: '#965500',
132-
lineColor: '#d0cdc4',
133-
subtitleColor: '#7c7c7c',
134-
titleColor: '#405b73',
135-
yearColor: '#405b73',
128+
borderDotColor: '#ffffff',
129+
descriptionColor: '#262626',
130+
dotColor: '#d0cdc4',
131+
eventColor: '#965500',
132+
lineColor: '#d0cdc4',
133+
subtitleColor: '#7c7c7c',
134+
titleColor: '#405b73',
135+
yearColor: '#405b73',
136136
};
137137

138138
class Main extends Component {
139-
render() {
140-
return (
141-
<Timeline lang="en" theme={customTheme} dateFormat="only-number" collapse withoutDay>
142-
<Events
143-
title={<a href="#">What is lorem Ipsum?</div>}
144-
subtitle="It's a fake text"
145-
startDate="2020/12/02"
146-
defaultClosed
147-
active
148-
>
149-
<Event
150-
title="Lorem Ipsum"
151-
description={[
152-
"Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard",
153-
'Is simply dummy text of the printing and typesetting industry.',
154-
]}
155-
/>
156-
</Events>
157-
</Timeline>
158-
);
159-
}
139+
render() {
140+
return (
141+
<Timeline lang="en" theme={customTheme} dateFormat="only-number" collapse withoutDay>
142+
<Events
143+
title={<a href="#">What is lorem Ipsum?</a>}
144+
subtitle="It's a fake text"
145+
startDate="2020/12/02"
146+
defaultClosed
147+
active
148+
>
149+
<Event
150+
title="Lorem Ipsum"
151+
description={[
152+
"Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard",
153+
'Is simply dummy text of the printing and typesetting industry.',
154+
]}
155+
/>
156+
</Events>
157+
</Timeline>
158+
);
159+
}
160160
}
161161
```
162162
@@ -166,36 +166,36 @@ class Main extends Component {
166166
import { Timeline, Events, Event } from 'vertical-timeline-component-react';
167167

168168
const Main = () => {
169-
const customTheme = {
170-
borderDotColor: '#ffffff',
171-
descriptionColor: '#262626',
172-
dotColor: '#d0cdc4',
173-
eventColor: '#965500',
174-
lineColor: '#d0cdc4',
175-
subtitleColor: '#7c7c7c',
176-
titleColor: '#405b73',
177-
yearColor: '#405b73',
178-
};
179-
180-
return (
181-
<Timeline lang="en" theme={customTheme} dateFormat="only-number" collapse withoutDay>
182-
<Events
183-
title="What is lorem Ipsum?"
184-
subtitle="It's a fake text"
185-
startDate="2020/12/02"
186-
active
187-
defaultClosed
188-
>
189-
<Event
190-
title="Lorem Ipsum"
191-
description={[
192-
"Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard",
193-
'Is simply dummy text of the printing and typesetting industry.',
194-
]}
195-
/>
196-
</Events>
197-
</Timeline>
198-
);
169+
const customTheme = {
170+
borderDotColor: '#ffffff',
171+
descriptionColor: '#262626',
172+
dotColor: '#d0cdc4',
173+
eventColor: '#965500',
174+
lineColor: '#d0cdc4',
175+
subtitleColor: '#7c7c7c',
176+
titleColor: '#405b73',
177+
yearColor: '#405b73',
178+
};
179+
180+
return (
181+
<Timeline lang="en" theme={customTheme} dateFormat="only-number" collapse withoutDay>
182+
<Events
183+
title="What is lorem Ipsum?"
184+
subtitle="It's a fake text"
185+
startDate="2020/12/02"
186+
active
187+
defaultClosed
188+
>
189+
<Event
190+
title="Lorem Ipsum"
191+
description={[
192+
"Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard",
193+
'Is simply dummy text of the printing and typesetting industry.',
194+
]}
195+
/>
196+
</Events>
197+
</Timeline>
198+
);
199199
};
200200
```
201201

0 commit comments

Comments
 (0)