QHTML Editor Playground
Edit the QHTML below, then use the editor tabs to preview rendered output and generated HTML.
q-import { q-components.qhtml } q-style container-style { q-style-class { w3-card w3-round-large w3-padding } } q-style button-style { q-style-class { w3-button w3-blue w3-round } } q-theme my-theme { div.containerDiv { container-style } button { button-style } } q-component editor-counter { q-property count: 0 function increment() { var host = this.closest("editor-counter"); host.count = Number(host.count) + 1; host.update(host.qdom().UUID); } my-theme,div.containerDiv { h3 { text { QHTML Playground Counter } } p { text { Click to increment. Each instance keeps its own count. } } button { type: "button" onclick { this.closest("editor-counter").increment(); } text { Count: ${this.component.count} } } } } div.w3-container.w3-padding { h2 { text { Live QHTML Playground } } p { text { Edit this source and switch to Preview or HTML tabs. } } editor-counter { } editor-counter { } } onReady { this.__nextTabIndex = 3; } q-style demo-card { q-style-class { w3-card w3-round-large w3-padding } backgroundColor: #f8fbff border: 1px solid #d5e1f3 } q-style add-button { q-style-class { w3-button w3-round w3-margin-bottom } backgroundColor: #1d4ed8 color: #ffffff } q-theme tabs-demo-theme { .tabs-demo-card { demo-card } .tabs-demo-add-btn { add-button } } tabs-demo-theme { div.tabs-demo-card { h2 { text { q-tabs addTab() demo } } p { text { Click Add Tab to append a new q-tab using qdom helpers. } } q-tabs#demoTabs { button.tabs-demo-add-btn { type: "button" onclick { var host = this.closest("q-html"); var tabs = this.closest("q-tabs"); var tabsQdom = tabs.qdom(); var index = Number(host.__nextTabIndex || 3); var label = "Tab " + String(index); host.__nextTabIndex = index + 1; var tabNode = tabsQdom.createQComponentInstance("q-tab", { name: label }); var heading = tabNode.createQElement("h4", {}, [tabNode.createQText(label)]); var body = tabNode.createQElement("p", {}, [tabNode.createQText("Here's a brand new tab")]); var wrapper = tabNode.createQElement("div", { class: "w3-padding" }, [heading, body]); tabNode.appendNode(tabNode.createQSlot("content", [wrapper])); tabsQdom.appendNode(tabNode); if (tabsQdom.UUID) { host.update(tabsQdom.UUID); } else { host.update(); } var liveTabs = tabs.id ? host.querySelector("#" + tabs.id) || tabs : tabs; var refreshed = liveTabs.refreshTabs(); var activeIndex = Array.isArray(refreshed) ? Math.max(0, refreshed.length - 1) : index - 1; liveTabs.showTab(activeIndex); } text { Add Tab } } q-tab { name { text { Tab 1 } } content { div.w3-padding { text { Initial tab one content. } } } } q-tab { name { text { Tab 2 } } content { div.w3-padding { text { Initial tab two content. } } } } } } }