The look and feel of the popover can be deeply customized. There are four levels of customization:
- Base themes: Choose between iOS, Material and Windows.
- Light or dark: Every theme has a
lightanddarkvariant. Setting thethemeVariantto'auto'will switch based on system settings. - Custom themes: Use the theme builder to customize the colors and make it match your brand.
- Custom CSS: If you need further customization, the sky is the limit with CSS overrides.
You can also see how every example looks by changing the theme from the header.
Demo
Pick a base theme
Then choose between light or dark theme variant
Turn dark theme on
Or build a custom theme based on any base theme
Use the theme builder or Sass to customize themes
<template>
<MbscPopup
theme="ios "
themeVariant="light "
/>
</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 buttonRef = ref(null)
const isPopupOpen = ref(false)
const myAnchor = ref()
function openPopup() {
myAnchor.value = buttonRef.value.instance.nativeElement
isPopupOpen.value = true
}
</script>
<template>
<MbscPage>
<div class="mbsc-button-group-block">
<MbscButton ref="buttonRef" @click="openPopup">Open popup</MbscButton>
</div>
<!-- theme: can be 'ios', 'material', 'windows' or 'auto' - in case of 'auto', the theme will automatically be set based on the platform -->
<!-- themeVariant: can be 'light', 'dark' or 'auto' - in case of 'auto' it is set based in the active system theme -->
<MbscPopup
display="anchored"
:anchor="myAnchor"
theme="material"
themeVariant="dark"
:isOpen="isPopupOpen"
:buttons="['ok', 'cancel']"
@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 { ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const isPopupOpen = ref<boolean>(false)
const buttonRef = ref<any>(null)
const myAnchor = ref<any>(null)
function openPopup() {
myAnchor.value = buttonRef.value.instance.nativeElement
isPopupOpen.value = true
}
</script>
<template>
<MbscPage>
<div class="mbsc-button-group-block">
<MbscButton ref="buttonRef" @click="openPopup">Open popup</MbscButton>
</div>
<!-- theme: can be 'ios', 'material', 'windows' or 'auto' - in case of 'auto', the theme will automatically be set based on the platform -->
<!-- themeVariant: can be 'light', 'dark' or 'auto' - in case of 'auto' it is set based in the active system theme -->
<MbscPopup
display="anchored"
:anchor="myAnchor"
theme="material"
themeVariant="dark"
:isOpen="isPopupOpen"
:buttons="['ok', 'cancel']"
@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>