Вот что мы будем создавать сегодня:
Вы увидите, как легко создать что-то подобное с потрясающей мощью Vuetify.
Только начинаете работать с Vuetify? Ознакомьтесь с этой статьей.
Отображение цветов
Для начала отобразим цвета. Мы создадим переменную colors, инициализированную массивом всех цветов радуги — красного, оранжевого, желтого, зеленого, синего, индиго и фиолетового.
Для создания карусели мы будем использовать компонент v-carousel. Мы будем использовать v-carousel-item, чтобы добавить слайд в карусель. Используя директиву v-for, мы перебираем каждый цвет в colors и добавляем элемент в карусель, чтобы показать его. Мы сделаем это, создав компонент v-sheet и установив его свойство color.
src/App.vue
<template>
<v-app>
<v-carousel>
<v-carousel-item v-for="color in colors" :key="color">
<v-sheet :color="color" height="100%" tile>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
carousel: 0,
colors: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', '#7f00ff'],
}),
};
</script>
Показ слов
Теперь давайте отобразим предложение. Это предложение из 7 слов, поэтому каждое слово отображается на одном слайде. Мы поместим слово в центр слайда по вертикали и горизонтали, используя v-row. С помощью метода строки JavaScript split() мы разделим предложение на массив из 7 слов.
src/App.vue
<template>
<v-app>
<v-carousel>
<v-carousel-item v-for="(color, i) in colors" :key="color">
<v-sheet :color="color" height="100%" tile>
<v-row class="fill-height" align="center" justify="center">
<div class="text-h2">
{{ words[i] }}
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
carousel: 0,
colors: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', '#7f00ff'],
words: 'These are the colours of the rainbow'.split(' '),
}),
};
</script>
Украсьте с помощью Vuetify
Полное руководство по созданию элегантных веб-приложений с помощью платформы Vuetify Material Design.
Получите бесплатную копию здесь.
Изменение значка разделителя
Посмотрите на значки, обозначающие каждый слайд. Они круглые. Давайте изменим их на короткие прямоугольники, изменив свойство delimiter-icon карусели на mdi-minus:
src/App.vue
<template>
<v-app>
<v-carousel delimiter-icon="mdi-minus">
<v-carousel-item v-for="(color, i) in colors" :key="color">
<v-sheet :color="color" height="100%" tile>
<v-row class="fill-height" align="center" justify="center">
<div class="text-h2">
{{ words[i] }}
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-app>
</template>
...
Отображение стрелок при наведении
В настоящее время стрелки карусели отображаются всегда. Сделаем их видимыми только тогда, когда пользователь наводит на них мышь:
src/App.vue
<template>
<v-app>
<v-carousel delimiter-icon="mdi-minus" show-arrows-on-hover>
<v-carousel-item v-for="(color, i) in colors" :key="color">
<v-sheet :color="color" height="100%" tile>
<v-row class="fill-height" align="center" justify="center">
<div class="text-h2">
{{ words[i] }}
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-app>
</template>
...
Скрытие фона разделителя
Вы можете увидеть серый прямоугольник в нижней части карусели. Это фон разделителей. Мы не хотим, чтобы этот прямоугольник был виден, поэтому давайте установим свойство hide-delimiter-background, чтобы скрыть его:
src/App.vue
<template>
<v-app>
<v-carousel
delimiter-icon="mdi-minus"
show-arrows-on-hover
hide-delimiter-background
>
<v-carousel-item v-for="(color, i) in colors" :key="color">
<v-sheet :color="color" height="100%" tile>
<v-row class="fill-height" align="center" justify="center">
<div class="text-h2">
{{ words[i] }}
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-app>
</template>
...
Настройка автоматических переходов
Чтобы карусель автоматически переходила к следующему слайду, не нажимая стрелку вправо, установим свойство cycle. interval определяет количество времени, в течение которого карусель остается на одном из своих элементов, прежде чем перейти к следующему. Здесь мы устанавливаем интервал в 1 секунду.
<template>
<v-app>
<v-carousel
delimiter-icon="mdi-minus"
show-arrows-on-hover
hide-delimiter-background
cycle
interval="1000"
>
<v-carousel-item v-for="(color, i) in colors" :key="color">
<v-sheet :color="color" height="100%" tile>
<v-row class="fill-height" align="center" justify="center">
<div class="text-h2">
{{ words[i] }}
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-app>
</template>
...
Изменение перехода
Мы также можем изменить анимацию, которую использует карусель, когда она хочет переключить отображаемый в данный момент элемент. По умолчанию текущий элемент скользит влево, а следующий одновременно появляется. Давайте вместо этого сделаем так, чтобы текущий элемент постепенно исчезал, а входящий — появлялся. Это fade-transition, которое мы установили в свойство перехода v-carousel-item. Мы также сделаем то же самое для обратного перехода — текущий слайд будет исчезать по мере появления предыдущего.
<template>
<v-app>
<v-carousel
delimiter-icon="mdi-minus"
show-arrows-on-hover
hide-delimiter-background
cycle
interval="1000"
>
<v-carousel-item
v-for="(color, i) 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">
{{ words[i] }}
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
</v-app>
</template>
...
Вот так мы и сделали себе милое приложение-карусель с радугой с помощью Vuetify!
Больше контента на plainenglish.io. Подпишитесь на нашубесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообщества Discord.
