Skip to main content

Customize Style

Detailed Description​

WUI allows you to customize style for widgets and separate from the application's logical code. The separation promotes cleaner and more maintainable code, as well as enabling designers and developers to collaborate more effectively on the user interface design.

The css property holds the widget's style.

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

The id property holds the id of the widget that is used for customizing the widget style.

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

Adds the class name of this widget with addClass(). The class name is utilized to set the style, all widgets with the same class name use the same style.

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

Adds the attribute of this widget with addAttr(). The attribute is utilized to set the style.

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

Customizing a Button​

First, let's create a button.

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

We are tempted to use this style.

/* .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;
}

Let's improve the style by specifying a outline.

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