javascript - 使材质选项卡可滚动
问题描述
mat-tab
当我的应用程序( s内部)中,我使用的材料选项卡( s内部mat-tab-group
)比显示的选项卡还要多,显示了两个导航按钮显示其他选项卡:
我的要求是使用户能够在标签栏上滚动,以便显示其他标签。
我试图做一些CSS更改,但无法解决。如果可以提供任何解决方案或建议,我们将不胜感激。
解决方案
[长文本解决方案] 我的目标是默认使 mat-tabs 可滚动,没有控件,但能够在单击部分可见的 mat-tab 以将其移动到可见的中心视口时自动滚动。
1)此行为已在此示例中“从盒子中”部分实现 - https://stackblitz.com/edit/angular-mat-tabs-scrollalble-initial-behavior。问题是你不能正常向后滚动——有一些错误的行为将标签推到左边。所以它不像我想要的那样工作。
2) 下一个变体是滚动事件——(wheel)="event"
在 mat-tab-group 上使用——但它也不适用于移动设备。https://stackblitz.com/edit/angular-mat-tabs-scrollable-by-wheel-event从上面这个很棒的评论中得到它。
3) 我自己的 mat-tabs 滚动在移动设备上滚动并在您单击选项卡时将单击的选项卡自动滚动到屏幕视口的中心不是太简单,但它可以工作!:)
首先,您需要在点击选项卡和分页按钮时禁用“从框内”滚动:
mat-tabs-override.scss:
$black: #121212;
@mixin media-query-for-mobile {
@media (max-width: 768px) and (min-width: 1px) {
@content;
}
}
mat-tab-group {
.mat-tab-header {
.mat-tab-header-pagination {
display: none !important; // <== disable pagination
}
.mat-tab-label-container {
left: 0px; // if you need to use it on mobile - set left position to 0
width: 100%;
.mat-tab-list {
overflow-x: auto !important; // <== set horisontal scroll bar imperatively
// below rule prevents sliding of buttons' container - because it not sliding properly - to left it not slide as well
transform: none !important;
.mat-tab-labels {
// some tweaks for tabs - up to you
@include media-query-for-mobile {
justify-content: unset !important;
}
.mat-tab-label {
// min-width: 20% !important;
padding: 1.25% !important;
margin: 0px !important;
text-transform: uppercase;
color: $black;
font-weight: 600;
min-width: 140px !important;
}
}
}
}
}
}
在这种情况下,您将看到所有选项卡的宽度都相似并且在移动设备上可滚动。
接下来,您需要在单击选项卡时自动滚动选项卡,并根据当前视口将它们的位置更改为屏幕中心——让我们开始吧!
我们可以创建一个指令,它会监听 的主容器<mat-tabs-group>
,检查可滚动容器的宽度,.mat-tab-labels
并通过自动滚动.mat-tabs-labels
容器将选项卡移动到视口中以需要的方式:
模板中的指令:
<mat-tab-group scrollToCenter>
<mat-tab label="tab 1"></mat-tab>
<mat-tab label="tab 2"></mat-tab>
<mat-tab label="tab 3"></mat-tab>
<mat-tab label="tab 4"></mat-tab>
<mat-tab label="tab 5"></mat-tab>
<mat-tab label="tab 6"></mat-tab>
<mat-tab label="tab 7"></mat-tab>
<mat-tab label="tab 8"></mat-tab>
</mat-tab-group>
指令.ts:
import { Directive, ElementRef, OnDestroy } from '@angular/core';
import { fromEvent, Subscription } from 'rxjs';
interface DOMRectI {
bottom: number;
height: number;
left: number; // position start of element
right: number; // position end of element
top: number;
width: number; // width of element
x?: number;
y?: number;
}
@Directive({
// tslint:disable-next-line:directive-selector
selector: '[scrollToCenter]',
})
export class MatTabScrollToCenterDirective implements OnDestroy {
isMobile: boolean;
subs = new Subscription();
constructor(
private element: ElementRef
) {
this.subs.add(
fromEvent(this.element.nativeElement, 'click').subscribe((clickedContainer: MouseEvent) => {
const scrollContainer = this.element.nativeElement.querySelector('.mat-tab-list');
const currentScrolledContainerPosition: number = scrollContainer.scrollLeft;
const newPositionScrollTo = this.calcScrollToCenterValue(clickedContainer, currentScrolledContainerPosition);
})
);
}
/** calculate scroll position to center of viewport */
calcScrollToCenterValue(clickedContainer, currentScrolledContainerPosition): number {
const scrolledButton: DOMRectI = (clickedContainer.target as HTMLElement).getBoundingClientRect();
const leftXOffset = (window.innerWidth - scrolledButton.width) / 2;
const currentVisibleViewportLeft = scrolledButton.left;
const neededLeftOffset = currentVisibleViewportLeft - leftXOffset;
console.log(scrolledButton);
const newValueToSCroll = currentScrolledContainerPosition + neededLeftOffset;
return newValueToSCroll;
}
ngOnDestroy() {
this.subs.unsubscribe();
}
}
它有效!:0 但不在 ios 和 IE 中...为什么?因为 ios 和 IE 不支持 Element.scroll()
解决方案 -npm i element-scroll-polyfill
并设置为 polyfills.ts
/** enable polufill for element.scroll() on IE and ios */
import 'element-scroll-polyfill';
伟大的!但是现在滚动不是那么流畅...... IE和ios不支持smooth-scroll-behavior。
解决方案 -npm i smoothscroll-polyfill
并添加到 polyfills.ts
import smoothscroll from 'smoothscroll-polyfill';
// enable polyfill
smoothscroll.polyfill();
最后它无处不在。希望它可以帮助某人修复 mat-tabs 自动滚动空虚:)
演示享受它:)
推荐阅读
- amazon-cloudfront - CloudFront Origin 基本授权
- php - 为数据库中的每个结果提供不同的链接 - PHP
- java - 如何正确截屏Android设备?
- jquery - jquery滚动到数据图像ID
- android - 重新创建活动后增加内存消耗
- graphviz - 如何在不改变安排的情况下将交易对手 B 连接到 C 以及反之亦然
- javascript - 函数 .data() 不读取内容 onCreate FIrebase 云触发器
- ansible - 如何从 Ansible 连接到 Rally
- excel - 是否有一个 Excel 公式可以返回一个时间范围内的日历月数?
- linux - 从 uart 读取