A modal with a component. When you want to close the Modal, call the 'close' method — this.$parent.close()
— from the injected component.
trap-focus
prop could be useful in this case.
<template>
<section>
<div class="buttons">
<b-button
label="Launch image modal"
type="is-primary"
size="is-medium"
@click="isImageModalActive = true" />
<b-button
label="Launch card modal (keep scroll)"
type="is-primary"
size="is-medium"
@click="isCardModalActive = true" />
</div>
<b-modal v-model="isImageModalActive">
<p class="image is-4by3">
<img src="/static/img/placeholder-1280x960.png">
</p>
</b-modal>
<b-modal v-model="isCardModalActive" :width="640" scroll="keep">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="/static/img/placeholder-1280x960.png" alt="Image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img src="/static/img/placeholder-1280x960.png" alt="Image">
</figure>
</div>
<div class="media-content">
<p class="title is-4">John Smith</p>
<p class="subtitle is-6">@johnsmith</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus nec iaculis mauris. <a>@bulmaio</a>.
<a>#css</a> <a>#responsive</a>
<br>
<small>11:09 PM - 1 Jan 2016</small>
</div>
</div>
</div>
</b-modal>
</section>
</template>
<script>
export default {
data() {
return {
isImageModalActive: false,
isCardModalActive: false
}
}
}
</script>
# Component
A modal with a component. When you want to close the Modal, call the 'close' method — this.$parent.close()
— from the injected component.
trap-focus
prop could be useful in this case.
<template>
<section>
<b-button
label="Launch component modal"
type="is-primary"
size="is-medium"
@click="isComponentModalActive = true" />
<b-modal
v-model="isComponentModalActive"
has-modal-card
trap-focus
:destroy-on-hide="false"
aria-role="dialog"
aria-label="Example Modal"
close-button-aria-label="Close"
aria-modal>
<template #default="props">
<modal-form v-bind="formProps" @close="props.close"></modal-form>
</template>
</b-modal>
</section>
</template>
<script></script>
# Programmatic
Syntax:
// From inside Vue instance
this.$buefy.modal.open(props)
// From outside Vue instance
import { ModalProgrammatic as Modal } from 'buefy'
Modal.open(props)
<template>
<section>
<div class="buttons">
<b-button
label="Launch image modal (HTML)"
type="is-primary"
size="is-medium"
@click="imageModal" />
<b-button
label="Launch card modal (Component)"
type="is-primary"
size="is-medium"
@click="cardModal" />
</div>
</section>
</template>
<script></script>
# Full Screen
Add the full-screen
prop to cover the whole page.
<template>
<section>
<b-button
label="Launch component modal"
type="is-primary"
size="is-medium"
@click="isComponentModalActive = true" />
<b-modal
v-model="isComponentModalActive"
has-modal-card
full-screen
:can-cancel="false">
<modal-form v-bind="formProps"></modal-form>
</b-modal>
</section>
</template>
<script></script>
Name | Description | Type | Values | Default |
---|---|---|---|---|
active | Whether modal is active or not, use the .sync modifier to make it two-way binding | Boolean | — | false |
component | Component to be injected, used to open a component modal programmatically.
Close modal within the component by emitting a 'close' event — this.$emit('close') | Object, Function | — | — |
parent | Parent component of the modal, required if using component | Vue | — | — |
props | Props to be binded to the injected component | Object | — | — |
events | Events to be binded to the injected component | Object | — | — |
content | HTML content Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use HTML interpolation on trusted content and never on user-provided content. | String, Array | — | — |
width | Width of the Modal | Number, String | — | 960 |
full-screen | Display modal as full screen | Boolean | — | false |
has-modal-card | If your modal content has a .modal-card as root, add this prop or the card might break on mobile | Boolean | — | false |
animation | Custom animation (transition name) | String | — | zoom-out |
can-cancel | Can close Modal by clicking 'X', pressing escape or clicking outside | Boolean, Array | escape , x , outside | ['escape', 'x', 'outside'] |
on-cancel | Callback function to call after user canceled (clicked 'X' / pressed escape / clicked outside) | Function | — | — |
scroll | clip to remove the <body> scrollbar, keep to have a non scrollable scrollbar
to avoid shifting background, but will set <body> to position fixed, might break some layouts | String | clip , keep | clip |
trap-focus | Trap focus inside the modal. | Boolean | — | true |
auto-focus | Automatically focus modal when active. | Boolean | — | true |
custom-class | CSS classes to be applied on modal | String | — | — |
destroy-on-hide | Destroy modal on hide | Boolean | — | true |
aria-role | Role attribute to be passed to modal container for better accessibility. | String | dialog , alertdialog | — |
aria-label | Aria label attribute to be passed to modal container for better accessibility. | String | — | — |
aria-modal | Improve accessiblity when enabled. | Boolean | — | false |
close-button-aria-label | Aria label attribute to be passed to the close button for better accessibility. | String | — | — |
render-on-mounted | Create DOM for the modal content whether modal is active or not | Boolean | - | false |
You can use these variables to customize this component.
Name | Default |
---|---|
Bulma variables | Link |
This page is open source. Noticed a typo or something's unclear?