UI компоненты

Alert

Основы

Если вам нужно уведомление на странице, вы можете использовать компонент moonshine::alert.

<x-moonshine::alert>Alert</x-moonshine::alert>
<x-moonshine::alert>Alert</x-moonshine::alert>

Alert

Тип уведомления

Вы можете изменить тип уведомления, указав компонент type.

Доступные типы:

  • <span class="badge badge-primary">primary</span>,
  • <span class="badge badge-secondary">secondary</span>,
  • <span class="badge badge-success">success</span>,
  • <span class="badge badge-warning">warning</span>,
  • <span class="badge badge-error">error</span>,
  • <span class="badge badge-info">info</span>.
<x-moonshine::alert type="primary">Primary</x-moonshine::alert>
<x-moonshine::alert type="secondary">Secondary</x-moonshine::alert>
<x-moonshine::alert type="success">Success</x-moonshine::alert>
<x-moonshine::alert type="info">Info</x-moonshine::alert>
<x-moonshine::alert type="warning">Warning</x-moonshine::alert>
<x-moonshine::alert type="error">Error</x-moonshine::alert>
<x-moonshine::alert type="primary">Primary</x-moonshine::alert>
<x-moonshine::alert type="secondary">Secondary</x-moonshine::alert>
<x-moonshine::alert type="success">Success</x-moonshine::alert>
<x-moonshine::alert type="info">Info</x-moonshine::alert>
<x-moonshine::alert type="warning">Warning</x-moonshine::alert>
<x-moonshine::alert type="error">Error</x-moonshine::alert>

Иконка

Есть возможность для уведомления изменить иконку, для этого необходимо передать ее в параметр icon.

<x-moonshine::alert icon="heroicons.academic-cap">Alert</x-moonshine::alert>
<x-moonshine::alert icon="heroicons.academic-cap">Alert</x-moonshine::alert>

Alert

Более подробную информацию смотрите в разделе Иконки.

Удаление уведомлений

Чтобы удалить уведомления через некоторое время, необходимо передать параметр removable со значением TRUE.

<x-moonshine::alert removable="true">Alert</x-moonshine::alert>
<x-moonshine::alert removable="true">Alert</x-moonshine::alert>