vue js адаптивное меню
Vue js адаптивное меню
A responsive menu build for Vue.js
A renderless Vue component that will auto detect if menu items don’t fit and moves them to a separate dropdown. Also known as the Priority+ pattern.
yarn add vue-responsive-menu
Register as a Vue component
Pass your menu in the :nav prop
Responsive menu will expose 2 new arrays in the default prop, 1 normal menu & 1 with the excess items
| Prop | Type | Default | Description |
|---|---|---|---|
| :nav | array | [] | |
| :maxCharacters | number or boolean | false | |
| label | string | ‘label’ | Key to read the menu item label. Only needed if you enable maxCharacters. |
| offset | number | 0 | Adds x amount of pixels to the total width of menu items. This causes menu items to be moved more quickly to the more dropdown |
| Name | Payload | Description |
|---|---|---|
| @menu-resized | number | current width of menu |
| @item-to-dropdown | object | Item from nav prop |
| @item-to-menu | object | Item from nav prop |
| @moreMenuItems | array | Current array of more menu items |
| @menuItems | array | Current array of menu items |
Example with options
About
A renderless Vue component that will auto detect if menu items don’t fit and moves them to a separate dropdown. Also known as the Priority+ pattern.
Category: Menu & Navigation
Latest free Vue.js Menu & Navigation components, plugins, and other related libraries for modern mobile & web applications.
Floating Menu Component For Vue App
A Vue.js component to create a draggable, customizable, multi-level, keyboard accessible floating menu on the Vue.js app.
Modern Bottom Navigation Bar In Vue
A Vue component to create a modern animated bottom navigation tab bar for web & mobile.
Simple Context Menu Component For Vue.js
Simple context-menu component built for Vue. Works well with both left and right clicks. Nothing too fancy, just works and is simple to use.
Multi-level Sidebar Menu Component For Vue.js
An easy to use multi-level sidebar navigation component designed for Vue.js dashboard applications.
Elegant Menu Toolbar & Content Editor For Vue.js – File Toolbar Menu
A Vue.js component to create a customizable, multi-language, easy-to-style, touch-enabled HTML toolbar menu with editor options for HTML content.
Headless Notification Component With Tailwind CSS
A fully customizable headless notification component based on Vue 3 Composition API and Tailwind CSS.
Stripe-like Dropdown Menu For Vue.js – Stripe Menu
Stripe Menu is a Vue.js component to create a minimal clean dropdown nav menu just like you see on the Stripe app.
Stackable Slideout Panels For Vue.js
A Vue JS 2+ component for stackable slideout panels. Preview: Changelog: v2.14.0 (06/24/2021) fix animation timing v2.13.0 (09/08/2020) Update css for animating panel slide out
Custom Context Menu For Vue 3
A lightweight, dynamic, themeable, multi-level, custom context menu component for Vue 3 applications.
Responsive Navigation UI Component For Vue 3
A dynamic, responsive, mobile-first app navigation UI component for Vue.js 3.
Multi-level Dock Menu Component For Vue 3
A customizable multi-level dock menu component as you have seen on popular OS like Windows.
Pretty Mobile-friendly Navbar Component – navigation-bar
A simple, pretty, mobile-friendly navbar component for your Vue projects.
Universal Dropdown Menu Component For Vue
A universal dropdown menu component that can be attached to any element on the app.
Создание адаптивных Vue компонентов с помощью ResizeObserver
Дата публикации: 2018-05-24
От автора: привет, ребята! Сегодня хочу поделиться с вами небольшой, но полезной статьей про создание компонента Vue. В моем текущем проекте у меня много многоразовых компонентов (я назвал их «виджетами»), которые можно разместить где угодно. И у меня возникла проблема с адаптивным дизайном. Наконец, я понял, что css @media запросы абсолютно не подходят под мой случай.
Так в чем проблема?
Всего несколько строк CSS, не так ли?
Фреймворк VUE JS: быстрый старт
Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля
И мы также хотим, чтобы в мобильном представлении тоже все было хорошо. Это может выглядеть так:
Вы можете сказать «легко», @media решает эту проблему, не так ли?
Хорошо, способ работает. Но что, если мы будем использовать наш компонент PostsItem в другом месте?
О, бедные наши глаза. У нас большой экран, но мы не ожидали увидеть 3 поста подряд.
Итак, самая большая проблема @media запросов: «Адаптивность компонента зависит от размера экрана, а должна полагаться на собственные размеры»
vНо в этом случае компоновка компонентов зависит только от них самих. Эти компоненты должны быть атомарными, независимо определять свой собственный размер и адаптировать макет под себя.
Нам нужны локальные адаптивные стили. И здесь нам поможет ResizeObserver!
ResizeObserver
ResizeObserver — это новая функция, которая позволяет получать уведомления, когда прямоугольник содержимого элемента изменил свой размер, и реагирует на это соответствующим образом.
Использовать его очень просто:
Фреймворк VUE JS: быстрый старт, первые результаты
Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля
Vuetify — создаем свое простое приложение
Хоть UI библиотек или фреймворков для Vue.js не так уж и много, но Vuetify как раз здесь больше всего выделяется и по функционалу просто впереди других. Сегодня в этой небольшой статье я расскажу об данном UI фреймворке, его особенности, его структура и вообще к чему его можно применять. И честно в интернете не так уж и много русскоязычных материалов под данной теме, поэтому я решил что-то написать по Vuetify.
P.S. Вот сыллка на GitHub с кодом приложения.
Введение/Установка
Окей, представим что вы решили все таки начать пользоваться Vuetify и написать какое-то своё первое приложение используя его. И начинается все конечно же с установки, для начала давайте создадим новое Vue CLI приложение с помощью npm:
Важно, надо чтобы приложение имело версию Vue 2.0, поскольку на время написания этой статьи в Vuetify поддержка идёт только для Vue 2.0 приложений. После того как нового приложение было создано — следующим шагом будет установить UI фреймворк как плагин:
Нас попросит в дальнейшем выбрать какой-то пресет, и поскольку мы не собираемся пробовать версию V3 (которая нестабильна), то мы выбираем пресет “Default”:
Когда процесс установки Vuetify завершиться, то можно будет запустить локальный сервер приложения:
И открыв https://localhost:8080 мы увидим по-умолчанию созданную страницу от Vuetify с полезными сыллками:
Как мы видим то все работает и самое время начать уже писать наше приложение.
Так о чем же будет наше приложение?
Хороший вопрос, ведь мы создали уже Vue CLI приложение и установили Vuetify, но я так и не сказал что же будет делать именно наше приложение. Мой любимый пример, это мобильное приложение по доставке еды — поэтому давайте это будет тема нашего приложения.
Но перед этим давайте также установим Vue Router:
Как обычно при добавлении нового плагина к приложению, терминал может сказать что есть изменения которые не были добавлены в commit, мы здесь пишем “y” (т.е. yes) и двигаемся дальше:
Дальше при установке нас спросит хотим ли использовать режим истории в маршутизации, и здесь мы также тыкаем “y”:
Вот теперь Vue Router установлен, и самое время убрать код примеров в src/router/index.js чтобы когда мы сейчас запустили снова локальный сервер — не было ошибок:
Файл маршутизации теперь настроен и не содержит в себе каких-то несуществующих маршрутов, ну а теперь нужно также почистить файл App.vue:
Хорошо, теперь мы настроили наши два файла и при запуске не будет никаких ошибок — а самое лучшее это то — что мы можем начинать разрабатывать наше приложение.
Layout
В Vuetify уже есть своя придуманная гибкая система построения сетки в приложении. И давайте сейчас с ней ознакомимся. Для начала нам нужно будет воспользоваться двумя компонентами, это v-app и v-main. Открываем App.vue и добавляем их:
С компонента v-app и начинается наше приложение, этот компонент является псевдонимом тега
Окей, список у нас есть, а с помощью каких компонентов от Vuetify будем его выводить? Сейчас воспользуемся компонентом v-card, который позволяет удобно в карточках выводить подобную информацию. Но при этом мы также воспользуемся Bootstrap Vue чтобы элементы красиво располагались на странице.
Многие могут заметить что в row’e где мы уже выводим сами карточки заведения с помощью v-for в компоненте v-col я добавляю атрибут md=”4«. Те кто учили Bootstrap уже должны догадаться для чего нужен этот атрибут и как именно он задает размеры колонок. С помощью этого атрибута я указал чтобы каждая колонка имела размеры 4/12 и благодаря этому на странице карточки будут выводиться по 3 штуки в один ряд. Окей, компонент вывода заведений готов, надо теперь добавить его маршрут в файл src/router/index.js:
А теперь давайте перейдем на локальный сервер и посмотрим на результат вывода:
На декстоп и на мобайл выглядит нормально, можем двигаться дальше
Супер У нас есть вывод заведений на главной странице. А теперь я думаю самое время добавить отдельную страницу заведения, которая будет открываться при клике на заголовок карточки. Поскольку у нас нету базы данных с которой мы могли бы брать определенное заведение через API — то сама страница будет статичной.
Страница просмотра заведения
Для начала создаём компонент src/components/CafeView.vue и первое что в нем будет выводиться это изображение с заведением, его заголовок и описание. Для этой базовой информации мы создадим отдельный компонент с названием CafeInfo.vue, но перед этим заполним уже чем-то компонент CafeView.vue:
Хорошо, а теперь создаём компонент CafeInfo.vue:
Для удобства я специально поместил данные в data функцию. Теперь когда наш компонент готов — самое время сделать маршрут для компонента CafeView.vue в src/routes/index.js:
Окей, а теперь давайте посмотрим как это выглядит вместе на локальном сервере на url http://localhost:8080/cafe/view:
Вид можно было б ещё больше кастомизировать чтобы выглядело намного красивее. Но пусть будет так с стилями Vuetify по-умолчанию. Теперь давайте также пропишем сыллку на переход на эту страницу в List.vue:
В массив объектов заведений можно было бы ещё добавить отдельное поле url, которое хранило в себе линки на страницу заведения — но поскольку само приложение у нас статичное, то мы сделали именно так. Вывода такой информации на странице заведения — недостаточно. Нужно ещё реализовать компонент вывода меню товаров (еды) заведения. Поэтому для этого мы сейчас создадим отдельный компонент CafeMenu.vue.
Компонент меню заведения
Сначала создайте компонент src/components/Cafe/CafeMenu.vue, и внутри него сначала создаем переменную с массивом внутри которого будут объекты с информацией об товарах:
Рекомендую также добавить другие товары в список. А теперь самое время вывести их в отдельной колонке:
С помощью компонента v-list-item-group мы создали список, внутри которого с помощью v-for в v-list-item вывели список всех товаров. Компонент v-list-item-content используется для того чтобы выводить контент самого элемента списка, в нашем случае мы выводим заголовок (v-list-item-title) и цену (с помощью v-list-item-subtitle). А с помощью v-list-item-action, внутри мы добавили кнопку покупки товара (v-btn), атрибут icon мы добавили чтобы указать что внутри кнопки выводиться только иконка.
Внутри v-icon мы указали иконку от Material Design. Окей, теперь когда я объяснил что к чему — можем подключить данный компонент:
Открываем локальный сервер и смотрим на результат:
Круто, но нашему приложению не хватает менюшки в хедере очень сильно. Поэтому давайте её сейчас добавим.
Создание навигации
Сейчас нам нужно перейти в компонент App.vue и добавить новый компонент v-navigation-drawer:
Этот компонент позволяет создавать меню навигации, я специально прописал атрибут left чтобы пустое меню навигации появилось с левой стороны:
Выглядит немного страшновато, но сейчас мы это пофиксим. Добавлю также что v-navigation-drawer является одним из компонентов layout системы Vuetify, и именно он отвечает за меню навигации. Давайте добавим следующий код чтобы это меню срабатывало при клике на иконку в хедере:
Зачем я добавил атрибуты absolute, temporary и v-model в v-navigation-drawer? Во-первых, absolute задает CSS свойство position: absolute; а это позволит сделать так чтобы эта менюшка и на мобайл хорошо отображалась. Во-вторых, temporary задает z-index для навигации — чтобы другие элементы не залазили на неё.
И во-третьих, v-model имеет в себе переменную drawer, которая в зависимости от значения true или false будет показывать меню. К примеру, если переменная drawer равняется в текущую момент значению true — то менюшка будет показываться. Если false, то менюшка будет спрятана. Если вы сейчас перейдете на локальный сервер — то увидите в хедере иконку и при клике на неё будет вылазить наше меню:
Вот здесь мы и можем увидеть иконку в хедере А при клике на саму иконку вылазит пустое меню с левой стороны
Теперь нужно чем-то заполнить меню, для этого создадим сейчас отдельную переменную с пунктами для меню:
А теперь выведем все это внутри v-navigation-drawer:
Готово, теперь если мы откроем меню то увидим следующее:
И вот у нас есть менюшка которая выглядет не прям красиво, но она работает и позволяет уже переходить на страницы. Окей, и что у нас получается? У нас есть простое приложение с выводом заведений, и просмотром этих заведений. Все это довольно таки примитивно — то мы смогли уже сделать что-то с Vuetify.
Выпадающее многоуровневое меню Vue.js
Рекурсивные компоненты полезны для отображения комментариев в блоге, вложенных меню или в целом, где родитель и потомок одинаковы, хотя и с разным содержанием. Дерево рекурсивных компонентов пользовательского интерфейса будет визуальным представлением некоторой рекурсивной структуры данных. В этом уроке мы будем использовать древовидную структуру, где каждый узел является объектом.
Стильное многоуровневое древовидное меню Vue.js.
.samoletovosa-menyu li <
user-select: none;
>
.samoletovosa-menyu li span <
float: right;
>
.samoletovosa-menyu label span <
float: right;
color: #828282;
>
.samoletovosa-menyu li.file > label::before <
content: «\f15b»;
>
.samoletovosa-menyu li.folder > label::before <
content: «\f054»;
>
.samoletovosa-menyu li.file > label::before <
content: «\f15b»;
>
.samoletovosa-menyu li.add > label::before <
content: «\f067»;
>
.samoletovosa-menyu label::before <
/* arrow icon */
font: normal normal normal 14px/1 FontAwesome;
left: 18px;
transform: translateY(-50%);
transition: transform 0.3s;
>
.samoletovosa-menyu label.open::before <
transform: translateY(-25%) rotate(90deg);
>
var treeData = <
name: «ZORNET.RU»,
new Vue( <
el: «#app»,
data: <
treeData: treeData
>
Как и для любой рекурсивной функции, для завершения рекурсии необходим базовый случай, в противном случае рендеринг будет продолжаться бесконечно, и вы получите переполнение стека.
Поскольку рекурсивные структуры данных могут быть большими, хорошая хитрость пользовательского интерфейса для их отображения заключается в том, чтобы скрыть все, кроме корневого узла, чтобы пользователь мог расширять или сжимать по мере необходимости.