Компонент Text

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

Импорт и базовое использование

Для начала компонент необходимо импортировать из пакета naive-ui:

import { NText } from 'naive-ui'

Базовое использование выглядит следующим образом:

<template>
  <n-text>Простой текст</n-text>
</template>

В данном примере создается элемент <span>, содержащий текст без дополнительного форматирования.

Атрибуты и свойства

NText поддерживает следующие ключевые свойства:

type – определяет цвет текста. Возможные значения: 'primary', 'success', 'warning', 'error', 'info'.
```
<n-text type="success">Успешная операция</n-text>
```

strong – делает текст жирным.

<n-text strong>Важная информация</n-text>

italic – делает текст курсивным.

<n-text italic>Курсивный текст</n-text>

underline – подчеркивает текст.

<n-text underline>Подчеркнутый текст</n-text>

delete – отображает текст с зачеркнутым стилем.
```
<n-text delete>Устаревший текст</n-text>
```
code – стилизует текст как программный код.
```
<n-text code>const a = 10;</n-text>
```
mark – выделяет текст фоновым цветом, имитируя маркер.
```
<n-text mark>Выделенный текст</n-text>
```
disabled – делает текст визуально неактивным.
```
<n-text disabled>Неактивный текст</n-text>
```

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

Компонент Text позволяет контролировать поведение длинного текста с помощью свойства ellipsis. Оно может принимать логическое значение или объект с настройками:

<n-text :ellipsis="true">
  Очень длинный текст, который будет обрезан с добавлением многоточия
</n-text>

Более гибкая конфигурация:

<n-text :ellipsis="{ tooltip: true, rows: 2 }">
  Текст, который будет обрезан после двух строк, с появлением подсказки при наведении
</n-text>

Параметры объекта ellipsis:

rows – количество отображаемых строк перед обрезкой.
expandable – добавляет кнопку для разворачивания полного текста.
tooltip – отображает подсказку с полным текстом при наведении.
suffix – добавляет кастомный текст после многоточия.

Поддержка интерактивности

NText может быть кликабельным с использованием события click. Это позволяет реализовать ссылки и элементы управления:

<n-text strong @click="handleClick">Нажми меня</n-text>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Текст был нажат')
    }
  }
}
</script>

Стилизация и кастомизация

Компонент позволяет применять CSS классы и стили через стандартные атрибуты class и style:

<n-text class="custom-text" style="font-size: 18px; color: darkblue;">
  Стилизованный текст
</n-text>

Кроме того, поддерживается интеграция с CSS-переменными для темизации и единообразного управления цветами:

<n-text style="color: var(--text-1);">Тема по умолчанию</n-text>

Использование в составе других компонентов

Text активно используется в составе других компонентов Naive UI, таких как NCard, NTooltip, NButton, позволяя единообразно оформлять текстовую информацию и сохранять визуальный стиль интерфейса. Например:

<n-card title="">
  <n-text type="warning">Предупреждение внутри карточки</n-text>
</n-card>