HTML Basics

Remember you need the import: import com.fastscala.templates.bootstrap5.classes.BSHelpers._

Adding a class

span.apply("Lorem ipsum dolor sit amet, consectetur adipiscing elit.").withClass("text-bg-success")
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Adding a style

span.apply("Lorem ipsum dolor sit amet, consectetur adipiscing elit.").withStyle("color: green;")
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Adding an onclick handler

span.apply("Lorem ipsum dolor sit amet, consectetur adipiscing elit.").addOnClick(Js.alert("Clicked"))
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Adding a class conditionally

val value = math.random() - 0.5
span.apply(f"$value%.2f").withClassIf(value < 0, "text-bg-danger")
-0.46

Adding an attribute conditionally

val value = math.random() - 0.5
span.apply(f"$value%.2f").withAttrIf(value < 0, "style" -> "color: red;")
-0.47

Setting type

input.withType("color")

Setting title

span.apply("Lorem ipsum dolor sit amet, consectetur adipiscing elit.").withTitle("Title")
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Setting attribute

input.withType("text").withAttr("placeholder" -> "First name")

Setting id

span.apply("Lorem ipsum dolor sit amet, consectetur adipiscing elit.").withId("main_label")
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Setting id if not set already

span.apply("Lorem ipsum dolor sit amet, consectetur adipiscing elit.").withIdIfNotSet("main_label")
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Setting href

a.apply("open google").withHref("https://www.google.com")

Prepend/Append to contents

p.apply("Lorem ipsum dolor sit amet, consectetur adipiscing elit.")
  .withPrependedToContents(badge.bg_success.apply("prepended"))
  .withAppendedToContents(badge.bg_info.apply("appended"))

prepended
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
appended