<flux:modal></flux:modal>

Frank K Hosaka · Quarta às 18:37

O Livewire é a soma de três arquivos: o componente, o layout e o encaixe, os dois últimos usam o CSS Tailwind. Eu comecei a estudar o Laravel em 2022, mas em 2025 é que consegui dominar melhor porque eu consegui decorar um pouco a sintaxe do Tailwind. Só é possível mexer com o Tailwind com a ajuda do Copilot.

Para contornar o problema do Tailwind é que inventaram o <flux>, ele é um componente do HTML que já vem pré-formatado, você não precisa do Copilot para desenhar um <input>.

Mas para o Tailwind, o Livewire e o Flux funcionarem, o seu arquivo layout deve seguir essa diretriz:

arquivo resources > views > components > teste.blade.php
<!DOCTYPE html>
<title>{{ $title }}</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
@livewireScripts
@fluxAppearance
<body>
    <flux:main>
        {{ $slot }}
    </flux:main>
@fluxScripts
</body>

arquivo app > Livewire > Lteste.php
<?php
namespace App\Livewire;
use Livewire\Attributes\Layout;
use Livewire\Component;

#[Layout('components.layouts.teste',['title'=>'Teste'])]
class Lteste extends Component { }
?>

arquivo resources > views > livewire > lteste.blade.php
<div>
    <flux:modal.trigger name="edit-profile">
        <flux:button>Edit profile</flux:button>
    </flux:modal.trigger>

    <flux:modal name="edit-profile" class="md:w-96">
        <div class="space-y-6">
            <div>
                <flux:heading size="lg">Update profile</flux:heading>
                <flux:text class="mt-2">Make changes to your personal details.</flux:text>
            </div>
            <flux:input label="Name" placeholder="Your name" />
            <flux:input label="Date of birth" type="date" />
            <div class="flex">
                <flux:spacer />
                <flux:button type="submit" variant="primary">Save changes</flux:button>
            </div>
        </div>
    </flux:modal>
</div>

arquivo routes > web.php
<?php
use App\Livewire\Lteste;

Route::middleware(['auth','verified'])->group(function() {
    Route::get('lteste',Lteste::class)->name('lteste');
}
?>

Entrar

<flux:modal></flux:modal>

Pergunta

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades