QHTML Component Examples
This page is now mostly HTML. Each example is a plain <q-editor> with inline QHTML source.
The sidebar is built with document.querySelectorAll(".example-class") and links to each section anchor.
q-keyword syntax usage
Scoped keyword remapping with direct-only alias rules.
q-keyword component { q-component }
q-style tiny-card-style {
q-style-class { w3-round-large w3-border }
backgroundColor: #eef4ff
color: #0f172a
border: 1px solid #bfd0ea
}
q-theme tiny-card-theme {
.tiny-card-shell { tiny-card-style }
}
component tiny-card {
tiny-card-theme {
div.tiny-card-shell.w3-card.w3-padding {
text { Tiny Card }
}
}
}
tiny-card { }
q-builder.qhtml usage
Always-on builder scoped to the preview container.
q-import { q-components/q-modal.qhtml }
q-import { q-components/q-builder.qhtml }
q-style builder-preview-style {
backgroundColor: #f5f8ff
color: #0f172a
border: 1px solid #c8d8f2
}
q-style builder-action-style {
backgroundColor: #1d4ed8
color: #ffffff
border: 1px solid #1e40af
}
q-theme builder-demo-theme {
.builder-preview { builder-preview-style }
.builder-action { builder-action-style }
}
onReady {
var host = this;
qbuilder.inspect(host, true);
var builder = host.querySelector("q-builder[q-builder-runtime='1']");
host.setAttribute("data-page-edit-mode", "1");
builder.querySelector("q-builder-palette").remove();
}
builder-demo-theme {
q-builder {
id: "page-builder"
q-builder-runtime: "1"
}
div.w3-container.w3-border.w3-round-large.w3-padding.w3-margin-top {
h4 { text { Builder Demo } }
div#builder-preview-root.builder-preview.w3-panel.w3-border.w3-round-large.w3-margin-top {
h4 { text { Preview Scope } }
p { text { q-builder is always enabled in this example. Click here to inspect/edit. } }
button.builder-action.w3-button.w3-small {
type: "button"
text { Inner Action }
}
}
}
}
q-checkout-modal.qhtml usage
Populate checkout items and show the modal.
q-import { q-components/q-modal.qhtml }
q-import { q-components/q-form.qhtml }
q-import { q-components/q-grid.qhtml }
q-import { q-components/q-checkout-modal.qhtml?v=cart-fix-3 }
q-style checkout-open-style {
backgroundColor: #0f766e
color: #ffffff
border: 1px solid #115e59
}
q-theme checkout-theme {
.checkout-open-btn { checkout-open-style }
}
checkout-theme {
button.checkout-open-btn.w3-button {
text { Open Checkout Modal }
onclick {
var modal = document.querySelector("#checkout-usage");
modal.setItems([
{ id: "sku-1", name: "Starter Pack", price: 24.99, quantity: 2 },
{ id: "sku-2", name: "Add-on", price: 8.5, quantity: 1 }
]);
modal.show();
}
}
q-checkout-modal { id: "checkout-usage" }
}
q-estore.qhtml usage
Compose catalog + checkout with autoloaded items.
q-import { q-components/q-form.qhtml }
q-import { q-components/q-grid.qhtml }
q-import { q-components/q-modal.qhtml }
q-import { q-components/q-store-catalog-item.qhtml?v=cart-fix-2 }
q-import { q-components/q-store-catalog.qhtml?v=cart-fix-2 }
q-import { q-components/q-checkout-modal.qhtml?v=cart-fix-3 }
q-import { q-components/q-estore.qhtml?v=cart-fix-2 }
q-estore {
items-json: "[{\"id\":\"sku-1\",\"name\":\"Starter\",\"description\":\"Inline demo item\",\"price\":12.5}]"
autoload: "true"
}
q-grid.qhtml usage
Create a simple grid with declarative columns.
q-import { q-components/q-grid.qhtml }
q-style cell-a-style {
backgroundColor: #eff6ff
color: #1e3a8a
border: 1px solid #93c5fd
}
q-style cell-b-style {
backgroundColor: #ecfeff
color: #155e75
border: 1px solid #67e8f9
}
q-style cell-c-style {
backgroundColor: #f0fdf4
color: #166534
border: 1px solid #86efac
}
q-theme grid-cells-theme {
.cell-a { cell-a-style }
.cell-b { cell-b-style }
.cell-c { cell-c-style }
}
grid-cells-theme {
q-grid {
columns: 3;
div.cell-a.w3-panel.w3-border { text { Cell A } }
div.cell-b.w3-panel.w3-border { text { Cell B } }
div.cell-c.w3-panel.w3-border { text { Cell C } }
}
}
q-modal.qhtml usage
Use built-in q-modal-theme defaults, then layer an external theme override.
q-import { q-components/q-modal.qhtml }
q-style modal-open-button-style {
backgroundColor: #16a34a
color: #ffffff
border: 1px solid #15803d
}
q-style modal-container-override-style {
backgroundColor: #ffedd5
color: #7c2d12
}
q-style modal-titlebar-override-style {
backgroundColor: #ef4444
color: #ffffff
}
q-style modal-close-override-style {
backgroundColor: #7f1d1d
color: #ffffff
}
q-style modal-title-override-style {
backgroundColor: #fb923c
color: #111827
}
q-style modal-content-override-style {
backgroundColor: #dbeafe
color: #1e3a8a
}
q-style modal-footer-override-style {
backgroundColor: #fde047
color: #713f12
}
q-theme modal-demo-theme {
q-modal-theme { }
.modal-open-btn { modal-open-button-style }
.q-modal-container { modal-container-override-style }
.q-modal-titlebar { modal-titlebar-override-style }
.q-modal-closebutton { modal-close-override-style }
.q-modal-title { modal-title-override-style }
.q-modal-content { modal-content-override-style }
.q-modal-footer { modal-footer-override-style }
button { modal-open-button-style }
}
modal-demo-theme {
button.modal-open-btn.w3-button {
text { Open Modal }
onclick { document.querySelector("#modal-usage").show(); }
}
q-modal {
id: "modal-usage"
title { h3 { text { q-modal Usage } } }
body {
p { text { Modal default colors are overridden externally via q-theme composition. } }
button.w3-button { text { In-modal button override } }
}
footer {
button.w3-button {
text { Close }
onclick { this.component.hide(); }
}
}
}
}
q-store-catalog.qhtml usage
Catalog behavior with add item action.
q-import { q-components/q-form.qhtml }
q-import { q-components/q-grid.qhtml }
q-import { q-components/q-store-catalog-item.qhtml?v=cart-fix-2 }
q-import { q-components/q-store-catalog.qhtml?v=cart-fix-2 }
q-style catalog-add-style {
backgroundColor: #0ea5e9
color: #082f49
border: 1px solid #0284c7
}
q-theme catalog-theme { .catalog-add-btn { catalog-add-style } }
catalog-theme {
button.catalog-add-btn.w3-button.w3-margin-bottom {
text { Add Sample Item }
onclick { document.querySelector("#catalog-usage").addCatalogItem({ name: "Demo Item", description: "Added via method", price: 11.25 }); }
}
q-store-catalog { id: "catalog-usage" }
}
q-store-catalog-item.qhtml usage
Standalone catalog item card example.
q-import { q-components/q-store-catalog-item.qhtml?v=cart-fix-2 }
q-store-catalog-item {
data-item-id: "widget-a"
data-item-name: "Widget A"
data-item-description: "Single card usage for store item rendering."
data-item-price: "19.95"
}
q-tabs.qhtml usage
Instantiate tabs and switch via showTab(index).
q-import { q-components/q-tabs.qhtml }
q-style tabs-show-btn-style {
backgroundColor: #334155
color: #ffffff
border: 1px solid #1e293b
}
q-style tabs-nav-override-style {
backgroundColor: #ffedd5
}
q-style tabs-content-override-style {
backgroundColor: #fffaf0
}
q-theme tabs-demo-theme {
.tabs-show-btn { tabs-show-btn-style }
.q-tabs-nav { tabs-nav-override-style }
.q-tabs-content-themed { tabs-content-override-style }
}
tabs-demo-theme {
button.tabs-show-btn.w3-button.w3-margin-bottom {
text { Show Tab 3 }
onclick { document.querySelector("#tabs-usage").showTab(2); }
}
q-tabs {
id: "tabs-usage"
q-tab { name { text { Overview } } content { p { text { Overview content } } } }
q-tab { name { text { Details } } content { p { text { Details content } } } }
q-tab { name { text { Logs } } content { p { text { Logs content } } } }
}
}
q-tech-tag.qhtml usage
Placeholder usage for currently empty file.
q-import { q-components/q-tech-tag.qhtml }
q-style tech-note-style {
backgroundColor: #eef4ff
color: #334155
border: 1px solid #c7d8ef
}
q-theme tech-tag-theme { .tech-note { tech-note-style } }
tech-tag-theme {
q-tech-tag { text { Extend this tag by adding definitions inside q-tech-tag.qhtml. } }
div.tech-note.w3-panel.w3-small.w3-border { text { q-tech-tag.qhtml currently has no built-in definitions. } }
}