Универсальные макеты

Suggest edit

Пользовательский шаблон

Вполне ожидаемая ситуация, когда необходимо отобразить собственный blade шаблон. Для этого необходимо вызвать Layout::view, передав параметром строку имени:

use Orchid\Support\Facades\Layout;

public function layout(): array
{
    return [
        Layout::view('myTemplate'),
    ];
}

Все данные из метода query будут переданы в Ваш шаблон.

// ... Screen

public function query(): array
{
    return [
        'name' => 'Alexandr Chernyaev',
    ];
}

public function layout(): array
{
    return [
        Layout::view('hello'),
    ];
}

Вы можете отобразить содержимое name вот так:

// ... /views/hello.blade.php

Hello {{ $name }}!

Обертка

Промежуточным звеном между “Пользовательским шаблоном” и стандартными слоями может служить “Обёртка”, которая позволяет указывать, где именно должны отображаться другие слои.

public function layout(): array
{
    return [
        Layout::wrapper('myTemplate', [
            'foo' => [
                RowLayout::class,
                RowLayout::class,
            ],
            'bar' => RowLayout::class,
        ]),
    ];
}

В шаблон myTemplate будут переданы переменные foo и bar, содержащие уже собранные View, которые можно выводить:

<div class="row">
    <div class="col-7 border-right">
        @foreach($foo as $row)
            {!! $row !!}
        @endforeach
    </div>
    <div class="col-5 no-gutter">
        {!! $bar !!}
    </div>
</div>

Переменные из query так же доступны в шаблоне.

Компоненты

Одним из способов повторного использования шаблонов является создание Blade компонентов. Такие компоненты могут быть использованы и в платформе.

Для того чтобы создать новый компонент, воспользуемся artisan командой:

php artisan make:component Hello --inline

Примечание. Более подробно Вы можете узнать о компонентах в документации фреймворка

В результате будет новый класс Hello, приведём его в следующий вид:

namespace App\View\Components;

use Illuminate\View\Component;

class Hello extends Component
{
    /**
     * @var string
     */
    public $name;

    /**
     * Create a new component instance.
     *
     * @param string $name
     */
    public function __construct(string $name)
    {
        $this->name = $name;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|string
     */
    public function render()
    {
        return <<<'blade'
<div>
    Hello {{ $name }}!
</div>
blade;
    }
}

Для использования этого класса в экранах необходимо передать его строчное представление:

/**
 * Query data.
 *
 * @return array
 */
public function query(): array
{
    return [
        'name' => 'Sheldon Cooper',
    ];
}

/**
 * Views.
 *
 * @return Layout[]
 */
public function layout(): array
{
    return [
        Layout::component(Hello::class),
    ];
}

Значения из query будут подставлены в компонент по имени. При этом отсутствующие значения могут быть добавлены из контейнера, например:

namespace App\View\Components;

use Illuminate\Contracts\Foundation\Application;
use Illuminate\View\Component;

class Hello extends Component
{
    /**
     * @var string
     */
    public $name;

    /**
     * @var Application
     */
    public $application;

    /**
     * Create a new component instance.
     *
     * @param Application $application
     * @param string      $name
     */
    public function __construct(Application $application, string $name)
    {
        $this->application = $application;
        $this->name = $name;
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|string
     */
    public function render()
    {
        return <<<'blade'
<div>
    Hello {{ $name }}!<br>
    Version {{ $application->version() }}
</div>
blade;
    }
}

Browsing

Панель администратора — это место, где вы можете просматривать и выполнять все необходимые действия в проекте. Но иногда технология и графический вид не соответствуют друг другу и расположены по разным адресам (Например, если вы используете Telescope или Horizon). Это приводит к тому, что вам нужно постоянно перемещаться между двумя вкладками браузера.

Чтобы избежать этого, вы можете открыть iframe для просмотра другой страницы:

use Orchid\Support\Facades\Layout;

public function layout(): array
{
    return [
        Layout::browsing('http://127.0.0.1:8000/telescope'),
    ];
}

Attributes are also available to the html definition:

Layout::browsing('http://127.0.0.1:8000/telescope')
    ->allow('...')
    ->loading('...')
    ->csp('...')
    ->name('...')
    ->referrerpolicy('...')
    ->sandbox('...')
    ->src('...')
    ->srcdoc('...');

Расширение

Класс Layouts является группирующим нескольких различных. Для того чтобы добавить в него новую возможность, достаточно указать её в сервис провайдере как:

use Orchid\Screen\Layout;
use Orchid\Screen\LayoutFactory;
use Orchid\Screen\Repository;


LayoutFactory::macro('hello', function (string $name) {
    return new class($name) extends Layout
    {
        /**
         * @ string
         */
        public $name;

        /**
         * Hello constructor.
         *
         * @param string $name
         */
        public function __construct(string $name)
        {
            $this->name = $name;
        }

        /**
         * @param Repository $repository
         *
         * @return mixed
         */
        public function build(Repository $repository)
        {
            return view('hello')->with('name', $this->name);
        }

    };
});

Тогда в экране вызов будет выглядеть как:

use Orchid\Support\Facades\Layout;

public function layout(): array
{
    return [
        Layout::hello('Alexandr Chernyaev')
    ];
}

Our Friends