Agência Wys
Hi how can i install that? didnt understand can u send any link explain how to install? thnks
Ionic Timeline
Simple highly customizable timeline to use in your apps
Free!
Marc Camp
Member since 2015
Details
Ionic timeline
Ionic timeline is a simple yet useful plugin that allows you to create a simple customizable timeline/feed for your ionic apps.
- Easy to customize
- Supports icons as well as images
- Works with all the platforms that ionic supports
- Simple code
- Easy to include in your existing app
- Compatible with your existing code.
Details
Include the timeline.css file into your project.
That's it!
This feed works with a simple ng-repeat within a section as you will see in the code.
<section id="cd-timeline" class="cd-container">
<div ng-repeat="activity in timeline">
...
</div>
</section>You can choose between pictures cd-timeline-picture or icons cd-timeline-icon it is just this simple. As for the content just add cd-timeline-content.
Examples
Timeline royal icons
<div class="cd-timeline-icon royal">
...
</div>
<div class="cd-timeline-content royal">
...
</div>Timeline dark pictures
<div class="cd-timeline-picture dark">
...
</div>
<div class="cd-timeline-content dark">
...
</div>
Download the project and see how it works or view our demo!
Development
Made with love by the myBeweeg team this timeline is an ionic adaptation of this timeline
Version 0.2
- Even easier to switch between icons and pictures no need for additional classes just:
cd-timeline-picturecd-timeline-icon
Github: https://github.com/comapedrosa/ionic-timeline
Twitter: https://twitter.com/marc_campg
Free Software, Hell Yeah!
Hey there! You'll need to log in before you can leave a comment here.
Marc Camp
Hi! As you can see in the demo, you just have to copy the CSS into your project and follow the html structure, you can see an easy tutorial in here https://github.com/comapedrosa/ionic-timeline. If you want to run the code, simply download the project and serve it with ionic.
Salman Tariq
Hi, I am currently working on an Ionic 2 project and I want to integrate this into my project. I copied the content in templates/tab-icons.html and css/timeline.css. The issue is that the end result looks like this: http://imgur.com/a/5WfaF. Please guide
Marc Camp
Hi! Sorry for the delay! Do you have all the CSS properly loaded in your app? Haven't played with Ionic2 yet so I can't help that much...sorry for that!
Mona
Hi ！I found the last one div with a line.Is there any other css that makes the timeline better. thanks.
prashanth
how to change the vertical grey line color?
Marc Camp
There's a comment in the line. Check line 80 in the pencode, change gray for whatever the color
shaik alaudddeen
its not working with inoic4
Marc Camp
Hi, I stopped updating it a long time ago! Feel free to bring it to ionic4 if you need to!
shaik alaudddeen
its not working with inoic4
Marc Camp
Hi, I stopped updating it a long time ago! Feel free to bring it to ionic4 if you need to!
prashanth
how to change the vertical grey line color?
Marc Camp
There's a comment in the line. Check line 80 in the pencode, change gray for whatever the color
Mona
Hi ！I found the last one div with a line.Is there any other css that makes the timeline better. thanks.
Salman Tariq
Hi, I am currently working on an Ionic 2 project and I want to integrate this into my project. I copied the content in templates/tab-icons.html and css/timeline.css. The issue is that the end result looks like this: http://imgur.com/a/5WfaF. Please guide
Marc Camp
Hi! Sorry for the delay! Do you have all the CSS properly loaded in your app? Haven't played with Ionic2 yet so I can't help that much...sorry for that!
Marc Camp
Hi! As you can see in the demo, you just have to copy the CSS into your project and follow the html structure, you can see an easy tutorial in here https://github.com/comapedrosa/ionic-timeline. If you want to run the code, simply download the project and serve it with ionic.
Agência Wys
Hi how can i install that? didnt understand can u send any link explain how to install? thnks
Hey there! You'll need to log in before you can leave a rating here.
Michael
Works very well - thanks, Marc!
mateo
Nice
Alysson Mendonça
Really nice!
Alec
Very nice :)
RnD IOX
Good job!
{{ rating.comment }}
{{ rating.comment }}
RnD IOX
Good job!
Alec
Very nice :)
Alysson Mendonça
Really nice!
mateo
Nice
Michael
Works very well - thanks, Marc!