如何以编程方式或声明方式使用 dojo 制作 dijit 垂直工具栏

Question

使用 dijit/Toolbar 始终呈现水平工具栏。我需要它是垂直的。

<div id="toolbar1" data-dojo-type="dijit/Toolbar"
><div data-dojo-type="dijit/form/Button" id="toolbar1.cut"
    data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCut', showLabel:false">Cut</div
><div data-dojo-type="dijit/form/Button" id="toolbar1.copy"
    data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCopy', showLabel:false">Copy</div
><div data-dojo-type="dijit/form/Button" id="toolbar1.paste"
    data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconPaste', showLabel:false">Paste</div
><!-- The following adds a line between toolbar sections
    --><span data-dojo-type="dijit/ToolbarSeparator"></span
 ><div data-dojo-type="dijit/form/ToggleButton" id="toolbar1.bold"
    data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconBold', showLabel:false">Bold</div>

谢谢

Answer 1

Dojo 的工具栏不能真正垂直，但您可以做的是创建一个 dijit/Menu 而不是将其设置为默认隐藏。

像这样的东西应该可以工作：

<div data-dojo-type="dijit/Menu">
   <div data-dojo-type="dijit/MenuItem" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCut'">Cut</div>
   <div data-dojo-type="dijit/MenuItem" data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconCopy'">Copy</div>
</div>

如果您想以编程方式执行此操作，它也可以。只是不要指定 targetNodeId 并在创建时给小部件一个节点（或 id）。

此外，如果您愿意，您可以修改 MenuItem css 使其看起来像标准按钮（边框半径、框阴影等），但我见过的大多数带按钮的垂直菜单最终都使用更扁平化风格的按钮。

如何以编程方式或声明方式使用 dojo 制作 dijit 垂直工具栏

how to make dijit vertical toolbar with dojo programatically or declaratively

dojo