/
githubmirror
/
components
Обзор
Документация
Войти
/
githubmirror
/
components
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
src/material/tabs/tab-body.scss
67 строк
2 KB
Kristiyan Kostadinov
feat(material/tabs): add support for separate tab animation durations (#32869)
02 мар 2026, 11:12
Не верифицирован
02 мар 2026, 11:12
85c16fe
Код
Авторство
О чём код?
@use '../core/style/layout-common'; // Wraps each tab body. We need to add these styles ourselves, // because MDC only provides styling for the tab header. .mat-mdc-tab-body { @include layout-common.fill(); display: block; overflow: hidden; outline: 0; // Fix for auto content wrapping in IE11 flex-basis: 100%; &.mat-mdc-tab-body-active { position: relative; overflow-x: hidden; overflow-y: auto; z-index: 1; flex-grow: 1; } .mat-mdc-tab-group.mat-mdc-tab-group-dynamic-height &.mat-mdc-tab-body-active { overflow-y: hidden; } } .mat-mdc-tab-body-content { height: 100%; overflow: auto; transform: none; visibility: hidden; .mat-tab-body-animating > &, .mat-mdc-tab-body-active > & { visibility: visible; } // Chrome appears to have a bug where the animation glitches in RTL if the element // has a height of 0px which can happen with lazy-loaded content or when it's off-screen. // See: https://github.com/angular/components/issues/31503. We can work around it by setting // a minimum height on it. .mat-tab-body-animating > & { min-height: 1px; } .mat-mdc-tab-group-dynamic-height & { overflow: hidden; } } .mat-tab-body-content-can-animate { // Note: there's a 1ms delay so that transition events // still fire even if the duration is set to zero. transition: transform var(--mat-tab-body-animation-duration) 1ms cubic-bezier(0.35, 0, 0.25, 1); .mat-mdc-tab-body-wrapper._mat-animation-noopable & { transition: none; } } .mat-tab-body-content-left { transform: translate3d(-100%, 0, 0); } .mat-tab-body-content-right { transform: translate3d(100%, 0, 0); }