By Alvin Alexander. Last updated: June 22, 2022
As a brief note to self, here’s some Laminar source code that shows how to create a div
in Laminar, as well as some settings/elements in that div
, as well as one way to handle a reactive button click:
div(
// --- HEADER INFO ---
padding := "1em 5em",
cls := "container col-md-6 col-md-offset-3", // bootstrap way to center stuff
// --- INPUT FIELD ---
p(
data.intro,
cls := "intro-text"
),
padding := "40px",
label(data.inputLabel),
input(
onMountFocus,
placeholder := data.placeholderText,
inContext { thisNode => onInput.map(_ => thisNode.ref.value) --> someOtherVar }
),
// --- BUTTON AREA ---
div(
styleAttr := "padding-top: 1em",
button(
"Button Text Here",
disabled <-- disableBtnVar,
typ("button"),
onClick --> (_ => {
// handle the button click here
}),
styleAttr := "margin-right: 2px;",
),
Similarly, during a rapid prototyping phase, I also created this code, which shows how to specify CSS parameters in Laminar code:
def websiteWrapper(
homePageTitle: String,
content: HtmlElement
): HtmlElement =
div(
div(
homePageTitle,
textAlign("center"),
width("100%"),
height("90px"),
marginLeft("auto"),
marginRight("auto"),
marginBottom("0em"),
// padding("12px 0 22px 18px"),
paddingTop("20px"),
fontSize("36px"),
backgroundColor("black"),
color("white"),
),
content
)
I’m putting this code here for my future self, but if you’re just getting started with Laminar it may also help others understand what you can do inside a div
in Laminar.