ovh-angular-responsive-page-switcher

ovh-angular-responsive-page-switcher module is a set of 2 directives (responsive-switch and responsive-switch-page) that enable to display content like pages.

It detects available width for displaying page in 2 distinct modes :

• switch mode : one page is displayed at a time ;
• sidebyside mode : pages are displayed side by side.

Table of contents

• Dependencies
• Installation
• Usage and example
• Module Components

Dependencies

ovh-angular-responsive-page-switcher module depends on different modules :

• matchmedia-ng
• angular-animate

Note : ovh-angular-responsive-page-switcher is suitable with ovh-angular-responsive-popover.

Installation

Download module with bower

$ bower install ovh-angular-responsive-page-switcher --save

This will also download the dependencies.

Styles

In your less file, import the ovh-angular-responsive-page-switcher.less file located in dist/less folder :

@import "dist/less/ovh-angular-responsive-page-switcher.less";

HTML

Load the module script, its dependencies and your app file :

<script src="jquery.js" type="text/javascript"></script>
<script src="angular.js" type="text/javascript"></script>
<script src="angular-animate.js" type="text/javascript"></script>
<script src="matchmedia-ng.js" type="text/javascript"></script>
<script src="ovh-angular-responsive-page-switcher.js" type="text/javascript"></script>
<script src="your-app.js" type="text/javascript"></script>

JS

Load the module in your application by adding it as a dependent module :

angular.module('app', ['ovh-angular-responsive-popover']);

Usage and example

Usage

HTML

Directives responsive-switch and responsive-switch-page will be used. responsive-switch-page requires responsive-switch, so first we create this directive :

<div data-responsive-switch>
    <div data-responsive-switch-page class="responsive-switch-page-left"></div>
    <div data-responsive-switch-page class="responsive-switch-page-right"></div>
</div>

Example

You can run a sample example after git cloning the project by running these commands :

$ npm install
$ bower install
$ grunt serve

The example is now running at http://localhost:7711/example/.

Module Components

directive

| Name | Description | | :--: | :--: | | responsiveSwitch | Create the container of the page to switch (animate) and manage the display | | responsiveSwitchPage | Create a page to display |

Contributing

You've developed a new cool feature ? Fixed an annoying bug ? We'd be happy to hear from you !

Have a look in CONTRIBUTING.md

Run the tests

$ npm test

Related links

• Contribute: https://github.com/ovh-ux/ovh-angular-responsive-page-switcher/blob/master/CONTRIBUTING.md
• Report bugs: https://github.com/ovh-ux/ovh-angular-responsive-page-switcher/issues
• Get latest version: https://github.com/ovh-ux/ovh-angular-responsive-page-switcher

License

See https://github.com/ovh-ux/ovh-angular-responsive-page-switcher/blob/master/LICENSE