Styles are all predefined in Wisej.NET and roughly correspond to CSS3 styles. Wisej.NET creates a dynamic CSS class and applies it to the widgets that use the appearance key and match the state that contains the style. It's very similar to using CSS classes with HTML elements.
Some styles can be overridden by properties: i.e. The backgroundColor style is overridden by the backgroundColor property. The main differences between styles and properties are:
An application cannot change a style value, only a theme can.
Styles go into CSS classes named using the appearance key + state that contains the style, while properties are rendered on the widget's DOM element.
Styles are limited to the Decorators supported by the Wisej.NET JavaScript implementation. Decorators are JavaScript classes in charge of converting the styles set in the theme to CSS values.
Properties are unlimited. The JavaScript that defines a widget can add any number of themeable properties.
This is the full list of all the supported styles:
gradientStart
Property group: [startColor, startColorPosition]
Property groups are composite properties that can set the values of other properties using a shorthand array. See Property Group for more information.
gradientEnd
Property group: [ endColor, endColorPosition ]
startColor
Start color of the background gradient.
startColorPosition
Position in percent or pixels where to start the color. It's a number, do not use "%" or "px". Default: 0.
endColor
End color of the background gradient.
endColorPosition
Position in percent or pixels where to start the color. It's a number, do not use "%" or "px". Default: 100.
orientation
The orientation of the gradient. Allowed values: "horizontal", "vertical"
colorPositionUnit
Defines if the given gradient color position values are in % or px.
backgroundColor
Color of the background.
backgroundImage
The URL or theme name of the background image
backgroundRepeat
How the background image should be repeated. Allowed values: "repeat", "repeat-x", "repeat-y", "no-repeat", "scale".
backgroundSize
The background size. Allowed values: "auto", CSS size, i.e. "60px 120px", "cover", "contain". See CSS3 background-size.
fillColor
The fill color for background SVG images.
backgroundPosition
Property group: [ backgroundPositionX, backgroundPositionY ]
backgroundPositionX
Either a string or a number, which defines the horizontal position of the background image. Allowed values: Integer, "center", "left", "right".
backgroundPositionY
Either a string or a number, which defines the vertical position of the background image. Allowed values: Integer, "center", "top", "bottom".
borderImage
Specify an image as the border around an element. This style allows you to specify an image to be used instead of the normal border around an element. See CSS3 border-image.
slice
Property group: [ sliceTop, sliceRight, sliceBottom, sliceLeft ]
sliceTop
The top slice line of the border image in pixels. The slice properties divide the image into nine regions, which define the corner, edge and the center images.
sliceRight
The right slice line of the border image in pixels. The slice properties divide the image into nine regions, which define the corner, edge and the center images.
sliceBottom
The bottom slice line of the border image in pixels. The slice properties divide the image into nine regions, which define the corner, edge and the center images.
sliceLeft
The left slice line of the border image in pixels. The slice properties divide the image into nine regions, which define the corner, edge and the center images.
repeat
Property group: [ repeatX, repeatY ]
repeatX
Specifies how the images for the sides and the middle part of the border image are scaled and tiled horizontally. Allowed values: "stretch", "repeat", "round".
repeatY
Specifies how the images for the sides and the middle part of the border image are scaled and tiled vertically. Allowed values: "stretch", "repeat", "round".
fill
Specifies whether to use the central part of the border image to fill the element. Allowed values: true, false. Default: true.
borderImageMode
Configures the border image mode. Allowed values: "horizontal" (left and right borders), "vertical" (top and bottom borders), "grid" (all edges).
radius
Property group: [ radiusTopLeft, radiusTopRight, radiusBottomRight, radiusBottomLeft ]
radiusTopLeft
Top left corner radius in pixels.
radiusTopRight
Top right corner radius in pixels.
radiusBottomRight
Bottom right corner radius in pixels.
radiusBottomLeft
Bottom left corner radius in pixels.
shadowColor
The color of the shadow.
shadowSpreadRadius
The spread radius of the shadow in pixels.
shadowBlurRadius
The blur radius of the shadow in pixels.
shadowLength
Property group: [ shadowVerticalLength, shadowHorizontalLength ]
shadowVerticalLength
Vertical length of the shadow in pixels.
shadowHorizontalLength
Horizontal length of the shadow in pixels.
inset
Specifies whether the shadows are drawn inside the border. Allowed value: true, false. Default: false.
left
Property group: [ widthLeft, styleLeft, colorLeft ]
right
Property group: [ widthRight, styleRight, colorRight ]
top
Property group: [ widthTop, styleTop, colorTop ]
bottom
Property group: [ widthBottom, styleBottom, colorBottom ]
width
Property group: [widthTop, widthRight, widthBottom, widthLeft ]
widthTop
Top width of border in pixels.
widthRight
Right width of border in pixels.
widthBottom
Bottom width of border in pixels.
widthLeft
Left width of border in pixels.
style
Property group: [ styleTop, styleRight, styleBottom, styleLeft ]
styleTop
Top style of the border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove".
styleRight
Right style of the border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove".
styleBottom
Bottom style of the border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove".
styleLeft
Left style of the border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove".
color
Property group: [ colorTop, colorRight, colorBottom, colorLeft ]
colorTop
Top color of the border.
colorRight
Right color of the border.
colorBottom
Bottom color of the border.
colorLeft
Left color of the border.
innerWidth
Property group: [ innerWidthTop, innerWidthRight, innerWidthBottom, innerWidthLeft ]
innerWidthTop
Top inner border width in pixels.
innerWidthRight
Right inner border width in pixels.
innerWidthBottom
Bottom inner border width in pixels.
innerWidthLeft
Left inner border width in pixels.
innerColor
Property group: [ innerColorTop, innerColorRight, innerColorBottom, innerColorLeft ]
innerColorTop
Top inner border color.
innerColorRight
Right inner border color.
innerColorBottom
Bottom inner border color.
innerColorLeft
Left inner border color.
innerOpacity
The opacity of the inner border as a decimal value. Default: 1.
innerStyle
Property group: [ innerStyleTop, innerStyleRight, innerStyleBottom, innerStyleLeft ]
innerStyleTop
Top style of the inner border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove".
innerStyleRight
Right style of the inner border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove".
innerStyleBottom
Bottom style of the inner border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove".
innerStyleLeft
Left style of the inner border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove".
clip
Specify the painting area of the background. Allowed values: "border-box", "padding-box", "content-box", "initial", "inherit".
transform
CSS3 transform string. See CSS3 transform.
transition
CSS3 transition string. See CSS3 transition.
This style allows a theme to define simple animations.
css
Custom CSS3 rules.
The css style can define complex CSS3 rules and pseudo element. There is no limit to what can be defined in the css style. This is the animation and pseudo element used in the Material-3 theme when an editable widget gains the focus:
When setting CSS properties directly, Wisej supports both the HTML notation (i.e. "background-color") and the DOM notation (i.e. "backgroundColor").
Property groups are composite properties that can set the values of other properties using a shorthand array. The code below shows a property group used to set related properties. In a theme definition file you can set a property group or a single property or both; they are applied in the order they are declared.
The definition above is equivalent to:
Property groups that contain CSS values for the four sides or four corners of an element follow the TRBL pattern (top, right, bottom, left).