@forter/tabs
v2.6.5
Published
tabs from Forter Components
Downloads
9
Readme
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. default
static, example:
absolute|
|
--fc-tabs-section-padding| padding for each tab section. default:
10px, example:
30px` |