{"id":18948994,"url":"https://github.com/junjizhi/bootstrap-vue-timeline","last_synced_at":"2025-10-04T19:37:47.133Z","repository":{"id":74809430,"uuid":"375020187","full_name":"junjizhi/bootstrap-vue-timeline","owner":"junjizhi","description":"A simple timeline component with Bootstrap-Vue.","archived":false,"fork":false,"pushed_at":"2021-07-23T22:28:42.000Z","size":516,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-29T07:08:18.183Z","etag":null,"topics":["bootstrap-vue","bootstrapvue","component","timeline","timeline-component","vue","vue2","vuejs","vuejs2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/junjizhi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-06-08T13:31:38.000Z","updated_at":"2022-11-11T05:36:51.000Z","dependencies_parsed_at":null,"dependency_job_id":"f91216cc-8d92-4ebc-bd60-1169edf28592","html_url":"https://github.com/junjizhi/bootstrap-vue-timeline","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/junjizhi/bootstrap-vue-timeline","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junjizhi%2Fbootstrap-vue-timeline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junjizhi%2Fbootstrap-vue-timeline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junjizhi%2Fbootstrap-vue-timeline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junjizhi%2Fbootstrap-vue-timeline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/junjizhi","download_url":"https://codeload.github.com/junjizhi/bootstrap-vue-timeline/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junjizhi%2Fbootstrap-vue-timeline/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278030087,"owners_count":25918081,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-02T02:00:08.890Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap-vue","bootstrapvue","component","timeline","timeline-component","vue","vue2","vuejs","vuejs2"],"created_at":"2024-11-08T13:15:23.331Z","updated_at":"2025-10-04T19:37:47.118Z","avatar_url":"https://github.com/junjizhi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# bootstrap-vue-timeline\n\n## Introduction\nA simple timeline component similar to [Ant Timeline](https://www.antdv.com/components/timeline/) based on [Bootstrap-Vue](https://bootstrap-vue.org/).\n\n## Demo\n[Codesandbox](https://codesandbox.io/s/sad-edison-8r7mh)\n\n## Screenshots\n\u003cimg width=\"629\" alt=\"image\" src=\"https://user-images.githubusercontent.com/2715151/121779292-eab99400-cb68-11eb-8a2f-02a5ea3d2bf1.png\"\u003e\n\n## Dependencies\n\n\n* [Vue.js 2.6+](https://vuejs.org/2016/04/27/announcing-2.0/)\n* [Bootstrap-Vue (v2.21.2+)](https://bootstrap-vue.org/)\n* [Other Bootstrap-Vue dependencies](https://bootstrap-vue.org/docs).\n\n## Installation\n\n```bash\nnpm i bootstrap-vue-timeline\n\n# if you use yarn:\n\nyarn add bootstrap-vue-timeline\n```\n\n## Usage\n\n```html\n\u003cscript\u003e\nimport Vue from 'vue';\nimport BootstrapVueTimeline from 'bootstrap-vue-timeline'\nimport { BCard } from 'bootstrap-vue'\nVue.component('b-card', BCard)\nVue.component('b-timeline', BootstrapVueTimeline)\n\n// Uncomment the following to import BootstrapVue CSS files if you\n// have not done so when registering BootstrapVue. Order is important.\n// Check out: https://bootstrap-vue.org/docs#using-module-bundlers\n// import 'bootstrap/dist/css/bootstrap.min.css'\n// import 'bootstrap-vue/dist/bootstrap-vue.css'\n\n\nexport default Vue.extend({\n  name: 'ServeDev',\n  components: {\n    BootstrapVueTimeline\n  },\n  data() {\n    return {\n      timelineItems: [\n        {\n          timestamp: Date.parse('2021-05-29T20:20:46.444Z'),\n          title: 'Dolore ullamco exercitation commodo',\n          content: 'Esse dolore consectetur aliqua laboris sunt aliqua do non.'\n        },\n        {\n          timestamp: Date.parse('2021-05-28T20:20:46.444Z'),\n          title: 'Voluptate pariatur dolore laborum eu'\n        }\n      ]\n    }\n  }\n});\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cb-card\n      title=\"Event Timeline\"\n    \u003e\n      \u003cb-timeline\n        :items=\"timelineItems\"\n        :reverse=\"false\"\n        date-format=\"dd/MM/yy HH:mm:ss\"\n        variant=\"primary\"\n        loading\n      /\u003e\n    \u003c/b-card\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## Features\n- [x] Loading spinner\n- [x] Support `reverse` props\n- [x] Custom timestamp format\n- [x] Support item head color variants\n- [x] Support custom slots\n- [ ] Support custom icons\n- [ ] Refactor timeline and item into separate components\n- [ ] Emit events\n\n## Component Reference\n### Props\n\n| Name                  | Type      | Description                                                                                                                                                                                              | Default |\n| --------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |\n| `items`               | `Array`   | A list of timeline items to display. Supported keys include: `timestamp`, `title`, `content`.                                                                                                            |         |\n| `reverse`             | `Boolean` | The component displays a vertical timeline in the order of the `items` prop. If `reserve` is set to false, it displays items in reverse order.\u003cbr/\u003e Default: false.                                      |         |\n| `loading`             | `Boolean` | If true, display a loading spinner in the last item.                                                                                                                                                     |         |\n| `date-format`         | `String`  | Controls the date format in the tooltip when you hover the human friendly time.  Default: 'yyyy-MM-dd HH:mm:ss'                                                                                          |         |\n| `variant`             | `String`  | Color variant. It supports [Bootstrap color variants](https://bootstrap-vue.org/docs/reference/color-variants#color-variants-and-css-class-mapping), including 'primary', 'success'.  Default: 'primary' |         |\n| `human-friendly-time` | `Boolean` | Displays human friendly time, e.g., '2 months ago'. If false, display the time as formatted according to the `dateFormat` param.  Default: true                                                          | `true`  |\n### Slots\nN/A\n### Events\nN/A\n\n## Development\n\n**Install dependencies**:\n```bash\nyarn install --dev\n```\n\n**Build component**:\n```bash\nyarn build\n```\n\n**Run example app locally**:\n```bash\nyarn serve\n```\n\n**Lints and fixes files**:\n```bash\nyarn lint\n```\n\n**Generate component documentation**:\n```bash\nyarn doc src/bootstrap-vue-timeline.vue\n```\n\n## License\n\nReleased under the MIT [License](./LICENSE). Copyright (c) Bootstrap-vue-timeline.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjunjizhi%2Fbootstrap-vue-timeline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjunjizhi%2Fbootstrap-vue-timeline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjunjizhi%2Fbootstrap-vue-timeline/lists"}