Ionic Timeline

Ionic Timeline

Simple highly customizable timeline to use in your apps

Free!

(5)
Marc Camp

Marc Camp

Member since 2015

Details

Version:
0.2
Size:
9mb
Ionic:
1.0.1
Platforms:
iOS, Android
Released:
5 years ago
Updated:
5 years ago
Category:
Plugins
Tags:
timeline, feed, activity, news

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>

alt text

Timeline dark pictures

<div class="cd-timeline-picture dark">
   ...
</div>
<div class="cd-timeline-content dark">
   ...
</div>

alt text

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-picture
    • cd-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.

Agência Wys

Agência Wys   ·   4 years ago

Hi how can i install that? didnt understand can u send any link explain how to install? thnks

Marc Camp

Marc Camp   ·   4 years ago

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

Salman Tariq   ·   4 years ago

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

Marc Camp   ·   4 years ago

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!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Mona

Mona   ·   4 years ago

Hi !I found the last one div with a line.Is there any other css that makes the timeline better. thanks.

Marc Camp

Marc Camp   ·   3 years ago

No idea maybe smth with the ng-repeat and $last ?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

prashanth

prashanth   ·   3 years ago

how to change the vertical grey line color?

Marc Camp

Marc Camp   ·   3 years ago

There's a comment in the line. Check line 80 in the pencode, change gray for whatever the color

prashanth

prashanth   ·   3 years ago

thanks alot marc!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

shaik alaudddeen

shaik alaudddeen   ·   2 years ago

its not working with inoic4

Marc Camp

Marc Camp   ·   2 years ago

Hi, I stopped updating it a long time ago! Feel free to bring it to ionic4 if you need to!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

shaik alaudddeen

shaik alaudddeen   ·   2 years ago

its not working with inoic4

Marc Camp

Marc Camp   ·   2 years ago

Hi, I stopped updating it a long time ago! Feel free to bring it to ionic4 if you need to!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

prashanth

prashanth   ·   3 years ago

how to change the vertical grey line color?

Marc Camp

Marc Camp   ·   3 years ago

There's a comment in the line. Check line 80 in the pencode, change gray for whatever the color

prashanth

prashanth   ·   3 years ago

thanks alot marc!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Mona

Mona   ·   4 years ago

Hi !I found the last one div with a line.Is there any other css that makes the timeline better. thanks.

Marc Camp

Marc Camp   ·   3 years ago

No idea maybe smth with the ng-repeat and $last ?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Salman Tariq

Salman Tariq   ·   4 years ago

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

Marc Camp   ·   4 years ago

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!

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Marc Camp

Marc Camp   ·   4 years ago

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

Agência Wys   ·   4 years ago

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   ·     ·   5 years ago

Works very well - thanks, Marc!

mateo   ·     ·   5 years ago

Nice

Alysson Mendonça   ·     ·   5 years ago

Really nice!

Alec   ·     ·   4 years ago

Very nice :)

RnD IOX   ·     ·   3 years ago

Good job!

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}

RnD IOX    ·     ·   3 years ago

Good job!

Alec    ·     ·   4 years ago

Very nice :)

Alysson Mendonça    ·     ·   5 years ago

Really nice!

mateo    ·     ·   5 years ago

Nice

Michael    ·     ·   5 years ago

Works very well - thanks, Marc!