ScrollView

Represents the Kendo UI for Vue Native ScrollView component.

jsx

<template>
  <div>
    <ScrollView
      :style="{
        width: '512px',
        height: '384px',
      }"
      :data-items="items"
      :content="'content'"
    >
      <template #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>