Карусель полезна для отображения большого количества изображений в циклическом представлении. Он поставляется с функциональностью, которая позволяет пользователям просматривать изображения одно за другим. Это позволяет нескольким фрагментам связанного визуального контента занимать одно и то же место на экране. В этой статье мы узнаем, как создавать и настраивать карусели с помощью Vuetify.
Компонент v-carousel
Vuetify предоставляет компонент v-carousel для создания каруселей. Мы можем создать слайд в карусели, добавив новый компонент v-carousel-item в v-carousel. Здесь мы создаем 7 слайдов, каждый для цвета радуги.
<template>
<v-app>
<v-carousel>
<v-carousel-item v-for="color in colors" :key="color">
<v-sheet :color="color" height="100%" tile>
<v-row class="fill-height" align="center" justify="center">
<div class="text-h2">
{{ color }}
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
colors: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', '#7f00ff'],
}),
};
</script>Карусель всегда будет показывать первый слайд по умолчанию:
Мы можем изменить текущий слайд с помощью отображаемых стрелок. Стрелка влево показывает предыдущий слайд, а стрелка вправо — следующий слайд:
Значки разделителей карусели
Карусель поставляется с разделителями, которые указывают количество слайдов в карусели и тот, который она показывает в данный момент. v-carousel поставляется с реквизитом delimiter-icon, который позволяет нам настраивать значки-разделители с помощью любых доступных значков.
<template>
<v-app>
<v-carousel delimiter-icon="mdi-minus">
<v-carousel-item v-for="color in colors" :key="color">
<v-sheet :color="color" height="100%" tile>
<v-row class="fill-height" align="center" justify="center">
<div class="text-h2">
{{ color }}
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
colors: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', '#7f00ff'],
}),
};
</script>
Пользовательские карусельные переходы
Используйте реквизит transition, чтобы настроить переход, который карусель использует для отображения следующего изображения.
<template>
<v-app>
<v-carousel>
<v-carousel-item
v-for="color in colors"
:key="color"
transition="fade-transition"
>
<v-sheet :color="color" height="100%" tile>
<v-row class="fill-height" align="center" justify="center">
<div class="text-h2">
{{ color }}
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
colors: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', '#7f00ff'],
}),
};
</script>Вы также можете изменить переход, который карусель использует для отображения предыдущего изображения, с помощью реквизита reverse-transition:
<template>
<v-app>
<v-carousel>
<v-carousel-item
v-for="color in colors"
:key="color"
transition="fade-transition"
reverse-transition="fade-transition"
>
<v-sheet :color="color" height="100%" tile>
<v-row class="fill-height" align="center" justify="center">
<div class="text-h2">
{{ color }}
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
colors: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', '#7f00ff'],
}),
};
</script>Украсьте с помощью Vuetify
Полное руководство по созданию элегантных веб-приложений с помощью платформы Vuetify Material Design.
Получите бесплатную копию здесь.
Автоматические карусельные переходы
Цикл
Установка реквизита cycle на true на v-carousel приведет к автоматическому переходу к следующему слайду через заданное время.
<template>
<v-app>
<v-carousel cycle>
<v-carousel-item
v-for="color in colors"
:key="color"
>
<v-sheet :color="color" height="100%" tile>
<v-row class="fill-height" align="center" justify="center">
<div class="text-h2">
{{ color }}
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
colors: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', '#7f00ff'],
}),
};
</script>Интервал
По умолчанию карусель показывает каждый слайд с интервалом в 6 секунд перед автоматическим переходом к следующему слайду, когда свойство cycle установлено на true. Мы можем изменить этот интервал с помощью реквизита interval.
<template>
<v-app>
<v-carousel cycle interval="1000">
<v-carousel-item v-for="color in colors" :key="color">
<v-sheet :color="color" height="100%" tile>
<v-row class="fill-height" align="center" justify="center">
<div class="text-h2">
{{ color }}
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
colors: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', '#7f00ff'],
}),
};
</script>Скрытие элементов управления навигацией
Мы можем скрыть элементы управления каруселью, установив свойство show-arrows на false:
<template>
<v-app>
<v-carousel :show-arrows="false">
<v-carousel-item v-for="color in colors" :key="color">
<v-sheet :color="color" height="100%" tile>
<v-row class="fill-height" align="center" justify="center">
<div class="text-h2">
{{ color }}
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
colors: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', '#7f00ff'],
}),
};
</script>
Мы можем захотеть, чтобы карусель отображала элементы управления навигацией только при наведении на нее указателя мыши. Мы можем сделать это, установив для свойства show-arrows-on-hover значение true:
<template>
<v-app>
<v-carousel :show-arrows-on-hover="true">
<v-carousel-item v-for="color in colors" :key="color">
<v-sheet :color="color" height="100%" tile>
<v-row class="fill-height" align="center" justify="center">
<div class="text-h2">
{{ color }}
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
colors: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', '#7f00ff'],
}),
};
</script>Теперь, только когда вы наводите мышь на карусель, вы видите ее элементы управления:
Индивидуальные стрелки
Мы можем настроить стрелки карусели с помощью слотов prev и next.
<template> <v-app> <v-carousel> <template v-slot:prev="{ on, attrs }"> <v-btn color="green" v-bind="attrs" v-on="on"> Previous </v-btn> </template> <template v-slot:next="{ on, attrs }"> <v-btn color="blue" v-bind="attrs" v-on="on">Next</v-btn> </template> <v-carousel-item v-for="color in colors" :key="color"> <v-sheet :color="color" height="100%" tile> <v-row class="fill-height" align="center" justify="center"> <div class="text-h2"> {{ color }} </div> </v-row> </v-sheet> </v-carousel-item> </v-carousel> </v-app> </template> <script> export default { name: 'App', data: () => ({colors: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', '#7f00ff'], }), }; </script>
Скрытие разделителей карусели
Установка реквизита hide-delimiters на true скроет нижние элементы управления карусели.
<template>
<v-app>
<v-carousel hide-delimiters>
<v-carousel-item v-for="color in colors" :key="color">
<v-sheet :color="color" height="100%" tile>
<v-row class="fill-height" align="center" justify="center">
<div class="text-h2">
{{ color }}
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
colors: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', '#7f00ff'],
}),
};
</script>
Двусторонняя привязка с v-моделью
Мы можем использовать v-model на v-carousel, чтобы установить двустороннюю привязку между текущим слайдом карусели и переменной. В приведенном ниже коде мы создаем карусель и некоторый текст под ней, который отображает индекс текущего слайда с переменной carousel:
<template>
<v-app
<v-carousel v-model="carousel">
<v-carousel-item v-for="color in colors" :key="color">
<v-sheet :color="color" height="100%" tile>
<v-row class="fill-height" align="center" justify="center">
<div class="text-h2">
{{ color }}
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
<div class="d-flex justify-center mt-2">Slide: {{ carousel }}</div>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
carousel: 0,
colors: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', '#7f00ff'],
}),
};
</script>
Изменение отображаемого слайда-карусели обновляет carousel, который обновляет текст:
Теперь добавим две кнопки под текстом для изменения отображаемого слайда карусели:
<template>
<v-app>
<v-carousel v-model="carousel">
<v-carousel-item v-for="color in colors" :key="color">
<v-sheet :color="color" height="100%" tile>
<v-row class="fill-height" align="center" justify="center">
<div class="text-h2">
{{ color }}
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
<div class="d-flex justify-center mt-2">Slide: {{ carousel }}</div>
<div class="d-flex justify-center mt-2">
<v-btn class="mr-2" color="green" dark @click="carousel--"
>Previous</v-btn
>
<v-btn class="ml-2" color="blue" dark @click="carousel++">Next</v-btn>
</div>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
carousel: 0,
colors: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', '#7f00ff'],
}),
};
</script>
Кнопка «Назад» уменьшает carousel, что переводит карусель на предыдущий слайд, а кнопка «Далее» увеличивает carousel, чтобы перейти к следующему слайду:
Краткое содержание
Мы используем карусель в пользовательском интерфейсе для отображения ряда связанного визуального контента в одном и том же пространстве экрана. Используйте компоненты v-carousel и v-carousel-item для создания карусели и настройки ее поведения и внешнего вида.
Подпишитесь на нашу еженедельную рассылку, чтобы быть в курсе всех последних советов и руководств по Vuetify.
Получить обновленную статью на codingbeautydev.com.
