Question

默认情况下，在闪亮中使用navbarPage()会创建一个静态顶部＆＃39;引导页面（example）。如果我正在为网页编写html，我可以添加一个<ul>元素，其中nav navbar-nav navbar-right类将navbar-right将标签/菜单移动到导航栏的右侧。

似乎没有办法直接通过框架强制这种行为 - 有一种聪明的已知方法可以实现这一目标吗？

Answer 1

取决于您的期望有多低。

您可以在您的用户界面中添加css，使其与您的标签集或右侧的标题对齐。代码：

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的{{1}}参数也接受常规navbarPage - 容器。（例如，徽标而不是纯文本。）这可以用于将整个UI元素（例如按钮）填充到div点。当然，当你的标签与左边对齐时，你可以将它浮动到右边。

Answer 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)

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)

R shine navbarPage右对齐标签

3 个答案: