Vue A11yDialog This is a Vue.js wrapper component for [email protected]
npm install vue-a11y-dialog
In your main.js
application file, install the component:
import VueA11yDialog from 'vue-a11y-dialog'
Vue.use(VueA11yDialog)
Then use it as follows:
<template>
<div id="app">
<!-- ... -->
<button type="button" @click="openDialog">
Open dialog
</button>
<a11y-dialog id="app-dialog" app-root="#app" @dialog-ref="assignDialogRef">
<h1 slot="title">Your dialog title</h1>
<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 { VueA11yDialog } from 'vue-a11y-dialog'
export default {
name: 'YourComponent',
components: {
'a11y-dialog': VueA11yDialog
},
methods: {
// ...
}
}
All
a11y-dialog
instance methods are available, see their docs for more.
disable-native
disable-native
Boolean
false
<dialog>
element. However, if you want to disable that and use a <div role="dialog">
instead, you can just do that by adding this attribute. This gives you full control (and responsibilites) over styling. Read the a11y-dialog
Styling layer documentation for more information.<a11y-dialog disable-native>
<!-- ... -->
</a11y-dialog>
id
id
String
true
id
attribute added to the dialog element, internally used by a11y-dialog to manipulate the dialog.<a11y-dialog id="main-dialog">
<!-- ... -->
</a11y-dialog>
app-root
appRoot
String
, Array<String>
— CSS Selector string.true
a11y-dialog
needs to disable when the dialog is open.<a11y-dialog app-root="#app">
<!-- ... -->
</a11y-dialog>
class-names
class-names
Object
false
{}
base
, overlay
, element
, document
, title
, closeButton
. See a11y-dialog docs for reference.<a11y-dialog :class-names="{ base: 'base-class', overlay: 'overlay-class' }">
<!-- ... -->
</a11y-dialog>
title-id
titleId
String
false
id + '-title'
.id
attribute of the dialog’s title element, used by assistive technologies to provide context and meaning to the dialog window.<a11y-dialog title-id="main-title">
<!-- ... -->
</a11y-dialog>
close-button-label
closeButtonLabel
String
false
'Close this dialog window'
aria-label
attribute of the close button, used by assistive technologies to provide extra meaning to the usual cross-mark.<a11y-dialog close-button-label="Close this super dialog">
<!-- ... -->
</a11y-dialog>
role
role
String
false
dialog
role
attribute of the dialog element, either dialog
(default) or alertdialog
to make it a modal (preventing closing on click outside of ESC key).<a11y-dialog role="alertdialog">
<!-- ... -->
</a11y-dialog>
dialog-ref
a11y-dialog
instance or undefined
.a11y-dialog
instance once the component has been initialised. When it gets destroyed
, the event returns undefined
. This is needed to call instance methods of the dialog, e.g. this.dialog.show()
.<a11y-dialog @dialog-ref="assignDialogRef">
<!-- ... -->
</a11y-dialog>
export default {
// ...
methods: {
assignDialogRef (dialog) {
this.dialog = dialog
}
}
}
title
title
\u00D7
(×)<a11y-dialog>
<h1 slot="title">Your dialog title</h1>
<!-- ... -->
</a11y-dialog>
closeButtonContent
closeButtonLabel
\u00D7
(×)<a11y-dialog>
<span slot="closeButtonContent">Close dialog</span>
<!-- ... -->
</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.
Author: morkro
GitHub: https://github.com/morkro/vue-a11y-dialog
#vuejs #javascript #vue-js