Nautilus: Pelagic Mollusc
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

angular-responsive-breakpoints-bootstrap-4

1.1.0 • Public • Published

angular-responsive-breakpoints-bootstrap-4

Is a fork of https://github.com/keenondrums/angular-responsive-breakpoints library, which changes it's behavior to be like Bootstrap's 4 media-breakpoint-up mixin. Apart from that, this is still a small lightweight angular service, providing a customizable set of screen breakpoints.

Install

NPM

npm install --save angular-responsive-breakpoints-bootstrap-4

Usage

  • Add 'ngResponsiveBreakpoints' to you modules
angular.module('myApp', ['ngResponsiveBreakpoints']);
  • Inject 'responsiveBreakpoints' in your controller and you are ready to go.
angular.module('myApp').controller('MyController', ['$scope','responsiveBreakpoints', MyController]);

function MyController($scope, responsiveBreakpoints) {
    $scope.screen = responsiveBreakpoints;
}


<div ng-show="screen.md"></div>

Description

The service watches your window size and sets its keys by the following rules:

  • responsiveBreakpoints[breakpoint.code] is true if window.innerWidth >= breakpoint.value and window.innerWidth < nextBreakpoint.value (if it exists)
  • responsiveBreakpoints[breakpoint.code + postfix] is true if window.innerWidth > breakpoint.value

Example

responsiveBreakpoints.xs is true if window.innerWidth < 576px responsiveBreakpoints.md is true if window.innerWidth < 992px and window.innerWidth >= 768px responsiveBreakpoints.smUp is true if window.innerWidth >= 576px

Customize breakpoints and postfix

By default the breakpoint set is a collection in a format of:

[
    {
        code: 'xs',
        value: 0
    },
    {
        code: 'sm',
        value: 576
    },
    {
        code: 'md',
        value: 768
    },
    {
        code: 'lg',
        value: 992
    },
    {
        code: 'xl',
        value: 1200
    }
]

Default postfix is 'Up'

In order to override it inject 'responsiveBreakpointsProvider' in your config

angular.module('myApp').config(['responsiveBreakpointsProvider', config]);

function config(responsiveBreakpointsProvider) {
    responsiveBreakpointsProvider.setResponsiveBreakpoints(/* pass your collection of breakpoints in ascending order here */);
    responsiveBreakpointsProvider.setGreaterPostfix(/* pass your postfix here */);
}

install

npm i angular-responsive-breakpoints-bootstrap-4

Downloadsweekly downloads

0

version

1.1.0

license

MIT

repository

githubgithub

last publish

collaborators

  • avatar