Component - Checkbox

문제

laminar 와 fomantic-UI 의 Checkbox 를 이용해, 재활용 가능한 component 를 만들어 보자

코드

import com.raquo.laminar.api.L._
import com.raquo.laminar.nodes.ReactiveHtmlElement
import org.scalajs.dom
import org.scalajs.dom.html

object Main {
  class Checkbox(name: String) {
    val checkedVar: Var[Boolean]            = Var(false)
    val elem: ReactiveHtmlElement[html.Div] = div(
      cls := "ui checkbox",
      input(typ := "checkbox", checked <-- checkedVar, onInput.mapToChecked --> checkedVar),
      label(name)
    )
  }

  def main(args: Array[String]): Unit = {
    val checkbox = new Checkbox("my check")

    val content = div(
      checkbox.elem,
      div(
        label("checked: "),
        child.text <-- checkbox.checkedVar.signal.map(_.toString),
        Signal.fromValue(false) --> checkbox.checkedVar // 초기값 설정
      )
    )

    val containerNode = dom.document.getElementById("main_content")
    render(containerNode, content)
  }
}

결과