Полное руководство по созданию списков Vuetify lists.
Списки используются для отображения группы связанной информации. Эта информация может быть динамической и изменяться пользователем (например, список контактов или задач) или статической (например, список ссылок для навигации по приложению). Списки обеспечивают единообразный стиль для группы текста или изображений. В этой статье мы узнаем, как добавлять списки в наш пользовательский интерфейс с помощью компонента списка Vuetify.
Компонент v-list
Названия компонентов для создания списков в Vuetify говорят сами за себя. Компонент v-list предназначен для создания списков. Мы используем компонент v-list-item для создания дополнительного элемента в списке. v-list-item-content содержит основное содержимое списка, а v-list-item-title отображает заголовок списка. Например:
<template> <v-app> <v-card class="mx-auto ma-4"> <v-list> <v-list-item ><v-list-item-content ><v-list-item-title >Vuetify list</v-list-item-title ></v-list-item-content ></v-list-item > </v-list> </v-card> </v-app> </template><script> export default { name: 'App', }; </script>
Vuetify двухстрочные списки
Списки Vuetify по умолчанию single-line. Чтобы отобразить две строки содержимого в списке, мы устанавливаем свойство two-line на true:
<template> <v-app> <v-card class="mx-auto ma-4"> <v-list> <v-list-item two-line> <v-list-item-content> <v-list-item-title>Vuetify list</v-list-item-title> <v-list-item-subtitle>Learning Vuetify lists at Coding Beauty!</v-list-item-subtitle> </v-list-item-content> </v-list-item> </v-list> </v-card> </v-app> </template><script> export default { name: 'App', }; </script>
Трехстрочные списки Vuetify
Мы также можем отобразить три строки текста в списке с реквизитом three-line:
<template> <v-app> <v-card class="mx-auto ma-4"> <v-list> <v-list-item three-line> <v-list-item-content> <v-list-item-title>Vuetify list</v-list-item-title> <v-list-item-subtitle> Learning Vuetify lists at Coding Beauty! </v-list-item-subtitle> <v-list-item-subtitle> Using a Vuetify three-line list </v-list-item-subtitle> </v-list-item-content> </v-list-item> </v-list> </v-card> </v-app> </template><script> export default { name: 'App', }; </script>
Группы элементов списка Vuetify
Мы можем использовать компонент v-list-item-group в списке для создания группы выбираемых элементов списка.
<template> <v-app> <v-card class="mx-auto ma-4" width="300"> <v-list> <v-list-item-group v-model="selectedItem" color="primary"> <v-list-item v-for="(item, i) in items" :key="i"> <v-list-item-icon ><v-icon v-text="item.icon"></v-icon ></v-list-item-icon> <v-list-item-content> <v-list-item-title v-text="item.text"></v-list-item-title> </v-list-item-content> </v-list-item> </v-list-item-group> </v-list> </v-card> </v-app> </template><script> export default { name: 'App', data: () => ({ selectedItem: 1, items: [ { text: 'Contacts', icon: 'mdi-account' }, { text: 'Recent', icon: 'mdi-clock' }, { text: 'Starred', icon: 'mdi-star' }, { text: 'Settings', icon: 'mdi-cog' }, ], }), }; </script>
Список сохраняет состояние, и щелчок по другому элементу списка изменит выбор:
Украсьте с помощью Vuetify
Полное руководство по созданию элегантных веб-приложений с помощью платформы Vuetify Material Design.
Скачать бесплатную копию здесь!
Плотные списки
Мы можем сжимать списки в Vuetify с помощью реквизита dense:
<template> <v-app> <v-card class="mx-auto ma-4" width="300"> <v-list dense> <v-list-item-group v-model="selectedItem" color="primary"> <v-list-item v-for="(item, i) in items" :key="i"> <v-list-item-icon ><v-icon v-text="item.icon"></v-icon ></v-list-item-icon> <v-list-item-content> <v-list-item-title v-text="item.text"></v-list-item-title> </v-list-item-content> </v-list-item> </v-list-item-group> </v-list> </v-card> </v-app> </template><script> export default { name: 'App', data: () => ({ selectedItem: 1, items: [ { text: 'Contacts', icon: 'mdi-account' }, { text: 'Recent', icon: 'mdi-clock' }, { text: 'Starred', icon: 'mdi-star' }, { text: 'Settings', icon: 'mdi-cog' }, ], }), }; </script>
Отключенные списки
Мы можем отключить взаимодействие со списком, установив свойство disabled на true:
<template> <v-app> <v-card class="mx-auto ma-4" width="300"> <v-list disabled> <v-list-item-group v-model="selectedItem" color="primary"> <v-list-item v-for="(item, i) in items" :key="i"> <v-list-item-icon ><v-icon v-text="item.icon"></v-icon ></v-list-item-icon> <v-list-item-content> <v-list-item-title v-text="item.text"></v-list-item-title> </v-list-item-content> </v-list-item> </v-list-item-group> </v-list> </v-card> </v-app> </template><script> export default { name: 'App', data: () => ({ selectedItem: 1, items: [ { text: 'Contacts', icon: 'mdi-account' }, { text: 'Recent', icon: 'mdi-clock' }, { text: 'Starred', icon: 'mdi-star' }, { text: 'Settings', icon: 'mdi-cog' }, ], }), }; </script>
Плоские списки
Свойство flat удаляет фоновый цвет выбранного элемента списка:
<template> <v-app> <v-card class="mx-auto ma-4" width="300"> <v-list flat> <v-list-item-group v-model="selectedItem" color="primary"> <v-list-item v-for="(item, i) in items" :key="i"> <v-list-item-icon ><v-icon v-text="item.icon"></v-icon ></v-list-item-icon> <v-list-item-content> <v-list-item-title v-text="item.text"></v-list-item-title> </v-list-item-content> </v-list-item> </v-list-item-group> </v-list> </v-card> </v-app> </template><script> export default { name: 'App', data: () => ({ selectedItem: 1, items: [ { text: 'Contacts', icon: 'mdi-account' }, { text: 'Recent', icon: 'mdi-clock' }, { text: 'Starred', icon: 'mdi-star' }, { text: 'Settings', icon: 'mdi-cog' }, ], }), }; </script>
Никогда не пропустите обновление!
Подпишитесь на нашу еженедельную рассылку, чтобы получать больше интересного контента.
Vuetify List Nav Styling
Установка реквизита nav на true на v-list уменьшает ширину и скругляет углы v-list-items в нем:
<template> <v-app> <v-card class="mx-auto ma-4" width="300"> <v-list nav> <v-list-item-group v-model="selectedItem" color="green"> <v-list-item v-for="(item, i) in items" :key="i"> <v-list-item-icon ><v-icon v-text="item.icon"></v-icon ></v-list-item-icon> <v-list-item-content> <v-list-item-title v-text="item.text"></v-list-item-title> </v-list-item-content> </v-list-item> </v-list-item-group> </v-list> </v-card> </v-app> </template><script> export default { name: 'App', data: () => ({ selectedItem: 1, items: [ { text: 'Contacts', icon: 'mdi-account' }, { text: 'Recent', icon: 'mdi-clock' }, { text: 'Starred', icon: 'mdi-star' }, { text: 'Settings', icon: 'mdi-cog' }, ], }), }; </script>
Элементы округленного списка в Vuetify
Мы можем сделать v-list-items внутри v-list полностью закругленными, установив свойство rounded на true:
<template> <v-app> <v-card class="mx-auto ma-4" width="300"> <v-list rounded> <v-list-item-group v-model="selectedItem" color="indigo"> <v-list-item v-for="(item, i) in items" :key="i"> <v-list-item-icon ><v-icon v-text="item.icon"></v-icon ></v-list-item-icon> <v-list-item-content> <v-list-item-title v-text="item.text"></v-list-item-title> </v-list-item-content> </v-list-item> </v-list-item-group> </v-list> </v-card> </v-app> </template><script> export default { name: 'App', data: () => ({ selectedItem: 1, items: [ { text: 'Contacts', icon: 'mdi-account' }, { text: 'Recent', icon: 'mdi-clock' }, { text: 'Starred', icon: 'mdi-star' }, { text: 'Settings', icon: 'mdi-cog' }, ], }), }; </script>
Элементы фигурного списка в Vuetify
Списки с реквизитом shaped, установленным на true, имеют закругленные границы с одной стороны v-list-items:
<template> <v-app> <v-card class="mx-auto ma-4" width="300"> <v-list shaped> <v-list-item-group v-model="selectedItem" color="red accent-2"> <v-list-item v-for="(item, i) in items" :key="i"> <v-list-item-icon ><v-icon v-text="item.icon"></v-icon ></v-list-item-icon> <v-list-item-content> <v-list-item-title v-text="item.text"></v-list-item-title> </v-list-item-content> </v-list-item> </v-list-item-group> </v-list> </v-card> </v-app> </template><script> export default { name: 'App', data: () => ({ selectedItem: 1, items: [ { text: 'Contacts', icon: 'mdi-account' }, { text: 'Recent', icon: 'mdi-clock' }, { text: 'Starred', icon: 'mdi-star' }, { text: 'Settings', icon: 'mdi-cog' }, ], }), }; </script>
Подгруппы списка Vuetify
С помощью компонента v-list-group и его реквизита sub-group мы можем создавать подгруппы до двух уровней в глубину:
<template> <v-app> <v-card class="mx-auto ma-4" width="300"> <v-list> <v-list-group :value="true" prepend-icon="mdi-file"> <template v-slot:activator> <v-list-item-title>Files</v-list-item-title> </template> <v-list-group :value="true" no-action sub-group> <template v-slot:activator> <v-list-item-content>Books</v-list-item-content> </template><v-list-item v-for="(book, i) in books" :key="i" link> <v-list-item-title v-text="book"></v-list-item-title> <v-list-item-icon><v-icon>mdi-book</v-icon></v-list-item-icon> </v-list-item> </v-list-group> <v-list-group no-action sub-group> <template v-slot:activator> <v-list-item-content>Code</v-list-item-content> </template><v-list-item v-for="(code, i) in codes" :key="i" link> <v-list-item-title v-text="code"></v-list-item-title> <v-list-item-icon><v-icon>mdi-xml</v-icon></v-list-item-icon> </v-list-item> </v-list-group> </v-list-group> <v-list-item> <v-list-item-icon><v-icon>mdi-cog</v-icon></v-list-item-icon> <v-list-item-title>Settings</v-list-item-title> </v-list-item> </v-list> </v-card> </v-app> </template><script> export default { name: 'App', data: () => ({ selectedItem: 1, books: ['History', 'Fiction', 'Philosophy'], codes: ['C#', 'JavaScript', 'PHP'], }), }; </script>
Мы можем расширять и сокращать подгруппы по мере необходимости:
Краткое содержание
Списки используются для представления группы информации, которая каким-то образом связана. Vuetify предоставляет v-list, v-list-group, v-list-item и другие компоненты для создания и настройки списков.
Подпишитесь на нашу еженедельную рассылку, чтобы быть в курсе новых полезных материалов.
Получить обновленную статью на codingbeautydev.com.