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

Host#

Class: cngx-bottom-sheet
Bound classes: cngx-bottom-sheet--handle ← showHandle

Index#

Inputs

showHandle

HostBindings

class.cngx-bottom-sheet--handle

Inputs#

showHandle#

input()

Whether the drag handle bar is visible.

The handle itself is rendered via CSS (::before pseudo-element, gated on the cngx-bottom-sheet--handle modifier class this input binds). Set to false to hide it.

default true

HostBindings#

Binding	Expression
`[class.cngx-bottom-sheet--handle]`	`showHandle()`