mirror of
https://github.com/material-components/material-web.git
synced 2024-10-27 06:04:44 +03:00
46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
/**
|
||
* @license
|
||
* Copyright 2023 Google LLC
|
||
* SPDX-License-Identifier: Apache-2.0
|
||
*/
|
||
|
||
import {customElement} from 'lit/decorators.js';
|
||
|
||
import {Dialog} from './lib/dialog.js';
|
||
import {styles} from './lib/dialog-styles.css.js';
|
||
|
||
declare global {
|
||
interface HTMLElementTagNameMap {
|
||
'md-dialog': MdDialog;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* @summary Dialogs can require an action, communicate information, or help
|
||
* users accomplish a task. There are two types of dialogs: basic and
|
||
* full-screen.
|
||
*
|
||
* @description
|
||
* A dialog is a modal window that appears in front of app content to provide
|
||
* critical information or ask for a decision. Dialogs disable all app
|
||
* functionality when they appear, and remain on screen until confirmed,
|
||
* dismissed, or a required action has been taken.
|
||
*
|
||
* Dialogs are purposefully interruptive, so they should be used sparingly.
|
||
* A less disruptive alternative is to use a menu, which provides options
|
||
* without interrupting a user’s experience.
|
||
*
|
||
* On mobile devices only, complex dialogs should be displayed fullscreen.
|
||
*
|
||
* __Example usages:__
|
||
* - Common use cases for basic dialogs include alerts, quick selection, and
|
||
* confirmation.
|
||
* - More complex dialogs may contain actions that require a series of tasks
|
||
* to complete. One example is creating a calendar entry with the event title,
|
||
* date, location, and time.
|
||
*/
|
||
@customElement('md-dialog')
|
||
export class MdDialog extends Dialog {
|
||
static override styles = [styles];
|
||
}
|