Учебник навигационного ящика с NUXT

Автор оригинала: Justin.

Придумывая навигацию, которая выглядит хорошо и отзывчивым на небольших устройствах может быть сложной. Это приведет вас с адаптивной навигации без необходимости вздутий проекта со сторонним плагином.

Отзывчивость была достигнута с помощью CSS Grid. Если вы еще предстоит погрузиться в этот мощный и все же элегантный способ достижения реагирования, проверьте здесь.

Это руководство предполагает, что вы уже знакомы с NUXT (Framework для написания универсального приложения в Vue), его структуру папки и Vuex (государственная библиотека управления для Vue).

Требования.

Я буду пользоваться доступным nuxt-create-app Инструмент быстро лечить это приложение быстро. Не стесняйтесь создавать приложение NUXT с нуля.

Итак, используя nuxt-create-app , вам нужно иметь NPX установлен на вашем устройстве. NPX поставляется с NPM С 5.2.0 версия.

Тем не менее, вам понадобится NPM и узел установлен либо для запуска проекта с нуля или использовать nuxt-create-app инструмент.

Следуйте этим простым шагам для установки NUXT. Мы собираемся сохранить варианты очень простыми.

1. Беги NPX Create-Nuxt-App (В этом случае навигация-NAV – это название нашего проекта. Вы можете изменить его на все, что вам нравится).
2. Выберите Нет Для Server-Side Frameworks, AUI Framework, Framework.
3. Выберите Спа Режим
4. Выберите Нет для Axios и летание
5. Перейдите к проекту и запустите Установка NPM
6. Наконец, NPM запустить dev, если все пойдет хорошо, вы должны увидеть ваше приложение, работающее на localhost: 3000

Макет по умолчанию

Компоненты, которые являются общими для всех страниц, будут размещены здесь. Этот файл будет иметь TheHeeder , TheSidenav , TheFooter и по умолчанию nuxt составная часть.

Ссылки приложений

Поскольку ссылки будут одинаковыми в TheHeeder и TheSidenav Компоненты, я создадим файл в каталоге компонентов и назовите его Applinks.Vue Так что это можно повторно использовать.

Заголовок

Этот файл будет иметь фирменное наименование, кнопку переключения, которая отображается на меньшем устройстве, и, конечно, приложении ссылок мы изначально создали.

Суть этого учебника заключается в этом компоненте и особенно в тумблерной кнопке.

Toggle элемент имеет V-on: нажмите Директива прилагается к нему (я предпочитаю короткую форму, @ krick ). Когда этот элемент нажат, он отправляет thetogglesidebar действие в NAV модуле. Состояние ToGGLESIBEBAR определяет, отображаются ли боковая панель или нет. Этот же код работает рука об руку с элементом фона внутри Тетисиденав составная часть.

Навигация боковой панели

Этот элемент имеет TOGGLELSIDEBAR Метод в вычисляется Собственность TheSidenav составная часть. Значение логическое. Этот элемент также имеет фон, как указано ранее. Когда кнопка «Переключение» или «Фон» нажат, Togglesibebar Состояние в NAV модуле (магазин) мутируется на правда или ложь Отказ Следовательно, это изменение получено в вычисляется Недвижимость через TOGGLELSIDEBAR Метод мы создали.

Я добавил эффект перехода на боковую панель, чтобы иметь хороший опыт переключения боковой панели. Это было сделано без усилий из-за компонента The Vue переходной обертки.

Магазин

Я выбрал метод модуля. Классический способ управления государством будет устареть в следующем выпуске NUXT. Наше NAV Модуль довольно простой. У него есть нормальные обработчики Государство , Мутации , Действия и Геттерс Отказ

// States
export const state = () =>({
    
    toggleSidebar: false
    
})

// mutations
export const mutations = {

    TOGGLE_SIDEBAR(state) {
        state.toggleSidebar = !state.toggleSidebar
    }

}

// actions
export const actions = {

    toggleSidebar({ commit }) {
        commit('TOGGLE_SIDEBAR')
    }

}

// Getters
export const getters = {

    toggleSidebar: state => state.toggleSidebar,

}

Мобильный вид!

Заключение

Мы преуспели придумываем прохладный навигационный ящик, который хорошо работает на небольших устройствах с помощью простых CSS Grid и Vuex в приложении NUXT.

Полный код можно найти на Github AMD демонстрация здесь

Этот пост был впервые опубликован здесь Отказ