R闪亮的navbarPage右对齐标签答案

【问题标题】：R shiny navbarPage right aligned tabsR闪亮的navbarPage右对齐标签
【发布时间】：2016-06-05 17:01:32
【问题描述】：

默认情况下，在 Shiny 中使用 navbarPage() 会创建一个“静态顶部”引导页面 (example)。如果我正在为网页编写 html，我可以添加一个带有 nav navbar-nav navbar-right 类的 <ul> 元素，其中 navbar-right 会将选项卡/菜单移动到导航栏的右侧。

似乎没有办法直接通过框架强制执行此行为 - 是否有一种聪明的已知方法来完成此操作？

【问题讨论】：

标签： r shiny

【解决方案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)

编辑： navbarPage 的 header 参数也接受常规的 div-containers。（例如，一个徽标而不是纯文本。）这可以被利用来将整个 UI 元素（例如按钮）填充到 header 点中。然后，您当然可以将其浮动到右侧，同时您的选项卡与左侧对齐。

【讨论】：

在这个方法中，所有标签都向右移动，对吗？
@Mark 正确。不知道有没有办法分别在每个tab上定义float。
@Mark 可能会利用header，如编辑中所述。

【解决方案2】：

K. Rohde 提供的解决方案，尤其是编辑，可以使它几乎保持纯粹的闪亮。我发现了insertAdjacentHTML javascript 函数并用它来创建右手文本标签。我想应该可以制作 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)

【讨论】：

【解决方案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)

【讨论】：