Laravel Jetstream 1.0 Livewire

イントロダクション

Laravel LivewireはBladeをテンプレート言語として使用した、モダンなリアクティブで動的なインターフェースを簡単に構築できるようにするライブラリです。これは動的でリアクティブなアプリケーションを構築したいが、Vue.jsのようなJavaScriptフレームワークへ完全に飛び込むことに抵抗がある場合に選択するのに最適なスタックです。

Livewireの使用時、アプリケーションのルートは通常のBladeテンプレートで対応します。ただし、これらのテンプレート内で必要に応じ、Livewireコンポーネントをレンダーできます。

<div class="mt-4">
    @livewire('server-list')
</div>

Livewireスタックの使用時、認識しておくべきJetstreamのユニークな機能があります。以降でこうした機能を説明します。

{tip} Livewireスタックを使用する前に、Livewireドキュメント全体を確認しておくことを強くおすすめします。

コンポーネント

JetstreamのLivewireスタックで構築するとき、UIの一貫性を支援し使いやすくするため、さまざまなBladeコンポーネント(ボタン、パネル、入力、モーダル)を作成します。これらのコンポーネントは使用するもしないも自由です。使用する場合は、Artisanの vendor:publishコマンドを使用してリソースを公開する必要があります。

php artisan vendor:publish --tag=jetstream-views

resources / viewsディレクトリ内にあるJetstreamの既存のビュー内で使い方を確認すれば、これらのコンポーネントの使用方法についての洞察を得られるでしょう。

モーダル

ほとんどのJetstream Livewireスタックのコンポーネントは、バックエンドと通信しません。ただし、Jetstreamに含まれているLivewireモーダルコンポーネントは、Livewireバックエンドとやり取りして、オープン/クローズ状態を判断しています。また、Jetstreamは、dialog-modalconfirmation-modalの2種類のモーダルを用意しています。confirmation-modalは削除など破壊的なアクションを確認するときに使用しますが、一方のdialog-modalはいつでも使用できるより一般的なモーダルウィンドウです。

モーダルの使い方を示すため、以下のような自分のアカウントを削除したいユーザーにモーダルで確認する場合を考えてください。

<x-jet-confirmation-modal wire:model="confirmingUserDeletion">
    <x-slot name="title">
        Delete Account
    </x-slot>

    <x-slot name="content">
        本当にあなたのアカウントを削除しますか?一度アカウントを削除してしまうと、あなたのリソースとデータは永遠に失われてしまいます。
    </x-slot>

    <x-slot name="footer">
        <x-jet-secondary-button wire:click="$toggle('confirmingUserDeletion')" wire:loading.attr="disabled">
            Nevermind
        </x-jet-secondary-button>

        <x-jet-danger-button class="ml-2" wire:click="deleteUser" wire:loading.attr="disabled">
            Delete Account
        </x-jet-danger-button>
    </x-slot>
</x-jet-confirmation-modal>

ご覧の通り、モーダルのオープン/クローズ状態はコンポーネントで宣言されているwire:modelプロパティで判断できます。このプロパティ名はLivewireコンポーネントの対応するPHPクラスの論理値プロパティと対応させる必要があります。モーダルのコンテンツは、titlecontentfooter、3つのスロットで指定します。

ドキュメント章別ページ

スタック

ヘッダー項目移動

注目:アイコン:ページ内リンク設置(リンクがないヘッダーへの移動では、リンクがある以前のヘッダーのハッシュをURLへ付加します。

移動

クリックで即時移動します。

バージョン

設定

適用ボタンクリック後に、全項目まとめて適用されます。

カラーテーマ
和文指定 Pagination
和文指定 Scaffold
Largeスクリーン表示幅
インデント
本文フォント
コードフォント
フォント適用確認

フォントの指定フィールドから、フォーカスが外れると、当ブロックの内容に反映されます。EnglishのDisplayもPreviewしてください。

フォント設定時、表示に不具合が出た場合、当サイトのクッキーを削除してください。

バックスラッシュを含むインライン\Code\Blockの例です。

以下はコードブロックの例です。

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    /**
     * ユーザに関連する電話レコードを取得
     */
    public function phone()
    {
        return $this->hasOne('App\Phone');
    }
}

設定を保存する前に、表示が乱れないか必ず確認してください。CSSによるフォントファミリー指定の知識がない場合は、フォントを変更しないほうが良いでしょう。

キーボード・ショートカット

オープン操作

PDC

ページ(章)移動の左オフキャンバスオープン

HA

ヘッダー移動モーダルオープン

MS

移動/設定の右オフキャンバスオープン

ヘッダー移動

T

最初のヘッダーへ移動

E

最後のヘッダーへ移動

NJ

次ヘッダー(H2〜H4)へ移動

BK

前ヘッダー(H2〜H4)へ移動

その他

?

このヘルプページ表示
閉じる