角材料选项卡如何自定义选项卡行并添加文本或下拉列表? [英] Angular Material Tabs how to customize tab row and add text or dropdown list?

问题描述

我目前正在使用角度材质选项卡，并且希望在选项卡之前添加文本，并希望在选项卡之后的行末添加下拉列表.理想情况下，它看起来应如下图所示:

I am currently using angular material tabs and I wish to add text before the tabs and also add a drop down list at the end of the row after the tabs. Ideally it should looks something like the following picture:

我尝试在标签旁边放置标签或创建div，但是这些标签未显示.最后，我创建了另一个选项卡并将其设置为禁用"，但我认为这并不理想，并且无法更改禁用的文本颜色.至于下拉列表，我不知道如何去做.

I tried putting a label or creating a div beside the tabs, however those are not showing. In the end, I created another tab and set it to disabled but I think this is not ideal and I couldn't change the disabled text colour. As for the drop down list I have no clue how to go about it.

我在stackblitz上有一个演示这里

I have a demo on stackblitz HERE

如何自定义标签行并在其中添加文本或下拉列表?

How do I customize the tab row and add text or dropdown list in it?

推荐答案

您可以使用绝对位置来实现所需的功能.您将无法做得更好，因为您使用的组件mat-tab-group无法选择在输入中传递组件以显示所需的位置.

You could use absolute position to achieve what you want. You won't be able to do better than this because the component you are using mat-tab-group does not have the option to pass a component in input to display where you want.

因此，如果要在mat-tab-group中显示不属于mat-tab-group的内容，则必须使用绝对位置.

So if you want to show something inside mat-tab-group that is not part of mat-tab-group, you have to use absolute position.

我在此处更新了您的堆栈闪电

注意:您禁用的Tab技巧也非常好，这是一种技巧，但有时您必须做一些技巧

Note: your disabled Tab trick is very good also, it's a trick but sometimes you have to do some tricks

这篇关于角材料选项卡如何自定义选项卡行并添加文本或下拉列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！