如何在firefox插件中创建垂直选项卡？

Question

使用对话框处理firefox插件。我希望创建包含大量标签的tabbox。如何使标签显示为垂直like this？ tabbox似乎没有任何orient属性。它需要一些CSS黑客吗？

Answer 1

经过2个小时的痛苦搜索，我自己想通了。对于寻找答案的人来说，这是：

• 默认情况下，tabbox容器的方向为vertical，因此，如果我们需要将标签置于左侧，则需要先设置tabbox方向horizontal。虽然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>

虽然这样可行，但由于标签边缘处于默认方向，因此可能导致标签的渲染效果不佳。可能需要做一些样式来纠正它。

Answer 2

你应该有一个带有多个标签元素的标签框。

将tabbox定位为垂直：https://developer.mozilla.org/en-US/docs/XUL/Attribute/orient

或只使用vbox。对于水平方向使用hbox。