tint2 工具栏项/按钮大小答案

【问题标题】：tint2 ToolbarItem/Button sizetint2 工具栏项/按钮大小
【发布时间】：2015-04-14 14:52:15
【问题描述】：

我正在使用 Tint2 创建桌面应用程序。我想使用本机工具栏功能，当我将ToolbarItem (docs) 添加到工具栏时，它根本不显示：

var toolbar = new Toolbar();

var new_button = new ToolbarItem();
    new_button.title = 'Hello';
    new_button.enabled = true;

toolbar.appendChild(new_button);

win.toolbar = toolbar;

同样，我尝试只使用Button (docs) 而不是ToolbarItem（文档中推荐使用后者）。这会产生一个非常小的按钮 - width 属性被忽略：

var toolbar = new Toolbar();

var new_button = new Button();
    new_button.title = 'Hello';
    new_button.width = '150px';

toolbar.appendChild(new_button);

win.toolbar = toolbar;

【问题讨论】：

标签： node.js desktop-application toolbar

【解决方案1】：

如果您注意到 Toolbar 类上有一个名为“state”的属性，它会设置工具栏使用的显示类型。用户可以设置各种偏好，以决定是否要查看图像、标签或图像或标签。

我的猜测是它的默认值是“仅图像”并且不使用标签。

var toolbar = new Toolbar();

var new_button = new ToolbarItem();
    new_button.title = 'Hello';
    new_button.width = '150px';

toolbar.state = 'label'; // THIS LINE IS IMPORTANT FOR NO IMAGE TOOLBARS.
toolbar.appendChild(new_button);

win.toolbar = toolbar;

您看到的第二个问题是指示某物宽度的工具栏。使用您自己的宽度可能会或可能不会在工具栏上得到尊重。您始终可以将按钮直接放在窗口中，并完全跳过工具栏。

var new_button = new Button();
    new_button.title = 'Hello';
    new_button.width = '150px';
    new_button.left = '20px';
    new_button.top = '20px';

win.appendChild(new_button);

【讨论】：