Coder Social home page Coder Social logo

ahaw / ngx-hideable-header Goto Github PK

View Code? Open in Web Editor NEW
5.0 1.0 1.0 310 KB

Hideable (or sticky) header directive for Angular.

Home Page: https://www.npmjs.com/package/ngx-hideable-header

License: MIT License

TypeScript 68.65% JavaScript 8.52% CSS 1.39% HTML 21.44%
angular angular2 angular6 angular7

ngx-hideable-header's Introduction

Hideable Header for Angular 2+ with Universal support

Hideable Header is a directive for Angular that provides and easy and convenient API to add to any header element giving you full control to show and hide it.

The default behaviour is that the element will hide once you have scrolled passed a distance equal to the height of your header. Scrolling up the header will reappear. You can also reverse this functionality and have headers be default by hidden and visible on scroll (useful for utility bars)

Installation

Add the NPM package to your project

npm install ngx-hideable-header

Usage

The HideableHeaderModule should be imported into any module you want to use it in. This will provide the hideableHeader directive to use in your components.

import { HideableHeaderModule } from 'ngx-hideable-header';

@NgModule({
  ...
  imports: [
    BrowserModule,
    HideableHeaderModule,
  ]
  ...
})
export class AppModule {}

Directive Use

Attach the directive to any header component you want to be hidable. The directive has some configuration attributes:

  • [scrollAt]=<number>: Property to start hiding the element at, the default is 2 x the height of the component clientHeight.
  • [transition]="1s linear": Property defining the transition of the animation. This property supports all transition types via sanitization.
  • [disable]=false: This property stops the default behaviour of the directive.
  • [reverse]=false: This property will reverse when the show/hide triggers, useful for things you would like to appear after the user scrolls.
  • [height]=<number>: Property to overide the height of the transition
  • [units]="px": Property to define the style of units for transition

There are also some style properties set to the host element of this directive. You can change these with element attributes:

  • [style.position]="fixed"
  • [style.top]="0"
  • [style.left]="0"
<div class="container">
  <nav hideableHeader
    [disable]=true
    [reverse]=false
    [transition]="1s ease-out"
    [scrollAt]=200
    [style.position]="relative"
    >
    <a href="#" id="brand">Brand</a>
  </nav>
</div>

Public API

The directive instance has two methods that can be called, and two Observable properties that can be subscribed to:

Methods

  • instance.hide() - Hides the element the directive is bound to.
  • instance.show() - Shows the element the directive is bound to.

Subscriptions

  • instance.viewProperties - An object containing properties used in the directive
  • instance.isHidden - A boolean value available to show what state the attached element is in.

To see how you use these in your code, check out the demo application and how to use ViewChild in your components.

Demos

To see an online demo, visit https://ngx-hideable-header.firebaseapp.com. You can also run a local demo by cloning this repo and typing the following;

> npm install
> npm run start

ngx-hideable-header's People

Contributors

ahaw avatar tanepiper avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

tanepiper

ngx-hideable-header's Issues

Scrolling element is not supported of all browsers

Hi,

we have found an issue for some browsers and we have investigated that scrolling elements is not widely cupported, yet.

https://developer.mozilla.org/en-US/docs/Web/API/Document/scrollingElement

Can you fix it at line https://github.com/ahaw/ngx-hideable-header/blob/master/src/lib/src/lib/hideable-header.directive.ts#L141
to prevent crashing?

Example setup (based on sentry errors):
Chrome 38.0.2125, Win8
Chrome Mobile WebView 30.0.0, Android 4.4.2
Chrome 43.0.2357, Android 5.1.1
MiuiBrowser 2.0.1, Android 4.4.4
Samsung Internet 3.5, Android 5.1.1

Thanx.

warning in Chrome

Hi, thank you for the library!

I'm getting the following warning from Chrome (Version 70.0.3538.77):

commons-153a668ef205beec2e8f.js:56 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

Can there be done anything about it?

Thanks

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.