Responsive
The popup component adapts fluidly to its environment. There are times however when you would like to set the component up responsively.
Use the responsive option to configure the popup and change the options based on the viewport width. There are five predefined breakpoints:
xsmall- min-width: 0pxsmall- min-width: 576pxmedium- min-width: 768pxlarge- min-width: 992pxxlarge- min-width: 1200px- use
customfor setting a custombreakpoint
It is a good idea to adjust the display to tailor the UX. This allows you to have the popup bottom-positioned on mobile devices, centered on tablets, and anchored to input on larger screens to enhance the user experience.
Demo
<script setup>
const myResp = {
}
</script>
<template>
<MbscPopup :responsive="myResp" />
</template>
Welcome to our website!
Have fun navigating through the demos.
SFC JSSFC TS
<script setup>
import { MbscButton, MbscPage, MbscPopup, setOptions } from '@mobiscroll/vue'
import { ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const isPopupOpen = ref(false)
const buttonRef = ref(null)
const myAnchor = ref()
const myResponsive = {
xsmall: {
display: 'bottom'
},
small: {
display: 'center'
},
custom: {
// Custom breakpoint
breakpoint: 800,
display: 'anchored'
}
}
function openPopup() {
myAnchor.value = buttonRef.value.instance.nativeElement
isPopupOpen.value = true
}
</script>
<template>
<MbscPage>
<div class="mbsc-form-group">
<div class="mbsc-button-group-block">
<MbscButton ref="buttonRef" @click="openPopup">Open popup</MbscButton>
</div>
</div>
<MbscPopup
:isOpen="isPopupOpen"
:anchor="myAnchor"
:responsive="myResponsive"
@close="isPopupOpen = false"
>
<div class="mbsc-align-center mbsc-padding">
<img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg" />
<h4>Welcome to our website!</h4>
<p>Have fun navigating through the demos.</p>
</div>
</MbscPopup>
</MbscPage>
</template>
<style>
/* style */
</style><script setup lang="ts">
import { MbscButton, MbscPage, MbscPopup, setOptions } from '@mobiscroll/vue'
import type { MbscPopupOptions, MbscResponsiveOptions } from '@mobiscroll/vue'
import { ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const isPopupOpen = ref(false)
const buttonRef = ref<any>(null)
const myAnchor = ref<any>(null)
const myResponsive: MbscResponsiveOptions<MbscPopupOptions> = {
xsmall: {
display: 'bottom'
},
small: {
display: 'center'
},
custom: {
// Custom breakpoint
breakpoint: 800,
display: 'anchored'
}
}
function openPopup() {
myAnchor.value = buttonRef.value.instance.nativeElement
isPopupOpen.value = true
}
</script>
<template>
<MbscPage>
<div class="mbsc-form-group">
<div class="mbsc-button-group-block">
<MbscButton ref="buttonRef" @click="openPopup">Open popup</MbscButton>
</div>
</div>
<MbscPopup
:isOpen="isPopupOpen"
:anchor="myAnchor"
:responsive="myResponsive"
@close="isPopupOpen = false"
>
<div class="mbsc-align-center mbsc-padding">
<img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg" />
<h4>Welcome to our website!</h4>
<p>Have fun navigating through the demos.</p>
</div>
</MbscPopup>
</MbscPage>
</template>
<style>
/* style */
</style>