Компоненты

Alert

Основы

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

use MoonShine\UI\Components\Alert;
 
Alert::make()->content('Text'),
use MoonShine\UI\Components\Alert;
 
Alert::make()->content('Text'),
<x-moonshine::alert>Alert</x-moonshine::alert>
<x-moonshine::alert>Alert</x-moonshine::alert>

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

Изменить тип уведомления можно указав у компонента параметр type.

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

primary secondary success warning error info 

Alert::make(type: 'primary')->content('Primary'),
Alert::make(type: 'secondary')->content('Secondary'),
Alert::make(type: 'success')->content('Success'),
Alert::make(type: 'warning')->content('Warning'),
Alert::make(type: 'error')->content('Error'),
Alert::make(type: 'info')->content('Text'),
Alert::make(type: 'primary')->content('Primary'),
Alert::make(type: 'secondary')->content('Secondary'),
Alert::make(type: 'success')->content('Success'),
Alert::make(type: 'warning')->content('Warning'),
Alert::make(type: 'error')->content('Error'),
Alert::make(type: 'info')->content('Text'),
<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.

Alert::make(icon: "academic-cap")
    ->content('Text'),
Alert::make(icon: "academic-cap")
    ->content('Text'),
<x-moonshine::alert icon="academic-cap">
    Alert
</x-moonshine::alert>
<x-moonshine::alert icon="academic-cap">
    Alert
</x-moonshine::alert>

За более подробной информацией обратитесь к разделу Icons.

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

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

Alert::make(removable: true)
    ->content('Text'),
Alert::make(removable: true)
    ->content('Text'),
<x-moonshine::alert removable="true">
    Alert
</x-moonshine::alert>
<x-moonshine::alert removable="true">
    Alert
</x-moonshine::alert>