fc-tabs

An element to organized more screens into a single page.

Usage

<script>
   import '@forter/tabs';
</script>

<fc-tabs>
  <fc-link slot="tab">Tab 1</fc-link>
  <fc-link slot="tab">Tab 2</fc-link>

  <section slot="section">Content of tab 1</section>
  <section slot="section">Content of tab 2</section>
</fc-tabs>

Examples

<!-- small -->
<fc-tabs>
  <fc-link size="small" slot="tab">Tab 1</fc-link>
  <fc-link size="small" slot="tab">Tab 2</fc-link>

  <section slot="section">Content of tab 1</section>
  <section slot="section">Content of tab 2</section>
</fc-tabs>

<!-- medium -->
<fc-tabs>
  <fc-link size="medium" slot="tab">Tab 1</fc-link>
  <fc-link size="medium" slot="tab">Tab 2</fc-link>

  <section slot="section">Content of tab 1</section>
  <section slot="section">Content of tab 2</section>
</fc-tabs>

<!-- large -->
<fc-tabs>
  <fc-link size="large" slot="tab">Tab 1</fc-link>
  <fc-link size="large" slot="tab">Tab 2</fc-link>

  <section slot="section">Content of tab 1</section>
  <section slot="section">Content of tab 2</section>
</fc-tabs>

<!-- primary -->
<fc-tabs>
  <fc-link intent="primary" slot="tab">Tab 1</fc-link>
  <fc-link intent="primary" slot="tab">Tab 2</fc-link>

  <section slot="section">Content of tab 1</section>
  <section slot="section">Content of tab 2</section>
</fc-tabs>

<!-- secondary -->
<fc-tabs>
  <fc-link intent="secondary" slot="tab">Tab 1</fc-link>
  <fc-link intent="secondary" slot="tab">Tab 2</fc-link>

  <section slot="section">Content of tab 1</section>
  <section slot="section">Content of tab 2</section>
</fc-tabs>

<!-- success -->
<fc-tabs>
  <fc-link intent="success" slot="tab">Tab 1</fc-link>
  <fc-link intent="success" slot="tab">Tab 2</fc-link>

  <section slot="section">Content of tab 1</section>
  <section slot="section">Content of tab 2</section>
</fc-tabs>

<!-- danger -->
<fc-tabs>
  <fc-link intent="danger" slot="tab">Tab 1</fc-link>
  <fc-link intent="danger" slot="tab">Tab 2</fc-link>

  <section slot="section">Content of tab 1</section>
  <section slot="section">Content of tab 2</section>
</fc-tabs>

<!-- warn -->
<fc-tabs>
  <fc-link intent="warn" slot="tab">Tab 1</fc-link>
  <fc-link intent="warn" slot="tab">Tab 2</fc-link>

  <section slot="section">Content of tab 1</section>
  <section slot="section">Content of tab 2</section>
</fc-tabs>

<!-- cancel -->
<fc-tabs>
  <fc-link intent="cancel" slot="tab">Tab 1</fc-link>
  <fc-link intent="cancel" slot="tab">Tab 2</fc-link>

  <section slot="section">Content of tab 1</section>
  <section slot="section">Content of tab 2</section>
</fc-tabs>

<!-- selected -->
<fc-tabs>
  <fc-link slot="tab">Tab 1</fc-link>
  <fc-link slot="tab" active>Tab 2</fc-link>

  <section slot="section">Content of Tab 1</section>
  <section slot="section">Content of Tab 2</section>
</fc-tabs>`

<!-- disabled -->
<fc-tabs>
  <fc-link slot="tab">Tab 1</fc-link>
  <fc-link slot="tab" disabled>Tab 2</fc-link>

  <section slot="section">Content of Tab 1</section>
  <section slot="section">Content of Tab 2</section>
</fc-tabs>


<!-- invalid -->
<fc-tabs>
  <fc-link slot="tab">Tab 1</fc-link>
  <fc-link slot="tab" disabled>Tab 2</fc-link>

  <section slot="section">Content of Tab 1</section>
</fc-tabs>

<!-- selected-tab -->
<fc-tabs selected-tab="tab2">
  <fc-link slot="tab" tab-name="tab1" >Tab 1</fc-link>
  <fc-link slot="tab" tab-name="tab2" >Tab 2</fc-link>

  <section slot="section">Content of Tab 1</section>
  <section slot="section">Content of Tab 2</section>
</fc-tabs>

Properties

| Property | Attribute | Type | Description | |---------------|----------------|-----------|----------------------| | selectedTab | selected-tab | boolean | The current tab name |

Events

| Event | Description | |-------------------|--------------------------------------------------| | select | on tab selection with: selectedIndex: int, selectedTabHeader: HTMLElement, selectedTabSection: HTMLElement | | select-disabled | when tab that is selected and disabled: selectedTabHeader: HTMLElement, example: { "target": { "disabled": true }}, method: onClickTabHeader |

Slots

| Name | Description | |------|--------------------------------------------------| | | section slot, the body section for each tab. example: <section slot="section">Dog name: Joy, Dog Age: 2</section> |

CSS Custom Properties

| Property | Description | |-----------------------------|--------------------------------------------------| | --fc-tabs-header-margin | margin for each tab header. default: 0px 5px 2px 0px, example: 30px| |--fc-tabs-header-padding | padding for each tab header. default:10pxexample:30px| |--fc-tabs-menu-position | tab positioning. defaultstatic, example: absolute| |--fc-tabs-section-padding| padding for each tab section. default:10px, example: 30px` |