Adding custom tabs
Anatomy of a custom tab
A custom tab in Ignition has two main components:
- A custom
Tab
class that tells Ignition which assets it needs to load. - A Vue component that gets rendered in your custom tab.
Here is how a basic Tab class could look like:
use Facade\Ignition\Tabs\Tab;
class CustomTab extends Tab
{
public function registerAssets()
{
$this->script('my-custom-tab', __DIR__.'/../dist/js/tab.js');
}
}
The CustomTab
class is responsible for telling Ignition, where the assets for its Vue component can be found.
Let's take a look at that JavaScript file next:
Ignition.registerTab(Vue => {
Vue.component('custom-tab', require('./components/tabs/CustomTab').default);
});
Inside the Javascript file, you can use the Ignition.registerTab
method to add a callable that will be executed when custom tabs should get injected. In there you will receive the Vue
instance where you can add your custom tab component.
And the CustomTab
component looks like this:
<template>
<div class="tab-content">
<div class="layout-col">
<h2>Custom Tab</h2>
</div>
</div>
</template>
<script>
export default {
props: ['meta'],
}
</script>
Within this component you have complete freedom to do whatever you want to do.
Registering your custom tab
To register your own custom tab with Ignition, you will have to use the tab
method on the Facade\Ignition\Ignition
class. This would typically be done in the boot
method of one of your service providers.
public function boot()
{
Ignition::tab(new CustomTab);
}
Using the skeleton
To make the development of custom tabs easier, we created a custom Ignition skeleton repository which you can use as your starting point for your next Ignition package.
To use it, just clone the repository and follow the instructions in the README file that we provide.
The skeleton project comes with Laravel mix installed to compile all your assets into a single file and it allows you to register custom routes to use within your tab.