Rendering HTML
HTML tags
Kilua provides many functions to render all standard HTML tags. Almost all of them have names directly corresponding to tag names. The exceptions are these HTML tags:
<input>
, which can be rendered using many different functions, dedicated for different types of inputs (e.g. text, checkbox, radiobutton, upload, color etc.)<map>
, rendered with amapTag()
function (to avoid clash with Kotlin maps)<object>
, rendered with anobjectTag()
function (to avoid clash with Kotlinobject
keyword)<var>
, rendered with avarTag()
function (to avoid clash with Kotlinvar
keyword)
You can also render custom HTML tags, by using tag()
function.
HTML attributes
Most HTML attributes are optional, but for some HTML tags they are almost always used (e.g. <img src="...">
or <a href="...">
). In Kilua such attributes are usually available directly as composable functions parameters.
Some attributes can only by used with functions inside the component body.
Other standard or custom attributes can be declared using an attribute()
function.
Text content
You can declare textual content of HTML tags with a textNode()
function, which also has a convenient extension operator +
:
For some often used cases Kilua defines dedicated functions (by adding t
to the name), which take the text content as the first parameter - these are: bt()
, divt()
, emt()
, h1t()
, h2t()
, h3t()
, h4t()
, h5t()
, h6t()
, it()
, lit()
, pt()
, pret()
, st()
, smallt()
, spant()
, strongt()
, subt()
, supt()
, ut()
.
Raw HTML code
The text content rendered with textNode()
function (or +
operator) is always rendered as plain text (any HTML code is escaped). But you can also render raw HTML code with the help of rawHtml()
and rawHtmlBlock()
functions. The first one renders rich content inside an additional <span style="display: contents;"></span>
tag and the second one inside a <div style="display: contents;"></div>
tag. You can choose whether you need an inline or a block element based on your HTML structure.
Last updated