Я работаю с чакрам UI Vue в течение нескольких месяцев. Я использую чакра в побочном проекте, чтобы узнать больше о Jamstack и Vue/Nuxt. Я привлечен к пользовательскому интерфейсу Chakra из -за его практического набора компонентов и его внимания на доступности. Это первая статья в серии, которую я буду публиковать о Vue и Chakra. Надеюсь вам нравится!
Одним из компонентов, с которыми я много работал, является компонент вкладок. Вкладки хорошо работают при представлении контента. Я также использовал его для выбора опций высокого уровня драйвера для конкретных процессов и потоков пользователей. Давай прыгнем прямо в …
Этот пост предполагает, что у вас уже есть настройка Nuxt Project с установленной чакра, а также включенные авто-импорты.
Стандартный способ настройки вкладок с помощью чакры использует родительский c-tabs Элемент, содержащий один c-tab-list и одинокий c-tab-panels элемент.
One Two Three one!
two!
three!
Важно убедиться, что у вас такое же количество c-tab-panel Элементы, как вы делаете c-tab элементы. Не делать этого может означать, что ваш контент недоступен для пользователя. Порядок также имеет решающее значение для этой работы, как первый c-tab Кнопка будет соответствовать первым c-tab-panel элемент. Это быстро встает и работает. Примечание, каждый c-tab становится кнопкой, когда он рендесирует.
В дополнение к разделению контента, я также хочу знать, какую вкладку выбрал пользователь. Для этого я рекомендую перейти на другой шаблон. Этот шаблон включает в себя перемещение параметров вкладок в массив, а затем использование Vuey V-for Директива Смотри, чтобы генерировать c-tab-list элементы.
... {{ tab }}
Теперь мы представили новый объект данных здесь .. вкладки Анкет Давайте настроим его, чтобы приведенный выше код сработал:
data() {
return {
tabs: ['One', 'Two', 'Three'],
tabIndex: 0,
}
},
Затем мы называем метод на @change событие, чтобы изменить значение табдекса:
... ... methods: { setTabIndex(index) { this.tabIndex = index }, }
Как сейчас, TabIndex изменится, поскольку пользователь выбирает другую вкладку, но мы еще не знаем, какой вариант выбрал пользователь, только его значение индекса. В мае значение индекса, вернемся к массиву, мы используем вычисленное свойство, чтобы дать нам выбранный текст вкладки:
computed: {
selectedTab() {
return this.tabs[this.tabIndex]
},
}
Теперь у нас есть SelectedTab и TabIndex Значения в родительском компоненте, которые мы можем использовать для управления другим поведением.
Для одной последней функции мы можем затем управлять индексом по умолчанию, свойство в элементе C-Tabs, используя поле Tabindex:
Делая это, вы можете установить начальный выбор вкладок.
Ваш стиль C-Tab должен быть простым. Добавление изображений или значков на вашу вкладку может переполнять вещи. При использовании таких компонентов библиотеки, держите это простым.
Другое ограничение может представить себя, если вы хотите включить/отключить вкладку. В этом случае следующий шаблон работает лучше.
Альтернатива
Чтобы включить отдельную вкладку отключить, можно применить следующий подход.
data() { return { tabs: ['One', 'Two', 'Three'], tabIndex: 0, tabTwoDisabled: false, } }, {{ tabs[0] }} {{ tabs[1] }} {{ tabs[2] }}
Это поддерживает массив параметров, но дает программисту возможность включить/отключить одну вкладку.
Вкладка «Чакра» – это радость, с которой можно работать, если вы держите это простым. Если вы также хотите узнать текущую активную вкладку, то приведенный выше шаблон работает хорошо.
Ссылки
Оригинал: “https://dev.to/james_foran/vue-nuxt-chakraui-tabs-3ll5”