README

为您的 fjord 项目提供有用的 Blade 组件的包。

设置

发布必要的资产。

php artisan vendor:publish --provider="BladeScript\ServiceProvider"
php artisan vendor:publish --provider="BladeStyle\ServiceProvider"

要包含所有样式和脚本，必须在头部放置 x-styles 标签，在体尾放置 x-scripts 标签。

<!DOCTYPE html>
<html lang="en">
	<head>
		...

		<x-styles />
	</head>
	<body>
		...

		<x-scripts />
	</body>
</html>

自定义

如果您想自定义 blade 组件，可以简单地发布它们，并根据需要编辑它们。

php artisan vendor:publish --provider="Fjord\Ui\FjordUiServiceProvider" --tag=views

图片

图片组件使用懒加载，并在加载图片之前打印图片的 base64 字符串。它还输出适合相应屏幕尺寸的适当媒体转换。

组件需要一个带有媒体模型的图片参数

<x-fj-image :image="$model->image"/>

组件懒加载图片，并在加载之前预览图片的压缩版 base64 字符串。

您可以通过将 lazy 属性设置为 false 来禁用懒加载

<x-fj-image :image="$model->image" :lazy="false" />

在 Fjord 中构建导航

每个页面都需要一个导航。构建它通常需要时间，尤其是如果设计必须精确适应您的需求。该 UI 套件提供了一个简单而全面的解决方案，可以在短时间内包含所有可能的导航类型，这些类型都使用 list 字段构建。

我们首先创建一个表单，在其中我们可以构建我们的导航

php artisan fjord:form --collection=navigations --form=main_navigation

下一步是向新创建的配置文件添加一个 nav 字段

namespace FjordApp\Config\Form\Navigations;

class MainNavigationConfig extends FormConfig
{
	public function show(CrudShow $page)
    {
        $page->card(function ($form) {
            $form->nav('main')->title('Main Navigation')->maxDepth(3);
        });
    }
}

现在我们可以简单地传递列表字段到 x-fj-nav-list 组件，并创建一个可以在 fjord 后端构建的导航

use Fjord\Support\Facades\Form;

$nav = Form::load('navigations', 'main_navigation');

<x-fj-nav-list :list="$nav->main" layout="horizontal" dropdown/>

这将导致以下简单的水平导航

使用以下选项自定义表格

方法	描述
`layout`	可以是 `horizontal` 或 `vertical`。（默认是 `vertial`）
`dropdown`	导航是否应该是在 `mouseover` 上显示的下拉菜单。
`depth`	最大深度。
`subLevel`	起始深度。
`expandable`	仅显示一级，所有子级可以在 `click` 上展开。
`class`	导航类。
`activeClass`	活动项目的类。（默认是：`fj--active`）

可翻译路由

以 /en/home、/de/startseite 形式构建翻译路由变得简单。

请确保在 resources 目录中的翻译文件内翻译您的路由，例如

// lang/de/routes.php

return [
    'home' => 'startseite'
];

现在，您可以使用 __() 助手在 uri 字符串中像这样添加翻译路由到您首选的路由文件

Route::trans('/__(routes.home)', 'HomeController@show')->name('home');

将为在您的 translatable 配置中定义的所有区域创建翻译路由。区域将被添加到给定的 uri 和 name 前面。因此，前面示例的路由将是

en.home => /en/home
de.home => /de/startseite

__route 助手将当前语言环境添加到给定的名称之前，并返回相应的路由

<a href="{{ __route('home') }}">
    ...
</a>

语言切换

您可能想在网站上放置指向不同语言路由的链接。为此，可以使用带有所需语言环境的 translate 方法应用于当前路由。

<a href="{{ Request::route()->translate('de') }}">Deutsch</a>

带有参数

对于带有参数的路由，必须指定翻译器。翻译器是一个控制器方法，它返回所需语言环境的路由参数。翻译器方法接收所需语言环境和当前语言环境的参数。

// ./routes/web.php
Route::trans('/{slug}', 'MyController@show')->translator('getSlug')->name('home');

// ./app/Http/Controllers/MyController.php

...

class MyController extends Controller
{
	...

	public function getSlug($locale, $slug)
	{
		$slug = Post::whereTranslation('slug', $slug)
			->first()
			->translate($locale)
			->slug;

		return ['slug' => $slug];
	}
}

本地化

Blade 组件 x-fj-localize 创建指向所有语言环境的翻译路由的链接。

<x-fj-localize />

结果

<a href="/en/home" class="locale locale-en locale-active">EN</a>
<a href="/de/startseite" class="locale locale-de">DE</a>

您可以通过传递一个带有语言环境名称的插槽来更改链接的内容

<x-fj-localize>
	<x-slot name="en">
		English
	</x-slot>
	<x-slot name="de">
		Deutsch
	</x-slot>
</x-fj-localize>

结果

<a href="/en/home" class="locale locale-en locale-active">English</a>
<a href="/de/startseite" class="locale locale-de">Deutsch</a>

助手

`child_is_active`

子项是否激活确定列表项是否有带有激活路由的子项。以下示例将在列表项具有从路由字段添加的激活 route 时添加 is-active 类。

$form->route('route_field')->collection('app')->title('Pick a route.');

@foreach($data->list as $item)
	<span class="child_is_active($item, 'route_field', 'is-active')">
		{{ $item->title }}
	</span>
@endforeach

aw-studio / fjord-ui-kit

维护者

详细信息