Mary UI

https://mary-ui.com/ • Dec 25, 2023 19:31

Extracto

Laravel blade components for Livewire 3.

Contenido

. Code less.

Gorgeous Laravel Blade UI Components
made for Livewire 3 and styled around daisyUI + Tailwind

GET STARTED

The refreshing storefront demo.
Get amazed how much you can do with minimal effort.

See the demo

@php
    $users = App\Models\User::take(3)->get();
@endphp
@foreach($users as $user)
    <x-list-item :item="$user" sub-value="username" link="/docs/installation">
        <x-slot:actions>
            <x-button icon="o-trash" wire:click="delete({{ $user->id }})" spinner />
        </x-slot:actions>
    </x-list-item>
@endforeach

@php                              
    $users = $this->users;   
@endphp                         
<x-choices
    label="Searchable"
    wire:model="selected_users"
    :options="$users"
    searchable />

<x-form wire:submit="save">
    <x-input label="Name" wire:model="name" icon="o-user" placeholder="Hello" />
    <x-input label="Amount" wire:model="amount" prefix="USD" money />
    <x-slot:actions>
        <x-button label="Cancel" />
        <x-button label="Save" class="btn-primary" type="submit" spinner="save" />
    </x-slot:actions>
</x-form>

#	Nice Name	City
1	Jeramie	Kendallstad
2	Katelyn	Port Dana
3	Herminio	West Yvonneburgh
4	Vince	North Antonina
5	Jesus	Noemychester

@php
    // public array $selected = [1, 3];
    $users = App\Models\User::with('city')->take(5)->get();
    $headers = [
        ['key' => 'id', 'label' => '#', 'class' => 'text-red-400'], # <-- css
        ['key' => 'name', 'label' => 'Nice Name'],
        ['key' => 'city.name', 'label' => 'City']   # <-- nested object
    ];
@endphp
{{-- See console ouput --}}
{{-- You can use any `$wire.METHOD` on `@row-xxxx` --}}
<x-table
    :headers="$headers"
    :rows="$users"
    striped
    selectable
    wire:model="selected"
    @row-click="console.log($event.detail)"
    @row-selection="console.log($event.detail)" />