Pesquisar na Comunidade
Mostrando resultados para as tags ''livewire flux''.
Encontrado 1 registro
-
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'); } ?>
