This is a Vue.js wrapper component for [email protected] (Demo on CodeSandbox).
This library supports both Vue 3 and Vue 2. However, active maintenance is focused on Vue 3. If you still need to support Vue 2, you can stay on version 0.5.2.
Vue 3
npm install vue-a11y-dialogVue 2
npm install [email protected]In your main.js application file, install the component:
import { createApp } from 'vue'
import A11yDialog from 'vue-a11y-dialog'
import App from './App.vue'
createApp(App).use(A11yDialog).mount('#app')Then use it as follows:
<template>
<div id="app">
<!-- ... -->
<button type="button" @click="openDialog">
Open dialog
</button>
<a11y-dialog
id="app-dialog"
@dialog-ref="assignDialogRef"
>
<template v-slot:title>
<span>Your dialog title</span>
</template>
<div>
<p>Your content</p>
</div>
</a11y-dialog>
</div>
</template>export default {
name: 'YourComponent',
data: () => ({
dialog: null
}),
methods: {
openDialog() {
if (this.dialog) {
this.dialog.show()
}
},
assignDialogRef(dialog) {
this.dialog = dialog
}
}
}It's important to assign the direct reference to the dialog instance via @dialog-ref, otherwise there is no way to call its methods.
Alternatively, you can also import the component directly into your file without installing it first:
import { A11yDialog } from 'vue-a11y-dialog'
export default {
name: 'YourComponent',
components: {
'a11y-dialog': A11yDialog
},
methods: {
// ...
}
}It's possible to use multiple dialogs in the same component, just make sure to assign the different dialog instances separately.
In your <template>:
<template>
<div id="app">
<!-- First dialog -->
<a11y-dialog
id="first-dialog"
@dialog-ref="dialog => assignDialogRef('first', dialog)"
>
<template v-slot:title>
<span>First dialog title</span>
</template>
<div>
<p>Your content</p>
</div>
</a11y-dialog>
<!-- Second dialog -->
<a11y-dialog
id="second-dialog"
@dialog-ref="dialog => assignDialogRef('second', dialog)"
>
<template v-slot:title>
<span>Second dialog title</span>
</template>
<div>
<p>Your content</p>
</div>
</a11y-dialog>
</div>
</template>In your <script>:
import { A11yDialog } from 'vue-a11y-dialog';
export default {
name: 'YourComponent',
data: () => ({
dialogs: {}
}),
methods: {
assignDialogRef(type, dialog) {
this.dialogs[type] = dialog
}
}
}All
a11y-dialoginstance methods are available, for further documentation see here.
- Property:
id - Type:
String - Required:
true - Description: The unique HTML
idattribute added to the dialog element, internally used by a11y-dialog to manipulate the dialog. - Usage:
<a11y-dialog id="main-dialog">
<!-- ... -->
</a11y-dialog>- Property:
dialog-root - Type:
String— CSS Selector string. - Required:
false - Default:
'body' - Description: The container for the dialog to be rendered into.
- Usage:
<a11y-dialog dialog-root="#dialog-root">
<!-- ... -->
</a11y-dialog>- Property:
class-names - Type:
Object - Required:
false - Default:
{} - Description: Object of classes for each HTML element of the dialog element. Keys are:
container,overlay,document,title,closeButton. See a11y-dialog docs for reference. - Usage:
<a11y-dialog :class-names="{ container: 'container-class', overlay: 'overlay-class' }">
<!-- ... -->
</a11y-dialog>- Property:
title-id - Type:
String - Required:
false - Default: Defaults to
id + '-title'. - Description: The HTML
idattribute of the dialog’s title element, used by assistive technologies to provide context and meaning to the dialog window. - Usage:
<a11y-dialog title-id="main-title">
<!-- ... -->
</a11y-dialog>- Property:
close-button-label - Type:
String - Required:
false - Default:
'Close this dialog window' - Description: The HTML
aria-labelattribute of the close button, used by assistive technologies to provide extra meaning to the usual cross-mark. - Usage:
<a11y-dialog close-button-label="Close dialog">
<!-- ... -->
</a11y-dialog>- Property:
role - Type:
String - Required:
false - Default:
dialog - Description: The
roleattribute of the dialog element, eitherdialog(default) oralertdialogto make it a modal (preventing closing on click outside of ESC key). - Usage:
<a11y-dialog role="alertdialog">
<!-- ... -->
</a11y-dialog>- Returns: An
a11y-dialoginstance orundefined. - Description: This event emits the
a11y-dialoginstance once the component has been initialised. When it getsdestroyed, the event returnsundefined. This is needed to call instance methods of the dialog, e.g.this.dialog.show(). - Usage:
<a11y-dialog @dialog-ref="assignDialogRef">
<!-- ... -->
</a11y-dialog>export default {
// ...
methods: {
assignDialogRef(dialog) {
this.dialog = dialog
}
}
}- Name:
title - Description: The title of the dialog, mandatory in the document to provide context to assistive technology. Could be hidden with CSS (while remaining accessible).
- Usage:
<a11y-dialog>
<template v-slot:title>
<span>Your dialog title</span>
</template>
<!-- ... -->
</a11y-dialog>- Name:
closeButtonContent - Default:
\u00D7(×) - Description: The string that is the inner HTML of the close button.
- Usage:
<a11y-dialog>
<template v-slot:closeButtonContent>
<span>Close dialog</span>
</template>
<!-- ... -->
</a11y-dialog>- Name:
closeButtonPosition - Default:
first - Description: One of
first,last, ornone - Usage:
<a11y-dialog close-button-position="last">
<template v-slot:closeButtonContent>
<span>Close dialog</span>
</template>
<!-- ... -->
</a11y-dialog>This is a client-only component; a11y-dialog won't render anything on the server and wait for your bundle to be executed on the client.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent