Tags, attributes, & text
Phlex is a lightweight HTML abstraction. Understanding how it maps to the generated HTML tags, attributes, comments, and other entities is foundational to creating quality components. Weβll also cover the built-in security and language server features in Phlex that make it a joy to use Phlex in your favorite code editor.
Tags
If you dig deep into the Phlex source code, youβll find a list of HTML tags registered as methods by Phlex. Itβs why the p
method corresponds to the <p>
HTML tag, h1
to the <h1>
HTML tag, etc.
BLahβ¦
Attributes
In Phlex, attributes are keyword arguments passed into tag. Consider the following example:
div(class: "container", id: "main"){ "Hello"}
This will generate the following HTML:
<div class="container" id="main">Hellow</div>
π Unlock content
Pre-order this course to unlock this video, source code, and content. You'll also get to work with Brad to fine tune the course cirriculum.
Boolean attributes
βββββββ ββββββββββ βββ ββββββββββ ββββ βββ ββ βββββββ ββ βββββββ ββ ββββββ βββ βββ βββ β βββββββ βββββββββ ββ βββββββ ββββ ββ βββ ββββββ βββ ββββββββ
βββββ(type: "checkbox", checked: true)
ββββ ββββ ββββββββ βββ βββββββββ βββββ
ββββββ type="checkbox" checkedβ
ββ βββ ββββ βββ βββββββββ ββ βββ βββββββ βββ ββββ ββ ββββ ββ βββ ββββββ βββββββ
βββββ(type: "checkbox", checked: "true")
ββββ ββββ ββββββββ βββ βββββββββ βββββ
ββββββ type="checkbox" checked="true"β
Data attributes
ββββ ββββββββββ βββ ββββββββββ ββββ βββββ ββββ ββββββ ββ ββββββ βββ βββ βββ β ββββ βββββββββ ββ βββββββ β ββββββ ββ βββ ββββ βββ ββββββββ
βββ(data: { foo: "bar", baz: "qux" }){ "Hello"}
ββββ ββββ ββββββββ βββ βββββββββ βββββ
ββββ data-foo="bar" data-baz="qux"βHellowββββββ
Style attributes
βββββ ββββββββββ ββββ βββ βββββββ ββββββββββ ββ ββββββ βββ βββ βββ β βββββ βββββββββ ββ βββββββ β ββββ ββ βββ ββββββ βββ ββββββββ
βββ(style: { color: "red", background: "blue" }){ "Hello"}
ββββ ββββ ββββββββ βββ βββββββββ βββββ
ββββ style="color:red;background:blue;"βHelloββββββ
ββββ ββ ββββββββββββ ββββββ ββββ βββββββ ββββββββββ βββ βββββ βββββββββ βββββ βββββ βββββββ βββββ ββββ ββββ ββββ ββ ββββββββ ββββββββββββ
Text, comments, and whitespace
ββββββββββββ βββ βββ ββββ ββ βββββββββ β ββββββββ ββ βββββ ββββ ββββββ ββββββ ββββ ββββββββ βββ ββββββββββ
p {
"Copywright Acme, Inc. #{ββββ.βββββ.ββββ}"
}
ββ ββββ ββ ββββ ββ βββ ββββββββ
p {
βββββ "Copywright"
ββββββββββ
β(href: "/") { "Acme, Inc." }
ββββββββββ
βββββ ββββ.βββββ.ββββ
}
ββ ββββ ββββ ββββββββ ββββ βββ βββ ββ βββ βββββββββ ββββββ βββββ ββββ ββββββ ββ ββββ ββββ ββ ββββ βββββ βββββββββββ
Safety and security
βββββ ββ ββββββββ ββ ββ ββββ βββ ββββββ ββ ββββββββ ββ βββββββ βββ ββββ βββββ ββ βββββββ βββ ββββββββ ββ ββββ ββββββββ β βββ ββ ββββ βββββββ ββ βββββ ββββββββ βββ ββ ββββββ βββ ββββββββ ββββββββββ