initial commit

JKnorr91 · May 26, 2015 · 7845ef2 · 7845ef2
commit 7845ef2
Show file tree

Hide file tree

Showing 11 changed files with 647 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,46 @@
+# ion-slide-box-tabs
+This Directive adds Tabs for the Ionic Slidebox with moving indicator at the bottom.
+
+## Description
+
+## Installation
+
+1. Just 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, your should paste the following line into your *index.html* anywhere after the ionic inclusion.
+
+  ```html
+  <script src="js/slidingTabsDirective.js"></script>
+  ```
+
+2. Add the SASS or the CSS code from *slidingTabs.sass* or *slidingTabs.css* to your project Styles.
+
+## Usage
+
+In order to use the Tabs with an existing SlideBox, add the *ion-slide-tabs* Attribute to the *ion-slide-box* Element.
+To name the Tabs you should add the Attribute *ion-slide-tab-label="yourLabel"* to the slides of the Slidebox. You can paste in any HTML for the labels.
+
+Example:
+```html
+<ion-content scroll="false">
+    <ion-slide-box show-pager="false" ion-slide-tabs>
+        <ion-slide ion-slide-tab-label="test"><h1>Tab 1</h1></ion-slide>
+        <ion-slide ion-slide-tab-label="secondTest"><h1>Tab 2</h1></ion-slide>
+        <ion-slide ion-slide-tab-label="<b>boldTest</b>"><h1>Tab 3</h1></ion-slide>
+    </ion-slide-box>
+</ion-content>
+```
+
+## API
+Currently there ist only one attribute to change the behaviour of the tabs:
+
+
+|Attribute|Type|Default|Description
+|-----------|------|-------------|---------|
+| 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.
+
+
+## Styling
+I gave my best to give the tabs the look & feel of the Android Tabs, described in Google's [Material Design Specification](http://www.google.com/design/spec/components/tabs.html).
+If you want to give the tabs your own look, feel free to edit the styles in *slidingTabs.sass* or *slidingTabs.css*.
diff --git a/example/example1.html b/example/example1.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
+    <title>IonSlidingTabs</title>
+
+    <link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
+    <link href="../src/css/slidingTabs.min.css" rel="stylesheet">
+
+    <!-- ionic/angularjs js -->
+    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
+    <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js"></script>
+
+    <!-- cordova script (this will be a 404 during development) -->
+    <script src="cordova.js"></script>
+
+    <!-- your app's js -->
+    <script src="../src/js/slidingTabsDirective.min.js"></script>
+
+    <script>
+        var app = angular.module('starter', ['ionic']);
+
+        app.config(function($stateProvider, $urlRouterProvider) {
+            $stateProvider.state('index', {
+                url : '/',
+                templateUrl : 'index.html',
+                controller : 'MainController'
+            });
+
+            $urlRouterProvider.otherwise("/");
+        });
+
+        app.controller("MainController", [function($rootScope, $scope, $stateParams, $q, $location, $window, $timeout){}]);
+    </script>
+</head>
+
+<body ng-app="starter">
+
+<ion-nav-bar class="bar-positive">
+    <ion-nav-back-button>
+    </ion-nav-back-button>
+</ion-nav-bar>
+
+
+<ion-nav-view ng-controller="MainController"></ion-nav-view>
+
+<script id="index.html" type="text/ng-template">
+    <ion-view view-title="Sliding Tabs 1">
+        <ion-content scroll="false">
+            <ion-slide-box slide-tabs-scrollable="false"  show-pager="false" ion-slide-tabs>
+                <ion-slide ion-slide-tab-label="test"><h1>Tab 1</h1></ion-slide>
+                <ion-slide ion-slide-tab-label="secondTest"><h1>Tab 2</h1></ion-slide>
+                <ion-slide ion-slide-tab-label="<b>boldTest</b>"><h1>Tab 3</h1></ion-slide>
+            </ion-slide-box>
+        </ion-content>
+    </ion-view>
+</script>
+</body>
+</html>
diff --git a/example/example2.html b/example/example2.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
+    <title>IonSlidingTabs</title>
+
+    <link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
+    <link href="../src/css/slidingTabs.min.css" rel="stylesheet">
+
+    <!-- ionic/angularjs js -->
+    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
+    <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.min.js"></script>
+
+    <!-- cordova script (this will be a 404 during development) -->
+    <script src="cordova.js"></script>
+
+    <!-- your app's js -->
+    <script src="../src/js/slidingTabsDirective.min.js"></script>
+
+    <script>
+        var app = angular.module('starter', ['ionic']);
+
+        app.config(function($stateProvider, $urlRouterProvider) {
+            $stateProvider.state('index', {
+                url : '/',
+                templateUrl : 'index.html',
+                controller : 'MainController'
+            });
+
+            $urlRouterProvider.otherwise("/");
+        });
+
+        app.controller("MainController", [function($rootScope, $scope, $stateParams, $q, $location, $window, $timeout){}]);
+    </script>
+</head>
+
+<body ng-app="starter">
+
+<ion-nav-bar class="bar-positive">
+    <ion-nav-back-button>
+    </ion-nav-back-button>
+</ion-nav-bar>
+
+
+<ion-nav-view ng-controller="MainController"></ion-nav-view>
+
+<script id="index.html" type="text/ng-template">
+    <ion-view view-title="Sliding Tabs 1">
+        <ion-content scroll="false">
+            <ion-slide-box slide-tabs-scrollable="true"  show-pager="false" ion-slide-tabs>
+                <ion-slide ion-slide-tab-label="tab"><h1>Tab 1</h1></ion-slide>
+                <ion-slide ion-slide-tab-label="another tab"><h1>Tab 2</h1></ion-slide>
+                <ion-slide ion-slide-tab-label="tab3"><h1>Tab 3</h1></ion-slide>
+                <ion-slide ion-slide-tab-label="another tab again"><h1>Tab 4</h1></ion-slide>
+                <ion-slide ion-slide-tab-label="a very large tab"><h1>Tab 5</h1></ion-slide>
+                <ion-slide ion-slide-tab-label="tab6"><h1>Tab 6</h1></ion-slide>
+            </ion-slide-box>
+        </ion-content>
+    </ion-view>
+</script>
+</body>
+</html>
diff --git a/example/img/slideTabs.gif b/example/img/slideTabs.gif
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,12 @@
+var gulp = require('gulp');
+var uglify = require('gulp-uglify');
+
+gulp.task('default', function() {
+    // place code for your default task here
+});
+
+gulp.task('compress', function() {
+    return gulp.src('src/js/slidingTabsDirective.js')
+        .pipe(uglify())
+        .pipe(gulp.dest('src/js/minified'));
+});
diff --git a/package.json b/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "IonicSlideBoxTabs",
+  "version": "0.1.0",
+  "description": "An Add-On directive for the ion-slide-box, that adds tabs to the slide box, known from the Android Material Design specification",
+  "main": "index.js",
+  "directories": {
+    "example": "example"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Jakob Knorr",
+  "license": "MIT",
+  "devDependencies": {
+    "gulp": "^3.8.11",
+    "gulp-uglify": "^1.2.0"
+  }
+}
diff --git a/src/css/slidingTabs.css b/src/css/slidingTabs.css
@@ -0,0 +1,81 @@
+ion-slide {
+    background-color: #f0f0f0;
+}
+
+ion-slide:nth-child(2n) {
+    background-color: #fff;
+}
+
+.slider {
+    height: 100%;
+}
+
+.slidingTabs {
+    height: 48px;
+    z-index: 10;
+}
+
+.slidingTabs .scroll {
+    height: auto;
+    min-width: 100%;
+}
+
+.slidingTabs ul {
+    background-color: #387ef5;
+    height: 48px;
+}
+
+.slidingTabs ul li {
+    height: 48px;
+    line-height: 48px;
+    text-align: center;
+    float: left;
+    margin: 0;
+    padding: 0 12px 20px 12px;
+    font-size: 11px;
+    text-transform: uppercase;
+    color: rgba(255, 255, 255, 0.6);
+    -webkit-transition: color .25s ease-in-out;
+    transition: color .25s ease-in-out;
+    position: relative;
+    overflow: hidden;
+}
+
+.slidingTabs ul li.tab-active {
+    color: #fff;
+}
+
+.slidingTabs ul li .ink {
+    display: block;
+    position: absolute;
+    background: rgba(56, 147, 245, 0.8);
+    border-radius: 100%;
+    transform: scale(0);
+}
+
+.slidingTabs ul li .ink.animate {
+    -webkit-animation: ripple 0.65s linear;
+    animation: ripple 0.65s linear;
+}
+
+.slidingTabs .tab-indicator-wrapper {
+    width: 100%;
+    height: 2px;
+    background-color: rgba(255, 255, 255, 0.2);
+    -webkit-transform: translateY(-2px);
+    position: absolute;
+}
+
+.slidingTabs .tab-indicator-wrapper .tab-indicator {
+    height: 100%;
+    background-color: #fff;
+    width: 70px;
+    position: relative;
+}
+
+@-webkit-keyframes ripple {
+    100% {
+        opacity: 0;
+        transform: scale(2.5);
+    }
+}
diff --git a/src/css/slidingTabs.min.css b/src/css/slidingTabs.min.css