Skip to content

An Add-On directive for the ion-slides, that adds tabs to the slide box, known from the Android Material Design specification

License

Notifications You must be signed in to change notification settings

leoruhland/ion-slides-tabs

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

35 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ion-slides-tabs

This fork is an adaptation of the JKnorr91 code using the new directive ion-slides instead of ion-slide-box.

All credits and thanks to JKnorr91.

Changes:

  • Replaced ion-slide-box directive with ion-slides.
  • Centralized the active tab. (when possible)
  • Updated the demos to Ionic v1.3.1

This Directive adds Tabs for the Ionic Slidebox with moving indicator at the bottom.

Preview & Demos

alt tag

Example 1: Simple, fixed sizes

Example 2: Multiple tabs, scrollable

Example 3: Multiple dynamic tabs, scrollable

Example 4: Initial slide

Installation

  1. Add the slidingTabsDirective.js to your Ionic Project and include it in your index.html.

Example: If you put the slidingTabsDirective.js to your js folder, you should paste the following line into your index.html anywhere after the ionic inclusion.

<script src="js/slidingTabsDirective.js"></script>
  1. Add the SCSS or the CSS code from slidingTabs.scss or slidingTabs.css to your project Styles.

Usage

In order to use the Tabs with an existing Slides, add the ion-slides-tabs Attribute to the ion-slides Element. To name the Tabs you should add the Attribute ion-slide-tab-label="yourLabel" to the ion-slide-page of the Slides. You can paste in any HTML for the labels.

Example:

<ion-content scroll="false">
    <ion-slides slider="slider" ion-slides-tabs>
        <ion-slide-page ion-slide-tab-label="test"><h1>Tab 1</h1></ion-slide-page>
        <ion-slide-page ion-slide-tab-label="secondTest"><h1>Tab 2</h1></ion-slide-page>
        <ion-slide-page ion-slide-tab-label="<b>boldTest</b>"><h1>Tab 3</h1></ion-slide-page>
    </ion-slides>
</ion-content>

API

Currently there ist only one attribute to change the behaviour of the tabs:

Attribute Type Default Description
slide-tabs-scrollable boolean true Wheter the tabs should be scrollable (true) or fill up the viewport width (false). In case of false, every tab will have the same size.

About

An Add-On directive for the ion-slides, that adds tabs to the slide box, known from the Android Material Design specification

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 52.4%
  • HTML 40.3%
  • CSS 7.3%