Have ideas to improve npm?Join in the discussion! »

    opd-content
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    How to use opd-content

    opd-content is a web component you can use with any framework like react, angular, ionic… opd-content is a page frame with menu that has 2 breakpoints you can set yourself. The main content is scrollable and the menu has an event that listens to the browser width. It hides on less than the smallest breakpoint for mobile devices.

    DEMO

    http://dahlmann.no/opd-content-angular/

    GIT

    https://github.com/opdahlmann/opd-sidemenu-angular-demo

    Install the package

    npm i --save opd-content
    

    How to use with Angular

    Add CUSTOM_ELEMENTS_SCHEMA to your app.module.ts

    import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from  '@angular/core';
    
    @NgModule({
    declarations: [
    AppComponent
    ],
    imports: [
    BrowserModule
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    providers: [],
    bootstrap: [AppComponent]
    })
    

    Copy component to your assets on build, add this in your .angular-cli.json

    "assets": [
    "assets",
    "favicon.ico",
    { "glob": "**/*", "input": "../node_modules/opd-content/dist", "output": "./assets/opd" }
    ],
    

    Import the web component, add the following in your index.html file

    <script  src='assets/opd/opd.js'></script>
    

    Add this to your page:

    <opd-content>
       <slot name="header">
          <!-- Put your header content here -->
       </slot>
       <div  slot="sidemenu">
          <!-- Put your side menu content here -->
       </div>
       <div  slot="content">
          <!-- Put your main content here -->
       </div>
    </opd-content>
    

    Events

    To detect when the breakpoint changes so you can change content in sidemenu add the following to your html:

    <opd-content (breakpointChanged)="breakpointChanged($event)">
           <div  slot="sidemenu">
              <!-- Put your side menu content here -->
           </div>
           <div  slot="content">
              <!-- Put your main content here -->
           </div>
    </opd-content>
    

    in the code:

    breakpointChanged(e){
        console.log(e);
    }
    
    • e = 0 = Hidden
    • e = 1 = Medium breakpoint
    • e = 2 = Big breakpoint

    Settings

    To change the settings tweek the following properties:

    <opd-content (breakpointChanged)="breakpointChanged($event)"
    	        contentbackgroundcolor="#edeff2"
    		headerbackgroundcolor="#327daa"
    		sidemenubackgroundcolor="#364147"
    		sidemenucolor="#ffffff"
    		breakpoint-medium="767"
    		breakpoint-big="1023"
    		sidemenu-medium-width="57px"
    		sidemenu-big-width="250px"
    		header-hight="49px"
    		action-button-height="28px"
    		show-action-button="true"
    		action-button-height="28px"
    		action-button-background>
           <div  slot="sidemenu">
              <!-- Put your side menu content here -->
           </div>
           <div  slot="content">
              <!-- Put your main content here -->
           </div>
        </opd-content>
    

    Install

    npm i opd-content

    DownloadsWeekly Downloads

    1

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    297 kB

    Total Files

    23

    Last publish

    Collaborators

    • avatar