MoleculeUIElement
An uxiverse.com typeA Molecule UI element is the second smallest type of element, as understood by the Atomic Design Methodology. One Molecule UI element is made up of groups of Atoms, and form Organism UI Elements when combined with other molecules
| Property | Expected Type | Description |
|---|---|---|
| ariaLabel | https://schema.org/Text | An ARIA label is an accessibility feature that helps visually impaired users understand and use a UI control. Blind users use screen readers to navigate User Interfaces, so concise, readable text helps users navigate the application. |
| background | UIElement | Content of the background of the element |
| bold | https://schema.org/Text | Bold text is used to add significance to a text element |
| color | The color used to express a meaningful relation in the content | |
| font | https://schema.org/Text | The font used to express a meaningful relation in the content |
| highlight | UIElement | A form of highlighting an element in relation to others |
| importance | IssueSeverityType | Importance is a property on an UI Element to order elements toward the user. The order expresses a fixed significance over other elements. When issues happen in the application, Error notifications should get highest importance, followed by Warnings, and Alerts. |
| inputRange | The input range defines the type(s) of data which a uxi:UIElement can consume. This can be used to choose UIElements automatically. E.g. in the case of a date picker this could be https://schema.org/Date or https://schema.org/DateTime. For the (sub-)uxi:UIElement for selecting a year inside that date picker, a uxi:UIPropertyValueSpecification could be used to narrow down the selection. Also useful for converting, sending or receiving data. | |
| inputTriggerValidator | Validator | The input trigger validator can be used with side-effect handlers, so that they only trigger when the input is valid. |
| isHidden | A hierarchy flag to toggle the visibility of an UI Element. If you want to transition between visibility states, you can use opacity for fading, size for shrinking and growing, or 3D transformations for flipping. Transitions tell the user what happened to an element, when hiding the user should be shown how to un-hide. |