@forter/tabs NPM

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: `10px` example: `30px`
`--fc-tabs-menu-position`	tab positioning. default `static`, example: `absolute`
`--fc-tabs-section-padding`	padding for each tab section. default: `10px`, example: `30px`