@material/dialog

@material/dialog

Version 14.0.0
Published 2 years ago
1.3 MB
15 dependencies
MIT license

Install

npm i @material/dialog

yarn add @material/dialog

pnpm add @material/dialog

Overview

The Material Components Web dialog component

Index

Variables

cssClasses
numbers
strings

Namespaces

util

Variables

variable cssClasses

const cssClasses: {
    CLOSING: string;
    OPEN: string;
    OPENING: string;
    SCROLLABLE: string;
    SCROLL_LOCK: string;
    STACKED: string;
    FULLSCREEN: string;
    SCROLL_DIVIDER_HEADER: string;
    SCROLL_DIVIDER_FOOTER: string;
    SURFACE_SCRIM_SHOWN: string;
    SURFACE_SCRIM_SHOWING: string;
    SURFACE_SCRIM_HIDING: string;
    SCRIM_HIDDEN: string;
};

Copyright 2016 Google Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

variable numbers

const numbers: {
    DIALOG_ANIMATION_CLOSE_TIME_MS: number;
    DIALOG_ANIMATION_OPEN_TIME_MS: number;
};

variable strings

const strings: {
    ACTION_ATTRIBUTE: string;
    BUTTON_DEFAULT_ATTRIBUTE: string;
    BUTTON_SELECTOR: string;
    CLOSED_EVENT: string;
    CLOSE_ACTION: string;
    CLOSING_EVENT: string;
    CONTAINER_SELECTOR: string;
    CONTENT_SELECTOR: string;
    DESTROY_ACTION: string;
    INITIAL_FOCUS_ATTRIBUTE: string;
    OPENED_EVENT: string;
    OPENING_EVENT: string;
    SCRIM_SELECTOR: string;
    SUPPRESS_DEFAULT_PRESS_SELECTOR: string;
    SURFACE_SELECTOR: string;
};

Classes

class MDCDialog

class MDCDialog extends MDCComponent<MDCDialogFoundation> {}

property autoStackButtons

autoStackButtons: boolean;

property escapeKeyAction

escapeKeyAction: string;

property isOpen

readonly isOpen: boolean;

property scrimClickAction

scrimClickAction: string;

method attachTo

static attachTo: (root: Element) => MDCDialog;

method close

close: (action?: string) => void;

method destroy

destroy: () => void;

method getDefaultFoundation

getDefaultFoundation: () => MDCDialogFoundation;

method initialize

initialize: (focusTrapFactory?: MDCDialogFocusTrapFactory) => void;

method initialSyncWithDOM

initialSyncWithDOM: () => void;

method layout

layout: () => void;

method open

open: () => void;

class MDCDialogFoundation

class MDCDialogFoundation extends MDCFoundation<MDCDialogAdapter> {}

constructor

constructor(adapter?: Partial<MDCDialogAdapter>);

property cssClasses

static readonly cssClasses: {
    CLOSING: string;
    OPEN: string;
    OPENING: string;
    SCROLLABLE: string;
    SCROLL_LOCK: string;
    STACKED: string;
    FULLSCREEN: string;
    SCROLL_DIVIDER_HEADER: string;
    SCROLL_DIVIDER_FOOTER: string;
    SURFACE_SCRIM_SHOWN: string;
    SURFACE_SCRIM_SHOWING: string;
    SURFACE_SCRIM_HIDING: string;
    SCRIM_HIDDEN: string;
};

property defaultAdapter

static readonly defaultAdapter: MDCDialogAdapter;

property numbers

static readonly numbers: {
    DIALOG_ANIMATION_CLOSE_TIME_MS: number;
    DIALOG_ANIMATION_OPEN_TIME_MS: number;
};

property strings

static readonly strings: {
    ACTION_ATTRIBUTE: string;
    BUTTON_DEFAULT_ATTRIBUTE: string;
    BUTTON_SELECTOR: string;
    CLOSED_EVENT: string;
    CLOSE_ACTION: string;
    CLOSING_EVENT: string;
    CONTAINER_SELECTOR: string;
    CONTENT_SELECTOR: string;
    DESTROY_ACTION: string;
    INITIAL_FOCUS_ATTRIBUTE: string;
    OPENED_EVENT: string;
    OPENING_EVENT: string;
    SCRIM_SELECTOR: string;
    SUPPRESS_DEFAULT_PRESS_SELECTOR: string;
    SURFACE_SELECTOR: string;
};

method close

close: (action?: string) => void;

method destroy

destroy: () => void;

method getAutoStackButtons

getAutoStackButtons: () => boolean;

method getEscapeKeyAction

getEscapeKeyAction: () => string;

method getScrimClickAction

getScrimClickAction: () => string;

method getSuppressDefaultPressSelector

getSuppressDefaultPressSelector: () => string;

method handleClick

handleClick: (evt: MouseEvent) => void;

Handles click on the dialog root element.

method handleDocumentKeydown

handleDocumentKeydown: (evt: KeyboardEvent) => void;

Handles keydown on the document.

method handleKeydown

handleKeydown: (evt: KeyboardEvent) => void;

Handles keydown on the dialog root element.

method handleSurfaceScrimTransitionEnd

handleSurfaceScrimTransitionEnd: () => void;

Handles transitionend event triggered when surface scrim animation is finished.

method hideSurfaceScrim

hideSurfaceScrim: () => void;

Used only in instances of showing a secondary dialog over a full-screen dialog. Hides the "surface scrim" displayed over the full-screen dialog.

method init

init: () => void;

method isOpen

isOpen: () => boolean;

method layout

layout: () => void;

method open

open: (dialogOptions?: DialogConfigOptions) => void;

method setAutoStackButtons

setAutoStackButtons: (autoStack: boolean) => void;

method setEscapeKeyAction

setEscapeKeyAction: (action: string) => void;

method setScrimClickAction

setScrimClickAction: (action: string) => void;

method setSuppressDefaultPressSelector

setSuppressDefaultPressSelector: (selector: string) => void;

method showSurfaceScrim

showSurfaceScrim: () => void;

Used only in instances of showing a secondary dialog over a full-screen dialog. Shows the "surface scrim" displayed over the full-screen dialog.

Interfaces

interface DialogConfigOptions

interface DialogConfigOptions {}

Options for how to configure the dialog.

property isAboveFullscreenDialog

isAboveFullscreenDialog?: boolean;

interface MDCDialogAdapter

interface MDCDialogAdapter {}

Defines the shape of the adapter expected by the foundation. Implement this adapter for your framework of choice to delegate updates to the component in your framework of choice. See architecture documentation for more details. https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md

method addBodyClass

addBodyClass: (className: string) => void;

method addClass

addClass: (className: string) => void;

method areButtonsStacked

areButtonsStacked: () => boolean;

method clickDefaultButton

clickDefaultButton: () => void;

method deregisterContentEventHandler

deregisterContentEventHandler: <K extends EventType>(
    evtType: K,
    handler: SpecificEventListener<K>
) => void;

Deregisters an event listener on the dialog's content element.

method deregisterWindowEventHandler

deregisterWindowEventHandler: <K extends WindowEventType>(
    evtType: K,
    handler: SpecificWindowEventListener<K>
) => void;

Deregisters an event listener to the window.

method eventTargetMatches

eventTargetMatches: (target: EventTarget | null, selector: string) => boolean;

method getActionFromEvent

getActionFromEvent: (evt: Event) => string | null;

method getInitialFocusEl

getInitialFocusEl: () => HTMLElement | null;

method hasClass

hasClass: (className: string) => boolean;

method isContentScrollable

isContentScrollable: () => boolean;

method isScrollableContentAtBottom

isScrollableContentAtBottom: () => boolean;

true if the content has been scrolled all the way to the bottom. This is used in full-screen dialogs, where the footer scroll divider is expected only to appear when the content is "cut-off" by the footer bar.

method isScrollableContentAtTop

isScrollableContentAtTop: () => boolean;

true if the content has been scrolled (that is, for scrollable content, if it is at the "top"). This is used in full-screen dialogs, where the scroll divider is expected only to appear once the content has been scrolled "underneath" the header bar.

method notifyClosed

notifyClosed: (action: string) => void;

method notifyClosing

notifyClosing: (action: string) => void;

method notifyOpened

notifyOpened: () => void;

method notifyOpening

notifyOpening: () => void;

method registerContentEventHandler

registerContentEventHandler: <K extends EventType>(
    evtType: K,
    handler: SpecificEventListener<K>
) => void;

Registers an event listener on the dialog's content element (indicated with the 'mdc-dialog__content' class).

method registerWindowEventHandler

registerWindowEventHandler: <K extends WindowEventType>(
    evtType: K,
    handler: SpecificWindowEventListener<K>
) => void;

Registers an event listener to the window.

method releaseFocus

releaseFocus: () => void;

method removeBodyClass

removeBodyClass: (className: string) => void;

method removeClass

removeClass: (className: string) => void;

method reverseButtons

reverseButtons: () => void;

method trapFocus

trapFocus: (focusElement: HTMLElement | null) => void;

interface MDCDialogCloseEvent

interface MDCDialogCloseEvent extends Event {}

property detail

readonly detail: MDCDialogCloseEventDetail;

interface MDCDialogCloseEventDetail

interface MDCDialogCloseEventDetail {}

Copyright 2019 Google Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

property action

action?: string;

Namespaces

namespace util

module 'util.d.ts' {}

Copyright 2016 Google Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

function areTopsMisaligned

areTopsMisaligned: (els: HTMLElement[]) => boolean;

function createFocusTrapInstance

createFocusTrapInstance: (
    surfaceEl: HTMLElement,
    focusTrapFactory: MDCDialogFocusTrapFactory,
    initialFocusEl?: HTMLElement
) => FocusTrap;

function isScrollable

isScrollable: (el: HTMLElement | null) => boolean;

function isScrollAtBottom

isScrollAtBottom: (el: HTMLElement | null) => boolean;

For scrollable content, returns true if the content has been scrolled all the way to the bottom. This is used in full-screen dialogs, where the footer scroll divider is expected only to appear when the content is "cut-off" by the footer bar.

function isScrollAtTop

isScrollAtTop: (el: HTMLElement | null) => boolean;

For scrollable content, returns true if the content has not been scrolled (that is, the scroll content is as the "top"). This is used in full-screen dialogs, where the scroll divider is expected only to appear once the content has been scrolled "underneath" the header bar.

type MDCDialogFocusTrapFactory

type MDCDialogFocusTrapFactory = (
    element: HTMLElement,
    options: FocusOptions
) => FocusTrap;

Package Files (7)

Dependencies (15)

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (0)

No peer dependencies.

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@material/dialog.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@material/dialog)

HTML

<a href="https://www.jsdocs.io/package/@material/dialog"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 2 years ago.
Package analyzed in 1948 ms.
Missing or incorrect documentation? Open an issue for this package.