/
npmgit

Notification

Базовый компонент для показа уведомлений. Basic component for displaying notifications.

Import

Для начала необходимо подключить компонент в корневом файле: First you need to include the component in the root file:

html
<!-- App.vue -->
<template>
  ...
  <ProximaNotification />
</template>
js
import ProximaNotification from 'proxima-vue/notification';

Plain

js
import {
  showNotification,
  showWarningNotification,
  showSuccessNotification,
  showErrorNotification,
} from 'proxima-vue/notification';

showNotification('Default notification');

showWarningNotification({
  title: 'Unauthorized access detected',
  description: 'Please review your account security settings immediately',
});

showSuccessNotification({
  title: 'Done',
  description: 'Operation completed successfully',
});

showErrorNotification({
  title: 'Access denied',
  description: 'Sorry, you Are not allowed to access this page',
});

Toast

Короткое уведомление сообщает пользователю о результате выполнения команды: A short notification informs the user about the result of the command:

js
import {
  showToast,
  showWarningToast,
  showSuccessToast,
  showErrorToast,
} from 'proxima-vue/notification';

showToast('Default toast');
showWarningToast('Warning toast');
showSuccessToast('Success toast');
showErrorToast('Error toast');

// With options

showToast({
  title: 'Plain toast',
  hasCloseButton: false,
});

Autoclose

js
import { showNotification, showToast } from 'proxima-vue/notification';

showNotification({
  title: 'Notification stays open',
  autoCloseDelay: 0, // disable autoclose
});

showToast({
  title: 'Hello, world!',
  autoCloseDelay: 3000, // closed after 3 seconds
});

Position

js
import { showNotification } from 'proxima-vue/notification';

showNotification({
  title: 'Top left notification',
  position: 'top-start',
});

showNotification({
  title: 'Top center notification',
  position: 'top-center',
});

showNotification({
  title: 'Top right notification',
  position: 'top-end',
});

showNotification({
  title: 'Bottom left notification',
  position: 'bottom-start',
});

showNotification({
  title: 'Bottom center notification',
  position: 'bottom-center',
});

showNotification({
  title: 'Bottom right notification',
  position: 'bottom-end',
});

Icon

js
import { showNotification } from 'proxima-vue/notification';
import ProximaIconDelete from 'proxima-vue/icon/delete';

showNotification({
  title: 'Notification with custom icon',
  icon: ProximaIconDelete,
  iconProps: {
    size: 'xl',
    view: 'plain',
  },
});

Actions

js
import { showNotification, showToast } from 'proxima-vue/notification';
import ProximaButton from 'proxima-vue/button';

showNotification({
  title: 'Notification with actions',
  actions: [
    {
      is: ProximaButton,
      props: {
        text: 'Click me',
        size: 'xs',
        onClick: () => showToast('Action click'),
      },
    },
  ],
  autoCloseDelay: 0,
});

Clear all

js
import {
  closeNotificationById,
  checkNotificationById,
  clearNotifications,
  clearPlainNotifications,
  clearToastNotifications,
} from 'proxima-vue/notification';

// Close notification by id
closeNotificationById('id');

// Check notification exists
checkNotificationById('id');

// Close all notifications
clearNotifications();

// Close plain notifications
clearPlainNotifications();

// Close toast notifications
clearToastNotifications();

Options

ts
interface ProximaNotification {
  id: string
  isToast: boolean
  view: 'plain' | 'toast',
  position: 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end'
  theme?: 'error' | 'success' | 'warning'
  title?: string
  description?: string
  teleport?: string
  icon?: ProximaDynamicComponent
  iconProps?: ProximaDynamicProps
  hasCloseButton: boolean
  closeButtonProps?: ProximaDynamicProps
  onClose?: (notification: ProximaNotification) => void
  autoCloseDelay: number
  additionalClass?: string
  attrs?: ProximaDynamicAttrs
  actions: ProximaDynamicAction[]
}

Accessibility

Уведомление имеет role="alert", при появлении на странице вспомогательные технологии мгновенно зачитывают содержимое. The notification has a role="alert", and when it appears on the page, assistive technologies instantly read the content.

BEM

Блок компонента notification, модификаторы (создаются автоматически на основе пропсов): Component block notification, modifiers (automatically created based on props):

  • notification_view_plain notification_view_toast
  • notification_theme_error notification_theme_success notification_theme_warning

CSS

Слой компонента @layer proxima.notification, также вы можете гибко cтилизовать компонент через кастомные свойства: Component layer @layer proxima.notification, also you can style the component flexibly through custom properties:

css
--notification-width: fit-content;
--notification-max-width: min(100%, 30rem);
--notification-min-width: auto;
--notification-gap: 0.75rem;

--notification-padding-x: 1.25rem;
--notification-padding-y: 1.25rem;

--notification-background: #fff;
--notification-color: inherit;

--notification-warning-icon-color: #ea9106;
--notification-success-icon-color: var(--app-valid-color);
--notification-error-icon-color: var(--app-invalid-color);

--notification-title-font-size: 1.125em;
--notification-title-font-weight: 700;

--notification-description-font-size: 1em;
--notification-description-margin-block-start: 0.25rem;

--notification-actions-gap: 0.5rem;
--notification-actions-margin-block-start: 1rem;

--notification-close-size: 2.5rem;
--notification-close-offset: -0.875rem;

--notification-border-radius: 0.5rem;
--notification-box-shadow-size: 0 0.5rem 0.75rem 0;
--notification-box-shadow-color: rgba(0, 0, 0, 0.1);

--notification-animation:
  ProximaNotificationAnimation 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
--notification-transition:
  transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
  opacity 400ms cubic-bezier(0.22, 1, 0.36, 1);

--notification-margin-x: 1.25rem;
--notification-margin-y: 1.25rem;
--notification-z-index: 1000;

/* Toast */
--notification-toast-max-width: 44ch;
--notification-toast-height: 2.5rem;
--notification-toast-padding-x: 0.75rem;
--notification-toast-title-font-size: 0.875rem;
--notification-toast-title-font-weight: 400;
--notification-toast-background: rgba(0, 0, 0, 0.8);
--notification-toast-reduced-transparency-background: #000;
--notification-toast-color: #fff;
--notification-toast-warning-icon-color: #ffc107;
--notification-toast-success-icon-color: #00b662;
--notification-toast-error-icon-color: #dca1a1;
--notification-toast-backdrop-filter: blur(5px);
--notification-toast-animation:
  ProximaNotificationAnimation 250ms cubic-bezier(0.33, 1, 0.68, 1);
Slots
html
<ProximaNotification>
  <template #notification="slotProps">
    you code (replaced notification content)
  </template>
</ProximaNotification>
ts
type SlotProps = {
  index: number
  notification: ProximaNotification
  hide: () => void
}
Inside modal

Если вам необходимо показать уведомление когда открыто модальное окно, то нужно использовать телепорт, потому что dialog находится поверх всех других слоев: If you need to display a notification when a modal window is open, you should use a teleport, as the dialog is placed on top of all other layers:

html
<ProximaModal id="my-modal">
  ...
</ProximaModal>
js
showSuccessToast({
  title: 'Show Toast inside modal',
  teleport: '#my-modal',
});
View source on GitHub