ActionButton

Наследует MoonShineComponent * имеет те же возможности

# Основы

Когда Вам необходимо добавить кнопку с определенным действием, на помощь приходят ActionButton. В MoonShine они уже используются - в формах, таблицах, на страницах.

ActionButton::make(
Closure|string $label,
Closure|string|null $url = null,
mixed $item = null
)
  • label - текст кнопки,
  • url - url ссылки у кнопки,
  • item - опциональные данные кнопки, доступные в замыканиях.
use MoonShine\ActionButtons\ActionButton;
 
public function components(): array
{
return [
ActionButton::make(
label: 'Button title',
url: 'https://moonshine-laravel.com',
)
];
}

Также доступен helper, который можно применить в blade:

<div>
{!! actionBtn('Click me', 'https://moonshine-laravel.com') !!}
</div>
Example

# Blank

Метод blank() позволяет открывать url в новом окне.

use MoonShine\ActionButtons\ActionButton;
 
public function components(): array
{
return [
ActionButton::make(
label: fn() => 'Click me',
url: 'https://moonshine-laravel.com',
)
->blank()
];
}
Example

# Icon

Метод icon() позволяет указать иконку у кнопки.

use MoonShine\ActionButtons\ActionButton;
 
public function components(): array
{
return [
ActionButton::make(
label: fn() => 'Click me',
url: 'https://moonshine-laravel.com',
)
->icon('heroicons.outline.pencil')
];
}
Example

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

# Цвет

Для ActionButton есть набор методов которые позволяют задать цвет кнопки: primary(), secondary(), warning(), success() и error().

use MoonShine\ActionButtons\ActionButton;
 
public function components(): array
{
return [
ActionButton::make(
label: 'Click me',
url: fn() => 'https://moonshine-laravel.com',
)
->primary()
];
}
Primary Secondary Warning Success Error

# onClick

Метод onClick позволяет выполнить js код по клику:

use MoonShine\ActionButtons\ActionButton;
 
public function components(): array
{
return [
ActionButton::make(
label: 'Click me',
url: 'https://moonshine-laravel.com',
)
->onClick(fn() => "alert('Example')", 'prevent')
];
}
Example
Basics

Для того, чтобы по клику на кнопку произошел вызов модального окна, воспользуйтесь методом inModal().

inModal(
Closure|string|null $title = null,
Closure|string|null $content = null,
array $buttons = [],
bool $async = false,
bool $wide = false,
bool $auto = false,
bool $closeOutside = false,
array $attributes = [],
bool $autoClose = true,
)
  • title - заголовок окна,
  • content - контент модального окна,
  • buttons - кнопки модального окна,
  • async - асинхронный режим,
  • wide - максимальная ширина модального окна,
  • auto - ширина модального окна по контенту,
  • closeOutside - закрывать модальное окно при клике вне области окна,
  • attributes - дополнительные атрибуты,
  • autoClose - автозакрытие модального окна после успешного запроса.
use MoonShine\ActionButtons\ActionButton;
 
public function components(): array
{
return [
ActionButton::make(
label: 'Click me',
url: 'https://moonshine-laravel.com',
)
->inModal(
title: fn() => 'Modal title',
content: fn() => 'Modal content',
buttons: [
ActionButton::make('Click me in modal', 'https://moonshine-laravel.com')
],
async: false
)
];
}

Вы также можете открыть модальное окно с помощью метода toggleModal, а если ActionButton находится внутри модального окна то просто openModal

use MoonShine\ActionButtons\ActionButton;
use MoonShine\Components\Modal;
 
public function components(): array
{
return [
MoonShine\Components\Modal::make(
'Title',
fn() => 'Content',
)->name('my-modal')
 
ActionButton::make(
label: 'Open modal',
url: '#',
)->toggleModal('my-modal')
];
}
Async

Если требуется подгрузить контент в модальное окно асинхронно, то переключите параметр async в true.

use MoonShine\ActionButtons\ActionButton;
 
public function components(): array
{
return [
ActionButton::make(
label: 'Click me',
url: to_page('action_button', fragment: 'doc-content'),
)
->inModal(
title: fn() => 'Modal title',
async: true
)
];
}

О Fragment можно узнать в разделе "Components"

# Confirm

Метод withConfirm() позволяет создать кнопку с подтверждением действия.

use MoonShine\ActionButtons\ActionButton;
 
public function components(): array
{
return [
ActionButton::make(
label: 'Click me',
url: 'https://moonshine-laravel.com',
)
->withConfirm(
'Confirm modal title',
'Confirm modal content',
'Confirm modal button',
)
];
}

withConfirm не работает с async режимами. Для асинхронного режима, необходимо сделать свою реализацию через Modal или inModal() .

# Offcanvas

Для того, чтобы по клику на кнопку произошел вызов offcanvas, воспользуйтесь методом inOffCanvas().

use MoonShine\ActionButtons\ActionButton;
 
public function components(): array
{
return [
ActionButton::make(
label: 'Click me',
url: 'https://moonshine-laravel.com',
)
->inOffCanvas(
fn() => 'OffCanvas title',
fn() => form()->fields([Text::make('Text')]),
isLeft: false
)
];
}

# Группы

Если Вам необходимо выстроить логику с несколькими ActionButton, при этом некоторые должны быть скрыты или отображаться в выпадающем меню, в таком случае воспользуйтесь компонентом ActionGroup

use MoonShine\ActionButtons\ActionButton;
use MoonShine\Components\ActionGroup;
 
public function components(): array
{
return [
ActionGroup::make([
ActionButton::make('Button 1', '/')->canSee(fn() => false),
ActionButton::make('Button 2', '/', $model)->canSee(fn($model) => $model->active)
])
];
}
Отображение

Вы также благодаря ActionGroup можете изменить отображение кнопок, отображать их в линию или же в выпадающем меню для экономии места.

use MoonShine\ActionButtons\ActionButton;
use MoonShine\Components\ActionGroup;
 
public function components(): array
{
return [
ActionGroup::make([
ActionButton::make('Button 1', '/')->showInLine(),
ActionButton::make('Button 2', '/')->showInDropdown()
])
];
}

# Bulk

Метод bulk() позволяет создать кнопку для массовых действий для ModelResource.

public function indexButtons(): array
{
return [
ActionButton::make('Link', '/endpoint')->bulk(),
];
}

Метод bulk(), используется только внутри ModelResource.

# Асинхронный режим

Метод async() позволяет реализовать асинхронный режим работы для ActionButton.

async(
string $method = 'GET',
?string $selector = null,
array $events = []
?string $callback = null
)
  • $method - метод асинхронного запроса;
  • $selector - selector элемента у которого будет изменяться контент;
  • $events - вызываемые события после успешного запроса;
  • $callback - js callback функция после получения ответа.
public function components(): array
{
return [
ActionButton::make(
'Click me',
'/endpoint'
)
->async()
];
}
Уведомления

Если Вам необходимо после клика отобразить уведомление или сделать редирект, то достаточно реализовать json ответ по структуре:

{message: 'Toast', messageType: 'success', redirect: '/url'}

Параметр redirect не является обязательным.

HTML контент

Если требуется по клику заменить область с html, то вы можете в ответе вернуть HTML контент или json с ключом html:

{html: 'Html content'}
public function components(): array
{
return [
ActionButton::make(
'Click me',
'/endpoint'
)
->async(selector: '#my-selector')
];
}
События

После успешного запроса можно вызывать события:

public function components(): array
{
return [
ActionButton::make(
'Click me',
'/endpoint'
)
->async(events: ['table-updated-index-table'])
];
}
Callback

Если необходимо обработать ответ иным способом, то необходимо реализовать функцию-обработчик и указать ее в методе async().

public function components(): array
{
return [
ActionButton::make(
'Click me',
'/endpoint'
)
->async(callback: 'myFunction')
];
}
document.addEventListener("moonshine:init", () => {
MoonShine.onCallback('myFunction', function(response, element, events, component) {
if(response.confirmed === true) {
component.$dispatch('toast', {type: 'success', text: 'Success'})
} else {
component.$dispatch('toast', {type: 'error', text: 'Error'})
}
})
})

# Вызов методов

method() позволяют указать название метода в ресурсе и асинхронно вызывать его при клике по ActionButton без необходимости создавать дополнительные контроллеры.

public function components(): array
{
return [
ActionButton::make('Click me')
->method('updateSomething'),
];
}
// With toast
public function updateSomething(MoonShineRequest $request)
{
// $request->getResource();
// $request->getResource()->getItem();
// $request->getPage();
 
MoonShineUI::toast('MyMessage', 'success');
 
return back();
}
 
// Exception
public function updateSomething(MoonShineRequest $request)
{
throw new \Exception('My message');
}
 
// Custom json response
public function updateSomething(MoonShineRequest $request)
{
return MoonShineJsonResponse::make()->toast('MyMessage', ToastType::SUCCESS);
}

Методы в вызываемые через ActionButton в ресурсе должны быть публичными!

# Вызов событий

Для вызова событий javascript можно воспользоваться методом dispatchEvent().

dispatchEvent(array|string $events)
ActionButton::make('Refresh', '#')
->dispatchEvent(AlpineJs::event(JsEvent::TABLE_UPDATED, 'index-table')),