Tabs

Imports

import {Tabs} from 'material-expressive-react';
import {Tabs} from 'material-expressive-react/tabs';

Props

Prop	Type	Default	Required	Description
activeTab	Tab | null		No	The currently selected tab, null only when there are no tab children. @export
activeTabIndex	number		No	The index of the currently selected tab. @export
addController	((controller: ReactiveController) => void)		No	Registers a ReactiveController to participate in the element's reactive update cycle. The element automatically calls into any registered controllers during its lifecycle callbacks. If the element is connected when addController() is called, the controller's hostConnected() callback will be immediately called. @category controllers
attributeChangedCallback	((name: string, _old: string | null, value: string | null) => void)		No	Synchronizes property values when attributes change. Specifically, when an attribute is set, the corresponding property is set. You should rarely need to implement this callback. If this method is overridden, super.attributeChangedCallback(name, _old, value) must be called. See responding to attribute changes on MDN for more information about the attributeChangedCallback. @category attributes
autoActivate	boolean		No	Whether or not to automatically select a tab when it is focused.
connectedCallback	(() => void)		No	Invoked when the component is added to the document's DOM. In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window. ts<br/>connectedCallback() &#123;<br/> super.connectedCallback();<br/> addEventListener('keydown', this._handleKeydown);<br/>&#125;<br/> Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback(). @category lifecycle
disconnectedCallback	(() => void)		No	Invoked when the component is removed from the document's DOM. This callback is the main signal to the element that it may no longer be used. disconnectedCallback() should ensure that nothing is holding a reference to the element (such as event listeners added to nodes external to the element), so that it is free to be garbage collected. ts<br/>disconnectedCallback() &#123;<br/> super.disconnectedCallback();<br/> window.removeEventListener('keydown', this._handleKeydown);<br/>&#125;<br/> An element may be re-connected after being disconnected. @category lifecycle
hasUpdated	boolean		No	Is set to true after the first update. The element code cannot assume that renderRoot exists before the element hasUpdated. @category updates
isUpdatePending	boolean		No	True if there is a pending update as a result of calling requestUpdate(). Should only be read. @category updates
onChange	((event: Event) => void)		No
removeController	((controller: ReactiveController) => void)		No	Removes a ReactiveController from the element. @category controllers
renderOptions	RenderOptions		No	@category rendering
renderRoot	HTMLElement | DocumentFragment		No	Node or ShadowRoot into which element DOM should be rendered. Defaults to an open shadowRoot. @category rendering
requestUpdate	((name?: PropertyKey, oldValue?: unknown, options?: PropertyDeclaration<unknown, unknown>, useNewValue?: boolean | undefined, newValue?: unknown) => void) | undefined		No	Requests an update which is processed asynchronously. This should be called when an element should update based on some state not triggered by setting a reactive property. In this case, pass no arguments. It should also be called when manually implementing a property setter. In this case, pass the property name and oldValue to ensure that any configured property options are honored. @param name name of requesting property @param oldValue old value of requesting property @param options property options to use instead of the previously configured options @param useNewValue if true, the newValue argument is used instead of reading the property value. This is important to use if the reactive property is a standard private accessor, as opposed to a plain property, since private members can't be dynamically read by name. @param newValue the new value of the property. This is only used if useNewValue is true. @category updates
scrollToTab	((tabToScrollTo?: Tab | null) => Promise<void>)		No	Scrolls the toolbar, if overflowing, to the active tab, or the provided tab. @param tabToScrollTo The tab that should be scrolled to. Defaults to the active tab. @return A Promise that resolves after the tab has been scrolled to.
tabs	Tab[]		No	The tabs of this tab bar.
updateComplete	Promise<boolean>		No	Returns a Promise that resolves when the element has completed updating. The Promise value is a boolean that is true if the element completed the update without triggering another update. The Promise result is false if a property was set inside updated(). If the Promise is rejected, an exception was thrown during the update. To await additional asynchronous work, override the getUpdateComplete method. For example, it is sometimes useful to await a rendered element before fulfilling this Promise. To do this, first await super.getUpdateComplete(), then any subsequent state. @return A promise of a boolean that resolves to true if the update completed without triggering another update. @category updates

Events

• onChange → DOM event change

Slots

Material Web components frequently use named slots. In React, you can pass slot="..." on children (e.g. <Icon slot="icon" />).

If you need to slot a child component that does not accept a slot prop, use the Slotted utility (see Utilities → Slotted).

Examples

See Storybook for live examples and variants.