<commit_before>title: Timeline
---
A Timeline is a display of a list of events in chronological order. It is typically a graphic design showing a long bar labelled with dates alongside itself and usually events. Timelines can use any time scale, depending on the subject and data.

QTimelines have 3 media breakpoints. View on a desktop and click the "View Desktop" link on the right side, then resize the browser window to see the media breakpoints in action.
<input type="hidden" data-fullpage-demo="other-components/timeline">

## Installation
Edit `/quasar.conf.js`:
```js
framework: {
  components: [
    'QTimeline',
    'QTimelineEntry'
  ]
}
```

## Basic Usage
```html
<q-timeline color="secondary">
  <q-timeline-entry heading>
    Timeline Subject
  </q-timeline-entry>

  <q-timeline-entry
    title="Event Title"
    subtitle="February 22, 1986"
    side="left"
  >
    <div>
      Lorem ipsum dolor sit amet.
    </div>
  </q-timeline-entry>
</q-timeline>
```

## QTimeline (Parent) Vue Properties
| Vue Property | Type    | Description                            |
| ---          | ---     | ---                                    |
| `color` | String  | Color of the text |
| `dark` | Boolean | When rendering on a dark background. |

## QTimelineEntry (Child) Vue Properties
| Vue Property | Type    | Description |<commit_msg>Clarifying function of the color property on Parent (#506)<commit_after>title: Timeline
---
A Timeline is a display of a list of events in chronological order. It is typically a graphic design showing a long bar labelled with dates alongside itself and usually events. Timelines can use any time scale, depending on the subject and data.

QTimelines have 3 media breakpoints. View on a desktop and click the "View Desktop" link on the right side, then resize the browser window to see the media breakpoints in action.
<input type="hidden" data-fullpage-demo="other-components/timeline">

## Installation
Edit `/quasar.conf.js`:
```js
framework: {
  components: [
    'QTimeline',
    'QTimelineEntry'
  ]
}
```

## Basic Usage
```html
<q-timeline color="secondary">
  <q-timeline-entry heading>
    Timeline Subject
  </q-timeline-entry>

  <q-timeline-entry
    title="Event Title"
    subtitle="February 22, 1986"
    side="left"
  >
    <div>
      Lorem ipsum dolor sit amet.
    </div>
  </q-timeline-entry>
</q-timeline>
```

## QTimeline (Parent) Vue Properties
| Vue Property | Type    | Description                            |
| ---          | ---     | ---                                    |
| `color` | String  | Color of the timeline element |
| `dark` | Boolean | When rendering on a dark background. |

## QTimelineEntry (Child) Vue Properties
| Vue Property | Type    | Description |
{'fraction_non_alphanumeric': 0.10819672131147541, 'fraction_numerical': 0.006193078324225865, 'mean_word_length': 2.792817679558011, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 21, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 7, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6587087', 'n_tokens_mistral': 838, 'n_tokens_neox': 792, 'n_words': 295}