CngxBottomSheet

DirectivePrimaryv0.1.0WCAG AA

projects/common/dialog/bottom-sheet/bottom-sheet.directive.ts

Info
API

Import#

import { CngxBottomSheet } from '@cngx/common/dialog'

Description#

Bottom sheet molecule - a CngxDialog positioned at the viewport bottom with swipe-to-dismiss support.

Place on the same <dialog> element alongside cngxDialog. Adds the cngx-bottom-sheet CSS class (styled by bottom-sheet-theme.scss). When CngxSwipeDismiss is also present, auto-wires the swipe output to dialogRef.dismiss() - no manual (swiped) binding needed.

Basic bottom sheet

<dialog cngxDialog cngxBottomSheet [cngxSwipeDismiss]="'down'"
        #sheet="cngxDialog">
  <h2 cngxDialogTitle>Share</h2>
  <button [cngxDialogClose]="'copy'">Copy Link</button>
  <button [cngxDialogClose]="'email'">Email</button>
  <button cngxDialogClose>Cancel</button>
</dialog>
<button (click)="sheet.open()">Share</button>

Without swipe (static bottom sheet)

<dialog cngxDialog cngxBottomSheet #sheet="cngxDialog">
  <p>Content positioned at the bottom.</p>
</dialog>

Metadata#

Selector: dialog[cngxBottomSheet]
Export as: cngxBottomSheet

Index#

Inputs

showHandle

Inputs#

showHandle#

input()

Whether the drag handle bar is visible.

The handle itself is rendered via CSS (::before pseudo-element on the host). Set to false to hide it.

default true