Theming capabilities
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
<mbsc-popup
theme="ios "
themeVariant="light " >
</mbsc-popup>
Welcome to our website!
Have fun navigating through the demos.
ComponentTemplateCSS
import { CommonModule } from '@angular/common';
import { Component, ViewChild } from '@angular/core';
import { MbscModule, MbscPopup, MbscPopupOptions, setOptions } from '@mobiscroll/angular';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, MbscModule],
})
export class AppComponent {
@ViewChild('popup', { static: false }) popup!: MbscPopup;
popupAnchor: HTMLElement | undefined;
popupOptions: MbscPopupOptions = {
theme: 'material', // Can be 'ios', 'material', 'windows' or 'auto' - in case of 'auto', the theme will automatically be set based on the platform
themeVariant: 'dark', // Can be 'light', 'dark' or 'auto' - in case of 'auto' it is set based in the active system theme
display: 'anchored',
buttons: ['ok', 'cancel'],
};
openPopup(ev: any): void {
this.popupAnchor = ev.currentTarget;
this.popup.open();
}
}
<mbsc-page>
<div class="mbsc-button-group-block">
<mbsc-button (click)="openPopup($event)">Open popup</mbsc-button>
</div>
<mbsc-popup #popup [anchor]="popupAnchor" [options]="popupOptions">
<div class="mbsc-align-center mbsc-padding">
<img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg" alt="logo" />
<h4>Welcome to our website!</h4>
<p>Have fun navigating through the demos.</p>
</div>
</mbsc-popup>
</mbsc-page>
/* style */