File

src/lib/pg-components/tabs/tabset.component.ts

Description

Represents a tab set or tab group component.

<mefdev-tabset TabPosition="top" Animated="true" ShowPagination="true">
  <mefdev-tab label="Tab 1">Tab 1 content</mefdev-tab>
  <mefdev-tab label="Tab 2">Tab 2 content</mefdev-tab>
</mefdev-tabset>

Example of usage: https://mef.dev/ui_kit_demo/view/page_components/tabset

Implements

AfterContentChecked OnInit AfterViewInit

Metadata

encapsulation	`ViewEncapsulation.None`
selector	`mefdev-tabset`
templateUrl	`./tabset.component.html`

Index

Constructor

constructor(_renderer: Renderer2)

Parameters :

Name	Type	Optional
_renderer	`Renderer2`	No

Inputs

Animated

Type : AnimatedInterface | boolean

Default value : true

Whether the tab set is animated. Can be a boolean or an object of type AnimatedInterface.

- true (enables animation for both ink bar and tab pane)
- { inkBar: true, tabPane: false } (enables animation for ink bar only)
Default: true

extraTabClass

Type : string

Additional CSS class for the tabs.

extraTabContentClass

Type : string

Additional CSS class for the tab content.

Hide

Type : boolean

Default value : false

Whether the tab set is hidden.

Default: false

SelectedIndex

Type : number | null

The index of the selected tab.

ShowPagination

Type : boolean

Default value : true

Whether to show pagination controls for scrolling tabs.

Default: true

Size

Type : string

Default value : 'default'

Size of the tab set. Can be 'default', 'small', or 'large'.

Default: 'default'

tabAnimation

Type : string

Animation to apply to the tabs. Accepts CSS animation name.

TabBarExtraTemplate

Type : TemplateRef<void>

Template reference for additional content to be displayed in the tab bar.

TabPosition

Type : TabPosition

Position of the tab set. Can be 'top', 'bottom', 'left', or 'right'.

Type

Type : TabType

Type of the tab set. Can be 'line', 'fillup', or 'linetriangle'.

Outputs

SelectChange

Type : EventEmitter<TabChangeEvent>

Event emitted when a tab is selected.

<mefdev-tabset (SelectChange)="onTabSelect($event)"></mefdev-tabset>

SelectedIndexChange

Type : Observable<number>

Event emitted when the selected tab index changes.

Methods

_setClassMap

_setClassMap()

Returns : void

_setPosition

_setPosition(value: TabPosition)

Parameters :

Name	Type	Optional
value	`TabPosition`	No

Returns : void

clickLabel

clickLabel(index: number)

Selects the tab at the specified index.

<button (click)="clickLabel(0)">Select Tab 1</button>

Parameters :

Name	Type	Optional	Description
index	`number`	No	The index of the tab to select. `<button (click)="clickLabel(0)">Select Tab 1</button>`

Returns : void

Properties

_classMap

Type : any

_el

Type : any

_extra_tab_class

Type : string

Default value : ''

_extra_tabcontent_class

Type : string

Default value : ''

_hostContent

Type : ElementRef

Decorators :


                            @ViewChild('hostContent', {static: true})

_indexToSelect

Type : number | null

Default value : 0

_isViewInit

Default value : false

_prefixCls

Type : string

Default value : 'nav-tabs'

_selectedIndex

Type : number | null

Default value : null

_tabAnimation

Type : string

Default value : ''

_tabContent

Type : ElementRef

Decorators :


                            @ViewChild('tabContent', {static: true})

_tabNav

Type : MefDevTabsNavComponent

Decorators :


                            @ViewChild('tabNav', {static: true})

_tabPosition

Type : TabPosition

Default value : 'top'

_tabPositionMode

Type : TabPositionMode

Default value : 'horizontal'

_tabs

Type : MefDevTabComponent[]

Default value : []

_type

Type : TabType

Default value : 'line'

_width

Type : any

TabBarExtraContent

Type : TemplateRef<void>

Decorators :


                            @ContentChild('TabBarExtraContent', {static: true})

tabs

Type : MefDevTabComponent[]

Default value : []

Accessors

SelectedIndex

getSelectedIndex()

setSelectedIndex(value: number | null)

The index of the selected tab.

Parameters :

Name	Type	Optional
value	`number \| null`	No

Returns : void

SelectedIndexChange

getSelectedIndexChange()

Event emitted when the selected tab index changes.

Returns : Observable<number>

TabPosition

getTabPosition()

setTabPosition(value: TabPosition)

Position of the tab set. Can be 'top', 'bottom', 'left', or 'right'.

Parameters :

Name	Type	Optional
value	`TabPosition`	No

Returns : void

extraTabClass

setextraTabClass(value: string)

Additional CSS class for the tabs.

Parameters :

Name	Type	Optional
value	`string`	No

Returns : void

extraTabContentClass

setextraTabContentClass(value: string)

Additional CSS class for the tab content.

Parameters :

Name	Type	Optional
value	`string`	No

Returns : void

Type

getType()

setType(value: TabType)

Type of the tab set. Can be 'line', 'fillup', or 'linetriangle'.

Parameters :

Name	Type	Optional
value	`TabType`	No

Returns : void

tabAnimation

settabAnimation(value: string)

Animation to apply to the tabs. Accepts CSS animation name.

Parameters :

Name	Type	Optional
value	`string`	No

Returns : void

inkBarAnimated

getinkBarAnimated()

tabPaneAnimated

gettabPaneAnimated()

File

Description

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

Accessors

Constructor

Inputs

Outputs

Methods

Properties

Accessors

results matching ""

No results matching ""