Livewire Tabs Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require vildanbina/livewire-tabs
   

2. Create a Livewire Component:

   php artisan make:livewire UserTabs
   

3. Extend TabsComponent: In your newly created component class (app/Http/Livewire/UserTabs.php), extend Vildanbina\LivewireTabs\TabsComponent:

   use Vildanbina\LivewireTabs\TabsComponent;
   
   class UserTabs extends TabsComponent
   {
       // Your custom logic here
   }
   

4. Blade Template: Use the provided Blade directives in your view:

   <livewire:user-tabs />
   

5. First Use Case: Define tabs and their content in your Livewire component:

   public function tabs()
   {
       return [
           'Personal' => [
               'icon' => 'user',
               'content' => '<p>Personal info goes here.</p>',
           ],
           'Preferences' => [
               'icon' => 'cog',
               'content' => '<p>Preferences go here.</p>',
           ],
       ];
   }
   

Implementation Patterns

Tab Definition

Define tabs in the tabs() method of your Livewire component:

public function tabs()
{
    return [
        'Tab 1' => [
            'icon' => 'icon-name', // Optional: Font Awesome icon
            'content' => view('livewire.tab-content-1'), // Blade view or HTML string
            'active' => true, // Optional: Set as active tab
        ],
        'Tab 2' => [
            'content' => '<div>Dynamic content here.</div>',
        ],
    ];
}

Dynamic Content

Use Blade views for reusable tab content:

'content' => view('livewire.tab-content', ['data' => $this->data]),

Form Integration

Leverage Livewire's form handling within tabs:

public $name = '';
public $email = '';

public function save()
{
    $this->validate([
        'name' => 'required',
        'email' => 'required|email',
    ]);

    // Save logic
}

Styling with Tailwind

Customize tab appearance via Tailwind classes. Publish views if needed:

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

Event Handling

Use Livewire events for tab interactions:

protected $listeners = ['tabChanged' => 'handleTabChange'];

public function handleTabChange($tabName)
{
    // Logic when tab changes
}

Gotchas and Tips

Pitfalls

1. Icon Dependency: The package assumes Font Awesome icons. If using a different icon library, override the icon rendering in the published views.

2. Content Rendering: Ensure content in tabs() is either a Blade view string or sanitized HTML. Raw HTML strings may cause XSS vulnerabilities.

3. State Management: Avoid storing large data in the Livewire component state. Use database or external storage for heavy payloads.

4. Validation Scope: Validate form fields only when their respective tab is active to avoid unnecessary validation errors.

Debugging

• Tab Not Switching: Check if the active key is correctly set in the tabs() method or if the tabChanged event is firing.

• Styling Issues: Inspect the published views (resources/views/vendor/livewire-tabs/) and override them if Tailwind classes don’t apply.

Tips

1. Reusable Components: Break tab content into separate Livewire components for better modularity:

   'content' => '<livewire:user-personal-info />',
   

2. Dynamic Tabs: Fetch tabs dynamically from a database:

   public function tabs()
   {
       return UserTab::query()->get()->mapWithKeys(function ($tab) {
           return [
               $tab->name => [
                   'icon' => $tab->icon,
                   'content' => view('livewire.tab-dynamic', ['tab' => $tab]),
               ],
           ];
       });
   }
   

3. Persistence: Use Livewire’s persist() or session storage to retain tab state across requests:

   public function mount()
   {
       $this->persist('activeTab');
   }
   

4. Accessibility: Add aria-* attributes to tabs for better accessibility. Override the published views to include these attributes.

5. Testing: Test tab switching and form submissions in isolation. Use Livewire’s testing utilities:

   $this->call('switchTab', 'Tab 2');
   $this->assertSee('Tab 2 content');