Tabs

Компонент Tabs в библиотеке Naive UI предназначен для организации контента на вкладках, обеспечивая удобную навигацию между различными разделами интерфейса. Он полностью поддерживает реактивность Vue 3 и обладает богатым набором настроек для кастомизации внешнего вида и поведения.

Импорт и базовая структура

Для начала необходимо импортировать компонент и его вспомогательные элементы:

import { NTabs, NTabPane } from 'naive-ui';

Базовая структура Tabs включает контейнер NTabs и дочерние элементы NTabPane. Каждый NTabPane представляет отдельную вкладку:

<template>
  <n-tabs v-model:value="activeTab">
    <n-tab-pane name="tab1" tab="Вкладка 1">
      Контент первой вкладки
    </n-tab-pane>
    <n-tab-pane name="tab2" tab="Вкладка 2">
      Контент второй вкладки
    </n-tab-pane>
    <n-tab-pane name="tab3" tab="Вкладка 3">
      Контент третьей вкладки
    </n-tab-pane>
  </n-tabs>
</template>

<script setup>
import { ref } from 'vue';

const activeTab = ref('tab1');
</script>
  • v-model:value связывает активную вкладку с реактивной переменной.
  • Атрибут name у NTabPane используется как уникальный идентификатор вкладки.
  • Атрибут tab задает текст заголовка вкладки.

Настройка активной вкладки

Активная вкладка управляется через v-model:value или проп default-value:

<n-tabs default-value="tab2">
  ...
</n-tabs>

При этом компонент автоматически отображает вкладку с указанным значением при инициализации.

Горизонтальная и вертикальная ориентация

По умолчанию вкладки располагаются горизонтально. Для вертикального расположения используется проп tab-position:

<n-tabs v-model:value="activeTab" tab-position="left">
  <n-tab-pane name="tab1" tab="Левая вкладка 1">Контент</n-tab-pane>
  <n-tab-pane name="tab2" tab="Левая вкладка 2">Контент</n-tab-pane>
</n-tabs>

Допустимые значения:

  • "top" – стандартное горизонтальное размещение.
  • "bottom" – вкладки снизу.
  • "left" – вертикальное слева.
  • "right" – вертикальное справа.

Динамическое создание вкладок

Вкладки можно генерировать на основе массива объектов:

<template>
  <n-tabs v-model:value="activeTab">
    <n-tab-pane
      v-for="tab in tabs"
      :key="tab.name"
      :name="tab.name"
      :tab="tab.label"
    >
      {{ tab.content }}
    </n-tab-pane>
  </n-tabs>
</template>

<script setup>
import { ref } from 'vue';

const activeTab = ref('tab1');
const tabs = ref([
  { name: 'tab1', label: 'Вкладка 1', content: 'Контент 1' },
  { name: 'tab2', label: 'Вкладка 2', content: 'Контент 2' },
  { name: 'tab3', label: 'Вкладка 3', content: 'Контент 3' },
]);
</script>

Это упрощает работу с большим количеством вкладок и делает код более поддерживаемым.

Закрываемые вкладки и события

Для вкладок, которые можно закрывать, применяется проп closable и обработка события on-close:

<n-tabs v-model:value="activeTab" @close="handleClose">
  <n-tab-pane name="tab1" tab="Закрываемая вкладка" closable>Контент</n-tab-pane>
</n-tabs>

<script setup>
import { ref } from 'vue';

const activeTab = ref('tab1');

function handleClose(name) {
  console.log('Закрыта вкладка:', name);
}
</script>
  • closable добавляет крестик для закрытия вкладки.
  • on-close возвращает name закрываемой вкладки, позволяя обновлять данные динамически.

Настройка внешнего вида

Naive UI предоставляет гибкие возможности стилизации Tabs:

  • type – задает стиль вкладок: "line", "card", "segment".
  • size – размеры: "small", "medium", "large".
  • tab-style – позволяет задавать кастомные CSS свойства для заголовков вкладок.

Пример:

<n-tabs type="card" size="large">
  <n-tab-pane name="tab1" tab="Карта 1">Контент</n-tab-pane>
  <n-tab-pane name="tab2" tab="Карта 2">Контент</n-tab-pane>
</n-tabs>

Ленивая загрузка контента

Для оптимизации производительности можно использовать lazy:

<n-tabs v-model:value="activeTab" lazy>
  <n-tab-pane name="tab1" tab="Вкладка 1">Контент 1</n-tab-pane>
  <n-tab-pane name="tab2" tab="Вкладка 2">Контент 2</n-tab-pane>
</n-tabs>

При этом контент каждой вкладки загружается только при первом отображении.

Управление переходами

Для плавной анимации переключения вкладок применяются пропы animated и panels-padding:

<n-tabs v-model:value="activeTab" animated>
  <n-tab-pane name="tab1" tab="Анимированная 1">Контент 1</n-tab-pane>
  <n-tab-pane name="tab2" tab="Анимированная 2">Контент 2</n-tab-pane>
</n-tabs>
  • animated включает анимацию.
  • panels-padding задает внутренние отступы контента.

Интеграция с другими компонентами

Tabs удобно комбинировать с NCard, NGrid или формами. Например:

<n-tabs>
  <n-tab-pane name="form" tab="Форма">
    <n-card title="Регистрация">
      <n-form>
        <n-form-item label="Имя">
          <n-input />
        </n-form-item>
        <n-form-item label="Email">
          <n-input />
        </n-form-item>
      </n-form>
    </n-card>
  </n-tab-pane>
  <n-tab-pane name="info" tab="Информация">
    <n-card title="Статистика">Контент статистики</n-card>
  </n-tab-pane>
</n-tabs>

Это позволяет создавать комплексные интерфейсы с разделением контента по вкладкам.

События и слоты

  • on-update:value – срабатывает при изменении активной вкладки.
  • tab (слот) – позволяет полностью кастомизировать заголовок вкладки.
  • extra (слот) – добавление кнопок или иконок справа от заголовков.

Пример кастомного заголовка с иконкой:

<n-tabs>
  <n-tab-pane name="tab1">
    <template #tab>
      <span>Вкладка 1</span>
      <n-icon><SomeIcon /></n-icon>
    </template>
    Контент
  </n-tab-pane>
</n-tabs>

Совместимость с реактивными данными

Компонент полностью интегрируется с реактивными массивами и объектами Vue 3, что позволяет динамически добавлять или удалять вкладки без перезагрузки интерфейса.

Naive UI Tabs предоставляют гибкий и мощный инструмент для построения интерфейсов с разделением контента, поддерживая кастомизацию, динамическое управление и анимацию, сохраняя при этом простоту использования.

Оглавление