Scrollview
The scrollview component is a UI tool that helps you easily implement common scrollview patterns.
Basic usage
<!-- Simple content -->
<mbsc-scrollview>
<mbsc-scrollview-item>
Sample content inside a custom horizontall scrollview component
</mbsc-scrollview-item>
<mbsc-scrollview-item>
Sample content inside a custom horizontall scrollview component
</mbsc-scrollview-item>
<mbsc-scrollview-item>
Sample content inside a custom horizontall scrollview component
</mbsc-scrollview-item>
</mbsc-scrollview>
<!-- passing options -->
<mbsc-scrollview itemWidth="150" theme="ios">
<mbsc-scrollview-item>
Sample content inside a custom horizontall scrollview component
</mbsc-scrollview-item>
<mbsc-scrollview-item>
Sample content inside a custom horizontall scrollview component
</mbsc-scrollview-item>
<mbsc-scrollview-item>
Sample content inside a custom horizontall scrollview component
</mbsc-scrollview-item>
</mbsc-scrollview>
<mbsc-scrollview itemWidth="200">
<mbsc-scrollview-item *ngFor="let item of myExampleData">{{item.text}}</mbsc-scrollview-item>
</mbsc-scrollview>
Passing events
All events can be used inline with the component. When passing event handlers inline, the instance of the component becomes the inst
property of the event object.
<mbsc-scrollview (onItemTap)="itemTap()">
...
</mbsc-scrollview>
<!-- with default parameters -->
<mbsc-scrollview (onItemTap)="withDefaultEvent($event)">
...
</mbsc-scrollview>
<!-- with additional parameters -->
<mbsc-scrollview (onItemTap)="withAdditionalEvent($event, 'myAddition')">
...
</mbsc-scrollview>
export class MyExampleClass {
// simple handler without any parameters
itemTap() {
console.log('simple handler'); // prints 'simple handler'
}
// event handler with the default event parameter
withDefaultEvent(event: any) {
console.log(event, event.inst); // prints the event object and the mobiscroll scrollview control instance
}
// event handler with additional parameters
withAdditionalEvent(event: any, addition: string) {
console.log(addition); // prints 'myAddition'
}
}
Using with Ionic
The Scrollview components can be used the same way with Ionic, as any other angular component.
Modules
The MbscScrollViewModule
can be used to import all the components from below.
Components
Attributes
Attributes for the items
Attribute | Data type | Description |
---|---|---|
[id] | string | Used to pass an id to the item. Needed when navigation occurs programmatically. |
Attributes for the wrapper component
Attribute | Data type | Description |
---|---|---|
[options] | MbscScrollerOptions | Attribute used to pass the options as one object |
The following options can be used as attributes to customize the scrollview component further:
For many more examples - simple and complex use-cases - check out the scrollview demos for angular.
Options
Name | Type | Default value | Description |
---|---|---|---|
context | String, HTMLElement | 'body' |
The DOM element in which the component is appended and positioned (if not inline). Can be a selector string or a DOM element. |
display | String | 'inline' |
Controls the position of the scrollview. Possible values:
|
itemWidth | Number | undefined |
If layout is 'fixed' , it represents the exact witdh of the items in pixels,
otherwise the minimum width of the items, and the items will be stretched to fill the container width.
|
layout |
String Number |
'liquid' |
Possible values:
|
mousewheel | Boolean | false |
Enables mousewheel / touchpad scroll. |
paging | Boolean | false |
Scroll one page at a time. The page size will be the width of the container. |
snap | Boolean | false |
When the scrollview is scrolled it snaps to the edge of the last visible item which is at the opposite direction of the scroll. |
theme | String | undefined |
Sets the visual appearance of the component.
If it is If the theme for the specific platform is not present, it will default to the Mobiscroll theme. Supplied themes:
Starting from v4.9.0 setting directly the dark version of the theme is deprecated.
Use the themeVariant option instead to control the light / dark appearance of the theme.
Make sure that the theme you set is included in the downloaded package.
|
themeVariant | String | undefined |
Controls which variant of the theme will be used (light or dark). Possible values:
If not set, only the theme setting will determine which theme to use.
To use the option with custom themes, make sure to create two custom themes,
where the dark version has the same name as the light one, suffixed with
The option will not have any effect if the theme option explicitly
sets the dark version of a theme, e.g.
theme: 'ios-dark' .
|
threshold | Number | 10 |
Minimum horizontal movement in pixels before the scrolling starts. |
Setting options dynamically
There are two ways to modify options after initalization
-
Using the option method.
The option method always triggers reinitialization. Most of the settings can be updated only this way, updating without initialization has no effect, because the markup is already generated. If the scroller was visible, the reinitialization hides it and it's not shown again automatically (except in inline display mode).
Here is an example for the dynamic option changeimport { ViewChild } from '@angular/core'; @Component({ selector: 'my-example', template: ` <input mbsc-scrollview #myVariable="mobiscroll" [(ngModel)]="myExample"/> <button (click)="changeOptions()">Change theme and language</button> ` }) export class MyExample { @ViewChild('myVariable') myRef: any; // Modify options changeOptions() { this.myRef.instance.option({ theme: 'mobiscroll', lang: 'de' }); } }
-
Modify directly the
settings
object.
Useful when changing dynamic settings, which do not need redraw (e.g. readonly, calendar marked days).
Exampleimport { ViewChild } from '@angular/core'; @Component({ selector: 'my-example', template: ` <input mbsc-scrollview #myVariable="mobiscroll" [mbsc-options]="myOptions"/> <button (click)="changeOptions()">Change readonly</button> ` }) export class MyExample { @ViewChild('myVariable') myRef: any; // get instance and modify a setting changeOptions() { this.myRef.instance.settings.readonly = true; } // Modify settings in an event myOptions: any = { onBeforeShow: (event, inst) => { inst.settings.readonly = true; } } }
Events
this
reference.inst
parameter is passed as a property to the event.Name | Description | |
---|---|---|
onAnimationEnd(event, inst) | Gets fired when an autonomous scrolling/sliding ends.
Parameters
Example
|
|
onAnimationStart(event, inst) | Gets fired when an autonomous scrolling/sliding is starts.
Parameters
Example
|
|
onGestureEnd(event, inst) | Gets fired when the user ends the scrolling gesture.
Parameters
Example
|
|
onGestureStart(event, inst) | Gets fired when the user ends the scrolling(swiping) gesture.
Parameters
Example
|
|
onInit(event, inst) |
Triggered when the component is initialized.
Parameters
Example
|
|
onItemTap(event, inst) |
Triggered when an item is tapped.
Parameters
Example
|
|
onMarkupReady(event, inst) |
Triggered when the html markup of the component is generated, but it is not yet shown.
It is useful, if you want to make modifications to the markup (e.g. add custom elements), before the positioning runs.
Parameters
Example
|
|
onMove(event, inst) | Gets fired when an autonomous scrolling/sliding ends.
Parameters
Example
|
Methods
Name | Description | |
---|---|---|
navigate(item [, toggle ] [, animTime]) |
Scrolls the scrollview to the specified item.
Parameters
ExampleMethods can be called on an instance. For more details see calling methods
|
|
next([toggle]) | Scrolls the scrollview to the next item.
Parameters
ExampleMethods can be called on an instance. For more details see calling methods
|
|
option(options) |
Sets one or more options for the component.
Parameters
ExampleMethods can be called on an instance. For more details see calling methods
|
|
prev([toggle]) | Scrolls the scrollview to the previous item.
Parameters
ExampleMethods can be called on an instance. For more details see calling methods
|
|
refresh() |
Recalculate dimensions needed for scrolling.
ExampleMethods can be called on an instance. For more details see calling methods
|
|
tap(el, handler) |
Attaches the handler function to the tap event of element el .
Parameters
ExampleMethods can be called on an instance. For more details see calling methods
|
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:
|
rtl | Boolean | false |
Right to left display. |