VeloxUI

Русский

English
O'zbekcha

Русский

English
O'zbekcha

Appearance

Alert ​

Отображает важные сообщения и уведомления. Поддерживает типы success, warning, danger, info с вариантами soft, solid, outline и accent. Есть автозакрытие с индикатором прогресса, сворачиваемый контент, состояние загрузки, произвольные цвета, бегущая строка и стек алертов.

Basic ​

vue
<VxAlert title="Info — This is an informational alert." type="info" />
<VxAlert title="Success — Your changes have been saved." type="success" />
<VxAlert title="Warning — Please review before continuing." type="warning" />
<VxAlert title="Danger — Something went wrong." type="danger" />

With Description ​

vue
<VxAlert
  type="success"
  title="Deployment complete"
  description="Your application has been successfully deployed to production."
/>

Closable ​

vue
<VxAlert type="info" title="You can dismiss this alert." closable />

Solid Variant ​

vue
<VxAlert type="info" variant="solid" title="New version available." />
<VxAlert type="success" variant="solid" title="All systems operational." />
<VxAlert type="warning" variant="solid" title="API rate limit approaching." />
<VxAlert type="danger" variant="solid" title="Service outage detected." />

Outline Variant ​

vue
<VxAlert type="info" variant="outline" title="Tip — Use keyboard shortcuts." />
<VxAlert type="success" variant="outline" title="Verified — Email confirmed." />

Accent Variant ​

Цветная полоса слева — удобно для выделений и заметок.

vue
<VxAlert type="info" variant="accent" title="Note"
  description="This feature is currently in beta." />
<VxAlert type="danger" variant="accent" title="Important"
  description="Deleting your account is permanent." />

Auto-close with Progress Bar ​

Установите duration (в мс) для автоматического закрытия. Наведение приостанавливает таймер.

vue
<VxAlert
  type="success"
  title="Saved! This alert will close in 8 seconds."
  :duration="8000"
  closable
/>

Collapsible ​

Нажмите на заголовок, чтобы развернуть или свернуть описание.

vue
<VxAlert
  type="info"
  title="Release notes v2.4.0"
  description="New features include dark mode support, improved performance..."
  collapsible
/>

Loading State ​

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

vue
<VxAlert type="info" title="Uploading files..."
  description="3 of 5 files uploaded." loading />

Custom Color ​

Используйте prop color, чтобы задать произвольный цвет независимо от типа.

vue
<VxAlert title="Custom purple alert" color="#8b5cf6" />
<VxAlert title="Custom teal solid" variant="solid" color="#14b8a6" />
<VxAlert title="Custom pink outline" variant="outline" color="#ec4899" />
<VxAlert title="Custom orange accent" variant="accent" color="#f97316" />

Marquee (Scrolling Text) ​

Прокручивающийся текст для баннерных объявлений. Используйте marquee-speed для управления скоростью (по умолчанию 50).

vue
<VxAlert
  type="warning"
  variant="solid"
  banner
  marquee
  title="Limited time offer — 50% off all annual plans!"
/>

Alert Group (Stacking) ​

VxAlertGroup анимирует появление и скрытие алертов. Добавляйте и удаляйте алерты динамически.

vue
<script setup>
import { ref } from 'vue'
import { VxAlert, VxAlertGroup, VxButton } from 'veloxui'

const alerts = ref([
  { id: 1, type: 'info', title: 'Notification', desc: 'You have a new message.' },
  { id: 2, type: 'success', title: 'Saved', desc: 'Changes saved.' },
])

function removeAlert(id) {
  alerts.value = alerts.value.filter(a => a.id !== id)
}
</script>

<template>
  <VxAlertGroup>
    <VxAlert
      v-for="a in alerts"
      :key="a.id"
      :type="a.type"
      :title="a.title"
      :description="a.desc"
      closable
      @close="removeAlert(a.id)"
    />
  </VxAlertGroup>
</template>

Without Icon ​

vue
<VxAlert type="info" title="No icon alert." :show-icon="false" />

Centered ​

vue
<VxAlert type="info" title="Centered alert content." center />
vue
<VxAlert type="warning" variant="solid" title="Maintenance tonight." banner closable center />

With Action Slot ​

vue
<VxAlert type="info" title="A new software update is available.">
  <template #action>
    <VxButton size="sm" variant="outline">Update now</VxButton>
  </template>
</VxAlert>

API ​

VxAlert Props ​

PropTypeDefaultDescription
type'default' | 'success' | 'warning' | 'danger' | 'info''info'Тип алерта
variant'soft' | 'solid' | 'outline' | 'accent''soft'Визуальный стиль
titlestring—Текст заголовка алерта
descriptionstring—Текст описания алерта
closablebooleanfalseПоказывать кнопку закрытия
show-iconbooleantrueПоказывать иконку типа
iconstring | Component—Своя иконка (переопределяет стандартную)
bannerbooleanfalseБаннерный режим на всю ширину
centerbooleanfalseЦентрировать содержимое
durationnumber0Автозакрытие через N мс (0 = отключено). Показывает прогресс-бар.
collapsiblebooleanfalseСворачиваемое/разворачиваемое описание
loadingbooleanfalseПоказывать спиннер вместо иконки
colorstring—Произвольный цвет (переопределяет цвет типа)
marqueebooleanfalseАнимация бегущей строки
marquee-speednumber50Скорость бегущей строки (больше = быстрее)

VxAlertGroup Props ​

PropTypeDefaultDescription
max-countnumber0Максимум видимых алертов (0 = без ограничений)

Slots ​

SlotDescription
defaultДополнительный контент под заголовком
iconСвоё содержимое иконки
titleСвоё содержимое заголовка
descriptionСвоё содержимое описания
actionОбласть действий (справа)

Events ​

EventPayloadDescription
close—Эмитится при клике на кнопку закрытия или срабатывании автозакрытия
after-close—Эмитится после завершения анимации исчезновения