Vivid Vue
On this page

VTab ​

Props ​

NameTypeDescription
iconEnum:
10-sec-backward-line
10-sec-backward-solid
10-sec-forward-line
10-sec-forward-solid
30-sec-backward-line
30-sec-backward-solid
30-sec-forward-line
30-sec-forward-solid
5-sec-backward-line
5-sec-backward-solid
5-sec-forward-line
5-sec-forward-solid
... 1208 more ...		A decorative icon the custom element should have. See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
icon-trailingbooleanIndicates the icon affix alignment.
aria-currentEnum:
page
step
location
date
time
true
false		Indicates the element that represents the current item within a container or set of related elements.
disabledbooleanWhen true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled
connotationEnum:
accent
cta		The connotation the tab should have.
shapeEnum:
rounded
sharp		The shape the tab should have.
labelstringIndicates the tab's label.
removablebooleanIndicates the tab's label.
tab-indexnumber
aria-selectedstring

Events ​

NameEvent TypeDescription
clickMouseEventFires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
focusFocusEventFires when the element receives focus.
blurFocusEventFires when the element loses focus.
keydownKeyboardEventFires when a key is pressed.
keyupKeyboardEventFires when a key is released.
inputEventFires when the value of an element has been changed.

Slots ​

NameDescription
iconSlot to add an icon to tab.

Methods ​

NameTypeDescription
_handleCloseClick(e: Event) => unknown
_onKeyDown(e: KeyboardEvent) => unknown