Skip to content

Commit 5ebab53

Browse files
crisbetocrisbeto
committed
master - cad087220 feat(material/tabs): add the ability to keep content inside the DOM while off-screen (#24299)
1 parent 85f81ab commit 5ebab53

File tree

22 files changed

+237
-33
lines changed

22 files changed

+237
-33
lines changed

‎docs-content/api-docs/material-tabs.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -953,6 +953,22 @@ <h4 id="MatTabGroup" class="docs-header-link docs-api-h4 docs-api-class-name">
953953

954954

955955

956+
<tr class="docs-api-properties-row">
957+
<td class="docs-api-properties-name-cell"><div class="docs-api-input-marker">
958+
@Input()</div><p class="docs-api-property-name">
959+
<code>preserveContent: boolean</code>
960+
</p>
961+
</td>
962+
<td class="docs-api-property-description"><p>By default tabs remove their content from the DOM while it&#39;s off-screen.
963+
Setting this to <code>true</code> will keep it in the DOM which will prevent elements
964+
like iframes and videos from reloading next time it comes back into the view.</p>
965+
</td>
966+
</tr>
967+
968+
969+
970+
971+
956972
<tr class="docs-api-properties-row">
957973
<td class="docs-api-properties-name-cell"><div class="docs-api-input-marker">
958974
@Input()</div><p class="docs-api-property-name">
@@ -1252,6 +1268,21 @@ <h4 id="MatTabsConfig" class="docs-header-link docs-api-h4 docs-api-interface-na
12521268

12531269

12541270

1271+
1272+
1273+
<tr class="docs-api-properties-row">
1274+
<td class="docs-api-properties-name-cell"><p class="docs-api-property-name">
1275+
<code>preserveContent: boolean</code>
1276+
</p>
1277+
</td>
1278+
<td class="docs-api-property-description"><p>By default tabs remove their content from the DOM while it&#39;s off-screen.
1279+
Setting this to <code>true</code> will keep it in the DOM which will prevent elements
1280+
like iframes and videos from reloading next time it comes back into the view.</p>
1281+
</td>
1282+
</tr>
1283+
1284+
1285+
12551286
</table>
12561287

12571288

‎docs-content/examples-highlighted/material/tabs/index-ts.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
<span class="hljs-keyword">import</span> {TabGroupDynamicExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./tab-group-dynamic/tab-group-dynamic-example&#x27;</span>;
1818
<span class="hljs-keyword">import</span> {TabGroupHeaderBelowExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./tab-group-header-below/tab-group-header-below-example&#x27;</span>;
1919
<span class="hljs-keyword">import</span> {TabGroupLazyLoadedExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./tab-group-lazy-loaded/tab-group-lazy-loaded-example&#x27;</span>;
20+
<span class="hljs-keyword">import</span> {TabGroupPreserveContentExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./tab-group-preserve-content/tab-group-preserve-content-example&#x27;</span>;
2021
<span class="hljs-keyword">import</span> {TabGroupStretchedExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./tab-group-stretched/tab-group-stretched-example&#x27;</span>;
2122
<span class="hljs-keyword">import</span> {TabGroupThemeExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./tab-group-theme/tab-group-theme-example&#x27;</span>;
2223
<span class="hljs-keyword">import</span> {TabNavBarBasicExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./tab-nav-bar-basic/tab-nav-bar-basic-example&#x27;</span>;
@@ -37,6 +38,7 @@
3738
TabGroupThemeExample,
3839
TabNavBarBasicExample,
3940
TabNavBarWithPanelExample,
41+
TabGroupPreserveContentExample,
4042
};
4143

4244
<span class="hljs-keyword">const</span> EXAMPLES = [
@@ -54,6 +56,7 @@
5456
TabGroupThemeExample,
5557
TabNavBarBasicExample,
5658
TabNavBarWithPanelExample,
59+
TabGroupPreserveContentExample,
5760
];
5861

5962
<span class="hljs-meta">@NgModule</span>({

‎docs-content/examples-highlighted/material/tabs/tab-group-preserve-content/tab-group-preserve-content-example-html.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Start the video in the first tab and navigate to the second one to see how it keeps playing.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
2+
3+
<span class="hljs-tag">&lt;<span class="hljs-name">mat-tab-group</span> [<span class="hljs-attr">preserveContent</span>]=<span class="hljs-string">&quot;true&quot;</span>&gt;</span>
4+
<span class="hljs-tag">&lt;<span class="hljs-name">mat-tab</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;First&quot;</span>&gt;</span>
5+
<span class="hljs-tag">&lt;<span class="hljs-name">iframe</span>
6+
<span class="hljs-attr">width</span>=<span class="hljs-string">&quot;560&quot;</span>
7+
<span class="hljs-attr">height</span>=<span class="hljs-string">&quot;315&quot;</span>
8+
<span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://www.youtube.com/embed/B-lipaiZII8&quot;</span>
9+
<span class="hljs-attr">frameborder</span>=<span class="hljs-string">&quot;0&quot;</span>
10+
<span class="hljs-attr">allow</span>=<span class="hljs-string">&quot;accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture&quot;</span>
11+
<span class="hljs-attr">allowfullscreen</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">iframe</span>&gt;</span>
12+
<span class="hljs-tag">&lt;/<span class="hljs-name">mat-tab</span>&gt;</span>
13+
<span class="hljs-tag">&lt;<span class="hljs-name">mat-tab</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;Second&quot;</span>&gt;</span>Note how the video from the previous tab is still playing.<span class="hljs-tag">&lt;/<span class="hljs-name">mat-tab</span>&gt;</span>
14+
<span class="hljs-tag">&lt;/<span class="hljs-name">mat-tab-group</span>&gt;</span>

‎docs-content/examples-highlighted/material/tabs/tab-group-preserve-content/tab-group-preserve-content-example-ts.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<span class="hljs-keyword">import</span> {Component} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
2+
3+
<span class="hljs-comment">/**
4+
* <span class="hljs-doctag">@title </span>Tab group that keeps its content inside the DOM when it&#x27;s off-screen.
5+
*/</span>
6+
<span class="hljs-meta">@Component</span>({
7+
<span class="hljs-attr">selector</span>: <span class="hljs-string">&#x27;tab-group-preserve-content-example&#x27;</span>,
8+
<span class="hljs-attr">templateUrl</span>: <span class="hljs-string">&#x27;tab-group-preserve-content-example.html&#x27;</span>,
9+
})
10+
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">TabGroupPreserveContentExample</span> </span>{}

‎docs-content/examples-source/material/tabs/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {TabGroupHarnessExample} from './tab-group-harness/tab-group-harness-exam
1717
import {TabGroupDynamicExample} from './tab-group-dynamic/tab-group-dynamic-example';
1818
import {TabGroupHeaderBelowExample} from './tab-group-header-below/tab-group-header-below-example';
1919
import {TabGroupLazyLoadedExample} from './tab-group-lazy-loaded/tab-group-lazy-loaded-example';
20+
import {TabGroupPreserveContentExample} from './tab-group-preserve-content/tab-group-preserve-content-example';
2021
import {TabGroupStretchedExample} from './tab-group-stretched/tab-group-stretched-example';
2122
import {TabGroupThemeExample} from './tab-group-theme/tab-group-theme-example';
2223
import {TabNavBarBasicExample} from './tab-nav-bar-basic/tab-nav-bar-basic-example';
@@ -37,6 +38,7 @@ export {
3738
TabGroupThemeExample,
3839
TabNavBarBasicExample,
3940
TabNavBarWithPanelExample,
41+
TabGroupPreserveContentExample,
4042
};
4143

4244
const EXAMPLES = [
@@ -54,6 +56,7 @@ const EXAMPLES = [
5456
TabGroupThemeExample,
5557
TabNavBarBasicExample,
5658
TabNavBarWithPanelExample,
59+
TabGroupPreserveContentExample,
5760
];
5861

5962
@NgModule({

‎docs-content/examples-source/material/tabs/tab-group-preserve-content/tab-group-preserve-content-example.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<p>Start the video in the first tab and navigate to the second one to see how it keeps playing.</p>
2+
3+
<mat-tab-group [preserveContent]="true">
4+
<mat-tab label="First">
5+
<iframe
6+
width="560"
7+
height="315"
8+
src="https://www.youtube.com/embed/B-lipaiZII8"
9+
frameborder="0"
10+
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
11+
allowfullscreen></iframe>
12+
</mat-tab>
13+
<mat-tab label="Second">Note how the video from the previous tab is still playing.</mat-tab>
14+
</mat-tab-group>

‎docs-content/examples-source/material/tabs/tab-group-preserve-content/tab-group-preserve-content-example.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import {Component} from '@angular/core';
2+
3+
/**
4+
* @title Tab group that keeps its content inside the DOM when it's off-screen.
5+
*/
6+
@Component({
7+
selector: 'tab-group-preserve-content-example',
8+
templateUrl: 'tab-group-preserve-content-example.html',
9+
})
10+
export class TabGroupPreserveContentExample {}

‎docs-content/overviews/material/tabs/tabs.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,18 @@ <h3 id="controlling-the-tab-animation" class="docs-header-link">
9696
region="slow-animation-duration"></div>
9797

9898

99+
<h3 id="keeping-the-tab-content-inside-the-dom-while-its-off-screen" class="docs-header-link">
100+
<span header-link="keeping-the-tab-content-inside-the-dom-while-its-off-screen"></span>
101+
Keeping the tab content inside the DOM while it&#39;s off-screen
102+
</h3>
103+
<p>By default the <code>&lt;mat-tab-group&gt;</code> will remove the content of off-screen tabs from the DOM until they
104+
come into the view. This is optimal for most cases since it keeps the DOM size smaller, but it
105+
isn&#39;t great for others like when a tab has an <code>&lt;audio&gt;</code> or <code>&lt;video&gt;</code> element, because the content
106+
will be re-initialized whenever the user navigates to the tab. If you want to keep the content of
107+
off-screen tabs in the DOM, you can set the <code>preserveContent</code> input to <code>true</code>.</p>
108+
<div material-docs-example="tab-group-preserve-content"></div>
109+
110+
99111
<h3 id="accessibility" class="docs-header-link">
100112
<span header-link="accessibility"></span>
101113
Accessibility

‎esm2020/example-module.mjs‎

Lines changed: 17 additions & 1 deletion
Large diffs are not rendered by default.

‎esm2020/material/tabs/index.mjs‎

Lines changed: 8 additions & 4 deletions
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)