README

Laravel APP UI 组件

安装

您可以通过 composer 安装此包

composer require masterix21/laravel-app-ui

npm require tailwindcss

使用以下行更新您的 tailwind.js

module.exports = {
    // ...
    
    variants: {
        extend: {
            padding: ['first', 'last'],
        }
    },

    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
        require('@tailwindcss/aspect-ratio'),
    ],

    // ...
}

并指导您的 app.css 按如下方式包含我们的 css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import "../../vendor/masterix21/laravel-app-ui/resources/css/app-ui.css";

您可以使用以下命令发布配置文件

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

变更日志

请参阅 CHANGELOG 了解最近更改的详细信息。

贡献

请参阅 CONTRIBUTING 了解详细信息。

安全漏洞

请查阅 我们的安全策略 了解如何报告安全漏洞。

致谢

• Luca Longo
• 所有贡献者

许可

MIT 许可证 (MIT)。有关更多信息，请参阅 许可文件。