RinteRface / shinyMobile

shiny API for Framework7 (IOS/android)
https://shinymobile.rinterface.com
406 stars 74 forks source link

Implement navigation between pages (f7Router) #29

Closed DivadNojnarg closed 3 years ago

DivadNojnarg commented 5 years ago

For now, inputs and outputs of the children pages do not render. Any ideas @pvictor ?

Ideally, we should have the same layout as in the framework7 kitchen sink. This is even more natural for phone users. However, from a technical point of view, this might be challenging.

DivadNojnarg commented 4 years ago

As a backup:

#' Multi views layout
#'
#' @param ... Slot for \link{f7View}.
#' @export
f7ViewLayout <- function(...) {

  items <- list(...)
  tabbarItems <- lapply(seq_along(items), function(i) {
    temp <- items[[i]][[1]]
    icon <- items[[i]][[2]]
    isActive <- length(grep(x = temp$attribs$class, pattern = "tab-active")) == 1
    shiny::a(
      href = paste0("#", temp$attribs$`data-name`),
      class = if (isActive) "tab-link tab-link-active" else "tab-link",
      icon
    )
  })

  viewTabbar <- shiny::tags$div(
    class = "toolbar tabbar toolbar-bottom",
    shiny::tags$div(
      class = "toolbar-inner",
      tabbarItems
    )
  )

  shiny::tagList(
    f7InputsDeps(),
    shiny::tags$div(
      class = "views tabs",
      # the menu must come first!
      lapply(seq_along(items), function(i) items[[i]][[1]])
    )
  )
}

#' Create an f7View
#'
#' A child of \link{f7ViewLayout}
#'
#' @param ... View content.
#' @param id View unique id
#' @param name View name: ie "view-main". If you specify "view-main", it will be
#' the main view.
#' @param main Whether it is the main view.
#' @param active Whether to start on that view. Only 1 view may be active at a time.
#' @param icon Icon.
#' @export
f7View <- function(..., id, name, main = FALSE, active = FALSE, icon = NULL) {

  viewCl <- paste("view tab")
  if (main) viewCl <- paste(viewCl, "view-main")
  if (active) viewCl <- paste(viewCl, "tab-active")

  list(
    shiny::tags$div(
      id = id,
      `data-name` = name,
      class = viewCl,
      ...
    ),
    icon
  )
}
DivadNojnarg commented 3 years ago

See opened POC and {brochure}