README

一个动态的 Laravel Livewire 组件，用于制作标签表单。

安装

您可以通过 composer 安装此包

composer require vildanbina/livewire-tabs

TailwindCSS

基本模态框是用 TailwindCSS 制作的。如果您使用不同的 CSS 框架，我建议您发布模态模板，并更改标记以包括您 CSS 框架所需的类。

php artisan vendor:publish --tag=livewire-tabs-views

用法

创建标签容器

您可以通过运行 php artisan make:livewire UserTab 创建 livewire 组件来创建初始 Livewire 组件。打开您的组件类，并确保它扩展了 TabsComponent 类

<?php

namespace App\Http\Livewire;

use Vildanbina\LivewireTabs\TabsComponent;
use App\Models\User;

class UserTab extends TabsComponent
{
    // My custom class property
    public $userId;
    
    /*
     * Will return App\Models\User instance or will create empty User (based on $userId parameter) 
     */
    public function model()
    {
        return User::findOrNew($this->userId);
    }
}

当您需要显示标签表单时，根据上面的示例，我们需要传递 $userId 值并显示标签表单

<livewire:user-tabs user-id="3"/>

或者当您想创建新用户时，请留空 user-id 属性，或者不添加该属性。

当您想获取当前标签实例时，您可以

$tabsFormInstance->getCurrentTab();

当您想转到特定标签时，您可以

$tabsFormInstance->setTab($tab);

您可以根据需要自定义标签页底部按钮，创建一些视图并将其放入方法中

public function tabFooter()
{
    return view('livewire-tabs::tabs-footer');
}

创建标签项

您可以在标签表中创建标签表单。打开或创建您的标签类（在 App\Tabs 文件夹中），并确保它扩展了 Tab 类

<?php

namespace App\Tabs;

use Vildanbina\LivewireTabs\Components\Tab;
use Illuminate\Validation\Rule;

class General extends Tab
{
    // Tab view located at resources/views/tabs/general.blade.php 
    protected string $view = 'tabs.general';

    /*
     * Initialize tab fields
     */
    public function mount()
    {
        $this->mergeState([
            'name'                  => $this->model->name,
            'email'                 => $this->model->email,
        ]);
    }
    
    /*
    * Tab icon 
    */
    public function icon()
    {
        return view('icons.home');
    }

    /*
     * When Tabs Form has submitted
     */
    public function save($state)
    {
        $user = $this->model;

        $user->name     = $state['name'];
        $user->email    = $state['email'];
        
        $user->save();
    }

    /*
     * Tab Validation
     */
    public function validate()
    {
        return [
            [
                'state.name'     => ['required', Rule::unique('users', 'name')->ignoreModel($this->model)],
                'state.email'    => ['required', Rule::unique('users', 'email')->ignoreModel($this->model)],
            ],
            [
                'state.name'     => __('Name'),
                'state.email'    => __('Email'),
            ],
        ];
    }

    /*
     * Tab Title
     */
    public function title(): string
    {
        return __('General');
    }
}

在标签类中，您可以使用 livewire 钩子示例

use Vildanbina\LivewireTabs\Components\Tab;

class General extends Tab
{
    public function onTabIn($newTab)
    {
        // Something you want
    }

    public function onTabOut($oldTab)
    {
        // Something you want
    }

    public function updating($name, $value)
    {
        // Something you want
    }

    public function updatingState($name, $value)
    {
        // Something you want
    }
    
    public function updated($name, $value)
    {
        // Something you want
    }

    public function updatedState($name, $value)
    {
        // Something you want
    }
}

每个标签都需要有视图，您可以在 $view 属性中传递视图路径。

创建标签类后，您需要将此标签添加到标签表单中

<?php

namespace App\Http\Livewire;

use App\Tabs\General;
use Vildanbina\LivewireTabs\TabsComponent;

class UserTab extends TabsComponent
{
    public array $tabs = [
        General::class,
        // Other tabs...
    ];
   
    ...
}

为生产构建 Tailwind CSS

因为一些类是动态构建的，为了编译 js，您应该添加一些类到 purging 白名单，所以您的 tailwind.config.js 应该看起来像这样

module.exports = {
    content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",

        "./vendor/vildanbina/livewire-tabs/resources/views/*.blade.php",
    ]
};

贡献

有关详细信息，请参阅 CONTRIBUTING

安全漏洞

请通过电子邮件 vildanbina@gmail.com 报告任何安全漏洞，而不是问题跟踪器。

鸣谢

许可

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

vildanbina / livewire-tabs

维护者

详情