Result страницы

Компонент Result предназначен для отображения состояния завершения операции, ошибки или успеха в интерфейсе. Он позволяет визуально оформить сообщения о результатах действий пользователя, предоставляя возможность добавлять заголовки, описания, иконки и действия.

import { NResult } from 'naive-ui'

<NResult
  status="success"
  title="Операция выполнена"
  description="Данные успешно сохранены"
/>

  • status — ключевой пропс, определяющий визуальный стиль компонента. Поддерживаемые значения:

    • "success" — успех операции
    • "warning" — предупреждение
    • "error" — ошибка
    • "info" — информационное сообщение
    • "404", "403", "500" — страницы системных ошибок

  • title — заголовок результата, обычно краткая фраза о состоянии.

  • description — дополнительное описание, поясняющее заголовок.

Настройка иконок и изображений

Компонент Result позволяет заменять стандартные иконки на кастомные изображения или компоненты:

<NResult
  status="error"
  title="Ошибка загрузки"
  description="Не удалось получить данные"
  icon={<CustomErrorIcon />}
/>
  • icon — принимает JSX элемент, который заменяет стандартную иконку.
  • Можно комбинировать с пропом status для стилизации цвета или размеров.

Для статусов "404", "403", "500" можно использовать специальные изображения по умолчанию:

<NResult
  status="404"
  title="Страница не найдена"
/>

В этом случае Naive UI автоматически подставляет готовое изображение ошибки.

Настройка действий (Actions)

Для добавления кнопок действий, например, перехода на другую страницу или повторной попытки, используется слот actions:

<NResult
  status="error"
  title="Ошибка сохранения"
>
  {{
    actions: () => (
      <div>
        <NButton secondary>Попробовать снова</NButton>
        <NButton>Перейти на главную</NButton>
      </div>
    )
  }}
</NResult>
  • actions — слот для произвольного JSX, обычно кнопок.
  • Можно использовать любую комбинацию компонентов Naive UI, включая NButton, NLink и кастомные элементы.

Размеры и центровка

Компонент Result поддерживает управление размером и центровкой контента:

<NResult
  status="success"
  title="Готово"
  description="Ваши данные обновлены"
  size="large"
  class="centered-result"
/>
  • size — определяет размер шрифта и иконки, возможные значения: "small", "medium", "large".
  • Для центровки можно использовать CSS классы или Flexbox:
.centered-result {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

Использование Result как модального состояния

Компонент можно применять не только как статическую страницу, но и внутри модальных окон:

<NModal v-model:show="showResult">
  <NResult
    status="success"
    title="Операция выполнена"
    description="Все данные успешно отправлены"
  />
</NModal>
  • Позволяет отображать результат действий без перезагрузки страницы.
  • Поддерживает реактивное управление видимостью через v-model.

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

Часто Result используется совместно с формами и таблицами для визуальной обратной связи после отправки данных:

<NForm @submit="handleSubmit">
  <!-- поля формы -->
  <NButton type="submit">Сохранить</NButton>
</NForm>

<NResult
  v-if="submissionStatus"
  :status="submissionStatus"
  title="Результат операции"
  description="Данные сохранены или произошла ошибка"
>
  {{
    actions: () => <NButton @click="resetForm">Вернуться к форме</NButton>
  }}
</NResult>
  • v-if позволяет динамически показывать компонент в зависимости от состояния.
  • Проп status можно привязывать к состоянию ответа от сервера.

Продвинутые возможности кастомизации

  • Стилизация через CSS переменные. Result использует темы Naive UI, позволяя менять цвета, отступы и размеры через CSS переменные:
.n-result {
  --n-result-icon-size: 80px;
  --n-result-title-font-size: 24px;
  --n-result-description-font-size: 16px;
}
  • Интеграция с Vue Router. Действия в actions могут быть ссылками на другие маршруты:
<NButton @click="$router.push('/home')">На главную</NButton>
  • Слоты для полной кастомизации. Помимо actions, доступны слоты для icon, title, description, что позволяет полностью переопределять стандартный рендер.

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

Оглавление