Skip to content

Latest commit

 

History

History
151 lines (103 loc) · 3.91 KB

README.md

File metadata and controls

151 lines (103 loc) · 3.91 KB

Logo

Responsive Layout

Custom BreakPoints Service with Custom values based on Angular BreakpointObserver

Report Bug · Request Feature

About The Project

  • Custom BreakPoints Service with Custom values based on Angular BreakpointObserver

  • This is for helping to modify&extend const values in CDK breakpints.ts which cannot be motified as wish.

  • This helper service aims to support almost all available screens such as XXSmall&Watch and Large SmartHomeTV.

  • For the original breakpoint information, check at https://github.com/angular/components/blob/master/src/cdk/layout/breakpoints.ts

Getting Started

This library compiled with Ivy version, not View Engine. You may need to enable Ivy to use this library.

Read more here: https://v9.angular.io/guide/ivy#maintaining-library-compatibility

Install

To use @fullstackship/responsive-layout in your project install it via npm:

npm i @fullstackship/responsive-layout --save

Usage

Import the library module and add it in AppModule or some SharedModule

import { ResponsiveLayoutModule } from '@fullstackship/responsive-layout';

To use it, import ResponsiveLayoutService in a component.

import { ResponsiveLayoutService, BreakPointsEX } from '@fullstackship/responsive-layout';

constructor(
    private layoutSV: ResponsiveLayoutService
) {
}

You can subscribe the BreakPoints. The following is an example how to change SideNav's Width dynamically using this library.

this.layoutChanges = this.layoutSV.observeBreakpoints().pipe(
).subscribe(
  result => {
    console.log(" ==> AppLayoutComponent|result: ", result);
    this.isXSmall = this.isSmall = this.isMedium = this.isLarge = this.isXLarge = false;
    for (let matchedBP of result) {

      if (matchedBP === BreakPointsEX.XSmall) {
        this.isXSmall = true;
        // this._sideNavWidth$.next('50px');
      } else if (matchedBP === BreakPointsEX.Small) {
        this._sideNavWidth$.next('90px');
      } else if (matchedBP === BreakPointsEX.Medium) {
        this._sideNavWidth$.next('200px');
      } else if (matchedBP === BreakPointsEX.Large) {
        this._sideNavWidth$.next('250px');
      } else if (matchedBP === BreakPointsEX.XLarge) {
        this._sideNavWidth$.next('300px');
      } else if (matchedBP === BreakPointsEX.XXLarge) {
        this._sideNavWidth$.next('300px');
      }
    }
  }
);

The BreakPointEX constants are defined like the following :

 export const BreakPointsEX = {
   XXSmall: "XXSmall",
   XSmall: "XSmall",
   Small: "Small",
   Medium: "Medium",
   Large: "Large",
   XLarge: "XLarge",
   XXLarge: "XXLarge",
   Watch: "Watch",
   Handset: "Handset",
   Tablet: "Tablet",
   Web: "Web",
   SmartTV: "SmartTV",
   HandsetPortrait: "HandsetPortrait",
   TabletPortrait: "TabletPortrait",
   WebPortrait: "WebPortrait",
   HandsetLandscape: "HandsetLandscape",
   TabletLandscape: "TabletLandscape",
   WebLandscape: "WebLandscape"
 };

Roadmap

  • User-defined custom breakpoints

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Acknowledgements