是否创建依赖于Tab的选择列表？Angular 7材料
是的，可以使用Angular 7的Material组件库来创建依赖于Tab的选择列表。
在Angular 7中，通过使用Material组件库中的MatTabs组件和MatTabGroup组件，我们可以轻松创建一个依赖于Tab的选择列表。MatTabs组件用于创建选项卡标题，而MatTabGroup组件则用于管理选项卡内容。
以下是创建依赖于Tab的选择列表的步骤：
- 首先，确保你的Angular项目中已经引入了Angular Material库。可以通过npm进行安装，并在项目的主模块中导入所需的Material模块。
- 在HTML模板中，使用MatTabGroup组件来包裹整个选择列表。设置MatTabGroup的属性来指定选择列表的样式和行为。
- 在MatTabGroup组件中，使用MatTab组件来创建每个选项卡。每个MatTab组件都有一个label属性，用于设置选项卡的标题。
- 在每个MatTab组件内部，添加所需的内容。
以下是一个示例代码：
<mat-tab-group>
<mat-tab label="选项卡1">
<!-- 选项卡1的内容 -->
</mat-tab>
<mat-tab label="选项卡2">
<!-- 选项卡2的内容 -->
</mat-tab>
<mat-tab label="选项卡3">
<!-- 选项卡3的内容 -->
</mat-tab>
</mat-tab-group>在上述示例中，我们创建了一个包含3个选项卡的选择列表。可以根据需求添加或删除选项卡，并在每个选项卡的内容区域内添加所需的HTML内容。
在创建依赖于Tab的选择列表时，可以使用其他的Material组件来增强用户体验，例如MatTabsBar用于自定义选项卡的外观，MatPaginator用于分页等。
如果你想了解更多关于Angular Material的信息，可以访问腾讯云官方文档中关于Angular Material的介绍：Angular Material。
希望这个回答对你有帮助！
相关·内容
2回答
创建和选择角材料标签
、、、
我目前正在使用md-tabs指令的md-tabs属性来控制哪个选项卡是选定的选项卡。创建新选项卡时，我希望选择新创建的选项卡。这在我所包含的演示中是可行的，但是会抛出错误。有更好的办法吗？
联署材料：
$scope.addTab = function (title, view) {
view = view || title + " Content View";
var newIndex = tabs.push({ title: title, content: view, disabled: false});
$scope.selectedIndex = newInd
浏览 2提问于2015-05-26得票数 2
回答已采纳
1回答
我想要建立一个基于角度材料库的定制库，所以我在我的角度项目中添加了角材料，并测试了我的组件中的材料组件，它工作得很好。但是，当我试图在通过ng生成库创建的库中使用角材料之后，我就被错误淹没了。
错误：
BUILD ERROR
: Can't bind to 'ngForOf' since it isn't a known property of 'mat-tab'.
1. If 'mat-tab' is an Angular component and it has 'ngForOf' input, then ve
浏览 0提问于2019-05-09得票数 2
回答已采纳
2回答
我已经创建了垂直选项卡使用角材料，并希望添加Add Tab按钮，我可以添加该按钮，但它添加在底部。我想在垂直标签列表中添加这个按钮。
这里是链接，它在单击按钮时添加选项卡。Add Tab按钮应该在垂直选项卡中。
html:
<mat-tab-group [selectedIndex]="selected.value" (selectedIndexChange)="selected.setValue($event)">
<mat-tab *ngFor="let tab of tabs; let index = index" [
浏览 4提问于2019-11-26得票数 1
回答已采纳
1回答
无论我在Angular 8项目中添加了什么角度材质元素(mat-tab、mat-button、mat-select、mat-input...)，它们都不会更新。例如，在mat-tab中，绘制了涟漪效果，但标签没有改变。垫子-按钮-切换显示了类似的行为。mat-select中的选项不会显示，mat-input中的浮动标签也不会浮动。我的代码基本上来自Angular Material页面：
在AppModule中导入BrowserModule和BrowserAnimationsModule。
HTML：
<mat-tab-group>
<mat-tab label="
浏览 14提问于2019-11-17得票数 0
回答已采纳
3回答
角材料工具栏.材料行为
、、、、
我在一个项目中使用角度和角度的材料。因为这个项目的设计是以材料为基础的，所以我是用角度材料来设计它的部件。
我通过<mat-toolbar>创建了一个工具栏，通过mat-tab-group创建了一个选项卡列表。这一页看起来如下：
一切都没问题。第一个选项卡还包含一个列表，这是问题开始的地方..
问题
根据的说法，当您通常向下滚动列表时：
顶部的条形应该滚动，标签应该在顶部。这不是角质材料的标准行为，我想知道这是否有可能重现？
我在中重新创建了默认行为。
我的版本
角度：7.2.6
角材料：7.3.3
浏览 0提问于2019-03-02得票数 1
回答已采纳
1回答
我开始了一个角度2/材料设计项目，在尝试使用<md-tab-group>组件时遇到了一个问题。我看到了下面的一般结构示例：
<md-tab-group>
<md-tab label="Gallery">
//gallery content here
</md-tab>
<md-tab label="Settings">
//setting content here
</md-tab>
</md-tab-group>
但是，我想模块化每个选项卡及其内容
浏览 3提问于2017-04-05得票数 1
我想知道如何在Dart上设计一个角度材料-标签面板(和它的标签)。
我很难和SASS合作，我认为这就是解决问题的方法。
目前，我有这样的情况：
<material-tab-panel id="my_material_tab_panel">
<material-tab label="First Tab" class="my-material-tabs"></material-tab>
<material-tab label="Second Tab" class="
浏览 0提问于2017-10-17得票数 1
我正在使用Angular2创建一个应用程序，我需要使用选项卡中的按钮在选项卡之间导航。
我的html如下：
<md-tab-group>
<md-tab label="one">
<button md-raised-button>Navigate to Two</button>
<button md-raised-button>Navigate to Three</button>
</md-tab label>
<md-tab label="two">
&
浏览 0提问于2017-03-02得票数 6
回答已采纳
我有一个角度材料标签的问题，我的项目是angular 9。我在里面创建了名为account的子模块，我创建了名为account-layout的组件
这是account-layout.component.html
<div style="padding-top: 64px;">
<p>account-layout works</p>
<mat-tab-group>
<mat-tab label="First"> Content 1 </mat-tab>
浏览 29提问于2020-05-26得票数 1
2回答
我正在使用角8，并希望以下列方式显示角材料标签中的角网格：
<mat-tab-group>
<mat-tab label="Request Flow">
<div class="div-main">
<ag-grid-angular class="ag-theme-balham grid-dimensions" [pagination]="true"
[gridOptions]=
浏览 4提问于2019-10-22得票数 1
回答已采纳
我用的是角Ui自助式。
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
浏览 0提问于2016-03-11得票数 0
回答已采纳
我的工作与角度材料，我想使用垫标签，但显示为垂直标签，而不是水平…
澄清通用材料模块已很好地导入到module.ts文件中，并且其他组件工作正常
import { MatTabsModule } from '@angular/material/tabs';
@NgModule({
exports: [
MatTabsModule
],
})
export class MaterialModule {}
html：
<mat-tab-group>
<mat-tab label="First"> Content 1 <
浏览 1提问于2020-02-21得票数 0
我有一个普通的Javascript应用。我真的不能把它变成一个angular应用。然而，我想在它里面应用角度材料CSS。
浏览 9提问于2020-02-21得票数 0
2回答
这位身材魁梧的新手。过去几个小时，我一直在尝试实现动态创建选项卡的能力。我开始使用材料设计，但我仍然不能做到这一点，也不知道我在哪里犯了这个错误。
按下add选项卡按钮时，什么都不会发生。另外，从ngOnInit中添加或删除选项卡没有任何作用。很明显我错过了什么..。有什么帮助吗？
tabs.ts
import {Component, OnInit} from '@angular/core';
import {Tab} from "./tab";
@Component({
selector: 'tabs',
template: `<
浏览 5提问于2017-04-05得票数 3
回答已采纳
是否有可能创建一个完整的材料设计和删除引导程序的Angular应用程序？它的优点和缺点是什么？
浏览 19提问于2019-01-29得票数 0
2回答
我知道这可能不是一个很好的问题。但我真的不知道该怎么做，我在寻找理由。
我正在运行我的自定义角5+材料2应用程序本地和mat-dialog和mat-tab是非常慢的。我甚至试图关闭动画，但它仍然非常缓慢。
同样，在用ng-build --prod编译生产时，效果也非常缓慢。
所以也许我对对话做错了什么。这是我的代码：
openEditDialog(car:Car) {
let dialogRef = this.dialog.open(EditDemandComponent);
dialogRef.componentInstance.id = car.id;
dial
浏览 2提问于2017-11-24得票数 16
回答已采纳
2回答
如何动态地重新排列角质片
、、、
我有一组7个标签(角质材料)：
<mat-tab-group #tabGroup [selectedIndex]="selectedIndex">
<mat-tab label="Tab 1">Content 1</mat-tab>
<mat-tab label="Tab 2">Content 2</mat-tab>
<mat-tab label="Tab 3">Content 3</mat-tab>
<mat
浏览 0提问于2018-10-22得票数 1
1回答
我试图有一个简单的选项卡视图使用角材料mat-tab-group。
app.module.ts和app.component.html文件-
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatTool
浏览 12提问于2021-12-12得票数 -1
回答已采纳
1回答
我创建了两个页面，第一个是清单，第二个是使用mat-tabs的细节页面。其中一个选项卡包含使用角/元素创建的web组件(ViewComponent)。
下面是详细信息页面的html。
<mat-tab-group>
<-- other tabs -->
<mat-tab *ngIf="tabName === viewComp">
<ng-template mat-tab-label>
<span>{{ label }}</span>
</ng-temp
浏览 9提问于2022-02-11得票数 0
2回答
我用的是角材料2，但我认为这也适用于角材料1。
假设我想使用角度材质标签，但我想隐藏标签或添加一些特定的样式到它。
因此，我有以下html/角材料代码：
<md-tab-group>
<md-tab>
<template md-tab-label> <--- I want to style or hide all these. e.g. "height: 0"
Some tab
</template>
<template md-tab-co
浏览 2提问于2016-11-02得票数 3
1回答
角材质标签动画不工作
、、、
我有角材料导航标签，如下面的样本。标签本身很好，导航也很好。我的问题是动画不起作用。当我点击一个选项卡，而不是动画，我得到三倍大小的标签几秒钟。我的BrowserAnimationsModule和MatTabsModule在我的app.module.ts的进口中。可能会有什么问题？如何修复动画？
<nav mat-tab-nav-bar>
<a mat-tab-link [routerLink]="'/'" routerLinkActive #rla="routerLinkActive" [active]="rla.
浏览 0提问于2018-10-02得票数 2
回答已采纳
1回答
index.html
<!DOCTYPE html>
<html>
<head>
<base href="/">
<title>test website</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="sty
浏览 3提问于2017-09-25得票数 1
我想在我的css中使用材料主题的特定颜色。
例如
.my_tab_group {
border: 1px solid $some_color_from_theme;
}
Angular材质是否通过一些变量显示不同的颜色阴影，以便我可以在我自己的.scss文件中使用(例如，像上面的$some_color_from_theme一样)？
浏览 0提问于2018-03-21得票数 6
我是Angular的新手，我想在material Datepicker上寻求一些帮助。当我们输入1并按tab键离开时，我看到默认值为1/1/2001。我知道这是默认行为。 任何想法，我可以覆盖，并在默认情况下给任何年份。 https://stackblitz.com/angular/bvldlnqdrgk?file=src%2Fapp%2Fdatepicker-overview-example.ts https://material.angular.io/components/datepicker/overview 上面的堆栈闪电战是从材料现场获取的。有人能帮我吗？ 角度10 材料10 提前
浏览 15提问于2021-01-06得票数 0
1回答
我有以下格式的角引导选项卡。(见柱塞)
当选项卡被选中时，select函数应该触发。但奇怪的是，当加载页面时，就会触发第一个选项卡的select函数。(“打印”选项卡选择了动态标题1 onload.)
"http://plnkr.co/edit/vyOOhCdIl7s1Wvou7Dr9?p=preview"
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('Tabs
浏览 1提问于2015-05-18得票数 8
回答已采纳
1回答
在使用带有angularjs的材料时，我有两个md-tab。这两个选项卡包含大部分相同的DOM树结构，只包含一些彼此不同的独特内容。我正在寻找一种替代方案，在这种方案中，我不需要创建两次相同的公共DOM。有没有一种方法，我可以只写一次，然后在两个选项卡中使用它。以下是HTML代码：
<div ng-app="test" ng-controller="TestController">
<md-content>
<md-tabs md-dynamic-height md-border-bottom>
<
浏览 1提问于2017-04-19得票数 3
2回答
我试图创建一个TAB自定义组件使用角度材料9。
这是使用角材料创建TAB的代码：
<mat-tab-group>
<mat-tab label="First"> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
<mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>
我创建了两个新组件：
浏览 6提问于2020-11-11得票数 0
是否有任何方法可以在页面上提供ng视图容器的链接，而其他人则从服务器加载页面？参见这个小提琴，例如：
html：
<div ng-app="test">
<a href="/">tab1</a>
<a href="/tab2">tab2</a>
<a href="/logout">logout</a>
<div ng-view></div>
</div>
联署材料：
angular
浏览 2提问于2013-09-12得票数 0
回答已采纳
我最近将我的项目从Angular 2.4.6更新到Angular 4.0.0-rc.1，之后Angular 2 Material 2 Tab组件似乎无法正常工作。
当我切换选项卡时，内容会彼此重叠。
显然是因为，最新的RC引入并弃用了和模板属性。
谁能指导一下如何克服这个问题，同时材料增加了对Angular 4的支持？
浏览 1提问于2017-02-26得票数 2
在我的应用程序中，使用flexbox时，当页面宽度减小时，材料选项卡不能正确收缩。 我在这里复制了这个问题：https://stackblitz.com/edit/angular-xthdcw 代码： .panel{
padding: 24px;
border: 1px solid black;
margin-right: 20px;
}
.container{
display: flex;
} <div class="container">
<div class="panel">
<mat-tab-grou
浏览 21提问于2019-07-03得票数 2
回答已采纳
1回答
自从我把我的材料更新到beta3之后，我注意到了一些重大的变化。我的样式表是由另一个设计人员使用深度导入编写的，例如：
@import '~@angular/material/core/style/variables';
@import '~@angular/material/toolbar/toolbar';
@include toolbar-responsive-height($mat-toolbar-height-desktop);
产生像Undefined Variable或File to import not found or unreadable这样
浏览 1提问于2017-05-10得票数 0
回答已采纳
Angular 2 rc 5，用Typescript 1.9编码的ng-Material 2 alpha 7
为了获得模板中元素的句柄，我使用@ViewChild()。不幸的是，当元素在角材料选项卡内时，ViewChild不能工作。
模板
<!-- MdTab blocks access to ViewChild -->
<md-tab-group>
<md-tab>
<template md-tab-label>Tab Label</template>
<template md-tab-
浏览 5提问于2016-09-02得票数 1
回答已采纳
在下面的代码中，我在单击'tab‘元素时更改了对象的属性，但是相应的ngbind没有更新。我是否需要调用一些函数来更新视图？
HTML：
<html ng-app="splx">
...
<body ng-controller="Application">
<span ng-bind="obj.val"></span>
<tabpanel selector="obj">
<div tab value="junk&#
浏览 1提问于2013-09-11得票数 2
回答已采纳
我是Angular 2/4的新手，一直很喜欢材料设计组件()。我有一个简单的SPA，它使用选项卡组在动态视图之间切换。我有一个加号按钮，可以添加更多的标签，每个标签都可以自行删除。
我的问题是，能否将mat-tab-group更改为在上部栏(选项卡出现的位置)包含“加号”按钮。现在它位于mat-tab-group div旁边的div中，因此占据了我整个网页右侧的20px，这看起来并不是很好。
浏览 0提问于2017-11-01得票数 12
我有一个Angular 7项目中的*.scss文件。
编译后，编译器将不需要的空格添加到css中，这会导致UI中出现错误结果。
要重现该错误，请转到...
...copy并粘贴以下代码。
$color-background-default: white;
$color-foreground-default: black;
$color-background-disabled: #d3d3d3;
$color-foreground-disabled: #808080;
$color-background-mouseover: #00a7dc;
$color-foreground-mou
浏览 81提问于2019-06-03得票数 0
回答已采纳
5回答
我使用jquery nth-of-type使div上下滑动( slideToggle()和click() )。问题是，当我尝试点击其中一个东西来打开选项卡时，它们就不会打开。
HTML：
<div id="tabs-wrapper">
<div class="op">Tab One</div>
<div class="op">Tab Two</div>
<div class="op">Tab Three</div>
浏览 0提问于2015-04-14得票数 1
回答已采纳
我目前正在使用Angular来构建我的网站--这只是为了熟悉Angular而做的一点测试。 目前，我被困在如何正确地显示数据上。我安装了材料，我正在使用材料表。我可以通过我创建的Material Table显示一个源的数据。 为此，我创建了两个组件:一个组件包含用于创建新数据条目的表单，第二个组件包含表。现在，我想创建第三个组件(又是另一个表单)，它应该使用相同的材料表组件显示数据，但是来自另一个服务而不是第一个表单组件的另一个API调用。 是否可以只使用一个材料表组件和表的dataSource属性来处理不同的应用编程接口调用，或者必须为每个表单组件创建一个表组件？我不认为这是个好办法 不幸
浏览 24提问于2021-07-23得票数 0
回答已采纳
我认为，第一次使用带有角度的材料设计和某些东西是不正确的。
我正在使用md-tab元素，在添加md-border-bottom之前，一切都很好，如AngularJS MD：的文档中所示
底部的边框不会出现。这是我的模板：
<md-tabs md-border-bottom>
<md-tab ng-repeat="league in leagues" label="{{league.caption}}">
{{league.caption}}
</md-tab>
</md-tabs>
这
浏览 0提问于2015-04-17得票数 0
1回答
我使用的角度材料和动态生成标签的HTML。现在，我想在活动或选定的选项卡上显示下拉箭头图标。
我已经创建了下面的代码，但每次它返回虚值。
有人能帮我做这个吗。
import { SelectionModel } from '@angular/cdk/collections';
export class HeaderComponent implements OnInit {
private selection = new SelectionModel();
select(tab) {
if (!this.selection.isSelected(tab)
浏览 3提问于2022-01-21得票数 0
回答已采纳
我正在使用angular 7和angular材质。 我有一个选项卡和一个选择列表，我希望选择列表中显示的值取决于选项卡组上的选择。 不确定什么是实现这一点的最佳方法，我在想一个函数，它从字面上创建一个新的列表，接收两个列表和数据中共同的属性作为参数。 我的选项卡组中充满了字母，然后我会将字母作为属性添加到列表对象中。 有没有更好的方法来做这件事？ 我的代码看起来像这样：(html) <mat-tab class="error-label mat-tab-labels-errors" *ngFor="let areaItem of areaList, let i
浏览 10提问于2019-06-24得票数 0
回答已采纳
1回答
我真的很想知道是否有一种方法可以在下拉列表中创建一个多选择选项和材料设计精简版，我到处搜索，我只能使用materializecss实现它，需要知道它是否有可能使用材料设计精巧。
浏览 2提问于2017-11-28得票数 2
回答已采纳
1回答
我一直从事材料设计工作，并按照的指示尝试了所有选项
我不知道如何更改幻灯片过渡到淡入淡出或其他任何东西。请帮帮忙
<md-tabs md-selected="selectedIndex">
<img ng-src="img/angular.png" class="centered">
<md-tab ng-repeat="tab in tabs | orderBy:predicate:reversed" md-on-select="onTabSelected(tab)" md-on
浏览 1提问于2015-07-08得票数 1
2回答
我试图使用AngularJS创建一个制表器。两个静态选项卡仅作为测试库，其思想是拥有一个对象列表并动态创建选项卡。在这里，代码：
Html：
<body ng-controller="Ctrl" ng-app="app" style="background-color: #f4f4f4">
<table class="tabs-container" border="0" cellspacing="0" cellpadding="0" style="bor
浏览 5提问于2018-01-12得票数 0
回答已采纳
我有一个在材料选项卡中创建的子表单组件：
<md-tab *ngFor="let selectedEntity of selectedEntities; let i=index">
<template md-tab-label>{{selectedEntity.resource.name}}
<i class="fa fa-times" (click)="onTabClose(i)"></i>
</template>
<child-form
浏览 2提问于2017-08-09得票数 3
回答已采纳
在Angular9中，我已经安装了角材料，但是它给出了以下错误.
目标入口点“@角/物质/侧”中的错误缺少依赖项：
@angular/cdk/platform@angular/cdk/scrolling@angular/cdk/a11y@angular/cdk/bidi@angular/cdk/coercion@angular/cdk/keycodes
我试图降低材料版本的等级，但它仍然是错误的。
浏览 5提问于2022-07-07得票数 0
我从：开始本教程
它真的很棒，直到我开始添加角2材料组件。我在app.module.ts中导入了角材料2：
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { UniversalModule } from 'angular2-universal';
import { AppComponent } from './components/app/app.component'
imp
浏览 3提问于2017-03-22得票数 1
3回答
我希望在md选项卡组的底部对齐制表符，如下所示：
在材料1中使用md-tabs-align="bottom".是可能的材料2中是否有可用于此目的的东西？
这是我的代码：
<md-tab-group>
<md-tab label="Tab One">
Tab One Contents
</md-tab>
<md-tab label="Tab Two">
Tab Two Contents
</md-tab>
浏览 3提问于2016-12-23得票数 2
回答已采纳
我正在尝试创建一个ace编辑器，它在角材料中使用时会抛出一个错误
ace.edit找不到div #javascript编辑器
我这里有我的代码 (检查控制台中的错误)
app.component.html
<mat-tab-group>
<mat-tab label="Editor">
<h4>Custom Editor</h4>
<div id="javascript-editor" style="height: 300px;"></div>
浏览 0提问于2019-10-07得票数 3
回答已采纳
我有一个Angular项目，无论我创建了什么规范文件来测试任何组件都失败了，原因是错误:非法状态:无法加载指令的摘要...
例如，我创建了一个包含一些材料设计标签的组件，该组件属于一个名为PagesModule的模块，该组件不执行任何操作：
pages.module.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { SharedModule } from '../_shared/shared.modul
浏览 4提问于2019-10-12得票数 0
1回答
下面的jsx代码不适用于mouseclicks：
import React from 'react';
import Tabs from 'material-ui/lib/tabs/tabs';
import Tab from 'material-ui/lib/tabs/tab';
const Main = () => (
<div>
<Tabs>
<Tab label="Item One" >
<div>
<
浏览 3提问于2016-02-14得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
