+
+
+ +
+
+ + + + + +

+ + /ionic-content-banner + + + forked from djett41/ionic-content-banner + +

+ +
+
+ + + +
+
+ +
+
+ + +
+ + An informational content banner for Ionic applications + + +
+ + +
+
+
+ + +
+
    +
  1. + + + JavaScript + 86.5% + +
    2. +
  2. + + + CSS + 9.6% + +
    3. +
  3. + + + HTML + 3.9% + +
    4. +
+
+
+
+
+ +
+ JavaScript + CSS + HTML +
+ + +
+ +
+ + + +
+ + +
+ + + Find file + +
+ + +
+ + + +
+ + + + +
+ +
+
+ + + +
+ + + + Pull request + + + + Compare + + + + This branch is 2 commits ahead of djett41:master. +
+ + +
+ + Fetching latest commit… +
+
+ Cannot retrieve the latest commit at this time. +
+ + + + + Permalink + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Failed to load latest commit information.
+ + + + .idea + + + + + +
+ + + + demo + + + + + +
+ + + + dist + + + + + +
+ + + + js + + + + + +
+ + + + scss + + + + + +
+ + + + test/unit + + + + + +
+ + + + .gitignore + + + + + +
+ + + + LICENSE + + + + + +
+ + + + README.md + + + + + +
+ + + + bower.json + + + + + +
+ + + + gulpfile.js + + + + + +
+ + + + karma.conf.js + + + + + +
+ + + + package.json + + + + + +
+ + + + + +
+

+ + README.md +

+ +

Ionic Content Banner

+ +
+

A Facebook style info/error content banner for the Ionic Framework

+
+ +

Table of Contents

+ + + +

Demo

+ +
    +
  • Download my sports news app SportScoop on iOS/Android to see it live!! Web Demo | iOS | Android
    • +
+ +

SportScoop

+ +
    +
  • Watch the Demo video below
    • +
+ +

Ionic Content Banner

+ +
    +
  • Download the Demo app on Ionic View with appId: 5445a4a4
    • +
  • Run the demo source code by cloning the ionic-content-banner repo, navigating to /demo and running the following
    • +
+ +

Run the following ommands:

+ +
npm install
+bower install
+gulp
+
+ +

Setup

+ +

Install

+ +

bower install ionic-content-banner

+ +

JS/CSS Imports (index.html)

+ +

Include the following JavaScript/CSS file imports in your index.html. Remember to import the ionic libraries first! +The example below assumes your 3rd party bower dependencies are located in the default bower_components folder.

+ +
<link rel="stylesheet" href="bower_components/ionic-content-banner/dist/ionic.content.banner.css">
+<script src="bower_components/ionic-content-banner/dist/ionic.content.banner.js"></script>
+
+ +

Angular Dependency (app.js)

+ +

Add jett.ionic.content.banner as a module dependency of your app module.

+ +
angular.module('Demo', ['ionic', 'jett.ionic.content.banner'])
+  .config(function () {..});
+
+ +

SASS Import (main.scss)

+ +

Include the scss/ionic.content.banner.scss file at the top of your main.scss file as shown below. Import any +custom Content Banner scss styles below the ionic and ionic.content.banner scss.

+ +
@import
+  "path_to_bower_components/ionic/scss/ionic",
+  "path_to_bower_components/ionic-content-banner/scss/ionic.content.banner";
+
+ +

Usage

+ +

$ionicContentBanner

+ +

A service you can inject in your controller to show the Content Banner

+ +

$ionicContentBanner.show

+ +

Create and show a new Content Banner. A new isolated scope will be created for the Content Banner and the new + Content Banner will animate just under the top of the active views ion-content.

+ +

@returns {function} close A function which, when called, closes the Content Banner. Make sure you use this to + clean up and remove the content banner!!

+ +

@param {object} options The options for the content banner. Properties:

+ +
    +

  • {string=} icon

    + +

    The icon used for the close button. defaults to ion-ios-close-empty

    • +

  • {string=} transition

    + +

    The transition used to animate in the content banner. Supported options are vertical and fade; defaults to +vertical. The content banner will create a css class content-banner-transition-{transitionVal}, so you can add +a custom value and then a custom css class to match if you would like to create your own transition.

    • +

  • {string=} type

    + +

    The type of banner to show. Supported types are info and error; defaults to info. The content banner will +create a css class content-banner-{typeVal}, so you can add a custom type value and then a custom css class to +match if you would like to create your own type.

    • +

  • [String] text

    + +

    A string array that contains the text values to display on the banner. If the array contains more than one value, +the content banner will cycle through the values of the array at the supplied interval (see below).

    • +

  • {number=} interval

    + +

    Number of milliseconds between text value changes. Default value is 7000ms (7 seconds).

    • +

  • {number=} autoClose

    + +

    Number of milliseconds before the content banner automatically closes. This option is disabled by default.

    • +

  • {boolean=} cancelOnStateChange

    + +

    Whether to cancel the content banner when navigating to a new state. Default value is true.

    • +
+ +

Screenshots

+ +

+

+ +

+

+
+
+ + +
+
+
+ + +
+
+ +