TabsComponent.scala

TabsComponent.scala

// Bootstrap 5 tabs Scala.js + Outwatch wrapper

final class Tab(
  tabId: String,
  selected: Boolean,
  label: String,
  content: VDomModifier,
) {

  def navLi: HtmlVNode =
    li(
      cls := "nav-item",
      role := "presentation",
      button(
        cls := ("nav-link" :: selected.option("active").toList).mkString(" "),
        idAttr := s"$tabId-tab",
        attr("data-bs-toggle") := "tab",
        attr("data-bs-target") := s"#$tabId",
        `type` := "button",
        role := "tab",
        attr("aria-controls") := tabId,
        attr("aria-selected") := selected,
        label,
      ),
    )

  def paneDiv: HtmlVNode =
    div(
      cls := ("tab-pane" :: selected.option("active").toList).mkString(" "),
      idAttr := tabId,
      role := "tabpanel",
      attr("aria-labelledby") := s"$tabId-tab",
      content,
    )

}

final class TabsComponent(tabs: Tab*) {

  def modifier: VDomModifier =
    VDomModifier(
      ul(cls := "nav nav-tabs", role := "tablist", tabs.map(_.navLi)),
      div(cls := "tab-content my-4", tabs.map(_.paneDiv)),
    )

}

// example:

  private val tabs = new TabsComponent(
    new Tab(
      "item-general-data",
      true,
      "General",
      /* tab content */ ??? : VDomModifier,
    ),
    new Tab(
      "item-other-data",
      false,
      "Other",
      /* tab content */ ??? : VDomModifier,
    ),
  )

// and then somwhere in the UI code: tabs.modifier