# ngx-ion-expandable-header

> An expandable header component for ionic 3 projects

Latest version **0.1.8** (published 2018-05-07) · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install ngx-ion-expandable-header
pnpm add ngx-ion-expandable-header
yarn add ngx-ion-expandable-header
bun add ngx-ion-expandable-header
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.1.8 |
| Published | 2018-05-07 |
| First published | 2018-04-27 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 34 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | tim |
| Maintainers | isaacsomething |

## Links

- npm: https://www.npmjs.com/package/ngx-ion-expandable-header
- Homepage: https://github.com/IsaacSomething/ngx-ion-expandable-header
- npm.io page: https://npm.io/package/ngx-ion-expandable-header

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.7.1

## Recent versions

- 0.1.8 (latest) — 2018-05-07
- 0.1.7 — 2018-05-04
- 0.1.6 — 2018-05-04
- 0.1.5 — 2018-05-04
- 0.1.4 — 2018-05-04
- 0.1.3 — 2018-04-30
- 0.1.2 — 2018-04-27
- 0.0.3 — 2018-04-27
- 0.0.2 — 2018-04-27
- 0.0.1 — 2018-04-27

## README

### About
  -------

  The component was created to be as versatile as possible within the ionic framework. Below is an outline on how to use and add the input properties that are avalible.

  preview on ionic view with code **32e870d7**
  
  ![preview](https://github.com/IsaacSomething/ngx-ion-expandable-header/blob/master/src/assets/imgs/readme/preview.gif "preview")

#### Setup

  1. Install

~~$_ npm install ngx-ion-expandable-header --save~~ ( currently an issue with version)

  2. Import module to project

    import { NgxIonExpandableNavModule } from "ngx-ion-expandable-header";

    @NgModule({
      declarations: [
        MyApp
      ],
      imports: [
        BrowserModule,
        IonicModule.forRoot(MyApp),
        NgxIonExpandableNavModule
      ],
  
  Or, if you have setup your pages as modules then you can add it to each page modul   that it is needed on.

    import { NgxIonExpandableNavModule } from "ngx-ion-expandable-header";

    @NgModule({
      declarations: [
        HomePage,
      ],
      imports: [
        IonicPageModule.forChild(HomePage),
        NgxIonExpandableNavModule
      ],
 

### Inputs
  
  -----

  **[contentArea]** (required)
  
  Once you have added the component you can then add the components tag
  `ngx-ion-expandable-nav` inside your header tag, above or below the ionic's
  `ion-navbar` component. You then need to make a connection to your main content, 
  of the page, to this component with the `[contentArea]` input.
    

  **[height]**
  
  This is to set a specific height for the expanded section. This is
  **not** required by default (except when adding an image) and when is it not set, the height will be set to whatever the height is of the content that is added.

  **[stopHeight]**

  The `[stopHeight]` input can specify a height for the expanded section whereby the   contraction of the expanded section stops, when scrolling,
  allowing for an always visible item if need be.

  ----

### Example

    <ion-header>

      <ngx-ion-expandable-nav [contentArea]="content" [height]="220">
        <img src="../assets/imgs/bg-img-information.png" alt="">
      </ngx-ion-expandable-nav>
      
      <ion-navbar>
        <button ion-button menuToggle>
          <ion-icon name="menu"></ion-icon>
        </button>
        <ion-title> NgxIonExpandableNav
          <small> (Information) </small>
        </ion-title>
      </ion-navbar>
    </ion-header>
    
    <ion-content #content padding>
     ... 

----

### Demo Locally

You can easily demo the project by cloning this repo and simply `npm install` and the `ionic serve`

![license](https://img.shields.io/github/license/mashape/apistatus.svg)

---
_Source: https://npm.io/package/ngx-ion-expandable-header · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._