Scala RouterCtl类代码示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› Scala›Scala教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文整理汇总了Scala中japgolly.scalajs.react.extra.router.RouterCtl类的典型用法代码示例。如果您正苦于以下问题：Scala RouterCtl类的具体用法？Scala RouterCtl怎么用？Scala RouterCtl使用的例子？那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。

在下文中一共展示了RouterCtl类的20个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于我们的系统推荐出更棒的Scala代码示例。

示例1: MainMenu

//设置package包名称以及导入依赖的类
package spatutorial.client.modules

import diode.react.ModelProxy
import japgolly.scalajs.react._
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.vdom.prefix_<^._
import spatutorial.client.SPAMain.{DashboardLoc, Loc, TodoLoc}
import spatutorial.client.components.Bootstrap.CommonStyle
import spatutorial.client.components.Icon._
import spatutorial.client.components._
import spatutorial.client.services._

import scalacss.ScalaCssReact._

object MainMenu {
  // shorthand for styles
  @inline private def bss = GlobalStyles.bootstrapStyles

  case class Props(router: RouterCtl[Loc], currentLoc: Loc, proxy: ModelProxy[Option[Int]])

  private case class MenuItem(idx: Int, label: (Props) => ReactNode, icon: Icon, location: Loc)

  // build the Todo menu item, showing the number of open todos
  private def buildTodoMenu(props: Props): ReactElement = {
    val todoCount = props.proxy().getOrElse(0)
    <.span(
      <.span("Todo "),
      todoCount > 0 ?= <.span(bss.labelOpt(CommonStyle.danger), bss.labelAsBadge, todoCount)
    )
  }

  private val menuItems = Seq(
    MenuItem(1, _ => "Dashboard", Icon.dashboard, DashboardLoc),
    MenuItem(2, buildTodoMenu, Icon.check, TodoLoc)
  )

  private class Backend($: BackendScope[Props, Unit]) {
    def mounted(props: Props) =
      // dispatch a message to refresh the todos
      Callback.ifTrue(props.proxy.value.isEmpty, props.proxy.dispatch(RefreshTodos))

    def render(props: Props) = {
      <.ul(bss.navbar)(
        // build a list of menu items
        for (item <- menuItems) yield {
          <.li(^.key := item.idx, (props.currentLoc == item.location) ?= (^.className := "active"),
            props.router.link(item.location)(item.icon, " ", item.label(props))
          )
        }
      )
    }
  }

  private val component = ReactComponentB[Props]("MainMenu")
    .renderBackend[Backend]
    .componentDidMount(scope => scope.backend.mounted(scope.props))
    .build

  def apply(ctl: RouterCtl[Loc], currentLoc: Loc, proxy: ModelProxy[Option[Int]]): ReactElement =
    component(Props(ctl, currentLoc, proxy))
}

开发者ID:tuxslayer，项目名称:exhibition-catalog，代码行数:62，代码来源:MainMenu.scala

示例2: LayoutComponent

//设置package包名称以及导入依赖的类
package components

import app.AppRouter.Page
import japgolly.scalajs.react._
import japgolly.scalajs.react.extra.router.{ Resolution, RouterCtl }
import chandu0101.scalajs.react.components.materialui.{ MuiAppBar, MuiFlatButton, MuiMuiThemeProvider }
import japgolly.scalajs.react.ReactComponentB
import utils.ReactTags
import chandu0101.scalajs.react.components.Implicits._
import react.DropMenu
import scala.language.existentials
import scala.language.postfixOps


object LayoutComponent extends ReactTags {

  case class Props(c: RouterCtl[Page], r: Resolution[Page])

  def theTopBar(props: Props) = MuiMuiThemeProvider()(
    MuiAppBar(
      title = "???????",
      //  onLeftIconButtonTouchTap = CallbackDebug.f1("onLeftIconButtonTouchTap"),
      //  onRightIconButtonTouchTap = CallbackDebug.f1("onRightIconButtonTouchTap"),
      //  onTitleTouchTap = CallbackDebug.f1("onTitleTouchTap"),
      showMenuIconButton = true,
      iconElementLeft = DropMenu(props.c, props.r.page),
      iconElementRight = MuiFlatButton(href = "/logout", key = "logoutbut", label = "?????", primary = true)()
    )()
  )

  case class Backend($: BackendScope[Props, Unit]) {
    def mounted() = Callback.empty

    def render(props: Props) = {
      <.div(
        theTopBar(props),
        <.div(
          props.r.render()
        )
      )
    }
  }

  private val component = ReactComponentB[Props]("LayoutComponent")
    .renderBackend[Backend]
    .componentDidMount(_.backend.mounted())
    .build

  def apply(c: RouterCtl[Page], r: Resolution[Page]) = component(Props(c, r))

}

开发者ID:workingDog，项目名称:SilverworkReact，代码行数:52，代码来源:LayoutComponent.scala

示例3: Dashboard

//设置package包名称以及导入依赖的类
package spatutorial.client.modules

import diode.react._
import diode.data.Pot
import japgolly.scalajs.react.ReactComponentB
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.vdom.prefix_<^._
import spatutorial.client.SPAMain.{Loc, TodoLoc}
import spatutorial.client.components._
import spatutorial.client.services.RootModel

object Dashboard {

  case class Props(router: RouterCtl[Loc], proxy: ModelProxy[Pot[String]])

  // create dummy data for the chart
  val cp = Chart.ChartProps("Test chart", Chart.BarChart, ChartData(Seq("A", "B", "C"), Seq(ChartDataset(Seq(1, 2, 3), "Data1"))))

  // create the React component for Dashboard
  private val component = ReactComponentB[Props]("Dashboard")
    .render_P { case Props(router, proxy) =>
      <.div(
        // header, MessageOfTheDay and chart components
        <.h2("Dashboard"),
        // use connect from ModelProxy to give Motd only partial view to the model
        proxy.connect(m => m)(Motd(_)),
        Chart(cp),
        // create a link to the To Do view
        <.div(router.link(TodoLoc)("Check your todos!"))
      )
    }.build

  def apply(router: RouterCtl[Loc], proxy: ModelProxy[Pot[String]]) = component(Props(router, proxy))
}

开发者ID:mistakenot，项目名称:scalajstemp，代码行数:35，代码来源:Dashboard.scala

示例4: Nav

//设置package包名称以及导入依赖的类
package com.zhranklin.homepage.client.components

import japgolly.scalajs.react.extra.router.RouterCtl


object Nav {
  val title = new {
    val home = "Home"
    val tech = "Tech"
    val search = "Search"
    val notice = "Notice"
    val soj = "SOJ"
  }

  def apply(ctl: RouterCtl[Page], navActive: String) = {
    def item(title: String, target: Page) =
      <.li(^.classSet1("nav-item", "active" ? (navActive == title)),
        <.a(^.cls := "nav-link", ctl setOnClick target, ^.href := "#",
          title + " ",
          <.span(^.cls := "sr-only", "(current)")))
    <.nav(^.cls := "navbar navbar-fixed-top navbar-dark bg-inverse",
      <.a(^.cls := "navbar-brand", ctl setOnClick Page.Home, "Zhranklin's Blog", ^.href := "#"),
      <.ul(^.cls := "nav navbar-nav",
        item(title.home, Page.Home),
        item(title.search, Page.Search),
        item(title.notice, Page.Notice),
        item(title.soj, Page.ACM.List)
      ))
  }

}

开发者ID:zhranklin，项目名称:Private_Blog，代码行数:32，代码来源:Nav.scala

示例5: WindowComponent

//设置package包名称以及导入依赖的类
package postgresweb.routes

import japgolly.scalajs.react._
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.vdom.prefix_<^._
import postgresweb.components.{LeftNav, TopNav}
import postgresweb.css.CommonStyles

import scala.scalajs.js
import scalacss.Defaults._
import scalacss.ScalaCssReact._

object WindowComponent {

  object Style extends StyleSheet.Inline {
    import dsl._
    val content = style(addClassNames("mdl-layout__content"))
    val pageContent = style(addClassNames("page-content"))
  }

  val component = ReactComponentB[Props]("ItemsPage")
    .render_P { P =>
      <.div(CommonStyles.layout,
        TopNav(TopNav.Props(P.menu,P.selectedFormContainer,P.ctrl)),
        LeftNav(LeftNav.Props("Tables",P.ctrl)),
        <.main(Style.content,
          <.div(Style.pageContent,
            <.div(CommonStyles.row,
              <.div(CommonStyles.fullWidth,
                P.selectedFormContainer.render()
              )
            )
          )
        )
      )
    }
    .build

  case class Props(menu:Vector[() => FormContainer], selectedFormContainer: FormContainer, ctrl : RouterCtl[FormContainer])

  def apply(props : Props,ref: js.UndefOr[String] = "", key: js.Any = {}) = component.set(key, ref)(props)

}

开发者ID:minettiandrea，项目名称:postgres-web，代码行数:44，代码来源:WindowComponent.scala

示例6: DropDownMenu

//设置package包名称以及导入依赖的类
package react

import app.AppRouter.Page
import chandu0101.scalajs.react.components.Implicits._
import chandu0101.scalajs.react.components.materialui._
import japgolly.scalajs.react._
import japgolly.scalajs.react.extra.router.RouterCtl


object DropDownMenu {

  case class Props(ctl: RouterCtl[Page], currentPage: Page, menuItems: Seq[MenuItem])

  case class MenuItem(idx: String, label: String, page: Page)

  case class Backend(scope: BackendScope[Props, MenuItem]) {

    def onChange(props: Props): (ReactEventI, Int, MenuItem) => Callback =
      (e, idx, item) => {
        if (item.page != props.currentPage) props.ctl.set(item.page).runNow()
        Callback.empty
      }

    // render the items
    def render(props: Props, chosen: MenuItem) = MuiMuiThemeProvider()(
      MuiDropDownMenu(onChange = onChange(props), value = chosen)(
        props.menuItems map {
          case item => MuiMenuItem(key = item.idx, value = item, primaryText = item.label)()
        }: _*
      )
    )

  }

  val component = ReactComponentB[Props]("DropDownMenu")
    .initialState_P(_.menuItems.head)
    .renderBackend[Backend]
    .build

  def apply(ctl: RouterCtl[Page], currentPage: Page, menuItems: Seq[MenuItem]): ReactElement =
    component(Props(ctl, currentPage, menuItems))

}

开发者ID:workingDog，项目名称:SilverworkReact，代码行数:44，代码来源:DropDownMenu.scala

示例7: DropMenu

//设置package包名称以及导入依赖的类
package react

import app.AppRouter.{ AccountPage, HomePage, Page }
import chandu0101.scalajs.react.components.Implicits._
import chandu0101.scalajs.react.components.materialui._
import japgolly.scalajs.react._
import japgolly.scalajs.react.extra.router.RouterCtl


object DropMenu {

  case class Props(ctl: RouterCtl[Page], currentPage: Page)

  case class MenuItem(idx: String, label: String, page: Page)

  val menuItems = Seq(
    MenuItem("1", "?????????", HomePage),
    MenuItem("2", "???????", AccountPage)
  )

  case class Backend(scope: BackendScope[Props, MenuItem]) {

    def onChange(props: Props): (ReactEventI, Int, MenuItem) => Callback =
      (e, idx, item) => {
        if (item.page != props.currentPage) props.ctl.set(item.page).runNow()
        Callback.empty
      }

    // render the items
    def render(props: Props, chosen: MenuItem) = MuiMuiThemeProvider()(
      MuiDropDownMenu(onChange = onChange(props), value = chosen)(
        menuItems map {
          case item => MuiMenuItem(key = item.idx, value = item, primaryText = item.label)()
        }: _*
      )
    )

  }

  val component = ReactComponentB[Props]("DropMenu")
    .initialState(menuItems.head)
    .renderBackend[Backend]
    .build

  def apply(ctl: RouterCtl[Page], currentPage: Page): ReactElement = component(Props(ctl, currentPage))

}

开发者ID:workingDog，项目名称:SilverworkReact，代码行数:48，代码来源:DropMenu.scala

示例8: HomeScreen

//设置package包名称以及导入依赖的类
package screens

import app.AppRouter._
import japgolly.scalajs.react.extra.router.RouterCtl
import chandu0101.scalajs.react.components.materialui.{ MuiMuiThemeProvider, MuiRaisedButton, MuiToolbar, MuiToolbarGroup, MuiToolbarSeparator, MuiToolbarTitle }
import japgolly.scalajs.react.ReactComponentB
import japgolly.scalajs.react._

import scala.language.existentials
import scala.language.postfixOps


object HomeScreen {

  case class Props(page: RouterCtl[Page])

  case class State(selectedDays: List[String])

  case class Backend(scope: BackendScope[Props, State]) {

    def changeTo(page: Page, props: Props)(e: ReactEventH) = {
      props.page.set(page)
    }

    def render(props: Props, state: State) = MuiMuiThemeProvider()(
      MuiToolbar()(
        MuiToolbarGroup()(
          MuiRaisedButton(onClick = changeTo(NewJobPage, props) _, label = "??? ???", primary = true)(),
          MuiRaisedButton(onClick = changeTo(DeleteJobPage, props) _, label = "?? ??", primary = true)(),
          MuiRaisedButton(onClick = changeTo(UpdateJobPage, props) _, label = "?? ??", primary = true)()
        )
      )
    )

  }

  val component = ReactComponentB[Props]("HomeScreen")
    .initialState(State(List.empty))
    .renderBackend[Backend]
    .build

  def apply(c: RouterCtl[Page]) = component(Props(c))
}

开发者ID:workingDog，项目名称:SilverworkReact，代码行数:44，代码来源:HomeScreen.scala

示例9: Dashboard

//设置package包名称以及导入依赖的类
package spatutorial.client.modules

import diode.data.Pot
import diode.react._
import japgolly.scalajs.react._
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.vdom.prefix_<^._
import spatutorial.client.SPAMain.{Loc, TodoLoc}
import spatutorial.client.components._

import scala.util.Random
import scala.language.existentials

object Dashboard {

  case class Props(router: RouterCtl[Loc], proxy: ModelProxy[Pot[String]])

  case class State(motdWrapper: ReactConnectProxy[Pot[String]])

  // create dummy data for the chart
  val cp = Chart.ChartProps(
    "Test chart",
    Chart.BarChart,
    ChartData(
      Random.alphanumeric.map(_.toUpper.toString).distinct.take(10),
      Seq(ChartDataset(Iterator.continually(Random.nextDouble() * 10).take(10).toSeq, "Data1"))
    )
  )

  // create the React component for Dashboard
  private val component = ReactComponentB[Props]("Dashboard")
    // create and store the connect proxy in state for later use
    .initialState_P(props => State(props.proxy.connect(m => m)))
    .renderPS { (_, props, state) =>
      <.div(
        // header, MessageOfTheDay and chart components
        <.h2("Dashboard"),
        state.motdWrapper(Motd(_)),
        Chart(cp),
        // create a link to the To Do view
        <.div(props.router.link(TodoLoc)("Check your todos!"))
      )
    }
    .build

  def apply(router: RouterCtl[Loc], proxy: ModelProxy[Pot[String]]) = component(Props(router, proxy))
}

开发者ID:wrotki，项目名称:spacommander，代码行数:48，代码来源:Dashboard.scala

示例10: SearchResultsPage

//设置package包名称以及导入依赖的类
package net.scalytica.blaargh.pages

import japgolly.scalajs.react._
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.vdom.prefix_<^._
import net.scalytica.blaargh.components.ArticleCard
import net.scalytica.blaargh.models.Article
import net.scalytica.blaargh.pages.Views.{FilterCriteria, View}
import net.scalytica.blaargh.styles.BlaarghBootstrapCSS

import scala.scalajs.concurrent.JSExecutionContext.Implicits.queue
import scalacss.ScalaCssReact._

object SearchResultsPage {

  case class Props(fc: FilterCriteria, ctl: RouterCtl[View])

  case class State(allArticles: Seq[Article] = Seq.empty)

  class Backend($: BackendScope[Props, State]) {

    def init: Callback =
      $.props.map[Unit](p =>
        Article.Articles.map { a =>
          // Set the state once and for all
          $.setState(State(a)).runNow()
        }
      )

    def render(props: Props, state: State) =
      <.div(BlaarghBootstrapCSS.containerFluid,
        <.p(
          <.b(^.marginRight := "1.1rem", "Showing results for:"),
          <.span(BlaarghBootstrapCSS.labelDefault, props.fc.value)
        ),
        <.div(BlaarghBootstrapCSS.cardCols,
          props.fc.field match {
            case "author" =>
              state.allArticles.filter(_.author == props.fc.value).map(a => ArticleCard(a, props.ctl))
            case "label" =>
              state.allArticles.filter(_.labels.contains(props.fc.value)).map(a => ArticleCard(a, props.ctl))
            case _ =>
              EmptyTag
          }
        )
      )
  }

  val component = ReactComponentB[Props]("SearchResultsPage")
    .initialState_P(p => State())
    .renderBackend[Backend]
    .componentDidMount(_.backend.init)
    .build

  def apply(fc: FilterCriteria, ctl: RouterCtl[View]) =
    component(Props(fc, ctl))
}

开发者ID:kpmeen，项目名称:blaargh，代码行数:58，代码来源:SearchResultsPage.scala

示例11: ArticleCardList

//设置package包名称以及导入依赖的类
package net.scalytica.blaargh.components

import japgolly.scalajs.react._
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.vdom.prefix_<^._
import net.scalytica.blaargh.models.Article
import net.scalytica.blaargh.pages.Views.View
import net.scalytica.blaargh.styles.BlaarghBootstrapCSS
import scalacss.ScalaCssReact._

import scala.scalajs.concurrent.JSExecutionContext.Implicits.queue

object ArticleCardList {

  case class Props(ctl: RouterCtl[View])

  case class State(articles: Seq[Article], ctl: RouterCtl[View])

  class Backend($: BackendScope[Props, State]) {
    def init: Callback =
      $.props.map(p =>
        Callback.future[Unit] {
          Article.Articles.map(a => $.modState(_.copy(articles = a)))
        }.runNow()
      )

    def render(props: Props, state: State) =
      <.div(BlaarghBootstrapCSS.cardCols,
        state.articles.map(a => ArticleCard(a, props.ctl))
      )
  }

  val component = ReactComponentB[Props]("ArticleCardList")
    .initialState_P(p => State(Seq.empty, p.ctl))
    .renderBackend[Backend]
    .componentWillMount($ => $.backend.init)
    .build

  def apply(ctl: RouterCtl[View]) = component(Props(ctl))
}

开发者ID:kpmeen，项目名称:blaargh，代码行数:41，代码来源:ArticleCardList.scala

示例12: Label

//设置package包名称以及导入依赖的类
package net.scalytica.blaargh.components

import japgolly.scalajs.react._
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.vdom.prefix_<^._
import net.scalytica.blaargh.pages.Views.{Filter, FilterCriteria, View}
import net.scalytica.blaargh.styles.BlaarghBootstrapCSS

import scalacss.ScalaCssReact._

object Label {

  case class Props(lbl: String, ctl: RouterCtl[View])

  val component = ReactComponentB[Props]("Label")
    .initialState_P(p => p)
    .render { $ =>
      <.span(
        BlaarghBootstrapCSS.labelDefault,
        ^.cursor.pointer,
        ^.onClick --> $.state.ctl.byPath.set(Filter(FilterCriteria("label", $.props.lbl)).asPath),
        $.props.lbl
      )
    }
    .build

  def apply(label: String, ctl: RouterCtl[View]) = component(Props(label, ctl))
}

开发者ID:kpmeen，项目名称:blaargh，代码行数:29，代码来源:Label.scala

示例13: Dashboard

//设置package包名称以及导入依赖的类
package spatutorial.client.modules

import diode.react._
import diode.data.Pot
import japgolly.scalajs.react.ReactComponentB
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.vdom.prefix_<^._
import spatutorial.client.SPAMain.{Loc, TodoLoc}
import spatutorial.client.components._

object Dashboard {

  case class Props(router: RouterCtl[Loc], proxy: ModelProxy[Pot[String]])

  // create dummy data for the chart
  val cp = Chart.ChartProps("Test chart", Chart.BarChart, ChartData(Seq("A", "B", "C"), Seq(ChartDataset(Seq(1, 2, 3), "Data1"))))

  // create the React component for Dashboard
  private val component = ReactComponentB[Props]("Dashboard")
    .render_P { case Props(router, proxy) =>

      val motdConnect = proxy.connect(m => m)
      <.div(
        // header, MessageOfTheDay and chart components
        <.h2("Dashboard"),
        // use connect from ModelProxy to give Motd only partial view to the model
        motdConnect(Motd(_)),
        Chart(cp),
        // create a link to the To Do view
        <.div(router.link(TodoLoc)("Check your todos!"))
      )
    }.build

  def apply(router: RouterCtl[Loc], proxy: ModelProxy[Pot[String]]) = component(Props(router, proxy))
}

开发者ID:simerplaha，项目名称:scalajs-spa-tutorial-spray，代码行数:36，代码来源:Dashboard.scala

示例14: MainMenu

//设置package包名称以及导入依赖的类
package spatutorial.client.modules

import diode.react.ModelProxy
import japgolly.scalajs.react._
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.vdom.prefix_<^._
import spatutorial.client.SPAMain.{DashboardLoc, Loc, TodoLoc}
import spatutorial.client.components.Bootstrap.CommonStyle
import spatutorial.client.components.Icon._
import spatutorial.client.components._
import spatutorial.client.services._

import scalacss.ScalaCssReact._

object MainMenu {
  // shorthand for styles
  @inline private def bss = GlobalStyles.bootstrapStyles

  case class Props(router: RouterCtl[Loc], currentLoc: Loc, proxy: ModelProxy[Option[Int]])

  private case class MenuItem(idx: Int, label: (Props) => ReactNode, icon: Icon, location: Loc)

  // build the Todo menu item, showing the number of open todos
  private def buildTodoMenu(props: Props): ReactElement = {
    val todoCount = props.proxy().getOrElse(0)
    <.span(
      <.span("Todo "),
      todoCount > 0 ?= <.span(bss.labelOpt(CommonStyle.danger), bss.labelAsBadge, todoCount)
    )
  }

  private val menuItems = Seq(
    MenuItem(1, _ => "Dashboard", Icon.dashboard, DashboardLoc),
    MenuItem(2, buildTodoMenu, Icon.check, TodoLoc)
  )

  private class Backend($: BackendScope[Props, Unit]) {
    def mounted(props: Props) =
    // dispatch a message to refresh the todos
      Callback.when(props.proxy.value.isEmpty)(props.proxy.dispatch(RefreshTodos))

    def render(props: Props) = {
      <.ul(bss.navbar)(
        // build a list of menu items
        for (item <- menuItems) yield {
          <.li(^.key := item.idx, (props.currentLoc == item.location) ?= (^.className := "active"),
            props.router.link(item.location)(item.icon, " ", item.label(props))
          )
        }
      )
    }
  }

  private val component = ReactComponentB[Props]("MainMenu")
    .renderBackend[Backend]
    .componentDidMount(scope => scope.backend.mounted(scope.props))
    .build

  def apply(ctl: RouterCtl[Loc], currentLoc: Loc, proxy: ModelProxy[Option[Int]]): ReactElement =
    component(Props(ctl, currentLoc, proxy))
}

开发者ID:simerplaha，项目名称:scalajs-spa-tutorial-spray，代码行数:62，代码来源:MainMenu.scala

示例15: MainLayout

//设置package包名称以及导入依赖的类
package com.omis.client.views

import com.omis.client.router.ApplicationRouter.Loc
import japgolly.scalajs.react.extra.router.{Resolution, RouterCtl}
import japgolly.scalajs.react.vdom.html_<^._

// scalastyle:off
object MainLayout {

  def layout(c: RouterCtl[Loc], r: Resolution[Loc]): VdomElement = {
    <.div(
      Header.header(c, r),
      // the vertically center area
      r.render(),
      Footer.footer()
    )
  }

}

开发者ID:iriddhi，项目名称:mis，代码行数:20，代码来源:MainLayout.scala

示例16: Settings

//设置package包名称以及导入依赖的类
package com.omis.client.views

import com.omis.client.router.ApplicationRouter.Loc
import japgolly.scalajs.react._
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.vdom.html_<^._

object Settings {

  case class Props(routerCtl: RouterCtl[Loc])
  case class State()

  final class Backend($: BackendScope[Props, Unit]) {
    def render(p: Props): VdomElement =
      <.div(
        ^.className := "settings-page",
        <.div(
          ^.className := "container page",
          <.div(
            ^.className := "row",
            <.div(
              ^.className := "col-md-6 offset-md-3 col-xs-12",
              <.h1(^.className := "text-xs-center", "Your Settings"),
              <.form(
                <.fieldset(
                  <.fieldset(
                    ^.className := "form-group",
                    <.input(^.className := "form-control", ^.`type` := "text", ^.placeholder := "URL of profile picture")
                  ),
                  <.fieldset(
                    ^.className := "form-group",
                    <.input(^.className := "form-control form-control-lg", ^.`type` := "text", ^.placeholder := "Your Name")
                  ),
                  <.fieldset(
                    ^.className := "form-group",
                    <.textarea(^.className := "form-control form-control-lg", ^.rows := 8, ^.placeholder := "Short bio about you")
                  ),
                  <.fieldset(
                    ^.className := "form-group",
                    <.input(^.className := "form-control form-control-lg", ^.`type` := "text", ^.placeholder := "Email")
                  ),
                  <.fieldset(
                    ^.className := "form-group",
                    <.input(^.className := "form-control form-control-lg", ^.`type` := "password", ^.placeholder := "Password")
                  ),
                  <.button(^.className := "btn btn-lg btn-primary pull-xs-right", "Update Settings")
                )
              )
            )
          )
        )
      )
  }

  val component = ScalaComponent.builder[Props]("Settings")
    .renderBackend[Backend]
    //.configure(Reusability.shouldComponentUpdate)
    .build
}

开发者ID:iriddhi，项目名称:mis，代码行数:60，代码来源:Settings.scala

示例17: Home

//设置package包名称以及导入依赖的类
package com.omis.client.views

import com.omis.client.router.ApplicationRouter.Loc
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.{BackendScope, ScalaComponent}
import japgolly.scalajs.react.vdom.VdomElement
import japgolly.scalajs.react.vdom.html_<^._

object Home {

  case class State(placeholder: Long)
  case class Props(routerCtl: RouterCtl[Loc])
  class Backend($: BackendScope[Props, State]) {
    def render(s: State, p: Props): VdomElement =
      <.div(
        ^.className := "home-page",
        <.header(
          <.div(^.className := "container", ^.id := "maincontent",
            <.div(
              ^.className := "row",
              <.div(
                ^.className := "col-lg-12",
                <.img(^.className := "img-responsive", ^.src := "/assets/images/profile.png", ^.alt := ""),
                <.div(
                  ^.className := "intro-text",
                  <.h1(^.className := "name", "OMIS"),
                  <.hr(^.className := "star-light"),
                  <.span(^.className := "skills", "An open source employees and students management system")
                )
              )
            ))
        )
      )
  }

  val component = ScalaComponent.builder[Props]("Home")
    .initialState(State(0))
    .renderBackend[Backend]
    .build
}

开发者ID:iriddhi，项目名称:mis，代码行数:41，代码来源:Home.scala

示例18: Dashboard

//设置package包名称以及导入依赖的类
package com.omis.client.views

import com.omis.client.RootModels.UserRootModel
import com.omis.client.router.ApplicationRouter.Loc
import diode.react.ModelProxy
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.vdom.VdomElement
import japgolly.scalajs.react.vdom.html_<^._
import japgolly.scalajs.react.{BackendScope, ScalaComponent}

object Dashboard {

  case class State()
  case class Props(routerCtl: RouterCtl[Loc], proxy: ModelProxy[UserRootModel])
  class Backend($: BackendScope[Props, State]) {
    def render(s: State, p: Props): VdomElement =
      p.proxy.value.user.role match {
        case "student" => StudentDashboard.component(StudentDashboard.Props(p.routerCtl))
        case "teacher" => TeacherDashboard.component(TeacherDashboard.Props(p.routerCtl))
        case "admin" => AdminDashboard.component(AdminDashboard.Props(p.routerCtl))
        case _ => <.div()
      }
  }

  val component = ScalaComponent.builder[Props]("Home")
    .initialState(State())
    .renderBackend[Backend]
    .build
}

开发者ID:iriddhi，项目名称:mis，代码行数:30，代码来源:Dashboard.scala

示例19: Create

//设置package包名称以及导入依赖的类
package com.omis.client.views

import com.omis.client.router.ApplicationRouter.Loc
import japgolly.scalajs.react._
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.vdom.html_<^._

object Create {

  case class Props(routerCtl: RouterCtl[Loc])
  case class State()

  final class Backend($: BackendScope[Props, Unit]) {
    def render(p: Props): VdomElement =
      <.div(
        ^.className := "editor-page",
        <.div(
          ^.className := "container page",
          <.div(
            ^.className := "row",
            <.div(
              ^.className := "col-md-10 offset-md-1 col-xs-12",
              <.form(
                <.fieldset(
                  <.fieldset(
                    ^.className := "form-group",
                    <.input(^.`type` := "text", ^.className := "form-control form-control-lg", ^.placeholder := "Article Title")
                  ),
                  <.fieldset(
                    ^.className := "form-group",
                    <.input(^.`type` := "text", ^.className := "form-control", ^.placeholder := "What's this article about?")
                  ),
                  <.fieldset(
                    ^.className := "form-group",
                    <.textarea(^.className := "form-control", ^.rows := 8, ^.placeholder := "Write your article (in markdown)")
                  ),
                  <.fieldset(
                    ^.className := "form-group",
                    <.input(^.`type` := "text", ^.className := "form-control", ^.placeholder := "Enter tags"),
                    <.div(^.className := "tag-list")
                  ),
                  <.button(^.className := "btn btn-lg pull-xs-right btn-primary", ^.`type` := "button", "Publish Article")
                )
              )
            )
          )
        )
      )
  }

  val component = ScalaComponent.builder[Props]("Create")
    .renderBackend[Backend]
    //.configure(Reusability.shouldComponentUpdate)
    .build
}

开发者ID:iriddhi，项目名称:mis，代码行数:56，代码来源:Create.scala

示例20: Dashboard

//设置package包名称以及导入依赖的类
package spatutorial.client.modules

import diode.data.Pot
import diode.react._
import japgolly.scalajs.react.ReactComponentB
import japgolly.scalajs.react.extra.router.RouterCtl
import japgolly.scalajs.react.vdom.prefix_<^._
import spatutorial.client.SPAMain.{Loc, TodoLoc}
import spatutorial.client.components._

import scala.util.Random

object Dashboard {

  case class Props(router: RouterCtl[Loc], proxy: ModelProxy[Pot[String]])

  // create dummy data for the chart
  val cp = Chart.ChartProps(
    "Test chart",
    Chart.BarChart,
    ChartData(
      Random.alphanumeric.map(_.toUpper.toString).distinct.take(10),
      Seq(ChartDataset(Iterator.continually(Random.nextDouble() * 10).take(10).toSeq, "Data1"))
    )
  )

  // create the React component for Dashboard
  private val component = ReactComponentB[Props]("Dashboard")
    .render_P { case Props(router, proxy) =>
      <.div(
        // header, MessageOfTheDay and chart components
        <.h2("Dashboard"),
        // use connect from ModelProxy to give Motd only partial view to the model
        proxy.connect(m => m)(Motd(_)),
        Chart(cp),
        // create a link to the To Do view
        <.div(router.link(TodoLoc)("Check your todos!"))
      )
    }.build

  def apply(router: RouterCtl[Loc], proxy: ModelProxy[Pot[String]]) = component(Props(router, proxy))
}

开发者ID:adrijardi，项目名称:playing-scalajs，代码行数:43，代码来源:Dashboard.scala

注：本文中的japgolly.scalajs.react.extra.router.RouterCtl类示例整理自Github/MSDocs等源码及文档管理平台，相关代码片段筛选自各路编程大神贡献的开源项目，源码版权归原作者所有，传播和使用请参考对应项目的License；未经允许，请勿转载。