Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vildanbina/livewire-tabs
Livewire component that provides you with a tabs that supports multiple tabs form while maintaining state.
https://github.com/vildanbina/livewire-tabs
forms laravel livewire tabs tailwind
Last synced: 2 days ago
JSON representation
Livewire component that provides you with a tabs that supports multiple tabs form while maintaining state.
- Host: GitHub
- URL: https://github.com/vildanbina/livewire-tabs
- Owner: vildanbina
- License: mit
- Created: 2022-02-27T08:59:03.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2024-09-02T12:31:01.000Z (5 months ago)
- Last Synced: 2025-01-27T23:14:00.755Z (10 days ago)
- Topics: forms, laravel, livewire, tabs, tailwind
- Language: PHP
- Homepage:
- Size: 17.6 KB
- Stars: 50
- Watchers: 2
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
[](https://packagist.org/packages/vildanbina/livewire-tabs)
[](https://packagist.org/packages/vildanbina/livewire-tabs)
[](https://packagist.org/packages/vildanbina/livewire-tabs)
[](https://packagist.org/packages/vildanbina/livewire-tabs)
[](https://packagist.org/packages/vildanbina/livewire-tabs)
A dynamic Laravel Livewire component for tab forms.
## Installation
You can install the package via composer:
``` bash
composer require vildanbina/livewire-tabs
```
## TailwindCSS
The base modal is made with TailwindCSS. If you use a different CSS framework I recommend that you publish the modal template and change the markup to include the required classes for your CSS framework.
```shell
php artisan vendor:publish --tag=livewire-tabs-views
```
## Usage
### Creating a Tab Container
You can create livewire component `php artisan make:livewire UserTab` to make the initial Livewire component. Open your component class and make sure it extends the `TabsComponent` class:
```php
userId);
}
}
```
When you need to display tabs form, based on above example we need to pass `$userId` value and to display tabs form:
```html
```
Or when you want to create new user, let blank `user-id` attribute, or don't put that.
When you want to have current tab instance. You can use:
```php
$tabsFormInstance->getCurrentTab();
```
When you want to go to specific tab. You can use:
```php
$tabsFormInstance->setTab($tab);
```
You can customize tab footer buttons, create some view and put that view to method:
```php
public function tabFooter()
{
return view('livewire-tabs::tabs-footer');
}
```
### Creating a Tab Item
You can create tabs form tab. Open or create your tab class (at `App\Tabs` folder) and make sure it extends the `Tab` class:
```php
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');
}
}
```
In Tab class, you can use livewire hooks example:
```php
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
}
}
```
Each tab need to have view, you can pass view path in `$view` property.
After create tab class, you need to put that tab to tabs form:
```php