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

Cards

Card component contain and organize your information. Cards contains unique related data, for example, a photo, text, and form element all about a single subject.

Simple examples
<!-- simple usage -->
<mbsc-card>
    <mbsc-card-header>
        <mbsc-card-title>Title</mbsc-card-title>
    </mbsc-card-header>
    <mbsc-card-content>Some content</mbsc-card-content>
</mbsc-card>

<!-- passing options inline -->
<mbsc-card theme="ios">
    <mbsc-card-header>
        <mbsc-card-title>Title of the card</mbsc-card-title>
    </mbsc-card-header>
    <mbsc-card-content>Simple text content. Will be displayed in the content area.</mbsc-card-content>
</mbsc-card>

<!-- header, content, footer -->
<mbsc-card>
    <mbsc-card-header>
        <mbsc-card-title>Title</mbsc-card-title>
        <mbsc-card-subtitle>Subtitle</mbsc-card-subtitle>
    </mbsc-card-header>
    <mbsc-card-content>Some content</mbsc-card-content>
    <mbsc-footer>
        Footer here
        <button (click)="myClick()">Click for action</button>
    </mbsc-footer>
</mbsc-card>    

Content types

Cards support a wide variety of content, including images, text, list, form components and more. Below are examples of what’s supported.

Images are displayed as full width by default

Images
<!-- fluid image -->
<mbsc-card>
    <img src="https://mobiscroll.com/content/img/demos/card_4.png" />
    <mbsc-card-content>
        Content text...
    </mbsc-card-content>
    <mbsc-card-footer>
        <mbsc-button flat>Btn</mbsc-button>
    </mbsc-card-footer>
</mbsc-card>

<!-- article type card -->
<mbsc-card>
    <img class="mbsc-img-thumbnail mbsc-pull-left" src="https://mobiscroll.com/content/img/demos/card_4.png" width="100" height="100">
    <mbsc-card-header>
        <mbsc-card-title>Article title</mbsc-card-title>
    </mbsc-card-header>
    <mbsc-card-content>
        Article text...
    </mbsc-card-content>
</mbsc-card>

<!-- avatar in header -->
<mbsc-card>
    <mbsc-card-header>
        <mbsc-avatar src="women_profile.png"></mbsc-avatar>
        <mbsc-card-title>Johana Doe</mbsc-card-title>
        <mbsc-card-subtitle>at 4:55 PM</mbsc-card-subtitle>
    </mbsc-card-header>
    <mbsc-card-content>
        Content text...
    </mbsc-card-content>
    <mbsc-card-footer>
        <mbsc-button flat icon="line-heart">Like</mbsc-button>
    </mbsc-card-footer>
</mbsc-card>
Form components
<mbsc-card>
    <mbsc-card-header>
        <mbsc-card-title>Title of the card</mbsc-card-title>
    </mbsc-card-header>
    <mbsc-card-content>
        <div class="mbsc-form-group">
            <mbsc-input [(ngModel)]="name">Name</mbsc-input>
            <mbsc-input type="password" [(ngModel)]="pass">Password</mbsc-input>
            <mbsc-checkbox [(ngModel)]="agreed">I agree</mbsc-checkbox>
        </div>
        <mbsc-button flat>Login</mbsc-button>
    </mbsc-card-content>
</mbsc-card>
Listview items
<mbsc-listview theme="ios">
    <mbsc-listview-item mbsc-card *ngFor="let item of myItems">
        <mbsc-card-header>
            <mbsc-card-title>{{item.name}}</mbsc-card-title>
            <mbsc-card-subtitle>{{item.description}}</mbsc-card-subtitle>
        </mbsc-card-header>
        <mbsc-card-content>{{item.text}}</mbsc-card-content>
    </mbsc-listview-item>
</mbsc-listview>
Collapsible
<mbsc-card collapsible [open]="isCardOpen">
    <mbsc-card-header>
        <mbsc-card-title>Title</mbsc-card-title>
        <mbsc-card-subtitle>Subtitle</mbsc-card-subtitle>
    </mbsc-card-header>
    <mbsc-card-content>
        Content text...
    </mbsc-card-content>
</mbsc-card>

Modules

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

Components

Component Description
<mbsc-card> Component for the card
<mbsc-card-header> Component for the card header
<mbsc-card-content> Component for the card contents
<mbsc-card-title> Component for the card title
<mbsc-card-subtitle> Component for the card subtitle

Directives

Directive Description
[mbsc-card] Directve for the card
[mbsc-options] Directve used to pass a settings object to the cards directive
[collapsible] Specify if the card will be collapsible.
[open] Specify the state of the collapsible. By default is false.

The following options can be used as attributes to customize the calendar component.

The Accordion component will help organizing the collapsible cards. Accordion allows showing only one collapsible item at the same time.

Options

Name Type Default value Description
collapsible Boolean undefined If it is defined the card content will be collapsible and clicking on the card header will be the trigger to collapse. It accepts a boolean value if true the collapsible will be opened by default.
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:
  • 'bootstrap' - Bootstrap 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 create custom themes in css by prefixing any css class used in the cards markup with the theme name and the 'mbsc' prefix, e.g.: .mbsc-my-theme .dwwr { /* My CSS */ }, and set the theme option to 'my-theme'
Make sure that the theme you set is included in the downloaded package.

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();
hide() Hides the card's collapsible content.

Example

Methods can be called on an instance. For more details see calling methods

mobiscrollInstance.hide();
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'
});
show() Shows the card's collapsible content.

Example

Methods can be called on an instance. For more details see calling methods

mobiscrollInstance.show();
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!"); });
toggle() Toggles the card's collapsible content.

Example

Methods can be called on an instance. For more details see calling methods

mobiscrollInstance.toggle();