Angular Material Tabs 如何自定义标签行并添加文本或下拉列表? [英] 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.

我在这里更新了你的stackblitz

注意:你禁用的 Tab 技巧也很好，这是一个技巧，但有时你必须做一些技巧

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

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