Result

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

Компонент объединяет несколько ключевых элементов: иконку состояния, заголовок, описание и дополнительные действия. Благодаря этому создаётся компактный и информативный блок, который быстро передаёт пользователю смысл происходящего.

Типичные сценарии применения:

  • подтверждение успешного действия (например, оплата или отправка формы);
  • уведомление об ошибке;
  • информирование о недоступности страницы;
  • сообщение о недостатке прав доступа;
  • отображение состояния пустых данных или завершённого процесса.

Подключение компонента

Компонент входит в состав библиотеки Element Plus и доступен после её установки и подключения.

import { ElResult } from 'element-plus'

При глобальной регистрации библиотеки отдельный импорт компонента не требуется.

Использование в шаблоне:

<el-result title="Success" sub-title="The operation was completed successfully" />

Базовая структура

Компонент Result имеет несколько логических частей:

Часть Назначение
icon визуальное представление состояния
title основной заголовок
sub-title дополнительное описание
extra область действий

Минимальный пример:

<el-result
  icon="success"
  title="Success"
  sub-title="Your request has been processed"
/>

Предустановленные типы иконок

Element Plus предоставляет набор стандартных иконок состояния. Они автоматически оформляются в соответствии с общепринятыми UI-паттернами.

Поддерживаемые значения свойства icon:

Значение Назначение
success успешное выполнение
warning предупреждение
info информационное сообщение
error ошибка

Пример использования различных состояний:

<el-result icon="success" title="Success" />
<el-result icon="warning" title="Warning" />
<el-result icon="info" title="Information" />
<el-result icon="error" title="Error" />

Свойства компонента

icon

Определяет тип отображаемой иконки.

Тип Значение
string success / warning / info / error 
<el-result icon="warning" />

title

Основной заголовок результата.

Тип Значение
string текст заголовка 
<el-result title="Payment Successful" />

sub-title

Дополнительное описание результата.

Тип Значение
string текст подзаголовка 
<el-result
  title="Order submitted"
  sub-title="Your order will be shipped within 2 days"
/>

Подзаголовок используется для более детального объяснения произошедшего события.

Слот icon

Позволяет полностью заменить стандартную иконку на пользовательскую.

<el-result title="Custom Icon">
  <template #icon>
    <el-icon>
      <i class="custom-icon"></i>
    </el-icon>
  </template>
</el-result>

Такой подход полезен при необходимости использовать:

  • фирменную графику
  • нестандартные пиктограммы
  • сложные SVG-иконки

Слот extra

Слот extra предназначен для размещения элементов взаимодействия: кнопок, ссылок или навигации.

Пример:

<el-result
  icon="success"
  title="Successfully submitted"
  sub-title="Your information has been sent"
>
  <template #extra>
    <el-button type="primary">Back</el-button>
  </template>
</el-result>

В блоке extra чаще всего размещаются:

  • кнопка возврата
  • переход к следующему шагу
  • повтор действия
  • переход на главную страницу

Композиция с кнопками

Компонент часто используется совместно с кнопками Element Plus.

Пример нескольких действий:

<el-result
  icon="error"
  title="Submission failed"
  sub-title="Please check the information and try again"
>
  <template #extra>
    <el-button type="primary">Retry</el-button>
    <el-button>Cancel</el-button>
  </template>
</el-result>

В данном сценарии пользователь получает возможность:

  • повторить операцию
  • отменить действие

Использование пользовательского контента

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

Пример расширенного результата:

<el-result>
  <template #icon>
    <img src="/images/custom-success.svg" />
  </template>

  <template #title>
    Account Created
  </template>

  <template #sub-title>
    Your account has been successfully registered
  </template>

  <template #extra>
    <el-button type="primary">Go to Dashboard</el-button>
  </template>
</el-result>

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

Практические сценарии применения

Подтверждение успешной операции

Один из самых распространённых случаев — отображение результата после выполнения действия.

<el-result
  icon="success"
  title="Payment successful"
  sub-title="Transaction ID: 718923"
>
  <template #extra>
    <el-button type="primary">View order</el-button>
  </template>
</el-result>

Ошибка выполнения операции

Используется для информирования о невозможности завершить процесс.

<el-result
  icon="error"
  title="Payment failed"
  sub-title="Please verify your payment information"
/>

Недостаточно прав доступа

<el-result
  icon="warning"
  title="403"
  sub-title="You do not have permission to access this page"
>
  <template #extra>
    <el-button type="primary">Back Home</el-button>
  </template>
</el-result>

Страница не найдена

Компонент удобно применять при создании страниц ошибок маршрутизации.

<el-result
  icon="info"
  title="404"
  sub-title="The page you visited does not exist"
>
  <template #extra>
    <el-button type="primary">Go Home</el-button>
  </template>
</el-result>

Использование в маршрутизации Vue

Компонент Result часто применяется внутри страниц маршрутизатора Vue Router.

Пример страницы ошибки:

<template>
  <div class="error-page">
    <el-result
      icon="error"
      title="500"
      sub-title="Internal server error"
    >
      <template #extra>
        <el-button type="primary" @click="$router.push('/')">
          Home
        </el-button>
      </template>
    </el-result>
  </div>
</template>

Центрирование и компоновка

Result обычно размещается в центре страницы или контейнера.

Пример базовой разметки:

.result-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
<div class="result-container">
  <el-result
    icon="success"
    title="Completed"
    sub-title="Operation finished"
  />
</div>

Стилизация компонента

Element Plus позволяет изменять внешний вид компонента через CSS.

Пример кастомизации:

.el-result__title {
  font-size: 24px;
  font-weight: 600;
}

.el-result__subtitle {
  color: #6b7280;
}

Можно изменять:

  • размер заголовка
  • цвет текста
  • отступы
  • расположение элементов

Архитектурная роль Result в интерфейсах

Компонент Result выполняет важную роль в UX-структуре приложения:

1. Сигнал завершения процесса Показывает пользователю, что действие завершилось.

2. Снижение когнитивной нагрузки Иконка и краткий текст быстро передают смысл состояния.

3. Навигация после действия Дополнительные кнопки помогают продолжить взаимодействие.

4. Унификация отображения ошибок и сообщений Позволяет централизовать дизайн сообщений состояния.

Сравнение с Alert

Result и Alert выполняют разные задачи.

Компонент Назначение
Alert краткие уведомления внутри интерфейса
Result отображение итогового состояния страницы или процесса

Alert используется внутри формы или панели, тогда как Result чаще занимает центральную область страницы.

Лучшие практики использования

Использование понятных заголовков

Заголовок должен ясно описывать результат действия.

Хорошо:

Payment Successful
Order Submitted
Access Denied

Плохо:

Done
Completed
Something happened

Краткое описание

Подзаголовок должен уточнять детали результата:

  • номер заказа
  • дальнейшие действия
  • причину ошибки

Наличие действий

При ошибках или завершении операций рекомендуется добавлять действия:

  • повторить операцию
  • вернуться на предыдущую страницу
  • перейти к следующему шагу

Использование правильных иконок

Иконка должна соответствовать типу сообщения:

Состояние Иконка
успех success
предупреждение warning
информация info
ошибка error

Ограничения и особенности

  • компонент не предназначен для отображения длинного текста;
  • не используется для потоковых уведомлений;
  • не подходит для сообщений внутри таблиц или форм.

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

Типовая архитектура страницы результата

Страница результата в приложениях часто строится по следующей структуре:

  1. Заголовок состояния
  2. Иконка результата
  3. Подробное описание
  4. Набор действий

Компонент Result объединяет все эти элементы в единый интерфейсный блок и обеспечивает единообразие отображения состояния системы во всём приложении.

Оглавление