Text

Компонент Text в библиотеке Element Plus предназначен для отображения текстовой информации с расширенными возможностями форматирования и стилизации. Он позволяет легко управлять размерами, цветами, переносом текста и эффектами, такими как подсветка и зачеркивание.

Основные свойства

type Определяет визуальный стиль текста. Поддерживаемые значения:

  • primary — основной цвет текста, используется для акцентного контента;
  • success — зелёный оттенок для позитивного контента;
  • warning — жёлтый для предупреждений;
  • danger — красный для ошибок или критических сообщений;
  • info — синий оттенок для информационных сообщений.

Пример использования:

<el-text type="success">Операция выполнена успешно</el-text>

size Устанавливает размер текста. Возможные значения:

  • small — маленький текст;
  • medium — средний, используется по умолчанию;
  • large — крупный текст.

Пример:

<el-text size="large">Важное сообщение</el-text>

disabled Булево свойство, которое делает текст визуально неактивным и серым.

<el-text disabled>Неактивный текст</el-text>

mark Если указано, текст подсвечивается, как если бы он был выделен маркером.

<el-text mark>Выделенный текст</el-text>

underline и delete

  • underline — подчёркивание текста;
  • delete — зачеркивание текста.
<el-text underline>Подчёркнутый текст</el-text>
<el-text delete>Зачеркнутый текст</el-text>

code Отображает текст в стиле кода с моноширинным шрифтом.

<el-text code>console.log('Hello World');</el-text>

strong Делает текст полужирным. Можно комбинировать с другими свойствами.

<el-text strong type="danger">Важное предупреждение</el-text>

Комбинация свойств

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

<el-text mark strong underline>Важное выделение</el-text>

Также можно сочетать цветовые типы с размерами и стилями:

<el-text type="warning" size="small" delete>Срок действия истёк</el-text>

Управление переносом текста

Для длинных строк текста доступно управление переносом через CSS-поддержку и свойства компонента:

  • ellipsis — добавляет многоточие при переполнении строки;
  • line-clamp — ограничивает количество отображаемых строк (нужно использовать CSS свойство -webkit-line-clamp).
<el-text style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">
  Очень длинный текст, который будет обрезан после двух строк
</el-text>

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

Text часто используется совместно с компонентами Tooltip, Card и Tag для отображения информации в ограниченных пространствах. Пример с Tooltip:

<el-tooltip content="Полная версия текста">
  <el-text ellipsis style="max-width: 150px; display: inline-block;">
    Очень длинный текст, который обрезается
  </el-text>
</el-tooltip>

Динамическое управление текстом

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

<template>
  <el-text :type="statusType">{{ message }}</el-text>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const status = ref('success');
    const message = ref('Операция завершена');

    const statusType = computed(() => {
      switch(status.value) {
        case 'success': return 'success';
        case 'error': return 'danger';
        default: return 'primary';
      }
    });

    return { statusType, message };
  }
}
</script>

Поддержка пользовательских стилей

Компонент Text позволяет легко добавлять собственные CSS-классы или инлайн-стили, сохраняя при этом совместимость с встроенными свойствами:

<el-text class="custom-text" style="font-style: italic; color: #FF6600;">
  Пользовательский стиль текста
</el-text>

CSS:

.custom-text {
  letter-spacing: 1px;
  line-height: 1.5;
}

Итоговые возможности

Компонент Text в Element Plus является гибким инструментом для управления текстом в интерфейсе. Основные возможности включают:

  • Настройку типа, размера и веса текста;
  • Поддержку подчёркивания, зачеркивания, подсветки и отображения кода;
  • Управление переносом и обрезкой текста;
  • Интеграцию с другими компонентами и динамическое изменение свойств;
  • Применение пользовательских стилей через CSS и inline.

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

Оглавление