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 usage
<mobiscroll-card options="{ theme: 'ios' }">
    <mobiscroll-card-header>
        <mobiscroll-card-title>Title</mobiscroll-card-title>
        <mobiscroll-card-subtitle>Subtitle</mobiscroll-card-subtitle>
    </mobiscroll-card-header>
    <mobiscroll-card-content>Some content</mobiscroll-card-content>
    <mobiscroll-card-footer>
        Some footer
        <button ng-click="myClick()">Click for action</button>
    </mobiscroll-card-footer>
</mobiscroll-card>

<!-- as directives -->
<div mobiscroll-card="{ theme: 'ios' }">
    <mobiscroll-card-header>
        <mobiscroll-card-title>Title</mobiscroll-card-title>
        <mobiscroll-card-subtitle>Subtitle</mobiscroll-card-subtitle>
    </mobiscroll-card-header>
    <mobiscroll-card-content>Some content</mobiscroll-card-content>
    <mobiscroll-card-footer>
        Some footer
        <button ng-click="myClick()">Click for action</button>
    </mobiscroll-card-footer>
</div>

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 -->
<mobiscroll-card>
    <img src="https://mobiscroll.com/content/img/demos/card_4.png" />
    <mobiscroll-card-content>
        Content text...
    </mobiscroll-card-content>
    <mobiscroll-card-footer>
        <button class="mbsc-btn-flat">Btn</button>
    </mobiscroll-card-footer>
</mobiscroll-card>

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

<!-- avatar in header -->
<mobiscroll-card>
    <mobiscroll-card-header>
        <img mobiscroll-avatar src="women_profile.png" />
        <mobiscroll-card-title>Johana Doe</mobiscroll-card-title>
        <mobiscroll-card-subtitle>at 4:55 PM</mobiscroll-card-subtitle>
    </mobiscroll-card-header>
    <mobiscroll-card-content>
        Content text...
    </mobiscroll-card-content>
    <mobiscroll-card-footer>
        <button class="mbsc-btn-flat" data-icon="line-heart">Like</button>
    </mobiscroll-card-footer>
</mobiscroll-card>
Form elements
<mobiscroll-card>
    <mobiscroll-card-header>
        <mobiscroll-card-title>Form components</mobiscroll-card-title>
    </mobiscroll-card-header>
    <mobiscroll-card-content>
        <div class="mbsc-form-group">
            <p>Some text as content, that explains the form purpose.</p>
        </div>
        <div class="mbsc-form-group">
            <label>
                Some Input
                <input type="text" />
            </label>
            <label>
                Date Component
                <input type="text" mobiscroll-date />
            </label>
            <label>
                Calendar
                <input type="text" mobiscroll-calendar />
            </label>
        </div>
        <button>Button</button>
    </mobiscroll-card-content>
</mobiscroll-card>

To use the directives of this module you have to set a dependency in you app to 'mobiscroll-cards'

Directive Description
mobiscroll-card Attribute for the card component. When used as an attribute, the associated scope property will hold the settings passed to the card.
mobiscroll-card-header Directive for the card header
mobiscroll-card-content Directive for the card content
mobiscroll-card-title Directive for the card title
mobiscroll-card-subtitle Directive for the card subtitle
The Accordion component will help organizing the collapsible cards. Accordion allows showing only one collapsible item at the same time.

Attributes

Name Description
data-collapsible If a card has the data-collapsible attribute, the card content will be collapsible. Collapsed is the default state of the collapsible content. It can be changed wit the help of the data-open property.
data-open If a card group has the data-open attribute, the collapsible content will be opened by default.

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 modify theme colors or create custom themes.
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
$scope.mobiscrollInstance.getInst();
hide() Hides the card's collapsible content.

Example

Methods can be called on an instance. For more details see calling methods
$scope.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
$scope.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
$scope.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
$scope.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
$scope.mobiscrollInstance.toggle();