The XUI module comes with several HTML wrapper objects:
XView #
Xpell View (Xview) is a basic element that can be used to store content and to hold child objects.
| Attributes | Value | Example |
| _type | view / div | { |
| _html_tag | Div |
XHTML #
A xpell wrapper for any HTMl element
| Attributes | Value | Example |
| _type | xhtml | { _id:"my-div", _type:"xhtml", _html_tag:"span", _text:"Hello World"} |
| _html_tag | *(any valid HTML tag) |
#
XLabel #
A xpell wrapper HTML Label element
| Attributes | Value | Example |
| _type | label | { _id:"my-label", _type:"label", _text:"Caption"} |
| _html_tag | label |
XLink #
A xpell wrapper HTML link element
| Attributes | Value | Example |
| _type | link | { _id: "my-link", _type: "link", _text:"github.com", href:"https://github.com"} |
| _html_tag | a |
#
XButton #
A xpell wrapper HTML Button element
| Attributes | Value | Example |
| _type | button | { _id:"my-button", _type:"button", _text:"Click", _on_click:(btn,event) => { console.log("Clicked") btn._text = "Thanks" }} |
| _html_tag | Button |
XTextField #
A xpell wrapper HTML input element
| Attributes | Value | Example |
| _type | textField | { _id:"my-text", _type:"text", _on:{ "keyup": (obj,event) => { console.log(obj.dom.value) }}} |
| _html_tag | Input |
XPassword #
A xpell wrapper HTML password input element
| Attributes | Value | Example |
| _type | pasword | { _id:"my-text", _type:"text", _on:{ "keyup": (obj,event) => { console.log(obj.dom.value) }}} |
| _html_tag | input |
XInput #
A xpell wrapper HTML input element
| Attributes | Value | Example |
| _type | input | { _id:"my-text", _type:"text", _on:{ "keyup": (obj,event) => { console.log(obj.dom.value) }}} |
| _html_tag | input |
XTextArea #
A xpell wrapper HTML textArea element
| Attributes | Value | Example |
| _type | textarea | { _id: "my-textarea", _type: "textarea"} |
| _html_tag | textarea |
XVideo #
A xpell wrapper HTML video element
| Attributes | Value | Example |
| _type | textarea | { _id: "my-video", _type: "video", src:"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"} |
| _html_tag | Input |
XImage #
A xpell wrapper HTML image element
| Attributes | Value | Example |
| _type | image | { _id: "my-image", _type: "image", src: "https://picsum.photos/200/300" |
| _html_tag | img |
XList #
A xpell wrapper HTML list element
| Attributes | Value | Example |
| _type | list | {_id: "my-list",_type: "list",_items: [ { id: "item1", _text: "Item 1" }, { id: "item2", _text: "Item 2" } ]} |
| _html_tag | ul |
XForm #
A xpell wrapper HTML form element
| Attributes | Value | Example |
| _type | form | { _id: "my-form", _type: "form", _text: "Name", _children:[{ _id: "my-lable"_type:"label", _text: "Name"}]} |
| _html_tag | input |
XWebcam #
A xpell wrapper HTML webcam element
| Attributes | Value | Example |
| _type | form | { _id : "my-webcam",_type : "webcam"} |
| _html_tag | video |
XSVG #
A xpell wrapper HTML svg element
| Attributes | Value | Example |
| _type | svg | { _id: "my-svg", _type: "image", src: 'image address needs to end with'.SVG}, |
| _html_tag | svg |