Индикаторы выполнения используются в интерфейсе для передачи пользователям информации, связанной с известным ходом выполнения определенной операции. Они визуально показывают, насколько далеко продвинулась операция, и могут быть круговыми или горизонтальными. Они также могут быть неопределенными, чтобы указать на загрузку или обработку данных. В этой статье мы узнаем, как создать горизонтальный индикатор выполнения с помощью линейного компонента Vuetify progress.
Компонент v-progress-linear
Vuetify предоставляет компонент v-progress-linear для создания горизонтального индикатора выполнения.
<template> <v-app> <v-progress-linear></v-progress-linear> </v-app> </template><script> export default { name: 'App', }; </script>
Значение индикатора выполнения
Компонент линейного прогресса поставляется с реквизитом value, который мы можем использовать для установки индикатора выполнения на определенное значение между 0 и 100 включительно:
<template> <v-app> <v-row justify="center" class="ma-4"> <v-col sm="6"> <v-progress-linear value="40"></v-progress-linear> </v-col> </v-row> </v-app> </template><script> export default { name: 'App', }; </script>
Прогресс Линейная v-модель
Мы можем настроить двустороннюю привязку между значением индикатора выполнения и переменной, используя v-model:
<template> <v-app> <v-row justify="center" class="ma-4"> <v-col sm="6"> <v-progress-linear v-model="value"></v-progress-linear> </v-col> </v-row> </v-app> </template><script> export default { name: 'App', data: () => ({ value: 30, }), }; </script>
Чтобы увидеть эту двустороннюю привязку в действии, давайте создадим две кнопки для изменения значения индикатора выполнения и некоторый текст для отображения этого значения. Мы разнесли кнопки с помощью одного из вспомогательных классов Vuetify spacing (ma-2).
<template> <v-app> <v-row justify="center" class="ma-4"> <v-col sm="6"> <v-row> <v-progress-linear v-model="value"></v-progress-linear> </v-row> <v-row justify="center">{{ value }}%</v-row> <v-row justify="center"> <v-btn class="ma-2" @click="value -= 10" color="red" dark> -10 </v-btn> <v-btn class="ma-2" @click="value += 10" color="green" dark> +10 </v-btn> </v-row> </v-col> </v-row> </v-app> </template><script> export default { name: 'App', data: () => ({ value: 30, }), }; </script>
Украсьте с помощью Vuetify
Полное руководство по созданию элегантных веб-приложений с помощью платформы Vuetify Material Design.
Получите бесплатную копию здесь.
Значение линейного буфера прогресса
Состояние буфера одновременно представляет два значения. Первичное значение контролируется v-model, а значение буфера контролируется реквизитом buffer-value:
<template> <v-app> <v-row justify="center" class="ma-4"> <v-col sm="8"> <v-progress-linear v-model="value" :buffer-value="bufferValue" ></v-progress-linear> <br /> <v-progress-linear v-model="value" :buffer-value="bufferValue" color="green" ></v-progress-linear> <br /> <v-progress-linear v-model="value" :buffer-value="bufferValue" color="orange" ></v-progress-linear> <br /> <v-progress-linear v-model="value" :buffer-value="bufferValue" color="purple accent-4" ></v-progress-linear> </v-col> </v-row> </v-app> </template><script> export default { name: 'App', data() { return { value: 10, bufferValue: 20, interval: 0, }; },watch: { value(val) { if (val < 100) return;this.value = 0; this.bufferValue = 10; this.startBuffer(); }, },mounted() { this.startBuffer(); },beforeDestroy() { clearInterval(this.interval); },methods: { startBuffer() { clearInterval(this.interval);this.interval = setInterval(() => { this.value += Math.random() * (15 - 5) + 5; this.bufferValue += Math.random() * (15 - 5) + 6; }, 1000); }, }, }; </script>
Пользовательские цвета индикатора выполнения
Линейный компонент прогресса Vuetify поставляется с реквизитом color, который позволяет нам настраивать цвет горизонтального индикатора выполнения:
<template> <v-app> <v-row justify="center" class="ma-4"> <v-col sm="8"> <v-progress-linear background-color="blue" color="red accent-2" value="20" ></v-progress-linear> <br /> <v-progress-linear background-color="grey" color="yellow" value="40" ></v-progress-linear> <br /> <v-progress-linear background-color="green lighten-3" color="green" value="60" ></v-progress-linear> </v-col> </v-row> </v-app> </template><script> export default { name: 'App', }; </script>
Прогресс Линейный Неопределенный
Мы можем отобразить неопределенный индикатор выполнения с помощью реквизита indeterminate.
<template> <v-app> <v-row justify="center" class="ma-4"> <v-col sm="8"> <v-progress-linear indeterminate color="red"></v-progress-linear> <br /> <v-progress-linear indeterminate color="primary"></v-progress-linear> <br /> <v-progress-linear indeterminate color="green"></v-progress-linear> </v-col> </v-row> </v-app> </template><script> export default { name: 'App', }; </script>
Индикатор выполнения будет непрерывно анимироваться, когда он не определен:
Перевернутый индикатор выполнения
Установка реквизита reverse на true отобразит перевернутый индикатор выполнения (справа налево в режиме LTR и слева направо в режиме RTL).
<template> <v-app> <v-row justify="center" class="ma-4"> <v-col sm="8"> <v-progress-linear color="indigo" value="15" reverse ></v-progress-linear><br /><v-progress-linear color="teal" indeterminate reverse ></v-progress-linear><br /><v-progress-linear buffer-value="55" color="red accent-2" reverse stream value="30" ></v-progress-linear><br /><v-subheader >In specific cases you may want progress to display in left-to-right mode regardless of the application direction (LTR or RTL):</v-subheader ><v-progress-linear :reverse="$vuetify.rtl" value="15" color="yellow darken-3" ></v-progress-linear> </v-col> </v-row> </v-app> </template><script> export default { name: 'App', }; </script>
Прогресс Линейный Закругленный
Мы можем добавить радиус границы к линейному компоненту прогресса Vuetify, установив свойство rounded на true:
<template> <v-app> <v-row justify="center" class="ma-4"> <v-col sm="8"> <v-progress-linear color="blue accent-2" rounded value="100" ></v-progress-linear><br /><v-progress-linear color="pink" rounded value="100"></v-progress-linear><br /><v-progress-linear color="orange" rounded value="100" ></v-progress-linear><br /><v-progress-linear color="purple accent-4" rounded value="100" ></v-progress-linear> </v-col> </v-row> </v-app> </template><script> export default { name: 'App', }; </script>
Поток индикатора выполнения
Свойство stream работает с buffer-value, чтобы информировать пользователя о том, что происходит какое-то действие.
<template> <v-app> <v-row justify="center" class="ma-4"> <v-col sm="8"> <v-progress-linear color="yellow darken-3" buffer-value="0" stream ></v-progress-linear> <br /> <v-progress-linear color="primary" buffer-value="0" value="20" stream ></v-progress-linear> <br /> <v-progress-linear buffer-value="50" stream color="red" ></v-progress-linear> <br /> <v-progress-linear buffer-value="60" value="40" stream color="green" ></v-progress-linear> </v-col> </v-row> </v-app> </template><script> export default { name: 'App', }; </script>
Полосатый индикатор выполнения
Свойство striped применяет полосатый фон к части значения горизонтального индикатора выполнения.
<template> <v-app> <v-row justify="center" class="ma-4"> <v-col sm="8"> <v-progress-linear color="indigo" height="10" value="10" striped ></v-progress-linear> <br /> <v-progress-linear color="cyan" height="10" value="20" striped ></v-progress-linear> <br /> <v-progress-linear height="10" value="45" striped color="green" ></v-progress-linear> <br /> <v-progress-linear value="60" height="10" striped color="orange" ></v-progress-linear> </v-col> </v-row> </v-app> </template><script> export default { name: 'App', }; </script>
Слот по умолчанию
С слотом по умолчанию для линейного компонента прогресса мы можем отображать пользовательские компоненты внутри индикатора выполнения.
<template> <v-app> <v-row justify="center" class="ma-4"> <v-col sm="8"> <v-progress-linear :indeterminate="query" :query="true" height="25" value="30" > <template v-slot:default="{ value }"> <strong>{{ value }}%</strong> </template> </v-progress-linear> </v-col> </v-row> </v-app> </template><script> export default { name: 'App', data: () => ({ query: false, }), }; </script>
Здесь мы просто отображаем значение индикатора выполнения в процентах:
Использование индикатора выполнения в качестве индикатора загрузки
Один из примеров, когда линейный компонент прогресса полезен, — это сообщение пользователю о том, что ответ ожидает ответа. Например, при получении фотографий пользователя с сервера в примере приложения для работы с фотографиями.
<template> <v-app> <v-app-bar app color="primary" dark> <v-app-bar-nav-icon></v-app-bar-nav-icon> <v-toolbar-title>Photos</v-toolbar-title> <v-spacer></v-spacer> <v-btn icon> <v-icon>mdi-share-variant</v-icon> </v-btn> <v-btn icon> <v-icon>mdi-magnify</v-icon> </v-btn> <v-btn icon> <v-icon>mdi-dots-vertical</v-icon> </v-btn> </v-app-bar> <v-container style="flex: 1"> <v-row class="fill-height" align-content="center" justify="center"> <v-col class="text-subtitle-1 text-center" cols="12"> Getting your photos </v-col> <v-col cols="6"> <v-progress-linear color="primary" indeterminate rounded height="6" ></v-progress-linear> </v-col> </v-row> </v-container> </v-app> </template><script> export default { name: 'App',}; </script>
Использование индикатора выполнения в качестве загрузчика панели приложений
Индикатор выполнения также может функционировать как загрузчик панели приложений. С реквизитами absolute и bottom мы можем расположить его внизу панели приложения и контролировать его видимость с помощью реквизита active:
<template> <v-app> <v-system-bar> <v-spacer></v-spacer> <v-icon>mdi-square</v-icon> <v-icon>mdi-circle</v-icon> <v-icon>mdi-triangle</v-icon> </v-system-bar><v-app-bar app color> <v-btn icon> <v-icon>mdi-arrow-left</v-icon> </v-btn><v-toolbar-title>Books</v-toolbar-title><v-progress-linear :active="loading" :indeterminate="loading" absolute bottom color="indigo" ></v-progress-linear><v-spacer></v-spacer><v-btn icon> <v-icon>mdi-magnify</v-icon> </v-btn><v-btn icon> <v-icon>mdi-dots-vertical</v-icon> </v-btn> </v-app-bar><v-container style="flex: 1"> <v-row class="fill-height" align="center" justify="center"> <v-scale-transition> <div v-if="!loading" class="text-center"> <v-btn color="indigo" dark @click="loading = true"> Start loading </v-btn> </div> </v-scale-transition> </v-row> </v-container> </v-app> </template><script> export default { name: 'App', data: () => ({ loading: false, }), watch: { loading(val) { if (!val) return;setTimeout(() => (this.loading = false), 3000); }, }, }; </script>
Заключение
Индикатор выполнения передает пользователю информацию о текущем ходе текущего события в приложении. Используйте линейный компонент прогресса Vuetify (v-progress-linear) и его различные реквизиты для создания и настройки горизонтальных индикаторов выполнения.
Еженедельно получайте советы и руководства по Vuetify, Vue, JavaScript и другим ресурсам:http://eepurl.com/hRfyJL
Обновлено на: codingbeautydev.com
