web/laminar
-
EventStream 의 flatMap vs combineWithFnweb/laminar 2022. 10. 1. 17:37
코드 package com.github.windbird.playweb import com.raquo.laminar.api.L._ import org.scalajs.dom object Main { def main(args: Array[String]): Unit = { val buttonA = button("A") val buttonAE = buttonA.events(onClick.mapTo(scala.math.random())).debugLog() val buttonB = button("B") val buttonBE = buttonB.events(onClick.mapTo(scala.math.random())).debugLog() // val c: EventStream[String] = buttonAE.co..
-
완성 - 메뉴 구현web/laminar 2022. 1. 29. 10:30
문제 Waypoint 를 이용해 Router 적용 코드에 fomantic-ui menu 를 적용해 본다. http://localhost:9000/search?engine=google&query=bts 입력 했을 때 http://localhost:9000/login 입력 했을 때 코드 import com.raquo.laminar.api.L import com.raquo.laminar.api.L._ import com.raquo.laminar.nodes.ReactiveHtmlElement import com.raquo.waypoint._ import org.scalajs.dom import org.scalajs.dom.html import upickle.default._ class Radio(name: St..
-
Waypoint 를 이용해 Router 적용web/laminar 2022. 1. 28. 20:36
문제 Waypoint 를 이용해 Router 를 적용해 본다. http://localhost:9000/search?engine=google&query=bts 입력 했을 때 google 이 선택 체크되고, Search Query 에 bts 가 입력된 화면이 노출되어야 한다. 사용자가 Search Engine 으로 naver 를 선택 체크하고, Search Query 로 iphone 을 입력후 submit 버튼을 눌렀을 때 브라우저 URL 이 http://localhost:9000/search?engine=naver&query=iphone 로 변경되어야 한다. http://localhost:9000/login 입력 했을 때 코드 import com.raquo.laminar.api.L import com.ra..
-
children 으로 List 표현하기web/laminar 2022. 1. 20. 21:54
코드 import com.raquo.laminar.api.L._ import org.scalajs.dom object Main { def main(args: Array[String]): Unit = { val list: Var[List[String]] = Var(List("a", "bc", "def")) val content = div( ol( children li(item))) ) ) val containerNode = dom.document.getElementById("main_content") render(containerNode, content) } } 설명 다음과 같은 Html 이 생성된다. a bc def
-
Observer 를 사용해 side effect 처리하기web/laminar 2022. 1. 9. 22:48
코드 import com.raquo.laminar.api.L._ import org.scalajs.dom import org.scalajs.dom.MouseEvent object Main { def main(args: Array[String]): Unit = { val observer = Observer[MouseEvent](_ => println("button clicked")) val testButton = button("test", onClick --> observer) // 혹은 아래처럼 한줄로 표현하는 것도 가능하다. // val testButton = button("test", onClick --> {_ => println("button clicked")}) val content = div( ..
-
Component - TextInputweb/laminar 2022. 1. 9. 22:23
문제 laminar 와 fomantic-UI 의 Input 을 이용해, 재활용 가능한 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 TextInput(name: String, description: String) { val textVar: Var[String] = Var("") val elem: ReactiveHtmlElement[html.Div] = div( label(name), cls := "ui input", input( typ :..
-
Component - Radioweb/laminar 2022. 1. 9. 22:08
문제 laminar 와 fomantic-UI 의 Radio 를 이용해, 재활용 가능한 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 Radio(name: String, items: Seq[String]) { val selectedVar: Var[String] = Var("") val elem: ReactiveHtmlElement[html.Div] = div( cls := "ui form", div( cls := "inline fields"..
-
Component - Checkboxweb/laminar 2022. 1. 9. 21:49
문제 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 c..