Configure buttons
You can display the popup without any buttons for a clean, minimal interface, use predefined buttons for standard actions, or customize it by adding your own buttons with tailored text, style, and functionality to meet your specific needs.
By default, the popup is displayed without any buttons for a clean, minimal look. If you want some standard actions you can use the following predefined buttons:
okfor confirmationcancelto dismiss the popupclosefor closing the popup without actionsetfor saving or applying changes
You can add custom buttons with tailored text, style, and functionality if you have more specific needs.
Demo
<MbscPopup
:buttons="[]"
><MbscPopup
:buttons="['ok', 'cancel']"
><MbscPopup
:buttons="[{
text: 'Custom',
handler: function () {
mobiscroll.toast({
message: 'Custom button clicked'
});
}
}]"
>Hi there!
This is the default with no buttons.
Hi again!
This is a popup with predefined buttons.
Hi again!
This is a popup with a custom button.
SFC JSSFC TS
<script setup>
import {
MbscButton,
MbscPage,
MbscPopup,
MbscToast,
setOptions
} from '@mobiscroll/vue'
import { ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const isNoBtnOpen = ref(false)
const isPredefinedBtnOpen = ref(false)
const isCustomBtnOpen = ref(false)
const toastMessage = ref('')
const isToastOpen = ref(false)
</script>
<template>
<MbscPage>
<div class="mbsc-align-center">
<div class="mbsc-note">Customize popup buttons depending on your context.</div>
</div>
<div class="mbsc-form-group">
<div class="mbsc-button-group-block">
<MbscButton @click="isNoBtnOpen = true">No Buttons</MbscButton>
<MbscButton @click="isPredefinedBtnOpen = true">Predefined buttons</MbscButton>
<MbscButton @click="isCustomBtnOpen = true">Custom button</MbscButton>
</div>
</div>
<MbscPopup display="center" :isOpen="isNoBtnOpen" @close="isNoBtnOpen = false">
<div class="mbsc-align-center mbsc-padding">
<h3 class="md-text-center">Hi there!</h3>
<p class="md-text-center">This is the default with no buttons.</p>
</div>
</MbscPopup>
<MbscPopup
display="center"
:isOpen="isPredefinedBtnOpen"
:buttons="['ok', 'cancel']"
@close="isPredefinedBtnOpen = false"
>
<div class="mbsc-align-center mbsc-padding">
<h3 class="md-text-center">Hi again!</h3>
<p class="md-text-center">This is a popup with predefined buttons.</p>
</div>
</MbscPopup>
<MbscPopup
display="center"
:isOpen="isCustomBtnOpen"
:buttons="[
{
text: 'Custom',
handler: () => {
toastMessage = 'Custom button clicked'
isToastOpen = true
}
}
]"
@close="isCustomBtnOpen = false"
>
<div class="mbsc-align-center mbsc-padding">
<h3 class="md-text-center">Hi again!</h3>
<p class="md-text-center">This is a popup with a custom button.</p>
</div>
</MbscPopup>
<MbscToast :message="toastMessage" :isOpen="isToastOpen" @close="isToastOpen = false" />
</MbscPage>
</template>
<style>
/* style */
</style><script setup lang="ts">
import {
MbscButton,
MbscPage,
MbscPopup,
MbscToast,
setOptions
} from '@mobiscroll/vue'
import { ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const isNoBtnOpen = ref<boolean>(false)
const isPredefinedBtnOpen = ref<boolean>(false)
const isCustomBtnOpen = ref<boolean>(false)
const toastMessage = ref<string>('')
const isToastOpen = ref<boolean>(false)
</script>
<template>
<MbscPage>
<div class="mbsc-align-center">
<div class="mbsc-note">Customize popup buttons depending on your context.</div>
</div>
<div class="mbsc-form-group">
<div class="mbsc-button-group-block">
<MbscButton @click="isNoBtnOpen = true">No Buttons</MbscButton>
<MbscButton @click="isPredefinedBtnOpen = true">Predefined buttons</MbscButton>
<MbscButton @click="isCustomBtnOpen = true">Custom button</MbscButton>
</div>
</div>
<MbscPopup display="center" :isOpen="isNoBtnOpen" @close="isNoBtnOpen = false">
<div class="mbsc-align-center mbsc-padding">
<h3 class="md-text-center">Hi there!</h3>
<p class="md-text-center">This is the default with no buttons.</p>
</div>
</MbscPopup>
<MbscPopup
display="center"
:isOpen="isPredefinedBtnOpen"
:buttons="['ok', 'cancel']"
@close="isPredefinedBtnOpen = false"
>
<div class="mbsc-align-center mbsc-padding">
<h3 class="md-text-center">Hi again!</h3>
<p class="md-text-center">This is a popup with predefined buttons.</p>
</div>
</MbscPopup>
<MbscPopup
display="center"
:isOpen="isCustomBtnOpen"
:buttons="[
{
text: 'Custom',
handler: () => {
toastMessage = 'Custom button clicked'
isToastOpen = true
}
}
]"
@close="isCustomBtnOpen = false"
>
<div class="mbsc-align-center mbsc-padding">
<h3 class="md-text-center">Hi again!</h3>
<p class="md-text-center">This is a popup with a custom button.</p>
</div>
</MbscPopup>
<MbscToast :message="toastMessage" :isOpen="isToastOpen" @close="isToastOpen = false" />
</MbscPage>
</template>
<style>
/* style */
</style>