/
Example: Extending the tab header

Example: Extending the tab header

Steps to extend

  1. Navigate to the directory of the current active widget template (e.g. Mvc\Views\Hawksearch\Hawksearch.Default.cshtml or the relevant resource package).

  2. Copy the file of the base template or select an existing one.

  3. Edit the file adding or replacing the template override for the tabs component:

    <script id="vue-hawksearch-tabs" type="x-template"> <div v-if="facet" class="hawk-preview__results_tabs"> <ul class="nav nav-tabs"> <li v-for="tab in tabs" :class="tabClasses(tab)" v-on:click="onClick(tab)"> <a class="nav-link">{{ tab.Label }}</a> </li> </ul> </div> </script>

    Apply the desired structure in this format. Proceed with caution with the tabClasses (applies active class) and the onClick handler.

  4. Include the file in the project.

  5. Save, build and reload the site.

Related content

Example: Extending suggestion components
Example: Extending suggestion components
More like this
Example: Overriding the Popular searches component to add a custom label
Example: Overriding the Popular searches component to add a custom label
More like this
Customisation
Customisation
More like this
Example: Extending the results set
Example: Extending the results set
More like this
Example: Extending facet selections component
Example: Extending facet selections component
More like this
Customize search results in Vue.js
Customize search results in Vue.js
More like this