ionic-custom-bottom-sheet

Release 2.1.2

A simple bottom sheet component

Homepage Repository npm Download

License
MIT
Install
npm install ionic-custom-bottom-sheet@2.1.2

Documentation

Ionic Bottom Sheet Component

A simple component for ionic 4/(5) that brings up a full customizable bottom sheet.

Installation

npm install ionic-custom-bottom-sheet@latest --save

Import it to your app.module.ts file.

import { BottomSheetComponent, BottomSheetModule } from "ionic-custom-bottom-sheet";

@NgModule({
    declarations: [AppComponent],
    entryComponents: [BottomSheetComponent],
    imports: [
        ...
        BottomSheetModule
        ...
    ],
    ...
})

Since Ionic uses lazy loading you also have to import it to your page module. As example if we want to use it on our home-page.

In home.module.ts:

import { BottomSheetModule } from "ionic-custom-bottom-sheet";

@NgModule({
  imports: [
    ...
    BottomSheetModule,
    ...
})

Usage

Just write your content in between the <bottom-sheet> </bottom-sheet> tag.

<button (click)="OpenSheet()">Open Bottom Sheet</button>

<bottom-sheet [(State)]="BottomSheetState" (StateChange)="StateChanged($event)">
    <br><br><br><br><br><br>
    Hello World
    <br><br><br><br><br><br><br><br>
</bottom-sheet>

import { SheetStates } from "ionic-custom-bottom-sheet";
...
export class HomePage
{

    public BottomSheetState: SheetStates = SheetStates.Closed;

    constructor() {}

    public OpenSheet()
    {
        this.BottomSheetState = SheetStates.Open;
    }

    public StateChanged(event)
    {
        if (event == SheetStates.Closed)
        {
            console.log("Sheet Closed");
        }
    }
}

The size of the sheet will be the same as its content height, as long as it isn't bigger than 90vh, if so it will stay at 90vh and make its content scrollable. You can also set [Fullscreen]="true" to make it always stay at 90vh.

Attributes

Attribute Type Default
[Fullscreen] boolean false
[ShowIndicator] boolean true
(StateChange) EventEmitter
[(State)] SheetStates SheetStates.Closed

Since it looks weird on bigger screens like on a tablet or computer screen, the Sheet transforms into a modal like box.

Styles

To overwrite styles, I would recommend using the .BottomSheetBox Class, here you can overwrite things like the border-radius, color, background-color etc.

Stats

Dependencies
0
Dependent packages
0
Dependent repositories
0
Total releases
78
Latest release
First release
Stars
0
Forks
0
Contributors
0
SourceRank
8

Development practices

Source repo 2FA enabled
TEXT!
Package manager 2FA enabled
TEXT!
Is security responsive
TEXT!
Dependencies are managed
TEXT!
Issue-free release available
TEXT!
Succession plan available
TEXT!
Package manager 2FA enabled
TEXT!

The Tidelift Subscription provides access to a continuously curated stream of human-researched and maintainer-verified data on open source packages and their licenses, releases, vulnerabilities, and development practices.

Learn more →

Releases

2.1.2
2.1.1
2.1.0
2.0.9
2.0.8
2.0.7
2.0.7-beta.2.5
2.0.7-beta.2.4
2.0.7-beta.2.3
2.0.7-beta.2.2
See all 78 releases

Something wrong with this page? Make a suggestion

Export .ABOUT file for this package

Last synced: 2022-05-06 02:34:34 UTC

Login to resync this project