0

在 dijit 工具栏中，默认图标大小为 16x16 px 我想制作一个工具栏，其图标大小为 20x20（或更大，这样用户会更舒服）。

我创建了新图标并将它们添加到 CSS，但我不确定如何调整工具栏本身的大小以显示 20x20 图标。

这是我今天如何创建工具栏的示例：http: //jsfiddle.net/D4BVT/

 <div id="toolbar1" data-dojo-type="dijit/Toolbar" style="background-color:inherit;background-image:none;border-bottom:0px;">
            <div data-dojo-type="dijit/form/Button" id="toolbar1.cut" data-dojo-props="iconClass:'PanIcon', 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>
        </div>
4

1 回答 1

1

The default icons are only 16px (height of them is 18px in CSS), if you want to use bigger icons, then you will have to create custom icon classes in CSS with these bigger icons.

For example:

.customCutIcon {
    background-image: url("http://url.to/your/cut-icon.png");
    width: 32px;
    height: 32px;
}

And then you can use that as your iconClass in your data-dojo-props. The toolbar will automatically adapt to this new height. I also updated your JSFiddle. I used colors in this example, but you can also use icons.

于 2013-10-01T06:32:45.893 回答