-
-
- -
-
- - - - - -

- - /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

- -

-

- -

-

-
-
- - -
-
-
- - -
-
- -