Tab

Tab is used to classify related content and navigate between similar types of information that appear in the same context

Code


                                                        
                                                        
                                                            <PyxisTab
                                                          @on-click="handleClick()"
                                                          @close-tab="handleClose()"
                                                          label="label"
                                                          data-testid="tab-data-testid"
                                                        />

Example of a regular Tab component

Props

The Tab component supports the following Props:

Name	Type	Default	Required
label	string	undefined	true
dataTestid	string	undefined	true
color	'warning'\|'danger'\|'success'\|'premium'\|'brand'\|'system'	system	false
size	'default'\|'compact'	default	false
iconClass	string	undefined	false
counter	string	undefined	false
theme	'light'\|'dark'	dark	false
labelledBy	string	undefined	false
isSelected	boolean	false	false
isClosable	boolean	false	false
subTitle	string	undefined	false

Events

The interactions on the Tab component are handled by the following Events

@on-click : This event is triggered when the Tab is clicked.

@close-tab : This event is triggered when the tab's cross button is clicked.