Laravel Nova の改善 – Stitcher.io

in Vlog

(jp) =

# 遠い昔、遥か彼方の銀河系で…

Laravel Nova は、Laravel Web アプリケーションの公式管理パネルとして、2018 年 8 月 22 日にリリースされました。

あれは テイラー・オトウェル Laracon US 2018 でプレゼンテーションを行って以来、Nova は大幅に進化し、より優れた UI エクスペリエンス、より高速なパフォーマンスを提供し、最終的にはバックエンド クリエイターに Laravel アプリケーションとそれぞれのリソース (または Eloquent 権限を与えられた モデル) が素敵な CRUD インターフェイスに統合されました。

Nova が作成されたとき、Laravel Nova が実際の管理バックオフィス システムであるべきであるという点で、Laravel コミュニティにはすでに多くの期待がありました。これは、QuickAdminPanel やLaravel BackPack ですが、公式の Laravel 製品ではありませんでした。 それで、Laracon の直後に Nova が発売されたとき、売れ行きが好調だったので、みんなで話題になりました。 しかし、それらは過去のものです:)

ノヴァはその後進化し、たくさん進化しました！ これはもはや単純なリソース管理ツールではありません。Nova プロジェクトを開発する際に役立つ 6 つの必須機能を紹介したいと思います。 また、Nova について詳しく知りたい場合は、この夏にリリースされる予定の Mastering Nova コースの最新情報を購読することをお勧めします。

# 1. カスタム CSS テーマの作成

Nova の最初のバージョンでは、Nova の新しいバージョンが公開されるたびに CSS コードをオーバーライドすることなく、テーマをカスタマイズしたり微調整したりすることができませんでした。

これで、次のように CSS テーマを作成できます。

php artisan nova:theme brunocfalcao/masteringnova-theme

その後、新しいパッケージに CSS クラスがあります。 resources/css/theme.css ここで、Nova インスタンスで使用するすべての新しい Tailwind クラスを適用できます。

Nova クラス全体を完全にカスタマイズしたい場合でも、カスタム パッケージを使用して有効にできます。その後、Nova::enableThemingClasses() を使用して、必要に応じて完全にブランド化します。

この機能は、Vue コンポーネントの前に文字列を付けます nova-. たとえば、Nova はクラス名 nova-heading を Heading コンポーネントの最上位に追加するため、そこからスタイルを設定できます。



public function boot()

    Nova::enableThemingClasses()




if (window.config.themingClasses) 
    Vue.mixin(ThemingClasses)

# 2. 動的フィールドの可視性ステータス

Nova のバージョン 1.x では、8 つの方法を使用してフィールドの可視性を制御します。

hideFromIndex()
hideFromDetail()
hideWhenCreating()
hideWhenUpdating()
onlyOnIndex()
onlyOnDetail()
onlyOnForms()
exceptOnForms()

これで、 show*() 他の表示コンテキストに依存せずに、それぞれの表示コンテキストでリソースを表示できるようにするメソッド。 たとえば、 showOnIndex() そして showOnCreating()、返す必要があるメソッドでコールバックを使用する true.

showOnIndex()
showOnDetail()
showOnCreating()
showOnUpdating()

# 3. より良いユーザー エクスペリエンスを作成するための新しいフィールド タイプ

バージョン 1.x 以降、新しいフィールド タイプが Nova に追加されました。 私が最高の追加と考えるものをいくつか紹介しましょう。

# スパークライン フィールド

リソース インデックスまたは詳細コンテキストで、チャートを「その場で」直接表示します。

Sparkline::make('Total devices Per Week')
    ->data($data)
    ->asBarChart()
    ->width(300),

# Key-Value フィールド

Key-Value フィールドは、JSON データ型の列を操作する方法であり、CRUD の方法で Key-Value エントリを管理する方法を提供します。

KeyValue::make('Server Data', 'server_data')
    ->keyLabel('Parameter')
    ->valueLabel('Value')
    ->actionText('Add Server Parameter')
    ->rules('json')
    ->nullable(),


protected $casts = [
    'server_data' => 'json'
];

# 隠しフィールド

最初は役に立たないかもしれませんが、データ計算を適用して UI コンポーネントに送信できるので、これがあると便利です。

Hidden::make('User', 'user_id')->default(
    fn($request) => $request->user()->id
);

# VaporFile および VaporImage フィールド

これらは、 ブロックの最新の子供たち ファイルや画像を Laravel Vapor インスタンスにアップロードできるためです。 Amazon S3 の一時的なアップロード URL が生成され、すぐにファイルがアップロードされます。

VaporFile::make('Filename'),
VaporImage::make('Avatar')->maxWidth(80)->rounded(false),

# 検索可能な選択フィールド

最新の Nova バージョン 3.6.0 では、検索可能な選択フィールドを使用できるようになりました。

Select::make('Tags', 'tag_id')
    ->searchable()
    ->options(\App\Tag::all()->pluck('name', 'id'))
    ->displayUsingLabels(),

# 4. スタブを変更できます

バージョン 3.3.0 以降、Nova のスタブを公開して、必要に応じて変更できるようになりました。

php artisan nova:stubs [--force]

スタブは、「スタブ」と呼ばれるディレクトリのアプリ フォルダーに直接公開されます。

これは文書化されていないと思いますが、リソースの特定の属性を指定してリソースをソートできます。


Nova::sortResourcesBy(function ($resource) 
    return $resource::$priority ?? 9999;
);


public static $priority = 10;

サイドバー リソースは、この優先順位で並べ替えられます。 きちんとした！

特定のケースでは、グローバル検索でリソースをターゲットにして、[詳細]ではなく[編集]に移動するか、またはその逆を行いたい場合があります。 リソースに次の静的プロパティを追加するだけです。

public static $globalSearchLink = 'detail';

Laravel Nova の学習を続けたい場合は、いつでも私の Mastering Nova Course を事前登録できます。

もう一度、おかげで ブルーノ この記事を書いてくれて！

//platform.twitter.com/widgets.js

関連記事

前の投稿
アイダホ州で最高の水泳ホール
次の投稿
アオカケスのように見える 10 の鳥 ​​(および違いを見つける方法)

関連記事