Many standard HTML components that users do not interact with are fine to use in CH5 projects, such as <p> (a paragraph of text information) and <div> (a container of other tags). To allow these standard elements to access state from the control system (such as indirect text and visibility joins), CH5 provides custom attributes.
For interactive examples using custom attributes, refer to the Showcase Application.
By convention, all CH5 custom attributes start with the "data-ch5" prefix. A list of CH5 custom attributes is provided below:
- data-ch5 textcontent: Used for dynamic, indirect text content. The expected value is a string name (serial join).
- data-ch5-show: Used for visible content. The expected attribute value is a level-set boolean (digital) state name.
- data-ch5-noshow-type: Describes how an element is to be not shown. The expected attribute value is either "remove," "visibility," or "display."
- "Remove" indicates that an element is removed from the DOM.
- "Visibility" indicates that the element will be hidden using the CSS style "visibility:hidden." This CSS style makes the element invisible to the browser, but it takes up the same space and remains in the same place in the UI as if the image was not hidden. This is useful in scenarios such as when an item is hidden but then revealed upon hover.
- "Display" indicates the element will be hidden using the CSS style "display:none." This CSS style removes the element from the UI: the attached element does not take up any space in the UI but remains in the source code. This is useful in scenarios such as testing a page or when including elements that only should be displayed after certain break points on a responsive page.
- data-ch5-appendclass: Used for a dynamic CSS class name. The expected attribute value is a string state name (serial join).
- data-ch5-appendstyle: Used when a dynamic CSS styles are applied. The expected attribute value is a string state name (serial join).
- data-ch5-showpulse: Works similarly to data-ch5-show, but does not offer toggle functionality (makes elements visible only).
- data-ch5-hidepulse: Works similarly to data-ch5-show, but does not offer toggle functionality (hides elements only).
For example, <p>Room:<span data-ch5-textcontent="88"></span></p> will display the serial join 88 value where the <span> element is located.
For example, with <div data-ch5-show="87">, the div and its children elements will be visible when the state, digital join 87, is true/high/1.
For example, with <div class=”section” ch5-data-appendclass=”75”>, the <div> class name will always have "section" as the first class name in a class name list. Subsequent class name entries will be provided from serial join 75.
For example, with <h1 style=”text-align: center;” data-ch5-appendstyle=”76”>Heading</h1>, the <h1> element will always have the "text-align:center" style. Other styles can be applied by serial join 76.