New to Kendo UI for Vue? Start a free 30-day trial

ScrollView

Represents the Kendo UI for Vue Native ScrollView component.

<template>
  <div>
    <ScrollView
      :style="{
        width: '512px',
        height: '384px',
      }"
      :data-items="items"
      :content="'content'"
    >
      <template v-slot:content="{ props }">
        <div class="image-with-text">
          <img
            :src="props.item.url"
            :alt="`Photo ${props.item.position}`"
            :style="{
              width: '512px',
              height: '384px',
            }"
            :draggable="false"
          />
        </div>
      </template>
    </ScrollView>
  </div>
</template>

<script>
import { ScrollView } from '@progress/kendo-vue-scrollview';

export default {
  components: {
    ScrollView,
  },
  data() {
    return {
      items: [
        {
          url: 'https://www.telerik.com/kendo-vue-ui/components/layout/assets/card/kukeri.jpg',
        },
        {
          url: 'https://www.telerik.com/kendo-vue-ui/components/layout/assets/card/martenitsa.jpg',
        },
        {
          url: 'https://www.telerik.com/kendo-vue-ui/components/layout/assets/card/rose_festival.jpg',
        },
      ],
    };
  },
};
</script>

In this article

Not finding the help you need?