Livewire 2.x ロード状況

Livewireは、ページでアクションがトリガーされるたびにサーバへラウンドトリップを行うため、ページがユーザーイベント(クリックなど)にすぐに反応しない場合があります。Livewireでは読み込み状態を簡単に表示でき、アプリケーションの応答性を向上させることができます。

「読み込み中」状態での要素切り替え

wire:loadingディレクティブを持つ要素は、アクションが完了する(ネットワークリクエスト)のを待っている間のみ表示されます。

<div>
    <button wire:click="checkout">Checkout</button>

    <div wire:loading>
        Processing Payment...
    </div>
</div>

"Checkout"ボタンをクリックすると、"Processing Payment..."メッセージが表示されます。アクション終了でメッセージは消えます。

デフォルトでLivewireは、ロードする要素の"display" CSSプロパティを"inline-block"に設定します。もしLivewireに"flex"や"grid"を使わせたい場合は、以下の修飾子が使えます。

<div wire:loading.flex>...</div>
<div wire:loading.grid>...</div>
<div wire:loading.inline>...</div>
<div wire:loading.table>...</div>

.remove修飾子を使用して、ロード状態中に要素を「非表示」にすることもできます。

<div>
    <button wire:click="checkout">Checkout</button>

    <div wire:loading.remove>
        Hide Me While Loading...
    </div>
</div>

ロードインディケーターの遅延表示

読み込みが非常に速いためにちらつきを避けたいとき、.delayモディファイアを追加すれば読み込みに200ms以上かかった場合にのみ表示するようになります。

<div wire:loading.delay>...</div>

必要に応じて、以下の修飾子により遅延時間をカスタマイズできます。

<div wire:loading.delay.shortest>...</div> <!-- 50ms -->
<div wire:loading.delay.shorter>...</div>  <!-- 100ms -->
<div wire:loading.delay.short>...</div>    <!-- 150ms -->
<div wire:loading.delay>...</div>          <!-- 200ms -->
<div wire:loading.delay.long>...</div>     <!-- 300ms -->
<div wire:loading.delay.longer>...</div>   <!-- 500ms -->
<div wire:loading.delay.longest>...</div>  <!-- 1000ms -->

特定のアクションをターゲットにする

上で概説した方法は、単純なコンポーネントに適しています。より複雑なコンポーネントの場合、特定のアクションに対してのみロードインジケーターを表示したい場合があります。

<div>
    <button wire:click="checkout">Checkout</button>
    <button wire:click="cancel">Cancel</button>

    <div wire:loading wire:target="checkout">
        Processing Payment...
    </div>
</div>

上記の例では、"Checkout"ボタンがクリックされたときにロードインジケータが表示されますが、"Cancel"ボタンがクリックされたときは表示されません。

wire:targetは、wire:target="foo, bar"のようにコンマ区切り形式で複数の引数を指定できます。

パラメータを指定することで、アクションもターゲットにできます。

<div>
    <button wire:click="update('bob')">Update</button>

    <div wire:loading wire:target="update('bob')">
        Updating Bob...
    </div>
</div>

配列のプロパティのいずれかが変更されたとき、ロードインジケーターを起動したい場合は、単純に配列全体をターゲットにできます。

<div>
    <input type="text" wire:model="post.title">
    <input type="text" wire:model="post.author">
    <input type="text" wire:model="post.content">

    <div wire:loading wire:target="post">
        Updating Post...
    </div>
</div>

モデルのターゲット

アクションに加えて、wire:modelが同期されているときはいつでもターゲットにすることができます。

<div>
    <input wire:model="quantity">

    <div wire:loading wire:target="quantity">
        Updating quantity...
    </div>
</div>

クラスのトグル

.class修飾子をwire:loadingディレクティブに追加すれば、ロード状態の間は要素にクラスを追加、または削除できます。

<div>
    <button wire:click="checkout" wire:loading.class="bg-gray">
        Checkout
    </button>
</div>

"Checkout"ボタンをクリックすると、ネットワークリクエストの処理中に背景が灰色に変わります。

.remove修飾子を追加すれば逆を実行でき、クラスを削除することもできます。

<div>
    <button wire:click="checkout" wire:loading.class.remove="bg-blue" class="bg-blue">
        Checkout
    </button>
</div>

これで、ロード中はbg-blueクラスがボタンから削除されます。

属性のトグル

クラスと同様に、HTML属性を状態の読み込み中に要素へ追加したり、要素から削除したりできます。

<div>
    <button wire:click="checkout" wire:loading.attr="disabled">
        Checkout
    </button>
</div>

これで、"Checkout"ボタンがクリックされると、ロード中にdisabled="true"属性が要素に追加されます。

ドキュメント章別ページ

ヘッダー項目移動

注目:アイコン:ページ内リンク設置(リンクがないヘッダーへの移動では、リンクがある以前のヘッダーのハッシュを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)へ移動

その他

?

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