Downloads
Stars
Version
Laravel APP UI components
You can install the package via composer:
composer require masterix21/laravel-app-ui
npm require tailwindcss
Update your tailwind.js with these lines:
module.exports = {
// ...
variants: {
extend: {
padding: ['first', 'last'],
}
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
require('@tailwindcss/aspect-ratio'),
],
// ...
}
And instruct your app.css to include our css like so:
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import "../../vendor/masterix21/laravel-app-ui/resources/css/app-ui.css";
You can publish the config file with:
php artisan vendor:publish --provider="Masterix21\AppUI\AppUIServiceProvider" --tag="appui-config"
<x-app-ui::layout>
<div>Content</div>
</x-app-ui::layout>
<x-app-ui::table>
<x-slot name="columns">
<x-app-ui::table.th>Customer</x-app-ui::table.th>
<x-app-ui::table.th>Mobile</x-app-ui::table.th>
<x-app-ui::table.th class="w-28" />
</x-slot>
<x-app-ui::table.tr wire:key="customers-{{ $customer->id }}">
<x-app-ui::table.td class="space-y-1">John Doe</x-app-ui::table.td>
<x-app-ui::table.td class="text-xs space-y-1">+39 0961 33799</x-app-ui::table.td>
<x-app-ui::table.td class="flex space-x-3 items-center">
<x-app-ui::table.action href="{{ route('customers.show', $customer->id) }}">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
</x-app-ui::table.action>
<x-app-ui::table.action wire:click="delete({{$customer->id}})" color="red">
<svg xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</x-app-ui::table.action>
</x-app-ui::table.td>
</x-app-ui::table.tr>
</x-app-ui::table>
composer test
Please see CHANGELOG for more information on what has changed recently.
Please see CONTRIBUTING for details.
Please review our security policy on how to report security vulnerabilities.
The MIT License (MIT). Please see License File for more information.