角材料选项卡如何自定义选项卡行并添加文本或下拉列表? [英] 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屋!