Types

Types For Attributes And Properties

All attributes and css properties have a certain type. All properties and attributes can be written in camelCase or kebab-case, but types must be written only in camelCase. If the value for these attributes or css properties is of a different type, an error will be raised. Here are all of the types that the attributes and css properties can be.

alignContent

Value must be top, bottom or center.

alignImage

Value must be left, right or center.

alignText

Value must be left, right or center.

applyStyle

Value must be date, timer , relative, time, or offset.

bool

Value can be anything but "null" or "false" ("true" is advised).

These tags all have the same fake bool attribute set to true:

<widget>
  <style>
    date {
      bool: true;
    }
  </style>
  <text bool=""></text>
  <date></date>
</widget>

colour

Value must be one or two HTML-supported colours separated by hyphens. HTML supported colours include hsl, hsla, rgb, rgba, hex or css colour names like red. If there are two colours, the first is the light mode colour, and the second is the dark mode colour.

contentMode

Value must be filling or fitting.

decimal

Value must be a positive integer or float (decimal) with an optional % directly at the end.

font

Value must be a valid font name and then a positive integer separated by commas. The font name can also be a pre-set font such as boldSystemFont, lightMonospacedSystemFont or regularRoundedSystemFont . A font based on its content like largeTitle must not have a positive integer and comma.

gradient

Value must be one or more HTML-supported colour or group of light mode/dark mode colours separated by commas. Light mode/dark mode colour groups are created by splitting the light and dark colours by a hyphen with the light colour as the first colour. Example: red, white-black, blue. HTML-supported colours include hsl, hsla, rgb, rgba, hex or css colour names like red.

The value can also have an optional direction or degree as the first parameter. The direction options are to top, to bottom, to right, to left, to top right, to top left, to bottom right, to bottom left., to left top, to left bottom, to right top and to right bottom. A degree is a number, and the keyword deg directly beside (90deg). Example: to top left, #ff00ff, rgb(0,255,0)-rgb(255,0,255), hsl(180, 50%,70%). The default gradient direction is to bottom (0deg).

Beside the colour or colour groups, there is an optional location value. The location must be equal to or between 0 and 1 or be a percentage (50%). Locations must also go in accessing order. Example: 50deg, red 10%, blue 50%, green 0.7.

image

Value must be a valid url leading to an image or a data url starting with data:image/jpeg;base64, or data:image/png;base64, and with the base encoded image following.

layout

Value must be vertically or horizontally.

padding

Value must be one to four positive integers separated by commas. The value can also be default to set the default padding. When positive integers are provided, they match the standard CSS shorthand values. If there is only one, all sides will have the same padding. With two, the first is the top and bottom padding, and the second is the right and left padding. When there are three integers, the first is the top, the second is left and right, and the third is the bottom. With four, the order is top, right, bottom, then left.

point

Value must be 2 integers (they can be negative) separated by commas. The first integer is the x, and the second is the y.

posInt

Value must be a positive integer (satisfy \d+ regex).

size

Value must be two positive integers separated by commas. The first integer is the width, and the second is the height.

url

Value must be a valid URL.

Additional Information

All attributes and properties, no matter the type, can have a value as "null". This makes it so that the attribute or property is not set. The background attribute is not set in the following example:

<widget background="null">
  <!-- You only need the one, the attribute or property to be set to null -->
  <style>
    widget {
      background: null;
    }
  </style>
</widget>

All tags also have the class attribute. This attribute is used with the <style> tag. The value must be one or more word characters, including hyphens separated by spaces.

All tags also have the child bool attribute. This will do nothing to the tags and is only used for the templates.

All tags also have the no-css bool attribute. This will make CSS have no effect over the tag, and its style will not change. This is mainly used for the templates.