Как создать страницу сайта в Конструкторе панелей Filament Laravel. Инструкция с примерами из официальной документации Filament.

Информация о материале: Родительская категория: Документация Filament 3; Категория: Конструктор панелей (Panel Builder)

Создание страниц в Конструкторе панелей (Panel Builder) Filament Laravel — Страницы в Конструкторе панелей (Panel Builder) Filament Laravel

Обзор

Filament позволяет создавать полностью настраиваемые страницы для приложения.

Создание страницы в Filament Panel Builder

Для создания новой страницы используется команда Artisan:

php artisan make:filament-page Settings

Эта команда создаст два файла:

класс страницы в каталоге /Pages директории Filament,
представление в каталоге /pages директории Filament views.

Классы страниц — это все полностраничные компоненты Livewire с несколькими дополнительными возможностями, которые можно использовать с панелью.

Можно запретить отображение страниц в меню, переопределив метод shouldRegisterNavigation() в классе Page. Это удобно, если требуется контролировать, какие пользователи могут видеть ссылку на страницу в боковой панели.

public static function shouldRegisterNavigation(): bool
{
    return auth()->user()->canManageSettings();
}

Следует иметь в виду, что все пользователи по-прежнему смогут посещать эту страницу по ее прямому URL, поэтому для полного ограничения доступа необходимо также контролировать метод mount() страницы:

public function mount(): void
{
    abort_unless(auth()->user()->canManageSettings(), 403);
}

Добавление действий к страницам

Действия — это кнопки, с помощью которых можно выполнять задачи на странице или переходить по URL. Подробнее об их возможностях можно прочитать здесь.

Поскольку все страницы являются компонентами Livewire, действия можно добавлять в любое место. На страницах уже настроен трейт InteractsWithActions, интерфейс HasActions и компонент Blade <x-filament-actions::modals />.

Эффекты в заголовках

Кроме того, можно легко добавить действия в заголовок любой страницы, включая страницы ресурсов. Вам не нужно беспокоиться о добавлении чего-либо в Blade, Filament сделает это за вас. Просто получите свои действия из метода getHeaderActions() класса страницы:

use Filament\Actions\Action;
 
protected function getHeaderActions(): array
{
    return [
        Action::make('edit')
            ->url(route('posts.edit', ['post' => $this->post])),
        Action::make('delete')
            ->requiresConfirmation()
            ->action(fn () => $this->post->delete()),
    ];
}

Обновление данных формы

Если на странице ресурса Edit или View используются действия, то обновить данные в главной форме можно с помощью метода refreshFormData():

use App\Models\Post;
use Filament\Actions\Action;
 
Action::make('approve')
    ->action(function (Post $record) {
        $record->approve();
 
        $this->refreshFormData([
            'status',
        ]);
    })

Этот метод принимает массив атрибутов модели, которые необходимо обновить в форме.

Добавление виджетов на страницы

Filament позволяет отображать виджеты внутри страниц, под заголовком и над футером.

Чтобы добавить виджет на страницу, используйте методы getHeaderWidgets() или getFooterWidgets():

use App\Filament\Widgets\StatsOverviewWidget;
 
protected function getHeaderWidgets(): array
{
    return [
        StatsOverviewWidget::class
    ];
}

getHeaderWidgets() возвращает массив виджетов для отображения их выше содержимого страницы, а getFooterWidgets() — ниже.

Подробнее о том, как создавать и настраивать виджеты, читайте в разделе документации по Dashboard.

Настройка сетки виджетов

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

Для этого можно переопределить методы getHeaderWidgetsColumns() или getFooterWidgetsColumns(), чтобы вернуть количество используемых колонок сетки:

public function getHeaderWidgetsColumns(): int | array
{
    return 3;
}

Адаптивная сетка виджетов

Возможно, потребуется изменить количество колонок сетки виджетов в зависимости от breackpoint браузера. Для этого можно использовать массив, содержащий количество колонок, которые должны использоваться в каждом breackpoint:

public function getHeaderWidgetsColumns(): int | array
{
    return [
        'md' => 4,
        'xl' => 5,
    ];
}

Это хорошо сочетается с адаптивными ширинами виджетов.

Передача данных виджетам со страницы

Передать данные виджетам со страницы можно с помощью метода getWidgetsData():

public function getWidgetData(): array
{
    return [
        'stats' => [
            'total' => 100,
        ],
    ];
}

Теперь в классе виджета можно определить соответствующее свойство массива public $stats, которое будет заполняться автоматически:

public $stats = [];

Передача свойств виджетам на страницах

При регистрации виджета на странице можно использовать метод make() для передачи ему массива свойств Livewire:

use App\Filament\Widgets\StatsOverviewWidget;
 
protected function getHeaderWidgets(): array
{
    return [
        StatsOverviewWidget::make([
            'status' => 'active',
        ]),
    ];
}

Этот массив свойств связывается с публичными свойствами Livewire класса виджета:

use Filament\Widgets\Widget;
 
class StatsOverviewWidget extends Widget
{
    public string $status;
 
    // ...
}

Теперь доступ к status в классе виджета можно получить с помощью $this->status.

Настройка заголовка страницы

По умолчанию Filament автоматически генерирует заголовок для страницы на основе ее названия. Это можно переопределить, определив свойство $title в классе страницы:

protected static ?string $title = 'Настраиваемый заголовок страницы';

В качестве альтернативы можно вернуть строку из метода getTitle():

use Illuminate\Contracts\Support\Htmlable;
 
public function getTitle(): string | Htmlable
{
    return __('Настраиваемый заголовок страницы');
}

По умолчанию Filament использует заголовок страницы в качестве метки элемента навигации. Это свойство можно переопределить, определив в классе страницы свойство $navigationLabel:

protected static ?string $navigationLabel = 'Настраиваемая метка навигации';

В качестве альтернативы можно вернуть строку из метода getNavigationLabel():

public static function getNavigationLabel(): string
{
    return __('Настраиваемая метка навигации');
}

Настройка URL страницы

По умолчанию Filament автоматически генерирует URL (slug) для вашей страницы на основе ее названия. Это можно переопределить, определив свойство $slug в классе страницы:

protected static ?string $slug = 'custom-url-slug';

Настройка заголовка страницы

По умолчанию Filament использует заголовок страницы в качестве заголовка. Это можно переопределить, определив свойство $heading в классе страницы:

protected ?string $heading = 'Настраиваемый заголовок страницы';

В качестве альтернативы можно вернуть строку из метода getHeading():

public function getHeading(): string
{
    return __('Настраиваемый заголовок страницы');
}

Добавление подзаголовка страницы

Кроме того, можно добавить подзаголовок на страницу, определив свойство $subheading в классе страницы:

protected ?string $subheading = 'Настраиваемый подзаголовок страницы';

В качестве альтернативы можно вернуть строку из метода getSubheading():

public function getSubheading(): ?string
{
    return __('Настраиваемый подзаголовок страницы');
}

Для любой страницы можно заменить стандартные заголовки, подзаголовки и эффекты на пользовательский вид заголовка. Его можно вернуть из метода getHeader():

use Illuminate\Contracts\View\View;
 
public function getHeader(): ?View
{
    return view('filament.settings.custom-header');
}

В данном случае предполагается, что у вас есть представление Blade по адресу resources/views/filament/settings/custom-header.blade.php.

Также можно добавить нижний колонтитул на любую страницу, под ее содержимым. Его можно вернуть из метода getFooter():

use Illuminate\Contracts\View\View;
 
public function getFooter(): ?View
{
    return view('filament.settings.custom-footer');
}

В данном примере предполагается, что у вас есть представление Blade по адресу resources/views/filament/settings/custom-footer.blade.php.

Настройка максимальной ширины содержимого страницы

По умолчанию Filament ограничивает ширину содержимого страницы, чтобы оно не становилось слишком широким на больших экранах. Чтобы изменить это, можно переопределить метод getMaxContentWidth(). Параметры соответствуют шкале максимальной ширины Tailwind. Возможны следующие варианты: xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, prose, screen-sm, screen-md, screen-lg, screen-xl, screen-2xl и full. По умолчанию используется значение 7xl:

public function getMaxContentWidth(): ?string
{
    return 'full';
}

Перевод с английского официальной документации Filament Laravel:
https://filamentphp.com/docs/3.x/panels/pages

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)

Страницы в Конструкторе панелей Filament Laravel

Обзор

Создание страницы в Filament Panel Builder

Условия для скрытия страниц в навигации

Добавление действий к страницам

Эффекты в заголовках

Обновление данных формы

Добавление виджетов на страницы

Настройка сетки виджетов

Адаптивная сетка виджетов

Передача данных виджетам со страницы

Передача свойств виджетам на страницах

Настройка заголовка страницы

Настройка навигационной метки страницы

Настройка URL страницы

Настройка заголовка страницы

Добавление подзаголовка страницы

Замена заголовка страницы индивидуальным представлением

Отображение настраиваемого представления в нижнем колонтитуле страницы

Настройка максимальной ширины содержимого страницы

Горячий старт на просторы интернета

Горячий старт на просторы интернета