css - 如何在 firefox 插件中创建垂直标签？

Question

正在开发带有对话框的 firefox 插件。我希望创建其中包含大量选项卡的选项卡。如何使选项卡显示为垂直 like this ？ tabbox 似乎没有任何 orient 属性.它需要一些 CSS hacking 吗？

Answer 1

经过 2 小时的痛苦搜索，我自己弄明白了。对于任何寻找答案的人，这里是:

• tabbox 容器默认有一个vertical 方向，所以如果我们需要把我们的tabs 放在左边，我们需要让tabbox orientation horizo​​ntal 首先。尽管 tabbox 的 Mozilla 文档没有显示 orient 属性，但它确实有效。或者，您可以设置样式 -moz-box-orient:vertical
• 现在将 tabs 方向更改为 vertical。

有了这两个设置，它现在应该可以工作了。这是示例 xul 代码:

<tabbox id="myTabList" selectedIndex="2" orient="horizontal">
  <tabs orient="vertical">
    <tab label="A First tab"/>
    <tab label="Second tab"/>
    <tab label="Another tab"/>
    <tab label="Last tab"/>
  </tabs>
  <tabpanels>
    <tabpanel><!-- tabpanel First elements go here --></tabpanel>
    <tabpanel><!-- tabpanel Second elements go here --></tabpanel>
    <tabpanel><button label="Click me"/></tabpanel>
    <tabpanel><!-- tabpanel Fourth elements go here --></tabpanel>
  </tabpanels>
</tabbox>

虽然这可行，但可能会导致选项卡呈现效果不佳，因为选项卡边缘处于默认方向。可能需要做一些样式来纠正这一点。