在两(2)行中显示角度材质选项卡
在两行中显示角度材质选项卡通常涉及到前端开发中的布局和样式设计。以下是基础概念和相关解决方案：
基础概念
- 角度材质（Angular Material）：是Angular框架的一个UI组件库，提供了丰富的预定义样式和组件，用于构建现代化的Web应用程序。
- 选项卡（Tabs）：是一种常见的用户界面元素，允许用户在不同的内容区域之间切换。
相关优势
- 一致性：使用角度材质的选项卡可以确保应用程序的UI风格一致。
- 响应式设计：角度材质的组件通常是响应式的，能够适应不同的屏幕尺寸。
- 易于定制：可以通过CSS轻松定制选项卡的外观和行为。
类型
- 底部选项卡：选项卡位于页面底部。
- 顶部选项卡：选项卡位于页面顶部。
- 侧边选项卡：选项卡位于页面侧边。
应用场景
- 导航：用于应用程序的主要导航。
- 内容切换：用于在不同内容块之间切换。
解决方案
要在两行中显示角度材质选项卡，可以使用CSS来调整布局。以下是一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Angular Material Tabs in Two Rows</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@angular/material@12.2.13/prebuilt-themes/indigo-pink.css">
<style>
.tab-container {
display: flex;
flex-wrap: wrap;
}
.mat-tab-label {
flex: 1 1 50%;
text-align: center;
}
</style>
</head>
<body>
<div class="tab-container">
<mat-tab-group>
<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-tab label="Tab 4">Content 4</mat-tab>
</mat-tab-group>
</div>
<script src="https://cdn.jsdelivr.net/npm/@angular/core@12.2.13/bundles/core.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@angular/common@12.2.13/bundles/common.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@angular/compiler@12.2.13/bundles/compiler.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@angular/platform-browser@12.2.13/bundles/platform-browser.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@angular/platform-browser-dynamic@12.2.13/bundles/platform-browser-dynamic.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@angular/material@12.2.13/bundles/material.umd.js"></script>
<script>
const { Component } = ng.core;
const { MatTabsModule } = ng.material;
@Component({
selector: 'app-root',
template: `
<div class="tab-container">
<mat-tab-group>
<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-tab label="Tab 4">Content 4</mat-tab>
</mat-tab-group>
</div>
`
})
class AppComponent {}
ng.platformBrowserDynamic().bootstrapModule(AppComponent);
</script>
</body>
</html>解释
- HTML结构：使用
<mat-tab-group>和<mat-tab>标签来创建选项卡。 - CSS样式：通过
.tab-container和.mat-tab-label类来调整布局，使选项卡在两行中显示。 - JavaScript：引入Angular核心模块和Material模块，并定义一个简单的组件。
参考链接
通过这种方式，你可以轻松地在两行中显示角度材质选项卡，并根据需要进行进一步的定制和优化。
相关·内容
1回答
我正在使用Angular Material Tabs构建一个选项卡组件，随着选项卡数量的增加，它会自动开始水平滚动。而不是这样做，我想打破选项卡，并显示他们在两(2)行。我该怎么做呢？
浏览 46提问于2021-08-16得票数 1
回答已采纳
如link中所述，在角度材质选项卡中，墨水栏未正确显示标题中的选择，可以通过使用视图子对象解决此问题，如Stackblitz中的示例所示。但是，如果你有溢出，如上面的例子所示，下一步和上一步按钮只在选择特定选项卡时出现。 我应该如何处理这个问题，以上面的例子为参考。 图1:未单击的活动选项卡 ? 图2:单击活动选项卡 ?
浏览 11提问于2020-01-22得票数 1
回答已采纳
2回答
我使用的是角度材质2，只有两个选项卡，希望它们占据整个屏幕宽度(每个选项卡占一半，参见pic2)。我如何做到这一点(默认情况下它看起来像pic1)？pic1| ITEM1 | ITEM 2 |----------------
浏览 2提问于2018-01-19得票数 4
回答已采纳
1回答
我对角质材料很陌生.当焦点集中在一个材料选项卡中的一个按钮(添加成就感)到另一个材质选项卡上时，你如何用选项卡键将焦点设置在一个角度材质选项卡上。
浏览 1提问于2020-09-04得票数 0
虽然我在修复标签页眉行方面取得了一些成功，但我就是不能让带有按钮的div也保持不变(我认为这是因为它是标签内容的一部分，而不是标签标题) 有什么想法/解决方案吗？我开始认为角度材质选项卡不适用于我的UI。是否可以手动为选项卡构建呈现的html，并将工具栏按钮div移动到选项卡头容器中？
浏览 19提问于2019-10-13得票数 0
回答已采纳
我用一个循环ngFor显示几个选项卡，使用角度材质选项卡。但是，现在我想打开初始化时的第二个选项卡，而不是第一个选项卡。因此，我在mat选项卡组中添加属性selectedIndex，但是它不能工作，并且仍然在第一个选项卡上继续打开。"> Values: {{tab.values}}
</div>
浏览 0提问于2018-07-14得票数 15
回答已采纳
1回答
我在当前的项目中使用了角度材质，在使用角度材质选项卡时，我遇到了一个问题。我想垂直使用此选项卡，但它不能正常工作。这就像对齐就是中断，它不能像我想要的那样正常工作。任何人都可以给我一个合适的解决方案，我如何才能垂直固定这个角度的材料标签？md-tab-body> data.se
浏览 2提问于2016-10-16得票数 5
1回答
我尝试在CSS网格系统中使用角度材质。我的html代码显示了两个按钮，一个是标准的html按钮，另一个是使用CSS类的Angular材质： <button mat-raised-button{ grid-template-columns: repeat(2, 1fr); gr
浏览 11提问于2018-02-12得票数 0
回答已采纳
当我在我的项目中使用md-autocomplete时，我遇到了一个突出显示文本的问题。突出显示的文本不能正确显示。我试着修改，但失败了。md-input-name="autocompleteField"
md-input-minlength="2"我在等待你的积极回应。
浏览 5提问于2017-08-03得票数 1
标题: Angular 8-在angular材质的网格中显示图像。这些行是从表中检索的，但在显示时失败。
我收到错误:找不到类型为' object‘的不同支持对象'object Object’。-- A lis
浏览 9提问于2019-11-14得票数 0
回答已采纳
我正在使用@angular/material@2.0.0-beta.2。我在display:none容器中有mdTextareaAutosize属性的文本区(弹出窗口)。当我打开弹出窗口时，文本区域有height:0px，初始值没有显示。当我点击文本区域并按下任意键时，会出现初始值。如果我添加布尔条件来显示textarea (*ngIf)，并在2秒内将该条件设为true，那么它就可以工作。但如果没有timeout，它就不能工作。
浏览 3提问于2017-04-18得票数 1
我刚刚开始在我的一个项目中使用ag-grid，并且我创建了一个Cell渲染器来在我的"actions“列中显示按钮，如下所示： ? 一切都很好，但是在我将网格移动到一个有角度的材质中之后，我观察到了一个奇怪的行为。如果您导航到第二个选项卡，然后返回。按钮被推出桌子： ? 您可以查看stackblitz上的行为。
浏览 39提问于2020-11-18得票数 2
回答已采纳
1回答
我正在尝试使用角度材质选项卡模块，但它不能正确渲染。显示的不是选项卡，而是文本。<mat-tab label="Second"> Content 2 </mat-tab>import { B
浏览 0提问于2019-01-03得票数 1
回到以前，我使用bootstrap，现在希望使用Angular材质。在bootstrap和angular绑定中，代码如下<div ng-repeat="product in products"> <h2>{{product.title}}</h2>
<&#x
浏览 0提问于2016-02-02得票数 1
在角度/材质mat-expansion-panel中使用Boostrap 4栅格系统时，栅格元素不适合栅格。一行中的所有元素都不适合，最后一个元素继续到新行。
浏览 14提问于2018-07-20得票数 5
我使用的是角度材质，我有两个组件，即侧面导航栏和工具栏，我想根据侧面导航栏是关闭还是打开来显示两个不同的图像。如果它是打开的，我希望图像显示在它里面，否则显示在工具栏上。我想知道如何在按钮上显示或隐藏图像 (click)=drawer.toggle();
浏览 18提问于2019-02-26得票数 0
回答已采纳
我正在尝试构建一个包含大量数据的表，其中一些数据我希望在单击特定行后以模式显示。我创建了一个组件模式，它应该显示更多的数据，但问题是，当我单击特定的行时，它会将我带到另一个页面，我希望将其显示为模式，而不是在新页面中。这是我的routing.module.js { path: 'sidebarComp', component: SidebarComponent } 有谁知道如何显示新组件而不重定向到新页面？
浏览 6提问于2020-03-26得票数 0
3回答
我在angularjs v1上使用了角度材质。 <h2>Test page</h2>
<md-button h
浏览 2提问于2016-11-14得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
