Settings Tabs

Adding new tabs to the settings page in Lara Dashboard is simple and flexible. By default, the settings page supports dynamic tab management through filter hooks. This allows developers to add custom settings tabs and content without modifying the core code.

Below is a guide on how to use the available filter hooks to add new tabs to the settings page very easily.

Available Filter Hooks for Tabs #

1. settings_tabs #

This filter allows you to add new tabs to the settings page. The filter receives an array of existing tabs and expects an array of tabs to be returned.

2. settings_tab_menu_before_{tab_key} #

This filter allows you to add custom content before the tab menu item for a specific tab. Replace {tab_key} with the key of the tab you want to target.

3. settings_tab_menu_after_{tab_key} #

This filter allows you to add custom content after the tab menu item for a specific tab. Replace {tab_key} with the key of the tab you want to target.

4. settings_tab_content_before_{tab_key} #

This filter allows you to add custom content before the tab content for a specific tab. Replace {tab_key} with the key of the tab you want to target.

5. settings_tab_content_after_{tab_key} #

This filter allows you to add custom content after the tab content for a specific tab. Replace {tab_key} with the key of the tab you want to target.

Example: Adding a New Tab #

To add a new tab to the settings page, you can use the settings_tabs filter. Below is an example implementation:

Hooks registration

<?php

namespace Modules\UserAvatar\Services;

class SettingHooks
{
    public function register(): void
    {
        ld_add_filter('settings_tabs', [$this, 'addAnotherSettingsTab'], 10, 1);
    }

    public function addAnotherSettingsTab($tabs): array
    {
        return array_merge($tabs, [
            'another' => [
                'title' => __('Another Settings'),
                'view' => 'useravatar::settings-another-tab',
            ],
        ]);
    }
}

Explanation #

1. Hook Registration:
   • The ld_add_filter function registers the settings_tabs filter.
   • The callback method addAnotherSettingsTab is executed when the filter is triggered.
2. Callback Method:
   • The addAnotherSettingsTab method receives the current array of tabs as a parameter.
   • It appends a new tab to the array with the key another.
3. Tab Configuration:
   • The title key specifies the tab’s display name.
   • The view key specifies the Blade view file that will render the tab’s content.

Blade view file #

The content of the new tab can be defined in a Blade view file. Below is an example:

<div class="mt-2 rounded-2xl border border-gray-200 dark:border-gray-800 dark:bg-white/[0.03]">
    <div class="px-5 py-4 sm:px-6 sm:py-5">
        <h3 class="text-base font-medium text-gray-800 dark:text-white/90">
            {{ __('Another Settings') }}
        </h3>
    </div>
    <div class="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
        <div class="flex">
            <div class="md:basis-1/2 relative">
                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                    {{ __('Another input field') }}
                </label>
                <input type="text" name="another_input_field" placeholder="{{ __('Enter Another input field') }}"
                    value="{{ config('settings.another_input_field') ?? '' }}"
                    class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                />
            </div>
        </div>
    </div>
</div>

Demo Output #

How It Works #

1. Tab Rendering:
   • When the settings page is rendered, the settings_tabs filter is triggered.
   • The addAnotherSettingsTab method adds the new tab to the list of tabs.
2. Blade View:
   • The view key in the tab configuration specifies the Blade file to render the tab’s content.
   • The Blade file contains the HTML structure and logic for the tab’s content.
3. Dynamic Filters:
   • Use settings_tab_menu_before_another and settings_tab_menu_after_another to add content before or after the tab menu item.
   • Use settings_tab_content_before_another and settings_tab_content_after_another to add content before or after the tab’s content.

Notes #

• Replace Another Settings with your desired tab title and content.
• Use the appropriate filter hooks to customize the tab menu or content dynamically.
• Ensure your custom logic does not conflict with existing tabs or styles.

This approach allows you to extend the settings page dynamically, making it easy to add new tabs and content without modifying the core code.