ScrollViewComponent

Represents the Kendo UI ScrollView component for Angular.

ts

@Component({
    selector: 'my-app',
    template: `
      <kendo-scrollview
         [data]="items"
         [width]="width"
         [height]="height"
         [endless]="endless"
         [pageable]="pageable">
        <ng-template let-item="item">
          <h2 class="demo-title">{{item.title}}</h2>
          <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
        </ng-template>
      </kendo-scrollview>
    `,
    styles: [`
      .k-scrollview-wrap {
        margin: 0 auto;
      }
      .demo-title {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: 0;
        padding: 15px;
        color: #fff;
        background-color: rgba(0,0,0,.4);
        text-align: center;
        font-size: 24px;
      }
    `]
})

class AppComponent {
 public width: string = "600px";
 public height: string = "400px";
 public endless: boolean = false;
 public pageable: boolean = false;
 public items: any[] = [
      { title: 'Flower', url: 'https://bit.ly/2cJjYuB' },
      { title: 'Mountain', url: 'https://bit.ly/2cTBNaL' },
      { title: 'Sky', url: 'https://bit.ly/2cJl3Cx' }
 ];
}

Selector

kendo-scrollview

Export Name

Accessible in templates as #kendoScrollViewInstance="kendoScrollView"

Inputs

Name	Type	Default	Description
activeIndex	number		Represents the current item index (see example).
animate	boolean		Enables or disables the built-in animations (see example). By default, animate is set to true and animations are enabled.
arrows	boolean		Enables or disables the built-in navigation arrows (see example). By default, arrows is set to false and arrows are disabled.
data	any[]		Provides the data source for the ScrollView (see example).
endless	boolean		Enables or disables the endless scrolling mode in which the data source items are endlessly looped (see example). By default, endless is set to false and the endless scrolling mode is disabled.
height	string		Sets the height of the ScrollView (see example). By default, the height is not set and you have to explicitly define the height value.
pageable	boolean		Enables or disables the built-in pager (see example). By default, pageable is set to false and paging is disabled.
pagerOverlay	ScrollViewPagerOverlay		Sets pagerOverlay to one of three possible values: dark, light or none. By default, the pager overlay is set to none.
width	string		Sets the width of the ScrollView (see example). By default, the width is not set and you have to explicitly define the width value.

Events

Name	Type	Description
activeIndexChange	EventEmitter<number>	Fires after the activeIndex has changed. Allows for two-way binding of the activeIndex property.
itemChanged	EventEmitter<ItemChangedEvent>	Fires after the current item is changed.

Methods

next
Navigates the ScrollView to the next item.

prev
Navigates the ScrollView to the previous item.