Mobile App Development with Ionic, Revised Edition

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	'hor⁠izon⁠tal'	Swipe direction: 'horizontal' or 'vertical'
initialSlide	number	0