๐ต๏ธโโ๏ธ๐ต๏ธโโ๏ธ One easy-to-use component for Vue.js to build beautiful responsive timelines.
Home Page: https://www.growthbunker.dev/vuetimeline
License: MIT License
The API to search or enrich companies |
Improve your life by building new habits |
|---|---|
| The Companies API | Resilience Club |
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
First of all, really great package and love the look on your website!!
I see that you're using Material icons by default.. they are not displaying at all on my screen, I assume that's because I need to pull in the Material icons css file somewhere.. not sure if this is mentioned in the docs? In any case, I already use font-awesome in my project and would like to avoid having to pull in an additional icon library, those are not lightweight either.
Could you possibly make it a little more flexible and add support for other popular libraries, such as font-awesome ?
this could either be a configuration when initializing the plugin with Vue.use, or it could through a slot maybe? I would prefer the configuration.
What do you think?
Thanks!
I came across this package by chance, I found it very interesting and useful. So I wanted to try it out right away! However, I found that something does not go ๐ข. It always throws me an Uncaught TypeError: can't access property "$gb", t.prototype is undefined. Actually, I just used the stuff from the documentation. Can you maybe help me?
I am using vuetimeline with vuejs and I would like to override BaseNumber properties (edit iconSize, color..) or override BaseBadge properties (edit description text color, size..).
Is it possible ?
This would be perfect if I was able to change the text that shows on the opposite side of the timeline as pointed out in the image. Right now it has to be a date, but should optionally just be a prop with a String format.
I have an error when trying to .use the library in Vuepress 2.0 (using Vue 3):
Uncaught (in promise) TypeError: Cannot read property '$gb' of undefined
at Object.e [as install] (vuetimeline.esm.js?7cf2:1)
at Object.use (runtime-core.esm-bundler.js?5c40:4022)
at eval (clientAppEnhance.ts?6947:5)
at createVueApp (app.js?c6d7:132)
Is this supported?
I'm trying to set an icon, a mdi-icons icon, but It gets bugged and this happens:
Is it required to set animation-container prop to show the animation? Can anyone give me an example?
The timeline should be collapsable (only the title and/or thumbnail are displayed) and expandable.
For example in date it always appears in English and I would like to have it in Spanish or French.
I am trying out nuxt for the first time, so this may be my cause, but I am getting a confusing error on the dev server console when using your example:
[Vue warn]: Invalid prop: type check failed for prop "date". Expected Date, got Date 01:31:26
found in
--->
<Pages/index.vue> at pages/index.vue
<Layouts/default.vue> at layouts/default.vue
This is strange as the props validation shows as a Date, and there doesn't appear to be any errors from creating the new Date object in your example code. Perhaps I've got odd versions, but it's a fresh install of everything from Yarn. Any ideas please?
The timeline seems to render correctly and the watcher will update new Date values and not show the error again, but I always get it the first time..
, It doesn't work for CDNJS.
<html lang="en"><head>
<!-- ----------------------------------- -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
<meta name="keywords" content=" ">
<meta name="description" content=" ">
<meta name="author" content=" ">
<!-- ----------------------------------- -->
<!-- ----------------------------------- -->
<title></title>
<!-- ----------------------------------- -->
<!-- ----------------------------------- -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/v-click-outside.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@growthbunker/vuedarkmode@latest/dist/vuedarkmode.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@growthbunker/[email protected]/dist/vuetimeline.min.js"></script>
</head>
<body>
<!-- ----------------------------------- -->
<div id="app">
<h1>[[test]]</h1>
<template>
<!-- Latest update -->
<vue-timeline-update :date="new Date('2017-02-26')" title="v2.2.0 - Initial D" description="Today I am thrilled to announce the release of Vue.js 2.2.0." thumbnail="/images/vuetimeline/initial_d.jpg" category="announcement" icon="code" color="red">
<!-- Another update -->
<vue-timeline-update :date="new Date('2016-11-22')" title="v2.1.0 - Hunter X Hunter" description="Today I am thrilled to announce the release of Vue.js 2.1.0." thumbnail="/images/vuetimeline/hunter_x_hunter.jpg" category="announcement" icon="code" color="turquoise">
<!-- Yet another update -->
<vue-timeline-update :date="new Date('2016-09-30')" title="v2.0.0 - Ghost in the Shell" description="Today I am thrilled to announce the release of Vue.js 2.0.0" thumbnail="/images/vuetimeline/ghost_in_the_shell.jpg" category="announcement" icon="code" color="white" is-last="">
</vue-timeline-update></vue-timeline-update></vue-timeline-update></template> </div>
<!-- ----------------------------------- -->
<!--<editor-fold desc="vue ... ่ๆฌ">-->
<!---->
<script>
Vue.use(vClickOutside)
Vue.use(VueDarkMode)
Vue.use(vuetimeline);
window.vm1 = new Vue({
el : '#app',
delimiters: ['[[',
']]',
],
components: {},
mixins : [],
data() {
return {
VueDarkMode:false,
test: "!11",
}
},
mounted() {
},
methods: {},
})
</script>
<!--</editor-fold>-->
</body></html>
How to add line break in description props that only accept string like in this picture ?
Hi man, is possible to add dynamically a new item? maybe is useful to add a new item in any place of timeline, using a template with same information.
Whath use locale 'rus' ?
Expect to add another country's language to display the date!
Is it possible to change the locale ? So that the dates are displayed in French and not in English for example ?
When trying to optimize for Galaxy Fold, the dates are cut off.
vuetimeline.min.js:formatted:270 Uncaught ReferenceError: VueDarkMode is not defined
at vuetimeline.min.js:formatted:270
I operate according to MD, using Vue 3
Just add the dependency to my project to try it and I've got this error:
client.js?06a0:77 TypeError: Cannot read property 'theme' of undefined
at VueComponent.computedTheme (vuetimeline.esm.js?7cf2:1)
at Watcher.get (vue.runtime.esm.js?2b0e:4473)
at Watcher.evaluate (vue.runtime.esm.js?2b0e:4578)
at Proxy.computedGetter (vue.runtime.esm.js?2b0e:4830)
at Proxy.render (vuetimeline.esm.js?7cf2:1)
at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3542)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4049)
at Watcher.get (vue.runtime.esm.js?2b0e:4473)
at new Watcher (vue.runtime.esm.js?2b0e:4462)
at mountComponent (vue.runtime.esm.js?2b0e:4067)
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google โค๏ธ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.