eepp CSS custom implementation is heavily based on the official CSS standard. This document will try to explain the shared features and the current differences with the CSS specification. Since CSS is widely used and documented, every feature that it's shared with the CSS standard will be directly linked to the Mozilla CSS documentation. If you are totally new to CSS please go the Mozilla CSS portal.
eepp uses the same CSS engine for native application widgets and for the HTML compatibility layer, but the layout model depends on the type of UI being styled.
-
Browser layout properties such as
display,float, Flexbox, CSS Grid, and CSS positioning are supported by the HTML compatibility layer. They do not define the layout of ordinary native eepp application widgets. Native application UI uses eepp layout containers and properties such aslayout-width,layout-height,layout-weight, andlayout-gravity. Seeui_authoring.mdandui_html_compatibility.md. -
CSS inheritance is supported for properties explicitly defined by eepp as inheritable. CSS custom properties also inherit through the widget hierarchy. Not every property necessarily has the same inheritance semantics as a browser implementation.
-
Attribute selectors are supported. For native widgets they operate on properties exposed by the widget property system. HTML
data-*attributes are also available to selectors on HTML widgets. -
When a pseudo-class or other volatile selector stops matching, eepp restores the current underlying local or stylesheet declaration. If there is no such declaration, it restores the current inherited value or a saved native widget value. Native fallback requires the widget to serialize that property through
getPropertyString(); properties without a serializable native value may not roll back. Application changes to a property while a state-dependent declaration overrides it have no defined rollback behavior. -
Relative resource URLs are resolved against the relevant stylesheet/document base URI when one is available. eepp also supports resource locators for resources already loaded by the application.
-
eepp CSS supports the
dpdevice-independent pixel unit, together with the eepp-specific rounded variantsdpr,dprd, anddpru. -
CSS files should always be UTF-8 encoded.
CSS selectors define the elements to which a set of CSS rules apply.
Universal selector selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces.
Syntax: * ns|* *|*
Example: * will match all the elements of the document.
Type selector selects all elements that have the given node name.
Syntax: elementname
Example: widget will match any <widget> element.
Class selector selects all elements that have the given class attribute.
Syntax: .classname
Example: .index will match any element that has a class of "index".
ID selector selects an element based on the value of its id attribute. There should be only one element with a given ID in a document.
Syntax: #idname
Example: #toc will match the element that has the ID "toc".
The selector list , is a
grouping method, it selects all the matching nodes.
Syntax: A, B
Example: widget, image will match both <widget> and <image> elements.
The descendant combinator " " (space) combinator selects nodes that are descendants of the first element.
Syntax: A B
Example: LinearLayout image will match all <image> elements that are inside a <LinearLayout>
element.
The child combinator >
selects nodes that are direct children of the first element.
Syntax: A > B
Example: LinearLayout > listbox will match all <listbox> elements that are nested directly
inside a <LinearLayout> element.
The general sibling combinator
~ selects siblings. This means that the second element follows the first (though not necessarily
immediately), and both share the same parent.
Syntax: A ~ B
Example: TextView ~ image will match all <image> elements that follow a <TextView>,
immediately or not.
The adjacent sibling combinator
+ selects adjacent siblings. This means that the second element directly follows the first, and
both share the same parent.
Syntax: A + B
Example: TextView + image will match all <image> elements that directly follow an <TextView>.
Native tags are DateTimeEdit, DatePicker, TimePicker, DateTimePicker, and Calendar.
Picker button tags are DatePicker::button and DateTimePicker::button. Calendar subparts
are Calendar::header, ::previous, ::next, ::title, ::weekdays, ::weekday, ::grid,
::day, and ::today (each uses the Calendar prefix). Day-cell classes are selected,
today, outside-month, and focused; unavailable dates use :disabled.
The combined popup exposes DateTimePicker::popup, DateTimePicker::time,
DateTimePicker::time-up, and DateTimePicker::time-down. Time buttons have segment classes
hour, minute, second, millisecond, or am-pm. Standard foreground image/size/tint,
font, padding, border, and color properties style these parts:
DateTimePicker { show-seconds: true; minute-step: 15; }
Calendar { font-size: 12dp; min-width: 160dp; min-height: 160dp; }
DateTimePicker::button { foreground-size: 12dp 12dp; cursor: arrow; }
DateTimePicker[allow-editing=false] > DateTimePicker::button { foreground-tint: gray; }
Calendar::day.selected { background-color: #0078d7; color: white; }Calendars fit their text metrics automatically unless an explicit fixed size overrides them.
Seconds and milliseconds default to hidden; changing display settings also updates an open
native date-time popup. Theme icons are CSS-defined inline SVG images sized in dp.
In HTML documents, style the input host. Anonymous control parts use private light defaults
from the document's user-agent CSS and ignore author rules. HTML temporal constraints use
min, max, step, required, readonly, and disabled, rather than the native bound and
editing properties. See date/time pickers for interactions and APIs,
and HTML compatibility for the supported form behavior.
eepp CSS properties can be categorized in two big groups: CSS standard properties and eepp CSS properties.
Definitions:
- Property names are case insensitive.
- Some properties have aliases.
- All property names that contain dashes (
-), have aliases without those dashes.- For example:
animation-delayalso isanimationDelay. - Other aliases will be clarified in the properties documentation.
- For example:
- All properties can be used as attributes of the XML node.
- XML attributes are treated as inline CSS styling.
- For example:
- Something like:
LinearLayout { layout-width: match_parent; layout_height: match_parent; orientation: vertical; }- is similar to (but not equivalent, since specificity of inline CSS is higher):
<LinearLayout layout_width="match_parent" layout_height="match_parent" orientation="vertical"></LinearLayout>
- CSS standard properties directly linked to the Mozilla docs are fully supported, otherwise a clarification will appear.
- Applicable to will link to the EE::UI::UIWidget that can use that property, and between parenthesis is the CSS element name.
Selects the active segment of a date/time editor. Values: none, day, month, year,
hour, minute, second, millisecond, and am-pm. The segment must exist in the current
display format; none clears segment selection.
- Applicable to: EE::UI::UIDateTimeEdit (DateTimeEdit), EE::UI::UIDatePicker (DatePicker), EE::UI::UITimePicker (TimePicker), EE::UI::UIDateTimePicker (DateTimePicker)
- Data Type: string
- Default value:
none
Read animation-delay docs.
Read animation-direction documentation.
Read animation-duration documentation.
Read animation-fill-mode documentation.
Read animation-iteration-count documentation.
Read animation-name documentation.
Read animation-play-state documentation.
Read animation-timing-function documentation.
Timing function names are custom, and not the same as the standard, but cubic-bezier will be added
soon. Current timing functions supported: linear, quadratic-in, quadratic-out, quadratic-in-out,
sine-in, sine-out, sine-in-out, exponential-in, exponential-out, exponential-in-out, quartic-in,
quartic-out, quartic-in-out, circular-in, circular-out, circular-in-out, cubic-in, cubic-out,
cubic-in-out, back-in, back-out, back-in-out, bounce-in, bounce-out, bounce-in-out, elastic-in,
elastic-out, elastic-in-out, none.
Enable or disable editing on input elements. Read-only date/time controls retain text selection, close an open popup, and mute their calendar button using theme CSS.
- Applicable to: EE::UI::UITextEdit (TextEdit), EE::UI::UITextInput (TextInput), EE::UI::UIDateTimeEdit (DateTimeEdit), EE::UI::UIDatePicker (DatePicker), EE::UI::UITimePicker (TimePicker), EE::UI::UIDateTimePicker (DateTimePicker)
- Data Type: boolean
- Default value:
true
Allows a date/time editor to have no value. Setting this to false initializes an empty
editor from the current date/time, subject to its bounds, and prevents clearing it.
- Applicable to: EE::UI::UIDateTimeEdit (DateTimeEdit), EE::UI::UIDatePicker (DatePicker), EE::UI::UITimePicker (TimePicker), EE::UI::UIDateTimePicker (DateTimePicker)
- Data Type: boolean
- Default value:
true
On a input that only accept numbers, enables floating point numbers.
- Applicable to: EE::UI::UITextInput (TextInput), EE::UI::UISpinBox (SpinBox::input)
- Data Type: boolean
- Default value:
false
Sets the loader speed animation.
- Applicable to: EE::UI::UILoader (Loader)
- Data Type: number
- Default value:
0.5
The angle value where a loader progress starts rendering.
- Applicable to: EE::UI::UILoader (Loader)
- Data Type: number
- Default value:
0
Read background-color documentation.
Sets if the element skin background should be expanded to the element dimensions.
- Applicable to: EE::UI::UISlider (Slider), EE::UI::UIScrollBar (ScrollBar)
- Data Type: boolean
- Default value:
false
Read background-image documentation.
- Applicable to: Any element
- Data Type: resource-path
- Default value:
none
Read background-position-x documentation.
Read background-position-y documentation.
Read background-repeat documentation.
space and round values are not supported yet.
- Default value:
no-repeat(this is different from the CSS standard)
Sets the tint color of the background image.
- Applicable to: Any element
- Data Type: color
- Default value:
white
Read background-size documentation.
Sets the blend mode to the widget.
- Applicable to: Any element
- Data Type: string-list
- Value List:
addalphamultiplynone
- Default value:
alpha
Read border-bottom-color documentation.
Read border-bottom-left-radius documentation.
Read border-bottom-right-radius documentation.
Read border-bottom-width documentation.
Read border-left-color documentation.
Read border-left-width documentation.
Read border-right-color documentation.
Read border-right-width documentation.
Read border-top-color documentation.
Read border-top-left-radius documentation.
Read border-top-right-radius documentation.
Read border-top-width documentation.
Defines where the border box is drawn.
- Applicable to: Any element
- Data Type: string-list
- Value List:
inside: The border will be drawn inside the content box.outside: The border will be drawn outside the content box.outline: The border will be drawn in the middle point between the content box and the border width.
- Default value:
inside
Selects the calendar view: days, months, or years. Changing the view does not select
a date.
- Applicable to: EE::UI::UICalendar (Calendar)
- Data Type: string
- Default value:
days
Sets the percentage of scroll of a page that triggers a page change in a ViewPager.
- Applicable to: EE::UI::UIViewPager (ViewPager).
- Data Type: number (normalized between
0and1) - Default value:
0.33
Sets as checkbox as checked
- Applicable to: EE::UI::UICheckBox (CheckBox).
- Data Type: boolean
- Default value:
false
Checkboxs have two possible interaction modes for changing its checked state.
- Applicable to: EE::UI::UICheckBox (CheckBox).
- Data Type: string-list
- Value List:
element: Checked state will change by clicking anywhere in the widget (clicking over text or icon)button: Checked state will only change by clicking over the icon
- Default value:
element
For any element that has a stepped value change, this sets the step variation for a click to the element.
- Applicable to: EE::UI::UIScrollBar (ScrollBar), EE::UI::UISlider (Slider), EE::UI::UISpinBox (SpinBox).
- Data Type: number
- Default value:
- ScrollBar:
0.1 - Slider:
0.1 - SpinBox:
1
- ScrollBar:
Specifies how the clipping is applied to the element if clip is enabled.
- Applicable to: Any element
- Data Type: string-list
- Value List:
none: No clipping is applied.content-box: Clips the content box of the element (means the whole box).padding-box: Clips the padding box of the element (the whole box minus the padding).border-box: Clips the border box of the element (the content box plus the border).
- Default Value: Varies for each widget/element.
Read color documentation.
Sets the column mode of a grid layout. The column mode defines how the size of the column of a grid layout is measured.
- Applicable to: EE::UI::UIGridLayout (GridLayout)
- Data Type: string-list
- Value List:
size: The column width of each grid child will be defined with a fixed width based on the value of the column-width length.weight: The column width of each grid child will be calculated as a normalized percentage of the total grid width using the column-weight value.
- Default value:
weight
Sets the horizontal separation between each element in the grid layout.
- Applicable to: EE::UI::UIGridLayout (GridLayout)
- Data Type: length
- Default value:
0dp
Sets the percentage width of the child elements of a grid layout.
column-mode must be weight in order to work.
- Applicable to: EE::UI::UIGridLayout (GridLayout)
- Data Type: number (normalized between
0and1) - Default value:
0.25
Sets the width of the child elements of a grid layout.
- Applicable to: EE::UI::UIGridLayout (GridLayout)
- Data Type: length
- Default value:
0
Selects how table and tree view column widths are represented and resized.
- Applicable to: EE::UI::UIAbstractTableView (TableView, TreeView)
- Data Type: string-list
- Value List:
pixels: Column widths are stored as fixed pixel lengths and can extend beyond the available content width.percentage: Visible column widths are stored as normalized percentages of the available content width. Resizing a column adjusts an adjacent visible column to preserve the total.
- Default value:
pixels
Enables a context menu on table and tree view column headers for switching between pixel and percentage column width modes.
- Applicable to: EE::UI::UIAbstractTableView (TableView, TreeView)
- Data Type: boolean
- Default value:
false
Read cursor documentation.
Custom cursors not yet supported (but supported by the engine, only not implemented in the CSS side).
Sets the date display pattern, or locale to use the editor locale. Supported tokens are
d/dd, M/MM, and yy/yyyy; all three date components are required. Single quotes
escape literal text. For example: date-format: "dd/MM/yyyy";. This changes display and
editing, while value retains ISO serialization.
- Applicable to: EE::UI::UIDateTimeEdit (DateTimeEdit), EE::UI::UIDatePicker (DatePicker), EE::UI::UITimePicker (TimePicker), EE::UI::UIDateTimePicker (DateTimePicker)
- Data Type: string
- Default value:
locale
Disables an HTML input when the attribute/property is present, including an empty value. Disabled temporal inputs are excluded from constraint validation and form submission. This HTML presence attribute is distinct from the native enabled boolean property.
- Applicable to: EE::UI::UIHTMLInput (input)
- Data Type: HTML presence attribute
- Default value: Absent
Allows disabling specific behavior flags for the code editor component.
Flags set here take precedence over enable-editor-flags.
Multiple flags are separated by |.
- Applicable to: Any element child of a EE::UI::UICodeEditor (CodeEditor)
- Data Type: string-list
- Value List:
- All flags listed in enable-editor-flags can be used here to disable their respective features.
editorfeatures: Macro Flag - Disables line numbers, whitespace display, folding regions, current line highlight, matching bracket highlight, selection match highlight, color picker, minimap, and find/replace. Resets line breaking and forces the editor to use the default style.
- Default value: No value
Sets the calendar month to display using an ISO date (yyyy-MM-dd). The day component is
normalized to the first day of that month. Navigation does not change the selected value.
- Applicable to: EE::UI::UICalendar (Calendar)
- Data Type: string
- Default value: Current month for a standalone calendar; picker popups synchronize on opening
Allows to set what information should be displayed of the current image.
Multiple flags can be set, flags are separated by |.
- Applicable to: Any child of a EE::UI::UIImageViewer (ImageViewer)
- Data Type: string-list
- Value List:
name: Displays the file namedimensions: Displays the image dimensionspath: Displays the file pathgallery_position: Displays the gallery position of the current image (ex:4 / 15)size: Displays the file sizetype: Displays the image type
- Default value: No value
Enables/disables displaying the percentage of progress in the progress bar.
- Applicable to: EE::UI::UIProgressBar (ProgressBar)
- Data Type: boolean
- Default value:
false
Sets the amount of drag that is needed to start dragging an element.
- Applicable to: EE::UI::UIViewPager (ViewPager)
- Data Type: length
- Default value:
8dp
Sets the foreground color to highlight the current dragged element that its is hovering an element that accepts a drop of the dragged element.
- Applicable to: EE::UI::UITabWidget (TabWidget), EE::UI::UIRoot (:root)
- Data Type: color
- Default value:
#FFFFFF20
Enable or disable editing on table and tree view cells.
- Applicable to: EE::UI::UIAbstractView (TableView, TreeView)
- Data Type: boolean
- Default value:
false
Sets if the element is enabled
- Applicable to: Any element
- Data Type: boolean
- Default value:
true
Allows enabling specific behavior flags for the code editor component. Multiple flags can be specified, separated by |.
- Applicable to: Any element child of a EE::UI::UICodeEditor (CodeEditor)
- Data Type: string-list
- Value List:
linenumber: Displays line numbers in the gutter.foldingregion: Shows code folding regions for collapsing/expanding blocks.whitespaces: Renders whitespace characters (spaces, tabs) as visible symbols.lineendings: Displays line ending characters (e.g., CR, LF).highlightcurrentline: Highlights the background of the current line containing the cursor.highlightmatchingbracket: Highlights the bracket matching the one under the cursor.highlightselectionmatch: Highlights all occurrences of the selected text in the document.colorpickeronselection: Opens a color picker dialog when a color value is selected.verticalscrollbar: Enables the vertical scrollbar for scrolling through content.horizontalscrollbar: Enables the horizontal scrollbar for scrolling through content.colorpreview: Shows a color preview on mouse hover.interactivelinks: Enables interaction with clickable hyperlinks within the editor.displayloader: Displays a loading indicator while the document is loading.defaultcontextmenu: Provides a default context menu with standard editing options.minimap: Shows a minimap (overview) of the document on the right side.autoclosexmltags: Automatically inserts closing tags in XML/HTML documents.findreplace: Enables the find and replace functionality.showindentationguides: Displays vertical guides to indicate indentation levels.linesrelativeposition: Shows the relative position of lines (e.g., in a diff view).lockedicon: Displays a lock icon when the editor is in a locked state.foldsalwaysvisible: Keeps fold markers visible even when not hovered.foldsvisible: Makes folded code regions visible.flashcursor: Enables a flashing animation for the text cursor.defaultstyle: Applies the default styling and theme to the editor.
- Default value: No value
If true the inner element for text is expanded to occupy as much horizontal space as possible.
- Applicable to: EE::UI::UIPushButton (PushButton) and any element that extends it: UIMenuItem, UISelectButton (SelectButton), UITableCell , UITableHeaderColumn.
- Data Type: boolean
- Default value:
false
Sets the first weekday of the calendar: Sunday 0 through Saturday 6. This controls
the weekday header and day-grid ordering.
- Applicable to: EE::UI::UICalendar (Calendar)
- Data Type: integer
- Default value: The calendar locale's first weekday
Sets the calendar keyboard-focus date using ISO format (yyyy-MM-dd). It is clamped to
the calendar bounds and brings its month into view without selecting it.
- Applicable to: EE::UI::UICalendar (Calendar)
- Data Type: string
- Default value: Today for a standalone calendar; picker popups synchronize on opening
Read font-family documentation.
Read font-size documentation.
Read font-style documentation.
Read font-weight documentation.
Supported values: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600,
700, 800, 900, plus named weights thin (100), extra-light / extralight (200),
light (300), medium (500), semi-bold / semibold (600), extra-bold / extrabold (800),
black / heavy (900).
Weights >= 600 (SemiBold) set the Text::Bold style flag and will resolve to the nearest matching
system font variant when available. The font shorthand property also supports the weight token.
Sets the fill color of a element.
- Applicable to: EE::UI::UILoader (Loader)
- Data Type: color
- Default value:
white
Allows to set some very specific flags to the element.
Multiple flags can be set, flags are separated by |.
- Applicable to: Any element
- Data Type: string-list
- Value List:
autosize: This flag allows the widget/element to resize itself to a minimum size that allows the widget to be fully visible.clip: Enables clipping of the element box.multiselect: Enables multiple selection on elements that support selection. EE::UI::UIListBox (ListBox) for the moment.autopadding: Enables the element to calculate the padding based on the skin size.reportsizechangetochildren: When enabled the element will emit a event (OnParentSizeChange) to its children reporting the size change of the parent.
- Default value: No value
Same as border-bottom-left-radius but for the foreground of the node.
Same as border-bottom-right-radius but for the foreground of the node.
Same as background-color but for the foreground.
Same as background-image but for the foreground.
- Applicable to: Any element
- Data Type: resource-path
- Default value:
none
Same as background-position-x but for the foreground.
Same as background-position-y but for the foreground.
Same as background-repeat but for the foreground.
Same as background-size but for the foreground.
Sets the tint color of the foreground image.
- Applicable to: Any element
- Data Type: color
- Default value:
white
Same as border-top-left-radius but for the foreground of the node.
Same as border-top-right-radius but for the foreground of the node.
Sets the horizontal and vertical align of the inner elements/contents of a widget (for example the
text on a TextView). Vertical and horizontal can be set by using | as a separator of each rule.
- Applicable to: Any element. This applies at the EE::UI::UIWidget (Widget) level, the base element of all widgets. But every widget has it's own behaviour, based on it's own content. Some may not do anything.
- Data Type: string-list
- Value List:
leftrightcenter_horizontaltopbottomcenter_verticalcenter: shorthand ofcenter_horizontal|center_vertical
- Default value: Varies on each widget implementation.
- Syntax:
gravity: center;
gravity: left;
gravity: left|top;
gravity: center_horizontal|bottom;Widgets elements can inform that own children position using a special flag on its implementation (UI_OWNS_CHILDREN_POSITION). Sometimes some layouts may need to override the parent behavior that uses that flag. This flag will let the layout manage his gravity against its parent in all cases.
- Applicable to: Any layout element.
- Data Type: boolean
- Default value:
false
Defines how the slider widget should set its movement limits against the slider.
With half-slider enabled the button will start and end from its center (and not its border).
- Applicable to: EE::UI::UISlider (Slider)
- Data Type: boolean
- Default value:
false
Sets the hint text of an input. This is the equivalen of placeholder in HTML.
Usually this property will not be set in the CSS file but in the XML as an attribute or from the
code implementation, but it's available as an option.
- Applicable to: EE::UI::UITextInput (TextInput)
- Data Type: string
- Default value: No value
Sets the hint font color.
- Applicable to: EE::UI::UITextInput (TextInput)
- Data Type: color
- Default value:
white
Sets the hint display mode.
- Applicable to: EE::UI::UITextInput (TextInput)
- Data Type: string-list
- Value List:
always: Always visiblefocus: Visible on focus
- Default value:
always
Sets the hint font family.
- Applicable to: EE::UI::UITextInput (TextInput)
- Data Type: string
- Default value: No value
Sets the hint font size.
- Applicable to: EE::UI::UITextInput (TextInput)
- Data Type: length
- Default value:
12px
Sets the hint font style.
- Applicable to: EE::UI::UITextInput (TextInput)
- Data Type: string-list
- Value List:
underlinebolditalicstrikethroughshadow: Drops a shadow to the text.
- Default value: No value
Sets the hint font shadow color.
- Applicable to: EE::UI::UITextInput (TextInput)
- Data Type: color
- Default value:
#323232E6
Sets the hint font stroke (the outline) color.
- Applicable to: EE::UI::UITextInput (TextInput)
- Data Type: color
- Default value:
black
Sets the hint font shadow offset.
- Applicable to: EE::UI::UITextView (TextView) and any element that holds inside text or extends from a TextView. EE::UI::UICheckBox (CheckBox), EE::UI::UIRadioButton (RadioButton), EE::UI::UITextInput (TextInput), EE::UI::UIListBoxItem (ListBox::item), EE::UI::UIDropDownList (DropDownList), EE::UI::UIPushButton (PushButton), EE::UI::UIToolti (Tooltip)
- Data Type: vector2-length
- Default offset:
1dp 1dp
Sets the hint font stroke (the outline) width.
- Applicable to: EE::UI::UITextInput (TextInput)
- Data Type: length
- Default value:
0dp
Sets the hour cycle for locale-derived time patterns: locale, 12, or 24. Aliases
h12 and h24 are accepted as values. An explicit time-format defines its
own hour tokens and takes precedence.
- Applicable to: EE::UI::UIDateTimeEdit (DateTimeEdit), EE::UI::UIDatePicker (DatePicker), EE::UI::UITimePicker (TimePicker), EE::UI::UIDateTimePicker (DateTimePicker)
- Data Type: string
- Default value:
locale
Sets the positive integer hour increment for stepping the active hour segment, including date-time popup steppers. Time-only stepping wraps within the day; date-time stepping carries across date boundaries.
- Applicable to: EE::UI::UIDateTimeEdit (DateTimeEdit), EE::UI::UIDatePicker (DatePicker), EE::UI::UITimePicker (TimePicker), EE::UI::UIDateTimePicker (DateTimePicker)
- Data Type: integer
- Default value:
1
Specifies the link destination of an Anchor element
- Applicable to: EE::UI::UIAnchor (Anchor)
- Data Type: string
- Default value:
0dp
Sets the horizontal scroll mode to any scrollable element. The mode defines the visibility of the horizontal scroll.
- Applicable to: EE::UI::DropDownList (DropDownList), EE::UI::UIListBox (ListBox), EE::UI::UIScrollView (ScrollView), EE::UI::UIWidgetTable (WidgetTable), EE::UI::UITextEdit (TextEdit).
- Data Type: string-list
- Value List:
auto: The horizontal scrollbar will be visible only when needed.on: The horizontal scrollbar will be always visible.off: The horizontal scrollbar will be always hidden.
- Default value:
auto
Sets an icon to an element that support icons.
- Applicable to: EE::UI::UIImage (Image), EE::UI::UIPushButton (PushButton), EE::UI::UITab (Tab)
- Data Type: resource-path
- Default value: No value
Sets the cell icon size in table and tree views.
- Applicable to: EE::UI::UIAbstractTableView (TableView, TreeView)
- Data Type: length
- Default value:
12dp
Sets the indentation width for each nesting level in a tree view.
- Applicable to: EE::UI::UITreeView (TreeView)
- Data Type: length
- Default value:
6dp
Enables/disables indeterminate mode for a loader. Indeterminate mode is used when the progress of the load can't be determined.
- Applicable to: EE::UI::UILoader (Loader)
- Data Type: boolean
- Default value:
true
PushButton can contain 3 widgets: the text (textbox), the icon, and a custom extra item. And with these 3 items does its own layouting. This property allows configuring the order in which these items are displayed/sorted inside the button.
-
Applicable to: EE::UI::UIPushButton (PushButton) and any element that extends it: UIMenuItem, UISelectButton (SelectButton), UITableCell , UITableHeaderColumn.
-
Data Type: string-list
-
Value List (Widget is the custom widget):
widgeticontextbox: Widget | Icon | TextBoxwidgettextboxicon: Widget | TextBox | Iconicontextboxwidget: Icon | TextBox | Widgeticonwidgettextbox: Icon | Widget | TextBoxtextboxiconwidget: TextBox | Icon | Widgettextboxwidgeticon: TextBox | Widget | Icon
-
Default value:
widgeticontextbox
Sets the input mode of the element.
- Applicable to: EE::UI::UITextInput (TextInput)
- Data Type: string-list
- Value List:
normal: Normal text input.password: Password text input (bullets).
- Default value:
normal
The layout gravity defines how the element gravitates against its parent (when possible). Gravity
specifies how a component should be placed in its group of cells. Must be one or more (separated by
|) of the value list values. This behaves as the android:layout_gravity
XML attribute (for those who are familiar with).
- Applicable to: Any element child of a layout element
- Data Type: string-list
- Value List:
left: Push element to the left of its container.right: Push element to the right of its container.center_horizontal: Push element to the horizontal center of its container.top: Push element to the top of its container.bottom: Push element to the bottom of its container.center_vertical: Place element in the vertical center of its container.center: shorthand ofcenter_horizontal|center_vertical
- Default value:
left|top - Aliases:
layout_gravity,lg
Specifies the basic height of the element. This is a required attribute for any element inside of a
containing layout element that doesn't use any fixed size for its children (ej: EE::UI::UILinearLayout,
EE::UI::UIRelativeLayout). Its value may be a length/dimension (such as 12dp) for a constant height
or one of the special constants.
- Applicable to: Any element child of a EE::UI::UILinearLayout (LinearLayout) or EE::UI::UIRelativeLayout (RelativeLayout)
- Data Type: length or string-list
- Value List: (for the constant values)
match_parent: The element must be as big as its parent.wrap_content: The element should be only big enough to enclose its content (plus padding).
- Default value:
wrap_content - Aliases:
layout_height,lh
Positions the top edge of this element below the given anchor element ID. Accommodates top margin of this element and bottom margin of anchor view.
- Applicable to: Any child of a EE::UI::UIRelativeLayout (RelativeLayout)
- Data Type: string (anchor element ID)
- Default value: No value
- Aliases:
layout_to_bottom_of
Positions the right edge of this element to the left of the given anchor element ID. Accommodates right margin of this element and left margin of anchor element.
- Applicable to: Any child of a EE::UI::UIRelativeLayout (RelativeLayout)
- Data Type: string (anchor element ID)
- Default value: No value
- Aliases:
layout_to_left_of
Positions the left edge of this element to the right of the given anchor element ID. Accommodates left margin of this element and right margin of anchor element.
- Applicable to: Any child of a EE::UI::UIRelativeLayout (RelativeLayout)
- Data Type: string (anchor element ID)
- Default value: No value
- Aliases:
layout_to_right_of
Positions the bottom edge of this element above the given anchor element ID. Accommodates bottom margin of this element and top margin of anchor view.
- Applicable to: Any child of a EE::UI::UIRelativeLayout (RelativeLayout)
- Data Type: string (anchor element ID)
- Default value: No value
- Aliases:
layout_to_top_of
Indicates how much of the remaining space in a EE::UI::UILinearLayout (LinearLayout) is allocated
to the element along the layout orientation.
A value of 0 means that the element does not participate in weighted space distribution.
Positive values are treated as relative weights. The remaining space is distributed among all
visible children with a positive weight proportionally to each child's weight:
childSize = remainingSpace * childWeight / totalWeight
where totalWeight is the sum of all positive child weights.
Weights do not need to be normalized or sum to 1. For example, the following weight pairs are
equivalent:
1 / 3
0.25 / 0.75
25 / 75
The weight is applied to the axis corresponding to the LinearLayout orientation.
For a horizontal LinearLayout, the weighted child should normally use:
layout-width: 0;
For a vertical LinearLayout, the weighted child should normally use:
layout-height: 0;
This allows the layout to assign the weighted dimension entirely from the available remaining space.
- Applicable to: Any element child of a
EE::UI::UILinearLayout(LinearLayout) - Data Type: number
- Default value:
0 - Aliases:
layout_weight,lw8
Specifies the basic width of the element. This is a required attribute for any element inside of a
containing layout element that doesn't use any fixed size for its children (ej: EE::UI::UILinearLayout,
EE::UI::UIRelativeLayout). Its value may be a length/dimension (such as 12dp) for a constant width
or one of the special constants.
- Applicable to: Any element child of a EE::UI::UILinearLayout (LinearLayout) or EE::UI::UIRelativeLayout (RelativeLayout)
- Data Type: length or string-list
- Value List: (for the constant values)
match_parent: The element must be as big as its parent.wrap_content: The element should be only big enough to enclose its content (plus padding).
- Default value:
wrap_content - Aliases:
layout_width,lw
Read light-dark documentation.
Sets a extra line spacing to the line box.
- Applicable to: Any element child of a EE::UI::UICodeEditor (CodeEditor)
- Data Type: length
- Default value:
0dp
Specifies the line wrap mode of the element.
- Applicable to: Any element child of a EE::UI::UICodeEditor (CodeEditor)
- Data Type: string-list
- Value List:
word: Wraps against words.letter: Wraps against letters.nowrap: Does not wrap.
- Default value:
nowrap
Specifies if line must wrap against its viewport or the defined line breaking column.
- Applicable to: Any element child of a EE::UI::UICodeEditor (CodeEditor)
- Data Type: string-list
- Value List:
viewport: Wrap against the element viewport.line_breaking_column: Wraps against the line breaking column.
- Default value:
viewport
Enable or disable editing on code editor elements.
- Applicable to: EE::UI::UICodeEditor (TextEdit)
- Data Type: boolean
- Default value:
false
Sets the column index that should be prioritized to occupy as much space as possible when auto-columns or auto-expand is enabled.
- Applicable to: EE::UI::UIAbstractTableView (TableView, TreeView)
- Data Type: integer
- Default value:
0
Read margin-bottom documentation.
- Aliases:
layout_marginBottom
Read margin-left documentation.
- Aliases:
layout_marginLeft
Read margin-right documentation.
- Aliases:
layout_marginRight
Read margin-top documentation.
- Aliases:
layout_marginTop
Sets the maximum valid value for HTML date, time, and datetime-local inputs.
Use the input type's ISO value syntax (see value). Invalid bounds are ignored.
Out-of-range values report a validation error rather than being silently clamped. Time
ranges with min later than max wrap across midnight.
- Applicable to: EE::UI::UIHTMLInput (input)
- Data Type: string
- Default value: No bound
Sets the inclusive maximum for native date mode using ISO syntax
(yyyy-MM-dd). Native editors clamp values to their active mode's bounds. Calendar bounds
also disable unavailable dates.
An empty string removes the bound. If the bounds cross, the opposite bound moves to the
new bound. HTML inputs use min and max instead.
- Applicable to: EE::UI::UIDateTimeEdit (DateTimeEdit), EE::UI::UIDatePicker (DatePicker), EE::UI::UITimePicker (TimePicker), EE::UI::UIDateTimePicker (DateTimePicker), EE::UI::UICalendar (Calendar)
- Data Type: string
- Default value: No bound
Sets the inclusive maximum for native datetime mode using ISO syntax
(yyyy-MM-ddTHH:mm:ss[.SSS]). Native editors clamp values to their active mode's bounds.
An empty string removes the bound. If the bounds cross, the opposite bound moves to the
new bound. HTML inputs use min and max instead.
- Applicable to: EE::UI::UIDateTimeEdit (DateTimeEdit), EE::UI::UIDatePicker (DatePicker), EE::UI::UITimePicker (TimePicker), EE::UI::UIDateTimePicker (DateTimePicker)
- Data Type: string
- Default value: No bound
Sets the inclusive maximum for native time mode using ISO syntax
(HH:mm:ss[.SSS]). Native editors clamp values to their active mode's bounds.
An empty string removes the bound. If the bounds cross, the opposite bound moves to the
new bound. HTML inputs use min and max instead.
- Applicable to: EE::UI::UIDateTimeEdit (DateTimeEdit), EE::UI::UIDatePicker (DatePicker), EE::UI::UITimePicker (TimePicker), EE::UI::UIDateTimePicker (DateTimePicker)
- Data Type: string
- Default value: No bound
Read max-height documentation.
Read max-width documentation.
On a view pager the max edge resistance allows to scroll outside the edge limits by a percentage of the element width/height (depending on the view pager orientation) and automatically go back to the final position when released.
- Applicable to: EE::UI::UIViewPager (ViewPager)
- Data Type: number (normalized between
0and1) - Default value:
0
Sets the maximum length of an input.
- Applicable to: EE::UI::UITextInput (TextInput)
- Data Type: integer
- Default value: No value
Sets the maximum number of progress that a loader can have.
- Applicable to: EE::UI::UILoader (Loader)
- Data Type: number
- Default value:
100
Sets the maximum tab width accepted in a tab widget.
- Applicable to: EE::UI::UITabWidget (TabWidget)
- Data Type: length
- Default value:
300dp
Sets the maximum text length in a tab.
- Applicable to: EE::UI::UITabWidget (TabWidget)
- Data Type: integer
- Default value:
100
Sets the maximum value that a range element will hold.
- Applicable to: EE::UI::UISlider (Slider), EE::UI::UIScrollBar (ScrollBar), EE::UI::UISpinBox (SpinBox)
- Data Type: number
- Default value:
1for Slider and ScrollBar. Float numeric limits for SpinBox.
Sets the maximum visible items for the list shown by a drop down list or combo box.
- Applicable to: EE::UI::UIDropDownList (DropDownList)
- Data Type: integer
- Default value:
10
Sets how is the dropdown-menu width calculated.
- Applicable to: EE::UI::UIDropDownList (DropDownList), EE::UI::UIComboBox (ComboBox)
- Data Type: string-list
- Value List:
dropdown: Same width as the dropdown button.contents: The length of its contents.contents-center: The length of its contents but centered against the dropdown button.expand-if-needed: Same width as the dropdown button unless its contents are larger than the dropdown button, in that case it will expand to its contents.expand-if-needed-center: Same asexpand-if-neededbut centered against the dropdown button.
- Default value:
dropdown
Sets the minimum valid value for HTML date, time, and datetime-local inputs.
Use the input type's ISO value syntax (see value). Invalid bounds are ignored.
Out-of-range values report a validation error rather than being silently clamped. Time
ranges with min later than max wrap across midnight.
- Applicable to: EE::UI::UIHTMLInput (input)
- Data Type: string
- Default value: No bound
Sets the inclusive minimum for native date mode using ISO syntax
(yyyy-MM-dd). Native editors clamp values to their active mode's bounds. Calendar bounds
also disable unavailable dates.
An empty string removes the bound. If the bounds cross, the opposite bound moves to the
new bound. HTML inputs use min and max instead.
- Applicable to: EE::UI::UIDateTimeEdit (DateTimeEdit), EE::UI::UIDatePicker (DatePicker), EE::UI::UITimePicker (TimePicker), EE::UI::UIDateTimePicker (DateTimePicker), EE::UI::UICalendar (Calendar)
- Data Type: string
- Default value: No bound
Sets the inclusive minimum for native datetime mode using ISO syntax
(yyyy-MM-ddTHH:mm:ss[.SSS]). Native editors clamp values to their active mode's bounds.
An empty string removes the bound. If the bounds cross, the opposite bound moves to the
new bound. HTML inputs use min and max instead.
- Applicable to: EE::UI::UIDateTimeEdit (DateTimeEdit), EE::UI::UIDatePicker (DatePicker), EE::UI::UITimePicker (TimePicker), EE::UI::UIDateTimePicker (DateTimePicker)
- Data Type: string
- Default value: No bound
Sets the inclusive minimum for native time mode using ISO syntax
(HH:mm:ss[.SSS]). Native editors clamp values to their active mode's bounds.
An empty string removes the bound. If the bounds cross, the opposite bound moves to the
new bound. HTML inputs use min and max instead.
- Applicable to: EE::UI::UIDateTimeEdit (DateTimeEdit), EE::UI::UIDatePicker (DatePicker), EE::UI::UITimePicker (TimePicker), EE::UI::UIDateTimePicker (DateTimePicker)
- Data Type: string
- Default value: No bound
Read min-height documentation.
Sets the minimum size of the icon inside a push button (or any widget that extends from it, for example a menu item or a tab). It's usually required for the EE::UI::UIMenu (Menu) since the icon box must have a size if the menu contains items with icons and others without, otherwise the menu items will be misaligned.
- Applicable to: EE::UI::UIPushButton (PushButton), EE::UI::UIMenuItem (Menu::item), EE::UI::UITab (Tab), EE::UI::UISelectButton (SelectButton), EE::UI::UIMenuCheckBox (Menu::checkbox), EE::UI::UIMenuSubMenu (Menu::SubMenu)
- Data Type: vector2-length
- Default value: No value
Sets the minimum width that a tab can have inside a EE::UI::UITabWidget (TabWidget).
- Applicable to: EE::UI::UITabWidget (TabWidget)
- Data Type: length
- Default value:
32dp
Sets the minimum value that a range element will hold.
- Applicable to: EE::UI::UISlider (Slider), EE::UI::UIScrollBar (ScrollBar), EE::UI::UISpinBox (SpinBox)
- Data Type: number
- Default value:
0
Sets the positive integer minute increment when stepping the active minute segment or
using the date-time popup's minute buttons. For example, minute-step: 15; advances by
fifteen minutes. This controls the increment, not validation or snapping to multiples.
- Applicable to: EE::UI::UIDateTimeEdit (DateTimeEdit), EE::UI::UIDatePicker (DatePicker), EE::UI::UITimePicker (TimePicker), EE::UI::UIDateTimePicker (DateTimePicker)
- Data Type: integer
- Default value:
1
Read min-width documentation.
Sets the movement speed in displaced length per second of the progress bar filler.
- Applicable to: EE::UI::UIProgressBar (ProgressBar)
- Data Type: vector2-length
- Default value:
0dp 0dp
Sets the shared editor mode: date, time, or datetime. The picker classes initialize
their corresponding mode automatically. Values and display formats follow the active mode.
- Applicable to: EE::UI::UIDateTimeEdit (DateTimeEdit), EE::UI::UIDatePicker (DatePicker), EE::UI::UITimePicker (TimePicker), EE::UI::UIDateTimePicker (DateTimePicker)
- Data Type: string
- Default value:
datefor DateTimeEdit and DatePicker;timefor TimePicker;datetimefor DateTimePicker
Sets the text input as a numeric input, this means that only numbers will be accepted and if allow-float also is enabled it will allow numeric float numbers.
- Applicable to: EE::UI::UITextInput (TextInput)
- Data Type: boolean
- Default value:
false
Read opacity documentation.
Sets the orientation to any element that allows vertical and horizontal orientation.
- Applicable to: EE::UI::UILinearLayout (LinearLayout), EE::UI::UISlider (Slider), EE::UI::UIScrollBar (ScrollBar), EE::UI::UIViewPager (ViewPager)
- Data Type: string-list
- Value List:
horizontalvertical
- Default value:
verticalfor LinearLayout, Slider and ScrollBar,horizontalfor ViewPager
Sets the outline thickness of the loader spinner.
- Applicable to: EE::UI::UILoader (Loader)
- Data Type: length
- Default value:
8dp
Indicates the element ID that the Tab element owns. The ownership indicates that the element ID is going to be shown when the Tab element is selected, and will be closed if the Tab is closed. The owned element will be automatically resized to the tab widget container size.
- Applicable to: EE::UI::UITab (Tab)
- Data Type: string (element ID)
- Default value: No value
Read padding-bottom documentation.
Read padding-left documentation.
Read padding-right documentation.
Read padding-top documentation.
Locks/unlocks the current page in a view pager (locking means that the page cannot be changed and it's not scrollable).
- Applicable to: EE::UI::UIViewPager (ViewPager)
- Data Type: boolean
- Default value:
false
Sets the length value that needs the element to scroll a page. Currently the page step it's not used by any element but it's a value that can be fetched to implement a page up and down in a scrollable component.
- Applicable to: EE::UI::UISlider (Slider), EE::UI::UIProgressBar (ProgressBar)
- Data Type: number
- Default value:
0
Exposes whether the calendar popup is currently open as true or false, for inspection,
binding and attribute selectors. This property is read-only; a declaration does not open
or close the popup. Use the picker API or normal keyboard/mouse interaction.
- Applicable to: EE::UI::UIDatePicker (DatePicker), EE::UI::UIDateTimePicker (DateTimePicker)
- Data Type: boolean
- Default value:
false
Sets whether a dropdown or picker popup is parented to the scene root instead of its parent window container. Popup placement is clamped to the scene's visible viewport.
- Applicable to: EE::UI::UIDropDownList (DropDownList), EE::UI::UIDatePicker (DatePicker), EE::UI::UIDateTimePicker (DateTimePicker)
- Data Type: boolean
- Default value:
false
Sets the current progress of any type of progress bar or loader.
- Applicable to: EE::UI::UIProgressBar (ProgressBar), EE::UI::UILoader (Loader)
- Data Type: number
- Default value:
0
Sets the radius of a loader. This will not change the size of the loader, only the loader internal size.
- Applicable to: EE::UI::UILoader (Loader)
- Data Type: length
- Default value:
0(but it will change with the loader layout size)
Enables/disables the reverse draw order for the element. When enabled the element will draw from the last child to the first.
- Applicable to: Any element
- Data Type: boolean
- Default value:
false
Makes an HTML input read-only when the attribute/property is present, including an empty value. Temporal inputs retain text selection but prevent value edits and opening their popup, and are excluded from constraint validation. Use allow-editing for native date/time controls.
- Applicable to: EE::UI::UIHTMLInput (input)
- Data Type: HTML presence attribute
- Default value: Absent
Requires a nonempty value for HTML date, time, and datetime-local inputs during
constraint validation when the attribute/property is present, including an empty value.
Read-only and disabled inputs are excluded from validation. Unlike native
allow-empty, this does not initialize or prevent an empty value.
- Applicable to: EE::UI::UIHTMLInput (input)
- Data Type: HTML presence attribute
- Default value: Absent
Sets the element rotation in degrees.
- Applicable to: Any element
- Data Type: number
- Default value:
0 - Aliases:
rotate
Sets the x-axis rotation origin point relative to the element expressed as a length or a percentage.
- Applicable to: Any element
- Data Type: length-percentage
- Default value:
center - Aliases:
rotate-origin-point-x
Syntax:
rotation-origin-point-x: 50dp;
rotation-origin-point-x: center;
rotation-origin-point-x: 100%;Sets the y-axis rotation origin point relative to the element expressed as a length or a percentage.
- Applicable to: Any element
- Data Type: length-percentage
- Default value:
center - Aliases:
rotate-origin-point-y
Syntax:
rotation-origin-point-y: 50dp;
rotation-origin-point-y: center;
rotation-origin-point-y: 100%;Sets the row height in any element that contains fixed size rows.
- Applicable to: EE::UI::UIListBox (ListBox), EE::UI::UIDropDownList (DropDownList), EE::UI::UIWidgetTable (WidgetTable), EE::UI::UIGridLayout (GridLayout), EE::UI::TableView (TableView), EE::UI::TreeView (TreeView), EE::UI::ListView (ListView)
- Data Type: length
- Default value: Varies on each case. ListBox and DropDownList will guess the value based on the font-size. Table requires this value to be manually set in order to work. GridLayout
will require the value only if row-mode is
size.
Sets the width of the row header (line number column) in table and tree views. When set to 0 the row header is hidden.
- Applicable to: EE::UI::UIAbstractTableView (TableView, TreeView)
- Data Type: length
- Default value:
0dp
Sets the row mode of a grid layout. The row mode defines how the size of the row of a grid layout is measured.
- Applicable to: EE::UI::UIGridLayout (GridLayout)
- Data Type: string-list
- Value List:
size: The row width of each grid child will be defined with a fixed width based on the value of the row-width length.weight: The row width of each grid child will be calculated as a normalized percentage of the total grid width using the row-weight value.
- Default value:
weight
Sets the vertical separation between each element in the grid layout.
- Applicable to: EE::UI::UIGridLayout (GridLayout)
- Data Type: length
- Default value:
0dp
Sets the vertical alignment of the elements in a flow layout. Elements in the same row will align based on the maximum element height in that row.
-
Applicable to: EE::UI::UIFlowLayout (FlowLayout)
-
Data Type: string-list
-
Value List:
top: Aligns to the top of the row.bottom: Aligns to the bottom of the row.center: Aligns to the center of the row.
-
Default value:
bottom
Sets the percentage height of the child elements of a grid layout.
row-mode must be weight in order to work.
- Applicable to: EE::UI::UIGridLayout (GridLayout)
- Data Type: number (normalized between
0and1) - Default value:
0.25
Sets the scale of the element.
- Applicable to: Any element
- Data Type: vector2-number
- Default value:
1 1
Sets the x-axis scale origin point relative to the element expressed as a length or a percentage.
- Applicable to: Any element
- Data Type: length-percentage
- Default value:
center
Syntax:
scale-origin-point-x: 50dp;
scale-origin-point-x: center;
scale-origin-point-x: 100%;Sets the y-axis scale origin point relative to the element expressed as a length or a percentage.
- Applicable to: Any element
- Data Type: length-percentage
- Default value:
center
Syntax:
scale-origin-point-y: 50dp;
scale-origin-point-y: center;
scale-origin-point-y: 100%;Sets a method to scale the image inside an element.
- Applicable to: EE::UI::UIImage (Image), EE::UI::UITextureRegion (TextureRegion)
- Data Type: string-list
- Value List:
fit-inside: Fits the image inside the element maintaining its ratio.expand: Expands the image to cover the whole element without maintaining its ratio.none: Keeps the image as it is.
Defines how the scrollbar should fit inside an scrollable element.
- Applicable to: EE::UI::UIScrollView (ScrollView)
- Data Type: string-list
- Value List:
overlay: The scrollbar is part of the scrollable element container, this means that it will be on top of the content (scrollbars on mobile usually behave like this).outside: The scrollbar is outside the scrollable element container, this means that it will not be on top of the content (scrollbars on desktop usually behave like this).
- Default value:
outside
Sets the scrollbar style (for the moment defines if it contains buttons at its edge or it's simply a bar).
- Applicable to: EE::UI::UIScrollBar (ScrollBar), EE::UI::UIListBox (ListBox), EE::UI::UIDropDownList (DropDownList), EE::UI::UIWidgetTable (WidgetTable), EE::UI::UIScrollView (ScrollView)
- Data Type: string-list
- Value List:
no-buttons: It's just a scroll bar.two-buttons: Adds to buttons at its edge.
- Default value:
two-buttonsfor desktop platforms,no-buttonfor mobile.
Sets the positive integer second increment when stepping the active second segment or using the date-time popup's second buttons. Show the segment with show-seconds or an explicit time-format.
- Applicable to: EE::UI::UIDateTimeEdit (DateTimeEdit), EE::UI::UIDatePicker (DatePicker), EE::UI::UITimePicker (TimePicker), EE::UI::UIDateTimePicker (DateTimePicker)
- Data Type: integer
- Default value:
1
Includes milliseconds and seconds in locale-derived time patterns. Enabling this also enables show-seconds; disabling it leaves seconds enabled. Hidden precision remains in the stored value. Explicit time-format patterns control their own segments.
- Applicable to: EE::UI::UIDateTimeEdit (DateTimeEdit), EE::UI::UIDatePicker (DatePicker), EE::UI::UITimePicker (TimePicker), EE::UI::UIDateTimePicker (DateTimePicker)
- Data Type: boolean
- Default value:
false
Includes seconds in locale-derived time patterns, independently of milliseconds. Disabling seconds also disables show-milliseconds. Hidden precision remains in the stored value. Explicit time-format patterns control their own segments. The date-time popup follows the editor's current display precision.
- Applicable to: EE::UI::UIDateTimeEdit (DateTimeEdit), EE::UI::UIDatePicker (DatePicker), EE::UI::UITimePicker (TimePicker), EE::UI::UIDateTimePicker (DateTimePicker)
- Data Type: boolean
- Default value:
false
Sets the element state as selected when supported by the specific widget.
- Applicable to: EE::UI::UICheckBox (CheckBox), EE::UI::UIRadioButton (RadioButton), EE::UI::SelectButton (SelectButton)
- Data Type: boolean
- Default value:
false - Aliases:
active
Selects an item inside an element containing a list of items from the item index in the list
(starting from 0).
- Applicable to: EE::UI::UIListBox (ListBox), EE::UI::UIDropDownList (DropDownList)
- Data Type: integer
- Default value: No value
Selects an item inside an element containing a list of items from its item text.
- Applicable to: EE::UI::UIListBox (ListBox), EE::UI::UIDropDownList (DropDownList)
- Data Type: string
- Default value: No value
Sets the text selection background color on a text element that supports text selection.
- Applicable to: EE::UI::UIRichText (RichText), EE::UI::UITextSpan (TextSpan), EE::UI::UITextView (TextView), and any element that holds inside or extends from a TextView. EE::UI::UICheckBox (CheckBox), EE::UI::UIRadioButton (RadioButton), EE::UI::UITextInput (TextInput), EE::UI::UIListBoxItem (ListBox::item), EE::UI::UIDropDownList (DropDownList)
- Data Type: color
- Default color:
#323232
Sets the text selection color on a text element that supports text selection.
- Applicable to: EE::UI::UITextView (TextView) and any element that holds inside text or extends from a TextView. EE::UI::UICheckBox (CheckBox), EE::UI::UIRadioButton (RadioButton), EE::UI::UITextInput (TextInput), EE::UI::UIListBoxItem (ListBox::item), EE::UI::UIDropDownList (DropDownList), EE::UI::UIPushButton (PushButton)
- Data Type: color
- Default color:
white
Enables the selection state toggle on element click.
- Applicable to: EE::UI::SelectButton (SelectButton)
- Data Type: boolean
- Default value:
false
Sets the selection kind for table and tree views.
- Applicable to: EE::UI::UIAbstractView (TableView, TreeView)
- Data Type: string-list
- Value List:
single: Only one item can be selected at a time.multiple: Multiple items can be selected.
- Default value:
single
Sets the selection type for table and tree views.
- Applicable to: EE::UI::UIAbstractView (TableView, TreeView)
- Data Type: string-list
- Value List:
row: Selects entire rows.cell: Selects individual cells.
- Default value:
row
Sets the sort arrow icon size in table view column headers.
- Applicable to: EE::UI::UIAbstractTableView (TableView, TreeView)
- Data Type: length
- Default value:
20dp
Sets the skin (a.k.a. decoration) to an element. Element skins are automatically applied if there's a specific skin for the element
loaded in the current theme, but new skins can be used and loaded with this property. Skins are a way
to decorate the widgets, they are loaded from a list of textures or from a texture atlas. Skins are stateful,
this means that a skin can contain all the possible states that a widget can have for decoration, these are: normal, focus, selected, hover, pressed, selectedhover, selectedpressed, disabled, checked.
Current UI skin documentation is lacking.
- Applicable to: Any element
- Data Type: string (skin name or
noneto disable skinning) - Default value: The skin corresponding to the widget.
Sets the skin tint color.
- Applicable to: Any element
- Data Type: color
- Default value:
white(no tint)
Sets whether the splitter divisor remains visible whenever two views are attached. This property
overrides splitter-hide-on-edge.
- Applicable to: EE::UI::UISplitter (Splitter)
- Data Type: boolean
- Default value:
true
Hides the splitter divisor when its percentage partition is exactly 0% or 100%, allowing one
view to consume the complete splitter. This has no effect when splitter-always-show is true.
- Applicable to: EE::UI::UISplitter (Splitter)
- Data Type: boolean
- Default value:
false
Sets the space occupied by the first view contained by the splitter.
- Applicable to: EE::UI::UISplitter (Splitter)
- Data Type: length-percentage
- Default value:
50%
Sets the source of a resource in an element that supports source.
- Applicable to: EE::UI::UIImage (Image), EE::UI::UISprite (Sprite), EE::UI::UITextureRegion (TextureRegion)
- Data Type: resource-path
- Default value: No value
Enables/disables the tab bar hiding when only one tab is contained in the tab widget.
- Applicable to: EE::UI::UITabWidget (TabWidget)
- Data Type: boolean
- Default value:
false
Enables/disables manually rearraging the tabs in the tab bar.
- Applicable to: EE::UI::UITabWidget (TabWidget)
- Data Type: boolean
- Default value:
false
Enables/disables the ability to move any tab from a TabWidget to another.
- Applicable to: EE::UI::UITabWidget (TabWidget)
- Data Type: boolean
- Default value:
false
Enables/disables switching tabs from empty/blank spaces in the tab widget.
- Applicable to: EE::UI::UITabWidget (TabWidget)
- Data Type: boolean
- Default value:
false
Enables/disables tabs to be closable with the middle mouse button click or by clicking on the close button.
- Applicable to: EE::UI::UITabWidget (TabWidget)
- Data Type: boolean
- Default value:
false
Enable/disable the tabs edges (most left and right) to use a different skin/decoration from the other tabs.
The most left tab will use the skin: tab_left and the most right tab will use tab_right. instead of using
the normal tab skin. This is to be able to achieve more "closed" tab widgets.
- Applicable to: EE::UI::UITabWidget (TabWidget)
- Data Type: boolean
- Default value:
false
Sets the tab widget tabs container height. If not set it will try to get the height from the tab skin height.
- Applicable to: EE::UI::UITabWidget (TabWidget)
- Data Type: length
- Default value:
0dp
Sets the tabs separation/distance between each other. Negative values are accepted.
- Applicable to: EE::UI::UITabWidget (TabWidget)
- Data Type: length
- Default value:
0dp
Sets a predefined model for table and tree views. The value is the model name optionally followed by parameters in parentheses.
- Applicable to: EE::UI::UIAbstractView (TableView, TreeView)
- Data Type: string
- Value List:
filesystem(rootPath): Creates a file system model with the given root path. If no path is provided, the current working directory is used.widgettree: Creates a widget tree model of the current scene node.diskdrives: Creates a disk drives model listing available system drives.cssproperties: Creates a CSS properties model for the widget.
- Default value: No value
- Examples:
table-model: "filesystem(/home/user)"; table-model: "widgettree"; table-model: "diskdrives"; table-model: "cssproperties";
Sets boolean flags for table and tree views. Multiple flags can be set, separated by |.
- Applicable to: EE::UI::UIAbstractTableView (TableView), EE::UI::UITreeView (TreeView)
- Data Type: string-list
- Value List:
default: Same asheaders|row-search|focus-on-selectionheaders: Show column headers.auto-expand: Auto-expand single column to fill the widget width.auto-columns: Auto-size columns to content width.fit-columns: Fits all columns visible in the widget.single-click: Navigate on single click instead of double-click.row-search: Enables keyboard search by typing.row-header: Show row header (line numbers) column.expanders-as-icons: Use tree expander icons as the cell icon.focus-on-selection: Auto-focus the cell on selection.disable-clipping: Disable cell content clipping in tree views.
- Default value:
default
Sets the allowed interval for HTML date, time, and datetime-local input validation.
Date steps use days; time and date-time steps use seconds and accept fractional seconds.
any disables step-mismatch validation. The base is a valid min, otherwise the initial
value attribute, otherwise the Unix civil epoch. This HTML constraint is distinct from
native hour-step, minute-step, and second-step.
- Applicable to: EE::UI::UIHTMLInput (input)
- Data Type: Positive number or
any - Default value:
1for date;60for time and datetime-local
Sets the text to any element that holds or contains text. Usually this property will not be set in the CSS file but in the XML as an attribute or from the code implementation, but it's available as an option.
- Applicable to: EE::UI::UITextView (TextView) and any element that holds inside or extends from a TextView. EE::UI::UICheckBox (CheckBox), EE::UI::UIRadioButton (RadioButton), EE::UI::UITextInput (TextInput), EE::UI::UIListBoxItem (ListBox::item), EE::UI::UIDropDownList (DropDownList), EE::UI::UITooltip (Tooltip), EE::UI::UITab (Tab), EE::UI::UITextEdit (TextEdit)
- Data Type: string
- Default value: No value
Read text-align documentation.
When enabled will only display text if the icon is not set/found.
- Applicable to: EE::UI::UIPushButton (PushButton)
- Data Type: boolean
- Default value:
false
Read text-overflow documentation.
eepp-specific widget capability for interactive text selection. UIRichText and UITextSpan
enable it by default; text-selection: false disables their local capability. HTML document
selection also applies the separate CSS user-select policy.
- Applicable to: EE::UI::UITextView (TextView) and any element that holds inside or extends from a TextView. EE::UI::UICheckBox (CheckBox), EE::UI::UIRadioButton (RadioButton), EE::UI::UITextInput (TextInput), EE::UI::UIListBoxItem (ListBox::item), EE::UI::UIDropDownList (DropDownList), EE::UI::UITooltip (Tooltip), EE::UI::UITab (Tab), EE::UI::UITextEdit (TextEdit)
- Data Type: boolean
- Default value:
truefor RichText, TextSpan, TextEdit, and TextInput.
Controls HTML document selection with auto, text, none, all, and contain.
-webkit-user-select is an alias. The property is not inherited: auto resolves from the
parent's used value. UIWebView and UIMarkdownView support selection across paragraphs and
other independent text formatting contexts automatically. Dragging near the top or bottom of a
scrollable view extends the selection as the view scrolls. Their right-click menu includes Copy
and Select All; listen for Event::OnCreateContextMenu on the view to add menu items.
Sets the text shadow color.
- Applicable to: EE::UI::UITextView (TextView) and any element that holds inside text or extends from a TextView. EE::UI::UICheckBox (CheckBox), EE::UI::UIRadioButton (RadioButton), EE::UI::UITextInput (TextInput), EE::UI::UIListBoxItem (ListBox::item), EE::UI::UIDropDownList (DropDownList), EE::UI::UIPushButton (PushButton), EE::UI::UITooltip (Tooltip)
- Data Type: color
- Default color:
#323232E6
Sets the text shadow offset.
- Applicable to: EE::UI::UITextView (TextView) and any element that holds inside text or extends from a TextView. EE::UI::UICheckBox (CheckBox), EE::UI::UIRadioButton (RadioButton), EE::UI::UITextInput (TextInput), EE::UI::UIListBoxItem (ListBox::item), EE::UI::UIDropDownList (DropDownList), EE::UI::UIPushButton (PushButton), EE::UI::UITooltip (Tooltip)
- Data Type: vector2-length
- Default offset:
1dp 1dp
Sets the text stroke (also known as text outline) color.
- Applicable to: EE::UI::UITextView (TextView) and any element that holds inside or extends from a TextView.
- Data Type: color
- Default color:
black - Aliases:
fontOutlineColor
Sets the text stroke (also known as text outline) width/thickness.
- Applicable to: EE::UI::UITextView (TextView) and any element that holds inside or extends from a TextView.
- Data Type: length
- Default value:
0dp - Aliases:
fontOutlineThickness
The text-transform CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.
- Applicable to: EE::UI::UITextView (TextView) and any element that holds inside or extends from a TextView, EE::UI::UITooltip (Tooltip).
- Data Type: string-list
- Value List:
lowercaseuppercasecapitalizenone
- Default value:
none
Sets a theme to the element. Changing the theme will not have any effect unless skin is also set.
- Applicable to: Any element
- Data Type: string
- Default value: No value
Sets the timing function (easing function) of a view pager.
- Applicable to: EE::UI::UIViewPager (ViewPager)
- Data Type: string
- Value List:
- Current timing functions supported: linear, quadratic-in, quadratic-out, quadratic-in-out, sine-in, sine-out, sine-in-out, exponential-in, exponential-out, exponential-in-out, quartic-in, quartic-out, quartic-in-out, circular-in, circular-out, circular-in-out, cubic-in, cubic-out, cubic-in-out, back-in, back-out, back-in-out, bounce-in, bounce-out, bounce-in-out, elastic-in, elastic-out, elastic-in-out, none.
- Default value:
sine-in
Sets the time display pattern, or locale to use the editor locale. Tokens: H/HH
(24-hour), h/hh (12-hour), m/mm, s/ss, S/SS/SSS, and a (AM/PM).
An hour and minutes are required; 12-hour patterns also require a. Single quotes escape
literal text. For example: time-format: "HH:mm:ss";. Explicit patterns control their own
precision and hour cycle; value retains ISO serialization.
- Applicable to: EE::UI::UIDateTimeEdit (DateTimeEdit), EE::UI::UIDatePicker (DatePicker), EE::UI::UITimePicker (TimePicker), EE::UI::UIDateTimePicker (DateTimePicker)
- Data Type: string
- Default value:
locale
Sets the tint color of an image.
- Applicable to: EE::UI::UIImage (Image), EE::UI::UITextureRegion (TextureRegion)
- Data Type: color
- Default value:
white(no tint)
Sets the tooltip text and enables the tooltip to the element. Usually this property will not be set in the CSS file but in the XML as an attribute or from the code implementation, but it's available as an option.
- Applicable to: Any element
- Data Type: string
- Default value: No value
Sets the total steps required to complete a progress bar (the maximum value a progress bar will hold).
- Applicable to: EE::UI::UIProgressBar (ProgressBar)
- Data Type: number
- Default value:
100
Enables/disables the element as draggable. When enabled the element will be able to be dragged.
- Applicable to: EE::UI::UITouchDraggable (TouchDraggable), (EE::UI::UIListBox (ListBox), EE::UI::UIScrollView (ScrollView), EE::UI::UIWidgetTable (WidgetTable)
- Data Type: boolean
- Default value:
false
Sets a acceleration value that defines how much will accelerate the drag when the mouse or touch is released.
- Applicable to: EE::UI::UITouchDraggable (TouchDraggable), (EE::UI::UIListBox (ListBox), EE::UI::UIScrollView (ScrollView), EE::UI::UIWidgetTable (WidgetTable)
- Data Type: vector2-number
- Default value:
5 5
Read transition-delay documentation.
Read transition-duration documentation.
Read transition-property documentation.
Read transition-timing-function documentation.
Timing function names are custom, and not the same as the standard, but cubic-bezier is supported.
Current timing functions supported: linear, quadratic-in, quadratic-out, quadratic-in-out,
sine-in, sine-out, sine-in-out, exponential-in, exponential-out, exponential-in-out, quartic-in,
quartic-out, quartic-in-out, circular-in, circular-out, circular-in-out, cubic-in, cubic-out,
cubic-in-out, back-in, back-out, back-in-out, bounce-in, bounce-out, bounce-in-out, elastic-in,
elastic-out, elastic-in-out, cubic-bezier, none.
Sets the current value to an element that accepts values. Numeric controls use numbers. Date/time controls use locale-independent ISO strings:
| Control or mode | Value syntax | Example |
|---|---|---|
Calendar, native date mode, HTML date |
yyyy-MM-dd |
2026-09-28 |
| Native time mode | HH:mm:ss[.SSS] |
20:14:32.125 |
| Native datetime mode | yyyy-MM-ddTHH:mm:ss[.SSS] |
2026-09-28T20:14:32.125 |
HTML time |
HH:mm[:ss[.SSS]] |
20:14 |
HTML datetime-local |
yyyy-MM-ddTHH:mm[:ss[.SSS]] |
2026-09-28T20:14 |
An empty string clears a native editor when allow-empty permits it, or clears calendar selection. Display formats and hidden precision do not change ISO serialization. HTML temporal inputs sanitize invalid strings to empty and validate constraints without clamping their supplied value. Local date-time values carry no timezone.
- Applicable to: EE::UI::UIScrollBar (ScrollBar), EE::UI::UISlider (Slider), EE::UI::UISpinBox (SpinBox), EE::UI::UIDateTimeEdit (DateTimeEdit), EE::UI::UIDatePicker (DatePicker), EE::UI::UITimePicker (TimePicker), EE::UI::UIDateTimePicker (DateTimePicker), EE::UI::UICalendar (Calendar), EE::UI::UIHTMLInput (input)
- Data Type: number or ISO string, depending on the control
- Default value: Not set
Read var documentation.
In a progress bar enables/disables if the progress bar filler should be expanded vertically to the element height. Whend disabled the filler height will be defined by the filler skin height.
- Applicable to: EE::UI::UIScrollBar (ScrollBar)
- Data Type: boolean
- Default value:
true
Enables/disables the element visibility.
- Applicable to: Any element
- Data Type: boolean
- Default value:
true
Sets the vertical scroll mode to any scrollable element. The mode defines the visibility of the vertical scroll.
- Applicable to: EE::UI::DropDownList (DropDownList), EE::UI::UIListBox (ListBox), EE::UI::UIScrollView (ScrollView), EE::UI::UIWidgetTable (WidgetTable), EE::UI::UITextEdit (TextEdit).
- Data Type: string-list
- Value List:
auto: The vertical scrollbar will be visible only when needed.on: The vertical scrollbar will be always visible.off: The vertical scrollbar will be always hidden.
- Default value:
auto
Allows mouse-wheel stepping of the active date/time segment while the editor has focus. The selected segment uses its configured step and bounds. allow-editing must also be enabled.
- Applicable to: EE::UI::UIDateTimeEdit (DateTimeEdit), EE::UI::UIDatePicker (DatePicker), EE::UI::UITimePicker (TimePicker), EE::UI::UIDateTimePicker (DateTimePicker)
- Data Type: boolean
- Default value:
false
Sets if the window border size should be automatically calculated based on the skin size.
- Applicable to: EE::UI::UIWindow (Window)
- Data Type: boolean
- Default value:
true
Manually sets the size of the window border.
- Applicable to: EE::UI::UIWindow (Window)
- Data Type: vector2-length
- Default value: No value
Sets the window titlebar buttons position offset.
- Applicable to: EE::UI::UIWindow (Window)
- Data Type: vector2-length
- Default Value:
0dp 0dp
Sets the separation between the window titlebar buttons.
- Applicable to: EE::UI::UIWindow (Window)
- Data Type: length
- Default value:
4dp
Sets the minimum distance where the hovering cursor detects an edge of the window to enable edge resizing.
- Applicable to: EE::UI::UIWindow (Window)
- Data Type: length
- Default value:
24dp
Sets the window flags. Window flags activate a set of different boolean options of the window.
Multiple values are separated with a | (as a logical or).
- Applicable to: EE::UI::UIWindow (Window)
- Data Type: string-list
- Value List:
default: same asclose|buttonactions|resizeable|shareopacityclose: Adds a close button to the titlebar.maximize: Adds a maximize button to the titlebar.minimize: Adds a minimize button to the titlebar.draggable: Makes the window background draggable.shadow: The window will project a shadow.modal: Makes the window modal (blocks interacting any element outside the window).undecorated: Creates an undecorated window (no borders and titlebar).resizeable: Makes the window resizeable.shareopacity: Children will inherit the window opacity (otherwise if you change the opacity of the window will only affect its borders, background and titlebar).buttonactions: Implements the window minimize, maximize and close buttons default actions. This means that close button click will close, minimize will hide (but not close) and maximize will maximize.framebuffer: Creates the window on its own frame buffer.colorbuffer: Enables the color buffer to the frame buffer (if active).
- Default value:
default
Sets the window minimum size.
- Applicable to: EE::UI::Window (Window)
- Data Type: vector2-length
- Default value: No value
Sets the base opacity of a window, this is the maximum opacity that the window will be able to have. And the opacity property applied to the window will be multiplied by this value.
- Applicable to: EE::UI::UIWindow (window)
- Data Type: number
- Default value:
1
### window-shadow-color
Sets the window shadow color.
- Applicable to: EE::UI::UIWindow (window)
- Data Type: color
- Default value:
rgba(0,0,0,0.1)
### window-shadow-offset
Sets the window shadow offset.
- Applicable to: EE::UI::UIWindow (window)
- Data Type: vector2-length
- Default value:
16dp 16dp
### window-shadow-size
Sets the window shadow size.
- Applicable to: EE::UI::UIWindow (window)
- Data Type: length
- Default value:
16dp
Sets the window title.
- Applicable to: EE::UI::UIWindow (Window)
- Data Type: string
- Default value: No value
Sets if the window titlebar size should be automatically calculated based on the skin size.
- Applicable to: EE::UI::UIWindow (Window)
- Data Type: boolean
- Default value:
true
Manually sets the size of the window titlebar.
- Applicable to: EE::UI::UIWindow (Window)
- Data Type: vector2-length
- Default value: No value.
Enables/disables word-wrap in the text view element.
- Applicable to: EE::UI::UITextVIew (TextView), EE::UI::UITextInput (TextInput), EE::UI::UICheckBox (CheckBox), EE::UI::UIRadioButton (RadioButton), EE::UI::UIListBoxItem (ListBox::item), EE::UI::UIDropDownList (DropDownList).
- Data Type: boolean
- Default value:
false
Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) style sheets, saving time and energy.
Read animation documentation.
Read background documentation. Only eepp CSS properties supported are valid in the shorthand.
Read background-position documentation.
Read border documentation.
border-style is not implemented yet.
Read border documentation.
border-style is not implemented yet.
Read border-color documentation.
Read border documentation.
border-style is not implemented yet.
Read border-radius documentation.
Read border documentation.
border-style is not implemented yet.
Read border-width documentation.
Read border documentation.
border-style is not implemented yet.
Shorthand for column-margin and row-margin (in that order).
The syntax consists in two lengths separated by a space.
Syntax:
box-margin: 10dp 10dp;Set / unset the widget as focusable to navigate with tab / tab + shift navigation
Same as the background but for the foreground of the node. The foreground is rendered on the top of the element.
Same as the background-position but for the foreground of the node.
Same as the border-radius but for the foreground of the node.
This is a shorthand for setting foreground-top-left-radius, foreground-top-right-radius, foreground-bottom-right-radius, and foreground-bottom-left-radius in a single declaration.
The hint text shadow, same as text-shadow but for hints.
Read text-shadow documentation.
blur-radius is not supported.
Read margin documentation.
Shorthand for min-width and min-height
Shorthand for max-width and max-height
Read padding documentation.
The origin point of the rotation expressed as a position.
Default value: center center.
Aliases: rotate-origin-point
Syntax:
rotation-origin-point: 50dp 10dp;
rotation-origin-point: center top;
rotation-origin-point: 100% 0%;The origin point of the node scale expressed as position.
Default value: center center.
Syntax:
scale-origin-point: 50dp 10dp;
scale-origin-point: center top;
scale-origin-point: 100% 0%;Read transition documentation.
Read text-shadow documentation.
blur-radius is not supported.
At-rules are CSS statements that instructs CSS how to behave. They begin with an at sign, '@' (U+0040 COMMERCIAL AT), followed by an identifier and includes everything up to the next semicolon, ';' (U+003B SEMICOLON), or the next CSS block, whichever comes first.
The following at-rules are currently supported:
-
@import — Tells the CSS engine to include an external style sheet.
-
@media — A conditional group rule that will apply its content if the device meets the criteria of the condition defined using a media query. Media features currently supported: width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, prefers-color-scheme. Note: eepp prefers dark as default.
non-standard media features: pixel-density: The
pixel-densityfeature is specified as afloatvalue representing the current pixel density used by the application. It is a range feature, meaning that you can also use the prefixed min-pixel-density and max-pixel-density variants to query minimum and maximum values, respectively.Also, eepp only uses
screenmedia type. -
@font-face — Describes the aspect of an external font to be downloaded. Only font-family and src properties are supported at the moment.
-
@keyframes — Describes the aspect of intermediate steps in a CSS animation sequence.
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button's color when the user's pointer hovers over it.
Most common pseudo-class selectors are supported. The list is:
-
:selected Matches when elements are selectable and currently selected.
CSS data types define typical values (including keywords and units) accepted by CSS properties and functions.
For more details regarding this topic please read the CSS values and units Mozilla docs.
Types:
Binary state with two possible values:
true- Aliases:
1,t,T,y,Y
- Aliases:
false- Aliases:
0,f,F,n,N
- Aliases:
Read integer documentation.
Read color documentation.
Differences with documentation:
- Only CSS Level 1 color keywords supported.
- eepp adds hsv and hsva functions with the same syntax that hsl and hsla.
- System colors not support.
- New global color keywords can be registered to eepp by calling the static function: EE::System::Color::registerColor.
Read length documentation.
Differences with documentation:
-
Supported lengths:
em,rem,pt,pc,in,cm,mm,vw,vh,vmin,vmax. -
Also adds:
dpas Device-independent pixel. Plusdpr(dp rounded),dprd(dp rounded down) anddpru(dp rounded up).
Read length-percentage documentation.
Differences with documentation:
calccurrently not supported
Read number documentation.
Read position documentation.
For EE::UI::UIImage (Image), background-image, foreground-image (all the examples are valid).
For a EE::UI::UITextureRegion (TextureRegion) only the examples with: @textureregion, @drawable, drawable_resource_name from a texture region resource are valid.
For a EE::UI::UISprite (Sprite) only the examples with: all the examples are valid except for @9p and http/s resources.
Valid resources path:
file://assets/icon/ee.png; /** relative path to the current working directory */
"file://assets/icon/ee.png";
https://raw.githubusercontent.com/SpartanJ/eepp/develop/bin/assets/icon/ee.png;
"https://raw.githubusercontent.com/SpartanJ/eepp/develop/bin/assets/icon/ee.png";
url(file://assets/icon/ee.png);
url(https://raw.githubusercontent.com/SpartanJ/eepp/develop/bin/assets/icon/ee.png);
url("file://assets/icon/ee.png");
url(data:image/format;base64,data);
url(data:image/format,url-encoded-data);
@image/image_name_already_in_texture_factory;
@texture/image_name_already_in_texture_factory;
@textureregion/region_name_already_in_any_texture_atlas;
@sprite/sprite_name_already_in_any_texture_atlas; /* sprite pattern name **/
@drawable/drawable_name_already_in_any_drawable_manager; /* drawable managers are any holder of image resources. This includes: texture atlases, textures, nine patches. */
@9p/nine_patch_resource_name_already_in_the_nine_path_manager;
drawable_resource_name; /** same as doing: @drawable/drawable_resource_name */
linear-gradient(from_color, to_color);
linear-gradient(direction, from_color, to_color); /** valid directions are (without quotes): "to bottom", "to left", "to right", "to top". */
circle(radius, color, type); /** type (optional) can be (without quotes): "fill" or "solid" (filled), or "line" (lined). */
rectangle(type, color, rotation, radius); /** type (optional) can be (without quotes): "fill" or "solid" (filled), or "line" (lined). rotation (optional) is a number in degrees: "0º" (without quotes). radius (optional), must be the last parameter. */
triangle(type, color, "point_1.x point1.y, point_2.x point2.y, point_3.x point3.y", lineWidth) /** type can be (without quotes): "fill" or "solid" (filled), or "line" (lined). lineWidth (optional, default 1dp): the length or width of the lines when type is "fill"- */
poly(type, color, "point_1.x point1.y, point_2.x point2.y, ...", lineWidth) /** polygon. type (optional) can be (without quotes): "fill" or "solid" (filled), or "line" (lined). lineWidth (optional, default 1dp): the length or width of the lines when type is "fill"- */
icon(name, size) /** icons usually come from font glyphs, size is the font glyph size. For example: icon("quit", 24dp) */
glyph(font_family, font_size, codepoint) /** codepoint can be an integer value, an hex value (hex values start with 0x), or a 1 codepoint string representing glyph character. For example: glyph("monospace", 24dp, "@") */Read string documentation.
Differences with documentation:
- Only supports
"(double quote)
A set of predefined string value types. Each CSS property will have its own string set specified in the documentation.
A set of two numbers separated by a " " (space), usually representing x and y axis
in that order.
A set of two lengths separated by a " " (space), usually representing x and y axis
in that order or also representing width and height.