Styles
Styles are all predefined in Wisej and roughly correspond to CSS3 styles. Wisej 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 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:
- gradientStartProperty 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.
- gradientEndProperty group: [ endColor, endColorPosition ]
- startColorStart color of the background gradient.
- startColorPositionPosition in percent or pixels where to start the color. It's a number, do not use "%" or "px". Default: 0.
- endColorEnd color of the background gradient.
- endColorPositionPosition in percent or pixels where to start the color. It's a number, do not use "%" or "px". Default: 100.
- orientationThe orientation of the gradient. Allowed values: "horizontal", "vertical"
- colorPositionUnitDefines if the given gradient color position values are in % or px.
- backgroundColorColor of the background.
- backgroundImageThe URL or theme name of the background image
- backgroundRepeatHow the background image should be repeated. Allowed values: "repeat", "repeat-x", "repeat-y", "no-repeat", "scale".
- backgroundSizeThe background size. Allowed values: "auto", CSS size, i.e. "60px 120px", "cover", "contain". See CSS3 background-size.
- fillColorThe fill color for background SVG images.
- backgroundPositionProperty group: [ backgroundPositionX, backgroundPositionY ]
- backgroundPositionXEither a string or a number, which defines the horizontal position of the background image. Allowed values: Integer, "center", "left", "right".
- backgroundPositionYEither a string or a number, which defines the vertical position of the background image. Allowed values: Integer, "center", "top", "bottom".
- borderImageSpecify 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.
- sliceProperty group: [ sliceTop, sliceRight, sliceBottom, sliceLeft ]
- sliceTopThe 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.
- sliceRightThe 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.
- sliceBottomThe 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.
- sliceLeftThe 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.
- repeatProperty group: [ repeatX, repeatY ]
- repeatXSpecifies how the images for the sides and the middle part of the border image are scaled and tiled horizontally. Allowed values: "stretch", "repeat", "round".
- repeatYSpecifies how the images for the sides and the middle part of the border image are scaled and tiled vertically. Allowed values: "stretch", "repeat", "round".
- fillSpecifies whether to use the central part of the border image to fill the element. Allowed values: true, false. Default: true.
- borderImageModeConfigures the border image mode. Allowed values: "horizontal" (left and right borders), "vertical" (top and bottom borders), "grid" (all edges).
- radiusProperty group: [ radiusTopLeft, radiusTopRight, radiusBottomRight, radiusBottomLeft ]
- radiusTopLeftTop left corner radius in pixels.
- radiusTopRightTop right corner radius in pixels.
- radiusBottomRightBottom right corner radius in pixels.
- radiusBottomLeftBottom left corner radius in pixels.
- shadowColorThe color of the shadow.
- shadowSpreadRadiusThe spread radius of the shadow in pixels.
- shadowBlurRadiusThe blur radius of the shadow in pixels.
- shadowLengthProperty group: [ shadowVerticalLength, shadowHorizontalLength ]
- shadowVerticalLengthVertical length of the shadow in pixels.
- shadowHorizontalLengthHorizontal length of the shadow in pixels.
- insetSpecifies whether the shadows are drawn inside the border. Allowed value: true, false. Default: false.
- leftProperty group: [ widthLeft, styleLeft, colorLeft ]
- rightProperty group: [ widthRight, styleRight, colorRight ]
- topProperty group: [ widthTop, styleTop, colorTop ]
- bottomProperty group: [ widthBottom, styleBottom, colorBottom ]
- widthProperty group: [widthTop, widthRight, widthBottom, widthLeft ]
- widthTopTop width of border in pixels.
- widthRightRight width of border in pixels.
- widthBottomBottom width of border in pixels.
- widthLeftLeft width of border in pixels.
- styleProperty group: [ styleTop, styleRight, styleBottom, styleLeft ]
- styleTopTop style of the border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove".
- styleRightRight style of the border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove".
- styleBottomBottom style of the border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove".
- styleLeftLeft style of the border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove".
- colorProperty group: [ colorTop, colorRight, colorBottom, colorLeft ]
- colorTopTop color of the border.
- colorRightRight color of the border.
- colorBottomBottom color of the border.
- colorLeftLeft color of the border.
- innerWidthProperty group: [ innerWidthTop, innerWidthRight, innerWidthBottom, innerWidthLeft ]
- innerWidthTopTop inner border width in pixels.
- innerWidthRightRight inner border width in pixels.
- innerWidthBottomBottom inner border width in pixels.
- innerWidthLeftLeft inner border width in pixels.
- innerColorProperty group: [ innerColorTop, innerColorRight, innerColorBottom, innerColorLeft ]
- innerColorTopTop inner border color.
- innerColorRightRight inner border color.
- innerColorBottomBottom inner border color.
- innerColorLeftLeft inner border color.
- innerOpacityThe opacity of the inner border as a decimal value. Default: 1.
- innerStyleProperty group: [ innerStyleTop, innerStyleRight, innerStyleBottom, innerStyleLeft ]
- innerStyleTopTop style of the inner border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove".
- innerStyleRightRight style of the inner border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove".
- innerStyleBottomBottom style of the inner border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove".
- innerStyleLeftLeft style of the inner border. Allowed values: "none", "solid", "dotted", "dashed", "double", "inset", "outset", "ridge", "groove".
- clipSpecify the painting area of the background. Allowed values: "border-box", "padding-box", "content-box", "initial", "inherit".
- transform
- transitionThis style allows a theme to define simple animations.
- cssCustom 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:
"css": "{\":after\":{\"content\":\"''\",\"display\":\"block\",\"position\":\"absolute\",\"left\":\"0px\",\"bottom\":\"0px\",\"width\":\"100%\",\"height\":\"2px\",\"background-color\":\"focusFrame\",\"transform\":\"scaleX(1)\",\"transition\":\"all 0.3s\"}}
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.
gradientStart and radius property groups
"styles":
{
"gradientStart": ["activeButton", "25"],
"radius": [3, 3, 3, 3]
}
The definition above is equivalent to:
gradientStart and radius properties
"styles":
{
"startColor": ["activeButton", "25"],
"startColorPosition": ["activeButton", "25"],
"radiusTopLeft": 3,
"radiusTopRight": 3,
"radiusBottomRight": 3,
"radiusBottomLeft": 3
}
Property groups that contain CSS values for the four sides or four corners of an element follow the TRBL pattern (top, right, bottom, left).
Last modified 11mo ago