0.2.14 • Published 2 years ago
swipe-bottom-sheet v0.2.14
swipe-bottom-sheet
Usage in Angular
TLDR:
- Install from npm
- Inject the module into app module
- Import the scss
- Set the root view container ref to the app component's view container
- Open sheets
Install from npm
npm i swipe-bottom-sheet
Import the BottomSheetModule
into your app module
import { BottomSheetModule } from "swipe-bottom-sheet/angular";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, BottomSheetModule],
providers: [],
bootstrap: [AppComponent],
entryComponents: []
})
export class AppModule {}
Import the module's scss
@import "~swipe-bottom-sheet/style.scss";
Inject the BrowserSheetProvider
into your app component and set the bottomSheet's rootVcRef
property
import { BottomSheetProvider } from "swipe-bottom-sheet/angular";
@Component({
selector: "app-root",
templateUrl: "app.html"
})
export class AppComponent {
constructor(
private bottomSheet: BottomSheetProvider,
vcRef: ViewContainerRef
) {
// only set this once and do so in the app component's constructor
bottomSheet.rootVcRef = vcRef;
}
}
Open a bottom sheet using a TemplateRef
import { BottomSheetProvider } from "swipe-bottom-sheet/angular";
@Component({
selector: "app-component",
templateUrl: "component.html"
})
export class MyComponent {
constructor(private bottomSheet: BottomSheetProvider) {}
async openSheet<T>(content: TemplateRef<T>) {
const value = await this.bottomSheet.show(content, {
title: "Sheet Title",
stops: [270]
});
console.log({ value });
}
}
<button type="button" (click)="openSheet(sheetTemplate)">
Open Template
</button>
<ng-template #sheetTemplate let-context>
<ul class="sheet-list">
<li class="sheet-list-item" (click)="context.dismiss('value')">
Dismiss with value
</li>
</ul>
</ng-template>
Open a bottom sheet using a Component
Write the Component
Have BottomSheetContext
injected and use that to control the sheet
import { BottomSheetContext } from "swipe-bottom-sheet/angular";
@Component({
selector: "app-example-component",
template: `
<ul class="sheet-list">
<li
class="sheet-list-item"
(click)="context.dismiss('dismissed with value from component')"
>
Dismiss with value
</li>
</ul>
`
})
export class ExampleComponent {
constructor(public context: BottomSheetContext) {}
}
Open the sheet with a reference to your component
<button type="button" (click)="openSheet()">
Open Component
</button>
import { BottomSheetProvider } from "swipe-bottom-sheet/angular";
import { ExampleComponent } from "./example-sheet-component";
@Component({
selector: "app-component",
templateUrl: "component.html",
styles: []
})
export class MyComponent {
constructor(private bottomSheet: BottomSheetProvider) {}
async openSheet<T>() {
const value = await this.bottomSheet.show(ExampleComponent, {
title: "Sheet Title",
stops: [270]
});
console.log({ value });
}
}
0.2.14
2 years ago
0.2.13
2 years ago
0.2.12
2 years ago
0.2.11
2 years ago
0.2.10
2 years ago
0.2.7
2 years ago
0.2.6
2 years ago
0.2.9
2 years ago
0.2.8
2 years ago
0.2.5
3 years ago
0.2.4
3 years ago
0.1.0
3 years ago
0.2.1
3 years ago
0.2.0
3 years ago
0.2.3
3 years ago
0.2.2
3 years ago
0.0.20
3 years ago
0.0.21
3 years ago
0.0.22
3 years ago
0.0.23
3 years ago
0.0.24
3 years ago
0.0.25
3 years ago
0.0.15
3 years ago
0.0.17
3 years ago
0.0.18
3 years ago
0.0.19
3 years ago
0.0.30
3 years ago
0.0.31
3 years ago
0.0.32
3 years ago
0.0.33
3 years ago
0.0.34
3 years ago
0.0.26
3 years ago
0.0.27
3 years ago
0.0.28
3 years ago
0.0.29
3 years ago
0.0.10
3 years ago
0.0.11
3 years ago
0.0.12
3 years ago
0.0.13
3 years ago
0.0.14
3 years ago
0.0.9
3 years ago
0.0.8
3 years ago
0.0.5
3 years ago
0.0.4
3 years ago
0.0.7
3 years ago
0.0.6
3 years ago
0.0.3
5 years ago
0.0.2
5 years ago
0.0.1
5 years ago
0.0.0
5 years ago