Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vdegenne/material-3-prompt-dialog
MWC 3 prompt dialog utility function
https://github.com/vdegenne/material-3-prompt-dialog
Last synced: about 2 months ago
JSON representation
MWC 3 prompt dialog utility function
- Host: GitHub
- URL: https://github.com/vdegenne/material-3-prompt-dialog
- Owner: vdegenne
- License: mit
- Created: 2023-05-31T16:51:10.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-12-07T13:53:14.000Z (about 1 year ago)
- Last Synced: 2023-12-07T17:00:00.544Z (about 1 year ago)
- Language: TypeScript
- Size: 106 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Material 3 Prompt Dialog
Small prompt dialog utility function written in Material-web 3
## Installation
```bash
npm add -D material-3-prompt-dialog
```
This package doesn't rely on a specific version of `md-dialog` to avoid conflict within your project, so you will also need to install `@material/web` if not already there, and importing the elements you'd like to use
```bash
npm add -D @material/web
```
```typescript
import '@material/web/dialog/dialog.js'; // required
import '@material/web/button/text-button.js'; // default button
// import any other buttons you'd like to use.
```
## Usage
```typescript
import {prompt} from 'material-3-prompt-dialog';
try {
await prompt({
headline: 'Are you sure?',
content: 'are you sure you want to delete this item?',
confirmButton: {
/* confirm button options */
},
});
// dialog was confirmed, do something...
} catch (_) {
// dialog was canceled
}
```
### PromptOptions
```typescript
{
/**
* Headline of the dialog.
*/
headline?: string | TemplateResult,
/**
* Content of the dialog.
*/
content: string | TemplateResult,
/**
* Confirm button options.
*/
confirmButton?: PromptButton,
/**
* Cancel button options.
*/
cancelButton?: PromptButton,
/**
* Transition of the dialog.
*/
transition?: 'grow'|'shrink'|'grow-down'|'grow-up'|'grow-left'|'grow-right';
}
```
### PromptButton (options)
```typescript
{
/**
* The label of the button.
*/
label?: string | TemplateResult,
/**
* The dialog action that the button emits when clicked.
*/
dialogAction?: string,
/**
* Option callback to execute when the button is clicked.
* @param {MdDialog} dialog dialog host
* @returns void
*/
callback?: (dialog?: MdDialog) => void,
/**
* The default tagname to be used for the button.
* @default 'md-text-button'
*/
buttonType?: string,
}
```
## License
MIT (c) 2023 Valentin Degenne