Добро пожаловать в очередной эпизод этой захватывающей серии руководств, в которой мы создадим наше собственное приложение списка дел от начала до конца, используя Vuetify и Vue.js. В нашем последнем эпизоде мы добавили возможность для пользователей устанавливать дату завершения задач, используя компоненты меню и средства выбора даты, предоставляемые фреймворком Material Design. Мы также добавили флажок, чтобы пользователи могли отмечать важные задачи как важные.
Сегодня мы будем использовать компонент вкладки Vuetify для группировки наших задач на основе определенных свойств.
Только начинаете работать с Vuetify? Ознакомьтесь с этой статьей.
Создание вкладок в Vuetify
Чтобы начать создавать вкладки в нашем приложении, мы создадим компонент v-tabs в слоте extension панели инструментов:
src/App.js
<template>
<v-app>
<v-card>
<v-toolbar color="primary" elevation="3" dark rounded="0">
<v-toolbar-title>Tasks</v-toolbar-title>
<template v-slot:extension>
<v-tabs v-model="tab"> </v-tabs>
</template>
</v-toolbar>
</v-card>
...
</v-app>
</template>
<script>
...
export default {
name: 'App',
data: () => ({
tasks: [],
showNewTaskDialog: false,
newTask: {
title: '',
note: '',
date: '',
isImportant: false,
},
titleRules: [(value) => Boolean(value) || 'Enter a title'],
showDatePicker: false,
tab: null,
}),
...
},
};
</script>
...
Группировка задач
Мы будем классифицировать задачи на три группы, общие для приложений такого типа:
- Все — все наши задачи
- Сегодня — все наши задачи на текущий день
- Важно — критические задачи, которые мы помечаем как важные при их создании
Давайте создадим вкладку для каждой группы:
Во-первых, мы сделаем индикатор белой вкладки с компонентом v-tabs-slider:
src/App.js
<template>
<v-app>
<v-card>
<v-toolbar color="primary" elevation="3" dark rounded="0">
<v-toolbar-title>Tasks</v-toolbar-title>
<template v-slot:extension>
<v-tabs v-model="tab">
<v-tabs-slider color="white"></v-tab-slider>
</v-tabs>
</template>
</v-toolbar>
</v-card>
...
Затем мы создаем каждую вкладку с компонентом v-tab:
src/App.js
<template>
<v-app>
<v-card>
<v-toolbar color="primary" elevation="3" dark rounded="0">
<v-toolbar-title>Tasks</v-toolbar-title>
<template v-slot:extension>
<v-tabs v-model="tab">
<v-tabs-slider color="white"></v-tab-slider>
<v-tab>All</v-tab>
<v-tab>Today</v-tab>
<v-tab>Important</v-tab>
</v-tabs>
</template>
</v-toolbar>
...
Получите исходный код этого приложения
Зарегистрируйтесь здесь, чтобы получить последний исходный код этого замечательного приложения!
Исправление вкладок
С помощью реквизита fixed-tabs мы можем сделать так, чтобы вкладки в компоненте v-tabs занимали все доступное пространство:
src/App.js
<template>
<v-app>
<v-card>
<v-toolbar color="primary" elevation="3" dark rounded="0">
<v-toolbar-title>Tasks</v-toolbar-title>
<template v-slot:extension>
<v-tabs v-model="tab" fixed-tabs>
<v-tabs-slider color="white"></v-tab-slider>
<v-tab>All</v-tab>
<v-tab>Today</v-tab>
<v-tab>Important</v-tab>
</v-tabs>
</template>
</v-toolbar>
</v-card>
Отображение значков
Давайте отобразим значки вместе с текстом каждой вкладки. Мы установим свойство icons-and-text v-tabs, чтобы увеличить высоту вкладки до 72 пикселей, чтобы в заголовке вкладки можно было использовать как значки, так и текст:
src/App.js
<template>
<v-app>
<v-card>
<v-toolbar color="primary" elevation="3" dark rounded="0">
<v-toolbar-title>Tasks</v-toolbar-title>
<template v-slot:extension>
<v-tabs v-model="tab" fixed-tabs icons-and-text>
<v-tabs-slider color="white"></v-tab-slider>
<v-tab>
All
<v-icon> mdi-format-list-checkbox </v-icon>
</v-tab>
<v-tab>
Today
<v-icon> mdi-calendar-today </v-icon>
</v-tab>
<v-tab>
Important
<v-icon> mdi-star </v-icon>
</v-tab>
</v-tabs>
</template>
</v-toolbar>
</v-card>
...
Отображение элементов вкладки
Мы используем элементы v-tab-item, заключенные в компонент v-tab-items, для отображения содержимого каждой вкладки:
src/App.js
<template>
<v-app>
<v-card>
<v-toolbar color="primary" elevation="3" dark rounded="0">
<v-toolbar-title>Tasks</v-toolbar-title>
<template v-slot:extension>
<v-tabs v-model="tab" fixed-tabs icons-and-text>
<v-tabs-slider color="white"></v-tab-slider>
<v-tab>
All
<v-icon> mdi-format-list-checkbox </v-icon>
</v-tab>
<v-tab>
Today
<v-icon> mdi-calendar-today </v-icon>
</v-tab>
<v-tab>
Important
<v-icon> mdi-star </v-icon>
</v-tab>
</v-tabs>
</template>
</v-toolbar>
</v-card>
<v-tabs-items v-model="tab">
<v-tab-item> </v-tab-item>
<v-tab-item></v-tab-item>
<v-tab-item></v-tab-item>
</v-tabs-items>
...
Отображение разных списков задач для каждого элемента вкладки
Теперь мы покажем разные списки задач в каждом компоненте v-tab-item. Как видите, мы преобразовали разметку исходного списка задач в компонент task-list, который теперь можно легко использовать повторно для каждого элемента вкладки:
src/App.js
<template>
<v-app>
<v-card>
<v-toolbar color="primary" elevation="3" dark rounded="0">
<v-toolbar-title>Tasks</v-toolbar-title>
<template v-slot:extension>
<v-tabs v-model="tab" fixed-tabs icons-and-text>
<v-tabs-slider color="white"></v-tabs-slider>
<v-tab>
All
<v-icon> mdi-format-list-checkbox </v-icon>
</v-tab>
<v-tab>
Today
<v-icon> mdi-calendar-today </v-icon>
</v-tab>
<v-tab>
Important
<v-icon> mdi-star </v-icon>
</v-tab>
</v-tabs>
</template>
</v-toolbar>
</v-card>
<v-tabs-items v-model="tab">
<v-tab-item>
<task-list :list="tasks" v-on:delete="deleteTask"></task-list>
</v-tab-item>
<v-tab-item>
<task-list :list="tasksDueToday" v-on:delete="deleteTask"></task-list>
</v-tab-item>
<v-tab-item>
<task-list :list="importantTasks" v-on:delete="deleteTask"></task-list>
</v-tab-item>
</v-tabs-items>
...
</v-app>
</template>
<script>
...
import taskList from './components/task-list.vue';
export default {
components: { taskList },
name: 'App',
data: () => ({
...
},
computed: {
tasksDueToday() {
const todayISOString = new Date().toISOString().substr(0, 10);
return this.tasks.filter((task) => task.date === todayISOString);
},
importantTasks() {
return this.tasks.filter((task) => task.isImportant);
},
},
};
</script>
...
С недавно добавленными вычисляемыми свойствами tasksDueToday и importantTasks мы выполняем операции фильтрации массива tasks, чтобы получить только элементы, относящиеся к группе.
И это все!
Продолжение следует…
Сегодня мы узнали, как использовать различные компоненты, связанные с вкладками, в Vuetify, и с их помощью мы смогли рассортировать наши задачи по трем различным группам, используя созданные нами вкладки.
Наше приложение со списком дел продолжает формироваться, следите за обновлениями в нашем следующем выпуске!
Подпишитесь на нашу еженедельную рассылку, чтобы быть в курсе новых полезных материалов от нас!
