# Install

```shell
npm i @mate/vue-dialog
```

# Import

```javascript
import '@vaadin/dialog';
```

# Variants

## Small

```html
<vaadin-dialog header-title="Small dialog" theme="small"></vaadin-dialog>
```

```javascript
document.querySelector('vaadin-dialog').renderer = (root, dialog, model) => root.innerHtml = `<p>Content</p>`;
document.querySelector('vaadin-dialog').opened = true;
```

## Medium

```html
<vaadin-dialog header-title="Medium dialog" theme="medium"></vaadin-dialog>
```

```javascript
document.querySelector('vaadin-dialog').renderer = (root, dialog, model) => root.innerHtml = `<p>Content</p>`;
document.querySelector('vaadin-dialog').opened = true;
```

## Large

```html
<vaadin-dialog header-title="Large dialog" theme="large"></vaadin-dialog>
```

```javascript
document.querySelector('vaadin-dialog').renderer = (root, dialog, model) => root.innerHtml = `<p>Content</p>`;
document.querySelector('vaadin-dialog').opened = true;
```

## Footer actions

```html
<vaadin-dialog header-title="Datensätze löschen?"></vaadin-dialog>
```

```javascript
document.querySelector('vaadin-dialog').renderer = (root, dialog, model) => root.innerHtml = `<p>Diese Aktion kann nicht rückgängig gemacht werden.</p>`;
document.querySelector('vaadin-dialog').footerRenderer = (root, dialog, model) => root.innerHtml = `<vaadin-button>
    <vaadin-button>Abbrechen</vaadin-button>
    <vaadin-button theme="error primary">Löschen</vaadin-button>`;
document.querySelector('vaadin-dialog').opened = true;
```