Livewire v3 wire:show

wire:show

Livewire の wire:show ディレクティブを使用すると、式の評価結果に基づいて要素を簡単に表示/非表示にできます。Livewire's wire:show directive makes it easy to show and hide elements based on the result of an expression.

wire:show ディレクティブは、Blade での @if の使用とは異なり、要素を DOM から完全に削除するのではなく、CSS (display: none) を使用して要素の表示/非表示を切り替えます。これは、要素がページに残るものの非表示になることを意味し、サーバへのラウンドトリップを必要とせずに、よりスムーズなトランジションを実現します。The wire:show directive is different than using @if in Blade in that it toggles an element's visibility using CSS (display: none) rather than removing the element from the DOM entirely. This means the element remains in the page but is hidden, allowing for smoother transitions without requiring a server round-trip.

基本的な使用法Basic usage

wire:show を使用して「Create Post」モーダルを切り替える実用的な例を次に示します。Here's a practical example of using wire:show to toggle a "Create Post" modal:

use Livewire\Component;
use App\Models\Post;

class CreatePost extends Component
{
    public $showModal = false;

    public $content = '';

    public function save()
    {
        Post::create(['content' => $this->content]);

        $this->reset('content');

        $this->showModal = false;
    }
}

<div>
    <button x-on:click="$wire.showModal = true">New Post</button>

    <div wire:show="showModal">
        <form wire:submit="save">
            <textarea wire:model="content"></textarea>

            <button type="submit">Save Post</button>
        </form>
    </div>
</div>

「Create New Post」ボタンをクリックすると、サーバへのラウンドトリップなしでモーダルが表示されます。投稿を正常に保存すると、モーダルが非表示になり、フォームがリセットされます。When the "Create New Post" button is clicked, the modal appears without a server roundtrip. After successfully saving the post, the modal is hidden and the form is reset.

トランジションの使用Using transitions

wire:show を Alpine.js のトランジションと組み合わせることで、スムーズな表示/非表示アニメーションを作成できます。 wire:show は CSS の display プロパティのみを切り替えるため、Alpine の x-transition ディレクティブは完全に機能します。You can combine wire:show with Alpine.js transitions to create smooth show/hide animations. Since wire:show only toggles the CSS display property, Alpine's x-transition directives work perfectly with it:

<div>
    <button x-on:click="$wire.showModal = true">New Post</button>

    <div wire:show="showModal" x-transition.duration.500ms>
        <form wire:submit="save">
            <textarea wire:model="content"></textarea>
            <button type="submit">Save Post</button>
        </form>
    </div>
</div>

上記の Alpine.js のトランジションクラスは、モーダルの表示/非表示時にフェードとスケールのエフェクトを作成します。The Alpine.js transition classes above will create a fade and scale effect when the modal shows and hides.

View the full x-transition documentation →