视图

有时您可能希望在应用程序中显示自己的 blade 模板。要实现此目的，您可以使用 Layout::view 方法，并传递一个包含模板名称的字符串。

use Orchid\Support\Facades\Layout;

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

query 方法返回的任何数据都会传递给您的模板，并可以使用 Blade 语法访问。例如：

// ... Screen

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

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

在 hello.blade.php 模板中，您可以这样显示 name 变量的内容：

{{-- ... /views/greeting.blade.php --}}

Hello, {{ $name }}.

请注意，layout 方法应返回一个视图数组，以便在最终布局中显示。如果您想包含多个自定义模板，可以像这样将它们添加到数组中：

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

Blade 组件

Blade 组件是一种在 Laravel 应用程序中重用模板的方法。要创建一个新的 blade 组件，您可以使用 artisan 命令：

php artisan make:component Hello --inline

这将在 App\View\Components 命名空间中创建一个名为 Hello 的新类。该类应如下所示：

namespace App\View\Components;

use Illuminate\View\Component;

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

    /**
     * 创建一个新的组件实例。
     *
     * @param string $name
     */
    public function __construct(string $name)
    {
        $this->name = $name;
    }

    /**
     * 获取表示组件的视图/内容。
     *
     * @return \Illuminate\View\View|string
     */
    public function render()
    {
        return <<<'blade'
<div>
    Hello {{ $name }}!
</div>
blade;
    }
}

要在您的屏幕中使用该组件，您可以将其小写表示传递给 Layout::component 方法：

/**
 * 查询数据。
 *
 * @return array
 */
public function query(): array
{
    return [
        'name' => 'Sheldon Cooper',
    ];
}

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

query 方法返回的值将传递给组件，并可以使用 blade 语法访问。例如，在 Hello 组件类中，您可以这样访问 name 变量：

Hello {{ $name }}!

如果您想向组件传递其他变量，可以通过修改构造函数并将它们作为参数添加来实现。例如：

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;

    /**
     * 创建一个新的组件实例。
     *
     * @param Application $application
     * @param string      $name
     */
    public function __construct(Application $application, string $name)
    {
        $this->application = $application;
        $this->name = $name;
    }

    /**
     * 获取表示组件的视图/内容。
     *
     * @return \Illuminate\View\View|string
     */
    public function render()
    {
        return <<<'blade'
<div>
    Hello {{ $name }}!<br>
    Version {{ $application->version() }}
</div>
blade;
    }
}

您可以在 Laravel 文档 中了解更多关于 blade 组件的信息。

包装器

“包装器”是自定义模板与标准布局层之间的中间链接。它允许您指定其他布局层应在自定义模板中显示的位置。

要使用包装器，您可以将视图数组传递给 Layout::wrapper 方法，并传递您的自定义模板名称。数组应包含表示模板中可用变量的键，值应为要渲染的视图。

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

在 settings.blade.php 模板中，您可以访问 foo 和 bar 变量，并显示它们包含的视图，如下所示：

<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 语法访问。

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

您可以在模板中这样显示 name 变量的内容：

Hello, {{ $name }}.

浏览

有时在管理面板中工作时在多个浏览器标签之间切换可能不方便。为避免这种情况，您可以使用 Layout::browsing 方法在应用程序中通过 iframe 显示不同网页的内容。

例如：

use Orchid\Support\Facades\Layout;

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

您还可以通过链式调用方法为 iframe 元素指定各种属性。例如：

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

请参考 HTML 规范 以获取可用属性的完整列表。