Компонент Blockquote

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

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

<n-blockquote>
  Это пример цитаты, оформленной с помощью компонента Blockquote.
</n-blockquote>

По умолчанию текст внутри блока отображается с левым вертикальным акцентом и стандартным отступом. Важно понимать, что Blockquote поддерживает как простой текст, так и сложные вложенные элементы, включая HTML-теги и другие компоненты.

Основные свойства компонента

1. type Определяет стиль оформления цитаты. Возможные значения:

  • default — стандартная цитата (по умолчанию)
  • primary — основной акцент для выделенного текста
  • success — используется для цитат с позитивным содержанием
  • warning — для предупреждений или важной информации
  • error — для отображения ошибок или критических сообщений

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

<n-blockquote type="warning">
  Эта цитата содержит важное предупреждение.
</n-blockquote>

2. closable Позволяет добавить кнопку закрытия к цитате. Значение true отображает крестик в правом верхнем углу, который можно использовать для скрытия блока.

<n-blockquote closable>
  Цитата с возможностью закрытия.
</n-blockquote>

Событие on-close срабатывает при нажатии на крестик:

<n-blockquote closable @close="handleClose">
  Цитата с обработчиком закрытия.
</n-blockquote>

<script>
export default {
  methods: {
    handleClose() {
      console.log('Цитата была закрыта');
    }
  }
}
</script>

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

<n-blockquote bordered>
  Цитата с рамкой вокруг текста.
</n-blockquote>

4. quote и author Свойства для отображения исходной цитаты и имени автора. Они позволяют структурировать текст цитаты с указанием источника.

<n-blockquote 
  quote="Не тот велик, кто никогда не падает, а тот велик, кто падает и поднимается." 
  author="Конфуций">
</n-blockquote>

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

1. default Основной слот для содержимого цитаты. Поддерживает вложенные компоненты, разметку и стилизованный текст.

<n-blockquote>
  <p>Текст цитаты может включать <strong>жирное выделение</strong> или <em>курсив</em>.</p>
</n-blockquote>

2. footer Слот для дополнительной информации, обычно используется для автора или источника цитаты. Позволяет полностью кастомизировать оформление нижней части блока.

<n-blockquote>
  Цитата с кастомным футером.
  <template #footer>
    <span>Автор: Альберт Эйнштейн</span>
  </template>
</n-blockquote>

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

Компонент Blockquote можно легко стилизовать через CSS-переменные Naive UI:

  • --n-blockquote-border-color — цвет вертикальной линии
  • --n-blockquote-background-color — цвет фона блока
  • --n-blockquote-padding — внутренний отступ
  • --n-blockquote-font-size — размер шрифта текста
  • --n-blockquote-footer-font-size — размер шрифта футера

Пример изменения стиля через CSS:

.n-blockquote {
  --n-blockquote-border-color: #ff9800;
  --n-blockquote-background-color: #fff3e0;
  --n-blockquote-padding: 20px;
  --n-blockquote-font-size: 16px;
}

Взаимодействие с другими компонентами

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

<n-blockquote>
  Важное уведомление.
  <template #footer>
    <n-button size="small" type="primary">Подробнее</n-button>
  </template>
</n-blockquote>

Примеры сложных сценариев

Цитата с динамическим содержимым:

<n-blockquote :quote="dynamicQuote" :author="dynamicAuthor">
  <template #footer>
    <n-button @click="copyQuote">Скопировать</n-button>
  </template>
</n-blockquote>

<script>
export default {
  data() {
    return {
      dynamicQuote: 'Учение без размышления — пустая трата времени.',
      dynamicAuthor: 'Конфуций'
    };
  },
  methods: {
    copyQuote() {
      navigator.clipboard.writeText(this.dynamicQuote);
      console.log('Цитата скопирована');
    }
  }
}
</script>

Интерактивная цитата с закрытием и анимацией:

<n-blockquote v-if="visible" closable @close="visible = false" type="success">
  Успешная операция завершена.
</n-blockquote>

<script>
export default {
  data() {
    return {
      visible: true
    };
  }
}
</script>

Использование Blockquote в Naive UI позволяет создавать визуально выразительные цитаты с гибкой кастомизацией и интеграцией в динамические интерфейсы. Сочетание слотов, событий и CSS-переменных делает его универсальным инструментом для оформления текста и пользовательских уведомлений.

Оглавление