Rendering Modes
The TabStrip supports three types of rendering scenarios for its Tabs:
on-demand(default)—in this mode, only the content of the currently selected Tab is rendered in the DOM; if a new selection is made, the available content is destroyed.hybrid—in this mode, the Tabs' content is handled similarly to theon-demandmode but the already rendered content is not removed from the DOM.pre-rendered—in this mode, the content of all Tabs is rendered on TabStrip's initialization and persisted in the DOM no matter the current selection.
To configure the different rendering options, we should use the renderAllContent and keepTabsMounted properties. Below you can test each of the rendering scenarios:
To see the difference between the rendering modes, inspect the DOM in each of the following examples and compare the available content.
On-Demand Tabs Rendering
By default, the TabStrip works in on-demand mode, meaning that only the content of the currently selected Tab is available in the DOM tree.
The following example doesn't have specific rendering configuration and demonstrates the default on-demand mode in action.
Hybrid Tabs Rendering
To enable the persistence of the content of the already rendered Tabs, we need to use the keepTabsMounted property.
Below you will find an example in which the keepTabsMounted prop is set to true. In this example, once a Tab is activated, its content remains in the DOM, no matter the further interaction with the component.
Pre-rendering Tabs
If your scenario requires the default rendering of all TabStrip Tabs by default, you need to set the renderAllContent property to true as demonstrated in the following example.