Insites Docs Web Components V1Data DisplayTab Item

Tab Item

Last updated on August 02, 2024.

Element: <ins-tab-item>

Contains the tab content. (Important: Wrap your tab-item content within a

tag.)

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
tabItemError 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.