Angular 可访问的嵌套选项卡

下面的示例部分演示了一个实现tabs设计模式的tabs小部件。在此示例中，只有在用户使用空格、Enter或鼠标单击激活选项卡后，才会显示新面板。通常，只有当面板无法立即显示时，才需要手动激活选项卡，即并非所有面板内容都存在于DOM中

选项卡是一组分层的内容部分，称为选项卡面板，一次显示一个内容面板。每个选项卡面板都有一个关联的选项卡元素，激活后，该元素将显示面板。选项卡元素列表沿当前显示的面板的一个边缘排列，最常见的是顶部边缘

用于描述此设计模式的术语包括：

选项卡或选项卡式界面 一组选项卡元素及其关联的选项卡面板。 标签表 tablist元素中包含的一组tab元素。 标签 选项卡列表中的一个元素，用作其中一个选项卡面板的标签，可以激活以显示该面板。 选项卡面板 包含与选项卡关联的内容的元素。 初始化选项卡式界面时，将显示一个选项卡面板，并对其关联的选项卡进行样式设置，以指示其处于活动状态。当用户激活其他选项卡元素之一时，先前显示的选项卡面板将隐藏，与激活的选项卡关联的选项卡面板将可见，并且该选项卡被视为“活动”。

导入{
组成部分，
ElementRef，
版本
ViewChild，
查看儿童
}从“@角度/核心”；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:[“/app.component.css”]
})
导出类AppComponent{
@ViewChild（“tabs1”）tabs1:ElementRef；
name=“Angular”+VERSION.major；
小报作家；
标签；
小组；
ngAfterViewInit（）{
这个.generateArrays（）；
this.tablist=this.tabs1.nativeElement.queryselectoral(
“[role=“tablist”]”
)[0];
this.activateTab（this.tabs[0]，true）；
这个.setIndex（）；
}
代名词{
this.tabs=this.tabs1.nativeElement.querySelectorAll（'[role=“tab”]'）；
this.panels=this.tabs1.nativeElement.queryselectoral(
“[role=“tabpanel”]”
);
}
//供参考
钥匙={
完:35,，
住址：36，
左：37，
上升：38，
右：39，
下降：40，
删除：46，
输入：13，
空间：32，
表9：，
班次：16
};
//根据按下的键进行加减
方向={
37: -1,
38: -1,
39: 1,
40: 1
};
//绑定侦听器
setIndex（）{
对于（变量i=0；i0）{
var a=文件
.getElementById（父控件）
.firstElementChild.getAttribute（“tabindex”）；
文件
.getElementById（父控件）
.firstElementChild.removeAttribute（“tabindex”）；
//将选项卡设置为选中状态
文件
.getElementById（父控件）
.firstElementChild.setAttribute（“aria selected”、“true”）；
//获取aria控件的值（它是一个ID）
var childControls=文档
.getElementById（父控件）
.firstElementChild.getAttribute（“aria控件”）；
//从选项卡面板中删除隐藏属性以使其可见
getElementById（childControls）.removeAttribute（“隐藏”）；
}
}
//单击选项卡时，将激发activateTab以激活它
clickEventListener（事件：MouseeEvent）{
var选项卡=event.target；
此.activateTab（选项卡，true）；
}
//在这个选项卡上处理keydown
keydownEventListener（事件：KeyboardEvent）{
var key=event.keyCode；
开关（钥匙）{
case this.keys.end：
event.preventDefault（）；
//激活最后一个选项卡
这个.focusLastTab（）；
打破
案例this.keys.home：
event.preventDefault（）；
//激活第一个选项卡
这个.focusFirstTab（）；
打破
//上下都在按键下
//因为我们需要防止页面滚动>：）
case this.keys.up：
case this.keys.down：
这是确定方向（事件）；
打破
case this.keys.tab：
这是确定方向（事件）；
打破
}
}
//在这个选项卡上处理keyup
keyupEventListener（事件：KeyboardEvent）{
var key=event.keyCode；
开关（钥匙）{
案例this.keys.left：
case this.keys.right：
这是确定方向（事件）；
打破
case this.keys.delete：
这是可确定的（事件）；