General Calendar Cards Color Date & Time Event Calendar Forms Grid Layout Image Listview Measurement Navigation Number Numpad Option List Page Popup Range Scroller Scrollview Select Timer Timespan Treelist Tools Accessibility

Page

About

The page component adds basic styling to a container, based on the theme being used, like background and typography. Additionally, if top and / or bottom navigation is also being used, all pages get a top and bottom padding accordingly to accommodate the navigation without overlapping the content.

Pages are required to be the direct descendants of the body element (or the element specified by the context setting).
Here is an example for the page component
import { MbscPageOptions } from '../lib/mobiscroll/js/mobiscroll.angular.min.js';

@Component({
    selector: 'my-example',
    template: `<mbsc-page [options]="options">
        <div class="mbsc-padding">
            <h1>Heading 1</h1>
            <h2>Heading 2</h2>
            <h3>Heading 3</h3>
            <h4>Heading 4</h4>
            <h5>Heading 5</h5>
            <h6>Heading 6</h6>
            <p class="mbsc-bold"> Bold paragraph with a <a href="#">link</a> inside.</p>
            <p class="mbsc-medium"> Medium paragraph with a <a href="#">link</a> inside.</p>
            <p class="mbsc-thin"> Thin paragraph with a <a href="#">link</a> inside.</p>
            <p class="mbsc-italic"> Italic paragraph with a <a href="#">link</a> inside.</p>
        </div>
    </mbsc-page>`
})
export class MyExampleComponent {
    options: MbscPageOptions = {
        theme: 'material'
    };
}

Passing event handlers

When passing event handlers inline, the instance of the component becomes the inst property of the event object.

Passing inline event handlers
<mbsc-page (onInit)="init()"></mbsc-page>
<!-- with default parameters -->
<mbsc-page (onInit)="initDefaultEvent($event)"></mbsc-page>
<!-- with additional parameters -->
<mbsc-page (onInit)="initAdditionalEvent($event, 'myAddition')"></mbsc-page>
export class MyExampleClass {
    // simple handler without any parameters
    init() {
        console.log('simple handler'); // prints 'simple handler'
    }

    // event handler with the default event parameter
    initDefaultEvent(event: any) {
        console.log(event, event.inst); // prints the event object and the mobiscroll page control instance
    }

    // event handler with additional parameters
    initAdditionalEvent(event: any, addition: string) {
        console.log(addition); // prints 'myAddition'
    }
}

Using with Ionic

The Page component can be used tha same way with Ionic, as any other angular component.

Modules

The MbscPageModule can be used to import all the directives and components from below.

Components

Component Description
<mbsc-page> Page component
<mbsc-note> Note component

Attributes

Attribute Data type Description
[options] MbscPageOptions Attribute used to pass the options

Options

Name Type Default value Description
context String or HTMLElement 'body' Context in which mobiscroll is appended and positioned (if not inline). Can be a selector string or a DOM element.
theme String undefined Sets the visual appearance of the component.

If it is 'auto' or undefined, the theme will automatically be chosen based on the platform. If the theme for the specific platform is not present, it will revert to the Mobiscroll theme.

Supplied themes:
  • 'ios' - new iOS 7, 8, 9 theme
  • 'material' - Material theme (Android 5.x)
  • 'material-dark' - Material dark theme (Android 5.x)
  • 'mobiscroll' - Mobiscroll theme
  • 'mobiscroll-dark' - Mobiscroll Dark theme
  • 'windows' - Windows theme
  • 'windows-dark' - Windows theme (dark version)
It's possible to modify theme colors or create custom themes.
Make sure that the theme you set is included in the downloaded package.

Events

Name Description
onInit(event, inst) Triggered when the component is initialized.

Parameters

  • event: Object - The event object.
  • inst: Object - The instance object of the page.

Example

export class MyExample {
    settings: any = {
        onInit: (event, inst) => {
        }
    }
}

Methods

Name Description
getInst() Returns the object instance.

Returns: Object

  • The object instance.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.getInst();
option(options) Sets one or more options for the component.

Parameters

  • options: Object - A map of option-value pairs to set.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.option({
    display: 'bottom',
    lang: 'de'
});
tap(el, handler) Attaches the handler function to the tap event of element el.

Parameters

  • el: Object - The element with tap event.
  • handler: Function - If the action was initiated with touch event, handler is called on touchend, otherwise on click.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.tap('#element', function () { alert("It's a tap!"); });

Localization

Name Type Default value Description
lang String 'en-US' Language of the component. Based on the language string the component loads the language based default settings from the language modules.
Supported languages:
  • Arabic: 'ar'
  • Bulgarian: 'bg'
  • Catalan: 'ca'
  • Czech: 'cs'
  • Chinese: 'zh'
  • Croatian: 'hr'
  • Danish: 'da'
  • Dutch: 'nl'
  • English: 'en' or 'en-US' or undefined
  • English (UK): 'en-UK' or 'en-GB'
  • Farsi: 'fa'
  • German: 'de'
  • Greek: 'el'
  • Spanish: 'es'
  • Finnish: 'fi'
  • French: 'fr'
  • Hebrew: 'he'
  • Hindi: 'hi'
  • Croatian: 'hr'
  • Hungarian: 'hu'
  • Italian: 'it'
  • Japanese: 'ja'
  • Korean: 'ko'
  • Lithuanian: 'lt'
  • Norwegian: 'no'
  • Polish: 'pl'
  • Portuguese (Brazilian): 'pt-BR'
  • Portuguese (European): 'pt-PT'
  • Romanian: 'ro'
  • Russian: 'ru'
  • Russian (UA): 'ru-UA'
  • Slovak: 'sk'
  • Serbian: 'sr'
  • Thai: 'th'
  • Swedish: 'sv'
  • Turkish: 'tr'
  • Ukrainian: 'ua'
  • Vietnamese: 'vi'
rtl Boolean false Right to left display.

Typography

Typography variations can be used to text styling.

Headings

Headings (h1 through h6) inside the Page component are styled automatically. To use the same styles outside of the Page componenet, use the css classes .mbsc-h1 through .mbsc-h6.

Headings
<!-- Inside mbsc-page -->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<!-- Outside mbsc-page -->
<h1 class="mbsc-h1">Heading 1</h1>
<h2 class="mbsc-h2">Heading 2</h2>
<h3 class="mbsc-h3">Heading 3</h3>
<h4 class="mbsc-h4">Heading 4</h4>
<h5 class="mbsc-h5">Heading 5</h5>
<h6 class="mbsc-h6">Heading 6</h6>
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

Paragraphs

Paragraphs inside the Page component are styled automatically. To use the same styles outside of the Page componenet, use the .mbsc-p css class.

Paragraphs
<!-- Inside mbsc-page -->
<p>This is a paragraph.</p>

<!-- Outside mbsc-page -->
<p class="mbsc-p">This is a paragraph.</p>

This is a paragraph.

Lists

Lists (ul and ol) inside the Page component are styled automatically. To use the same styles outside of the Page componenet, use the .mbsc-ul and .mbsc-ol css classes.

Unordered list
<!-- Inside mbsc-page -->
<ul>
    <li>List item</li>
    <li>List item</li>
    <li>
        List item
        <ul>
            <li>Nested list item</li>
            <li>Nested list item</li>
            <li>Nested list item</li>
        </ul>
    </li>
    <li>List item</li>
</ul>

<!-- Outside mbsc-page -->
<ul class="mbsc-ul">
    <li>List item</li>
    <li>List item</li>
    <li>
        List item
        <ul class="mbsc-ul">
            <li>Nested list item</li>
            <li>Nested list item</li>
            <li>Nested list item</li>
        </ul>
    </li>
    <li>List item</li>
</ul>
  • List item
  • List item
  • List item
    • Nested list item
    • Nested list item
    • Nested list item
  • List item
Ordered list
<!-- Inside mbsc-page -->
<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>
        Third item
        <ol>
            <li>First subitem</li>
            <li>Second subitem</li>
        </ol>
    </li>
</ol>

<!-- Outside mbsc-page -->
<ol class="mbsc-ol">
    <li>First item</li>
    <li>Second item</li>
    <li>
        Third item
        <ol class="mbsc-ol">
            <li>First subitem</li>
            <li>Second subitem</li>
        </ol>
    </li>
</ol>
  1. First item
  2. Second item
  3. Third item
    1. First subitem
    2. Second subitem

Text utilities

Ultra-bold
<p class="mbsc-ultra-bold">This is a paragraph with ultra-bold font-weight. </p>

This is a paragraph with ultra-bold font-weight.

Bold
<p class="mbsc-bold">This is a paragraph with bold font-weight. </p>

This is a paragraph with bold font-weight.

Medium
<p class="mbsc-medium">This is a paragraph with medium font-weight. </p>

This is a paragraph with medium font-weight.

Light
<p class="mbsc-light">This is a paragraph with light font-weight. </p>

This is a paragraph with light font-weight.

Thin
<p class="mbsc-thin">This is a paragraph with thin font-weight. </p>

This is a paragraph with thin font-weight.

Italic
<p class="mbsc-italic">This is a paragraph with italic font-style. </p>

This is a paragraph with italic font-style.

Padding
<div class="mbsc-padding">This is a section with padding. </div>
This is a a section with padding.
Left align
<p class="mbsc-align-left">This is a paragraph with text aligned left. </p>

This is a paragraph with text aligned left.

Right align
<p class="mbsc-align-right">This is a paragraph with text aligned right. </p>

This is a paragraph with text aligned right.

Center align
<p class="mbsc-align-center">This is a paragraph with centered text. </p>

This is a paragraph with centered text.

Justified text
<p class="mbsc-align-justify">This is a paragraph with justified text. </p>

This is a paragraph with justified text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Extra small line height
<p class="mbsc-line-height-xs">This is a paragraph with extra small line height. </p>
This is a paragraph with extra small line height. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Small line height
<p class="mbsc-line-height-s">This is a paragraph with small line height. </p>
This is a paragraph with small line height. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Medium line height
<p class="mbsc-line-height-m">This is a paragraph with medium line height. </p>
This is a paragraph with medium line height. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Large line height
<p class="mbsc-line-height-l">This is a paragraph with large line height. </p>
This is a paragraph with large line height. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Extra large line height
<p class="mbsc-line-height-xl">This is a paragraph with extra large line height. </p>
This is a paragraph with extra large line height. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Floating

Float Left
<div class="mbsc-pull-left">This is a div pulled left. </div>
This is a div pulled left.
Float Right
<div class="mbsc-pull-right">This is a div pulled right. </div>
This is a div pulled right.

Empty view

In case if you have an empty content or you have no item in your list, you can illustrate that with an element which has the .mbsc-empty class. You can add a title and a description for it.

Empty view styling
<div class="mbsc-empty">
    <h3>No memories</h3>
    <p>Memories will appear here when more photos and videos are added to the library</p>
</div>

Notes

Provide inline feedback messages for typical user actions. The notes include several predefined colors, each serving its own semantic purpose.

Simple Note
<mbsc-page>
    <mbsc-note color="primary">This is a primary note</mbsc-note>
    <mbsc-note color="secondary">This is a secondary note</mbsc-note>
    <mbsc-note color="success">This is a success note</mbsc-note>
    <mbsc-note color="danger">This is a danger note</mbsc-note>
    <mbsc-note color="warning">This is a warning note</mbsc-note>
    <mbsc-note color="info">This is a info note</mbsc-note>
    <mbsc-note color="light">This is a light note</mbsc-note>
    <mbsc-note color="dark">This is a dark note</mbsc-note>
</mbsc-page>

Using with Ionic

The Note component can be used tha same way with Ionic, as any other angular component.

Attributes

Name Description
[color] Color of the note component. Can be 'primary', 'secondary', 'success', 'warning', 'danger', 'info', 'light', 'dark'

Images & Videos

Optimize your images and videos with the predefined classes.

Avatar images can be applied with the mbsc-avatar class.

Avatar image example
<img class="mbsc-avatar" src="image.png">

Thumbnail images can be applied with the mbsc-thumbnail class.

Thumbnail image example
<img class="mbsc-img-thumbnail" src="image.png">

Full width images and videos can be applied with the mbsc-fluid class

Full width image example
<img class="mbsc-media-fluid" src="picture.png">