{"id":13563507,"url":"https://github.com/eminiarts/nova-tabs","last_synced_at":"2025-05-14T23:05:56.627Z","repository":{"id":33783748,"uuid":"162052854","full_name":"eminiarts/nova-tabs","owner":"eminiarts","description":"Laravel Nova Tabs Package","archived":false,"fork":false,"pushed_at":"2024-09-09T15:11:43.000Z","size":1303,"stargazers_count":467,"open_issues_count":35,"forks_count":142,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-05-08T01:40:18.190Z","etag":null,"topics":["laravel","nova"],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eminiarts.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-12-17T00:10:09.000Z","updated_at":"2025-04-18T16:10:41.000Z","dependencies_parsed_at":"2023-02-13T19:47:43.381Z","dependency_job_id":"b19144ab-ec7b-4d0b-8b6b-2d50dcb68929","html_url":"https://github.com/eminiarts/nova-tabs","commit_stats":{"total_commits":265,"total_committers":41,"mean_commits":6.463414634146342,"dds":0.7886792452830189,"last_synced_commit":"c9091cf6e8646dfb07cae5dd7fa7ba718f6e1433"},"previous_names":[],"tags_count":48,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eminiarts%2Fnova-tabs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eminiarts%2Fnova-tabs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eminiarts%2Fnova-tabs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eminiarts%2Fnova-tabs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eminiarts","download_url":"https://codeload.github.com/eminiarts/nova-tabs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254243358,"owners_count":22038046,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["laravel","nova"],"created_at":"2024-08-01T13:01:20.059Z","updated_at":"2025-05-14T23:05:51.598Z","avatar_url":"https://github.com/eminiarts.png","language":"PHP","funding_links":[],"categories":["PHP"],"sub_categories":[],"readme":"![Nova Tabs, awesome resource tabs for Nova](banner.png)\n\n---\n\n[![Latest Version on Github](https://img.shields.io/packagist/v/eminiarts/nova-tabs.svg?style=flat)](https://packagist.org/packages/eminiarts/nova-tabs)\n\n1. [Requirements](#Requirements)\n1. [Installation](#Installation)\n2. [Usage](#Usage)\n    1. [Tabs Panel](#tabs-panel)\n    2. [Relationship Tabs](#relationship-tabs)\n    3. [Combine Fields and Relations in Tabs](#combine-fields-and-relations-in-tabs)\n    4. [Actions in Tabs](#actions-in-tabs)\n    5. [Tabs on Edit View](#tabs-on-edit-view)\n3. [Tab object](#tab-object)\n4. [Customization](#customization)\n    1. [Tab](#tab)\n    2. [Default search](#default-search)\n    3. [Display more than 5 items](#display-more-than-5-items)\n    4. [Tab change Global Event](#tab-change-global-event)\n5. [Upgrade to V2](#upgrade-to-v2)\n\n## Requirements\n\n- `php: ^7.4 | ^8`\n- `laravel/nova: ^4`\n\nFor Laravel Nova Version 3, please use nova-tabs v1 instead.\n\n## Installation\n\nYou can install the package in to a Laravel app that uses [Nova](https://nova.laravel.com) via composer:\n\n```bash\ncomposer require eminiarts/nova-tabs\n```\n\n## Usage\n\n### Tabs Panel\n\n![image](https://user-images.githubusercontent.com/3426944/50060698-7835ec00-0197-11e9-8b9c-c7f1e67400db.png)\n\nYou can group fields of a resource into tabs.\n\n```php\n// in app/Nova/Resource.php\n\nuse Eminiarts\\Tabs\\Traits\\HasTabs;\nuse Eminiarts\\Tabs\\Tabs;\nuse Eminiarts\\Tabs\\Tab;\n\nclass User extends Resource\n{\n    use HasTabs;\n    \n    public function fields(Request $request)\n    {\n       return [\n         Tabs::make('Some Title', [\n            Tab::make('Balance', [\n                Number::make('Balance', 'balance'),\n                Number::make('Total', 'total'),\n            ]),\n            Tab::make('Other Info', [\n                Number::make('Paid To Date', 'paid_to_date')\n            ]),\n         ]),\n      ];\n    }\n }\n```\n\nThe first tab in every `Tabs` instance will be auto-selected. \n\n**Note**: If use non-ascii char as title(ex: chinese), you should define the tab name with ascii char to avoid get empty slug string.\n```php\npublic function fields(Request $request)\n{\n    return [\n      Tabs::make('Some Title', [\n        Tab::make('頁籤一', [\n            Number::make('Balance', 'balance'),\n            Number::make('Total', 'total'),\n        ])-\u003ename('tab-1'),\n        \n        Tab::make('頁籤二', [\n            Number::make('Paid To Date', 'paid_to_date')\n        ])-\u003ename('tab-2'),\n      ]),\n    ];\n}\n```\n\n### Relationship Tabs\n\n![image](https://user-images.githubusercontent.com/3426944/50060715-a3b8d680-0197-11e9-8f98-1cac8cf3fd83.png)\nThese are a bit outdated, as the search and create buttons now show within the panel down where the actual content is displayed, not in the tab panel.\n\n```php\n// in app/Nova/Resource.php\n\nuse Eminiarts\\Tabs\\Tabs;\nuse Laravel\\Nova\\Fields\\HasMany;\nuse Eminiarts\\Tabs\\Traits\\HasTabs;\n\nclass User extends Resource\n{\n    use HasTabs;\n    \n    public function fields(Request $request)\n    {\n        return [\n           Tabs::make('Relations', [\n                HasMany::make('Invoices'),\n                HasMany::make('Notes'),\n                HasMany::make('Contacts')\n            ]),\n\n        ];\n    }\n}\n```\n\n### Combine Fields and Relations in Tabs\n\n![image](https://user-images.githubusercontent.com/3426944/51089909-b3b2de80-1774-11e9-9100-d323accda7db.png)\n\n\n![image](https://user-images.githubusercontent.com/3426944/51089905-aa297680-1774-11e9-9611-4446ca13ab4a.png)\n\n```php\nuse Eminiarts\\Tabs\\Tabs;\nuse Laravel\\Nova\\Fields\\HasMany;\nuse Eminiarts\\Tabs\\Traits\\HasTabs;\n\nuse Laravel\\Nova\\Fields\\ID;\nuse Laravel\\Nova\\Fields\\Text;\n\nclass User extends Resource\n{\n    use HasTabs;\n    \n    public function fields(Request $request)\n    {\n          return [\n              Tabs::make(__('Client Custom Details'), [\n                  new Panel(__('Details'), [\n                          ID::make('Id', 'id')-\u003erules('required')-\u003ehideFromIndex(),\n                          Text::make('Name', 'name'),\n                  ]),\n                  HasMany::make('Invoices')\n              ]),\n         ];\n    }\n}\n```\n\n### Actions in Tabs\n\nIf your Model uses the `Laravel\\Nova\\Actions\\Actionable` Trait you can put the Actions into a Tab like this:\n\n```php\n// in app/Nova/Resource.php\n\nuse Eminiarts\\Tabs\\Tabs;\nuse Eminiarts\\Tabs\\Tab;\nuse Eminiarts\\Tabs\\Traits\\HasTabs;\nuse Eminiarts\\Tabs\\Traits\\HasActionsInTabs; // Add this Trait\nuse Laravel\\Nova\\Actions\\ActionResource; // Import the Resource\n\nclass Client extends Resource\n{\n    use HasTabs;\n    use HasActionsInTabs; // Use this Trait\n\n    public function fields(Request $request)\n    {\n        return [\n            Tabs::make('Client Custom Details', [\n                Tab::make('Address', [\n                    ID::make('Id', 'id'),\n                    Text::make('Name', 'name')-\u003ehideFromDetail(),\n                ]),\n                Tab::make('Invoices', [\n                    HasMany::make('Invoices'),\n                ]),\n                Tab::make('Actions', [\n                    $this-\u003eactionfield(), // Add Actions whererver you like.\n                ]),\n            ]),\n        ];\n    }\n}\n```\n\n### Tabs on Edit View\n\n![image](https://user-images.githubusercontent.com/3426944/51790797-055a6080-219a-11e9-8da4-33a621093265.png)\n\n\nTabs are always shown on edit view as of Nova 4 for now.\n\n## Tab object\n\nAs of v1.4.0 it's possible to use a `Tab` class instead of an array to represent your tabs.\n\n| Property    | Type                | Default     | Description                                                                                                                                                            |\n|-------------|---------------------|-------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| name        | `string`            | `null`      | The name of the tab, used for the slug.  Defaults to the title if not set                                                                                              |\n| showIf      | `bool` or `Closure` | `null`      | If the result is truthy the tab will be shown.  `showIf` takes priority over `showUnless` and if neither are set, `true` is assumed.                                   |\n| showUnless  | `bool` or `Closure` | `null`      | If the result is falsy the tab will be shown.  `showIf` takes priority over `showUnless` and if neither are set, `true` is assumed.                                    |\n| preload  | `bool` or `Closure` | `null`      | If the result is truthy the tab will be rendered on the initial page load. This may affect initial page load performance, as any requests required by the tab's fields will also be executed.                                     |\n| bodyClass   | `string` or `array` | Empty array | A string or string array of classes to add to the tab's body.  This sets the `bodyClass` property, if you want to append you can use `addBodyClass` instead.           |\n\n## Customization\n\n### Display more than 5 items\n\nBy default, any `HasMany`, `BelongsToMany` and `MorphMany` fields show 5 items in their index. You can use Nova's built-in static property `$perPageViaRelationship` on the respective resource to show more (or less).\n\n### Tab change Global Event\n\nNova Tabs emits an event upon tabs loading and the user clicking on a tab, using [Nova Event Bus](https://nova.laravel.com/docs/4.0/customization/frontend.html#event-bus). Developers can listen to the event called ```nova-tabs-changed```, with 2 parameters as payload: The tab panel name and the tab name itself.\n\nExample of a component that subscribes to this event:\n\n```ES6\nexport default {\n    mounted () {\n        Nova.$on('nova-tabs-changed', (panel, tab) =\u003e {\n            if (panel === 'Client Details' \u0026\u0026 tab === 'address') {\n                this.$nextTick(() =\u003e this.map.updateSize())\n            }\n        })\n    }\n}\n```\n\n## Upgrade to 2.0.0\n- Breaking changes\n   - Removed selectFirstTab, first tab is always displayed first.\n   - Even if you have other panels, tabs will always show up first and has the toolbar.\n   - TabsOnEdit is gone and non relational tabs will simply always display on edit.\n   - I don't use dusk, so didn't check the tests for it either, they might be broken.\n   - Added Eminiarts\\Tabs\\Traits\\HasTabs to overwrite Nova 4 default panel methods in Laravel\\Nova\\ResolveFields.\n   - Moved Eminiarts\\Tabs\\ActionsInTabs to Eminiaarts\\Tabs\\Traits\\HasActionsInTabs.\n   - Added position method to Tab to fix relational tabs showing up last.\n\n## Credits\nBanner was created with https://banners.beyondco.de/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feminiarts%2Fnova-tabs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feminiarts%2Fnova-tabs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feminiarts%2Fnova-tabs/lists"}