R闪亮的navbarPage右对齐选项卡

Question

默认情况下，使用navbarPage()in Shiny将创建一个“静态顶部”引导页面（例如）。如果我正在为网页编写html，则可以添加一个<ul>元素，该元素带有一类的nav navbar-nav navbar-right，这些元素navbar-right会将制表符/菜单移动到导航栏的右侧。

似乎没有一种方法可以直接通过框架强制这种行为-是否有一种聪明的已知方法可以完成此任务？

Answer 1

取决于您的期望值有多低。

您可以将css添加到UI中，以将选项卡集或标题对齐到右侧。码：

app <- shinyApp(
  ui = shinyUI(
    fluidPage(
      tags$head(
        tags$style(HTML("
          .navbar .navbar-nav {float: right}
          .navbar .navbar-header {float: right}
        "))
      ),
      navbarPage("header",
        tabPanel("tab1"),
        tabPanel("tab2")
      )
    )
  ),

  server = function(input, output, session){}

)

runApp(app)

编辑：的header参数navbarPage也接受常规div容器。（例如，用徽标代替纯文本。）可以利用该漏洞将整个UI元素（例如按钮）填充到该header位置。然后，当然可以将其浮动到右侧，而将选项卡对齐到左侧。

Answer 2

K. Rohde 提供的解决方案，尤其是编辑，可以使其几乎保持纯正的 Shiny。我发现了insertAdjacentHTMLjavascript 函数并用它来创建一个右侧的文本标签。我想应该可以制作 Shiny 知道并可以使用的标签。就我而言，我想将版本信息放在右侧的导航栏上。因此，添加disabled类是为了避免混淆。

library(shiny)
app <- shinyApp(
  ui = shinyUI(
    fluidPage(
      navbarPage("Site Title",
        tabPanel("v0.1"),
        tabPanel("tab1"),
        tabPanel("tab2")
      ),
      HTML("<script>var parent = document.getElementsByClassName('navbar-nav');
parent[0].insertAdjacentHTML( 'afterend', '<ul class=\"nav navbar-nav navbar-right\"><li class=\"disabled\"><a href=\"#\">v0.1</a></li></ul>' );</script>")
    )
  ),

  server = function(input, output, session){}

)

runApp(app)

Answer 3

您可以使用shinyjs包

library(shiny)
ui <- shinyUI(

    navbarPage(
        'Test',
        id = 'menus',
        tabPanel('Test',
                 shinyjs::useShinyjs()),
        tabPanel("Summary"),
        tabPanel("Table", value = 'table')
    ))

server <- function(input, output, session) {
    shinyjs::addClass(id = "menus", class = "navbar-right")
}

shinyApp(ui, server)