O'Reilly logo

Mobile App Development with Ionic 2, 1st Edition by Chris Griffith

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 14. Conclusion

Components You Should Know About

In this final chapter, we will touch upon a few components that we were not able to use within our sample applications and look at where to go next in your journey to learn the Ionic Framework.

Although we touched on a lot of the components in the Ionic Library, there are some additional ones that we wanted to highlight. For a more complete list, see Appendix C.

Slides

The first component to explore briefly is slides. This component allows you to have a carousel of items. These could be as simple as just images, or as complex as individual pages. The component is actually built in two parts: the container component <ion-slides> and each slide <ion-slide> that is nested within. Here is a very basic sample from the Ionic documentation:

<ion-slides pager>

  <ion-slide style="background-color: green">
    <h2>Slide 1</h2>
  </ion-slide>

  <ion-slide style="background-color: blue">
    <h2>Slide 2</h2>
  </ion-slide>

  <ion-slide style="background-color: red">
    <h2>Slide 3</h2>
  </ion-slide>

</ion-slides>

The inline styles are included for demonstration purposes only.

Table 14-1 lists the various settings you can apply to your <ion-slides> component.

Table 14-1. Various settings for <ion-slides>
Property Type Default Description
autoplay number - Delay between transitions (in ms). If this parameter is not passed, autoplay is disabled
direction string ‘horizontal’ Swipe direction: ‘horizontal’ or ‘vertical’
initialSlide number 0 Index ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required