自定义样式(Style)

Detailed Description

WUI 允许您为控件自定义样式，并将样式与应用程序的逻辑代码分离。这种分离有助于代码更加清晰、易于维护，同时也让设计师和开发者能够更高效地协作完成用户界面设计。

css 属性用于存储控件的样式。

// .ts
widget.css = {
    'border': '1px solid #737373',
    'border-radius': '50%',
    'background-image': 'linear-gradient(lightGray, darkGray)'
}

id 属性用于指定控件的 ID，以便为控件自定义样式。

// .ts
widget.id = 'gradientWidget';

/* .css */
#gradientWidget {
    border: 1px solid #737373;
    border-radius: 50%;
    background-image: linear-gradient(lightGray, darkGray);
}

通过 addClass() 方法为控件添加类名。类名用于设置样式，所有具有相同类名的控件将使用相同的样式。

// .ts
widget.addClass(GradientWidget);

/* .css */
.GradientWidget {
    border: 1px solid #737373;
    border-radius: 50%;
    background-image: linear-gradient(lightGray, darkGray);
}

通过 addAttr() 方法为控件添加属性。属性可用于设置样式。

// .ts
widget.addAttr('gradient');

/* .css */
.Widget[gradient] {
    border: 1px solid #737373;
    border-radius: 50%;
    background-image: linear-gradient(lightGray, darkGray);
}

示例：自定义按钮样式

首先，创建一个按钮：

// .ts
const desktop = Desktop.instance();
const button = new Button(desktop, 'Default Push Button');
button.size = new Size(230, 32);

我们可以为按钮设置以下图形背景：

/* .css */
.Button {
    position: relative;
    background-image: url(woodbutton.png);
    background-size: 48px;
    border-radius: 13px;
    border-top: 1px solid #e9b59b;
    border-left: 1px solid #e9b59b;
    border-bottom: 1px solid #6e3d1c;
    border-right: 1px solid #6e3d1c;
    overflow: visible;
}

通过为按钮指定一个边框轮廓，可以进一步优化样式：

/* .css */
.Button::before {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    bottom: -2px;
    left: -2px;
    border: 1px solid #1f0f06;
    border-radius: 14px;
}