Tab Items

Published on February 16, 2021, updated on June 01, 2021

Element: <ins-tab-item>

Contains the tab content

Important: Wrap your tab-item content within a <div>

Complete Example

Tab 1 with nested ins-tab example

Inner 1

Inner 2

Tab 2

Tab 3

Tab 4 - no padding

Tab 5 - has error

Code Snippet

<ins-tab>
  <ins-tab-item 
    active 
    label="Tab 1" 
    icon="icon-image">

    <div>

      <p>Tab 1 with nested ins-tab example</p>
 
       <!-- Inner Tab Component -->

        <ins-tab>

          <ins-tab-item>

            <div>Inner 1</div>
 
         </ins-tab-item>

          <ins-tab-item active>

            <div>Inner 2</div>

          </ins-tab-item>

        </ins-tab>

        <!-- Inner Tab Component -->

    </div>

  </ins-tab-item>

  <ins-tab-item disabled icon="icon-image">

    <div>

      <p>Tab 2</p>

    </div>

  </ins-tab-item>

  <ins-tab-item label="Entries" icon="icon-entries">

    <div>

      <p>Tab 3</p>

    </div>

  </ins-tab-item>

  <ins-tab-item no-padding>

    <p>Tab 4 - no padding</p>

  </ins-tab-item>

  <ins-tab-item has-error>

    <p>Tab 5 - has error</p>

  </ins-tab-item>

</ins-tab>

Properties

FIELD ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
active	boolean	false	true, false	Set tab to 'active' state
label	string	Tab	any	Defines tab heading
icon	string	""	any	Defines the icon class to be used
no-padding	boolean	false	true, false	Removes tab item's left and right padding.
disabled	boolean	false	true, false	Disables a tab
has-error	boolean	false	true, false	Set a tab heading to show 'error indicator' (bottom red line)

Event

EVENT	OBJECT	DESCRIPTION
insTabError	boolean	Emits value when a tab 'has-error' property changes

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.