q-import { wiki-common.qhtml }
wiki-shell {
sectionKey: "optional-tags"
pathPrefix: ""
pageTitle: "Optional Tag Libraries"
pageIntro: "These older tag libraries are still supported, but the README marks them as deprecated. New code should usually prefer q-style and q-theme."
main {
wiki-example-card {
title: "W3CSS tags"
summary: "w3-tags.js lets you write wrapper tags like w3-card and w3-padding."
note: "The wrapper applies classes to the first non-w3 descendant and then removes itself."
details {
html {
<link rel="stylesheet" href="w3.css" />
<script src="w3-tags.js"></script>
<q-html>
w3-card,w3-padding {
div { text { This div receives W3 classes. } }
}
</q-html>
}
}
}
wiki-example-card {
title: "q-style equivalent"
summary: "The README recommends replacing deprecated tag libraries with q-style and q-theme."
note: "This keeps the same effect in normal QHTML syntax."
details {
html {
q-style padded-card {
q-style-class { w3-card w3-padding }
}
q-theme main-theme {
div { padded-card }
}
main-theme {
div { text { This div receives W3 classes } }
}
}
}
}
wiki-example-card {
title: "Bootstrap tags"
summary: "bs-tags.js provides Bootstrap-flavored wrapper tags like bs-btn and bs-btn-primary."
note: "Like the W3 version, this is legacy support."
details {
html {
<link rel="stylesheet" href="bs.css" />
<script src="bs-tags.js"></script>
<q-html>
bs-btn,bs-btn-primary {
button { text { Primary button } }
}
</q-html>
}
}
}
}
}