使用css在闪亮的应用程序中将tabPanel右对齐

Question

总结：

我正在尝试从 shinydashboard 复制 tabBox，但没有加载 shinydashboard。我已经使用 tabsetPanel 和 tabPanel 完成了这项工作。每次设置其中一个 tabsetPanel 时，我都想将第三个选项卡向右浮动（用于标题），但是在某些情况下我不希望这种情况发生。我觉得我可能需要在 CSS 中引入某种自定义 ID 或类，以便我可以控制哪些标签集应该全部向左浮动。

到目前为止我所尝试的：

我使用了以下解决方案：

1. This solution 向右浮动在仪表板的所有选项卡集中找到的第三个选项卡。如果我能指定就好了

2. This solution 很有希望，但是由于有 2 个 tabsetPanel，选项卡空间现在被拆分。

library(shiny)

ui <-  fluidPage(

  tags$head(
    tags$style(HTML(
      ".nav-tabs li:nth-child(3) { float: right; pointer-events: none; cursor: default;}"

    ))),

        navbarPage(title = NULL

          ,tabPanel(title = "Nav tab 1"
              ,tabsetPanel(type = "tabs"
                           ,tabPanel(title = "Tab 1"
                                     ,column(
                                       width = 6
                                       ,tabsetPanel(type = "tabs"
                                          ,tabPanel(title = "Chart")
                                          ,tabPanel(title = "Table")
                                          ,tabPanel(title = "Box Title 1 #correct")
                                       )
                                     )
                                     ,column(
                                       width = 6
                                       ,tabsetPanel(type = "tabs"
                                                    ,tabPanel(title = "Chart")
                                                    ,tabPanel(title = "Table")
                                                    ,tabPanel(title = "Box Title 2 #correct")
                                       )
                                     )
                            )

                           ,tabPanel(title = "Tab 2")
                           ,tabPanel(title = "Tab 3 #I don't want this to align right")
                           ,tabPanel(title = "Tab 4")
              )
         )
         ,tabPanel(title = "Nav tab 2")
         ,tabPanel(title = "Nav tab 3 - #not affected coz different class")
        )
      )

server <- function(input, output) {
}

shinyApp(ui, server)

我在此处包含的代码包含上面链接中的解决方案 #1。正如您通过使用 css ".nav-tabs li:nth-child(3)" 所看到的，这是全局应用的。有没有办法可以保留这个 CSS 但使用类或 ID 或 data-value = "Nav tab 1" 以便我可以有选择地应用 float left css？ TIA

Answer 1

一种可能性是动态地将一个类添加/删除到您的 tabset 元素并调整您的 css。您需要将id 添加到您的标签集，以便能够通过 javascript 解决它。你必须执行一些 javascript 代码，最简单的是通过library(shinyjs)。

在下面的示例中，我在 actionButton 单击时切换类，但您可以根据需要进行调整。

library(shiny)
library(shinyjs)

style <- ".float-right li:nth-child(2) { float: right;}"

ui <- fluidPage(
  useShinyjs(),
  tags$head(tags$style(HTML(style))),
  navbarPage(title = "Move Me",
             tabPanel("Nav Tab 1",
                      tabsetPanel(type = "tabs", id = "moveme",
                                  tabPanel(title = "Tab 1", 
                                           actionButton("move", "Move Tab2")),
                                  tabPanel(title = "Tab 2")
                      )
             ),
             tabPanel("Nav Tab 2")
  )
)

server <- function(input, output) {
  observeEvent(input$move, {
    toggleCssClass("moveme", "float-right")
  }, ignoreInit = TRUE)
}

shinyApp(ui, server)

Answer 2

感谢@thothal，我能够将 id 引入特定的 tabsetpanel，我希望它的选项卡向右浮动。下面的完整解决方案。在我希望第三个选项卡向右浮动的地方，我添加了 id = "chart_tabs" 并在标题中使用了相关的 css。

ui <-  fluidPage(

  tags$head(
    tags$style(HTML(
      "#chart_tabs li:nth-child(3) { float: right; pointer-events: none; cursor: default;}

      "

    ))),

  navbarPage(title = NULL

    ,tabPanel(title = "Nav tab 1"
       ,tabsetPanel(type = "tabs"
          ,tabPanel(title = "Tab 1"
            ,column(
              width = 6
              ,tabsetPanel(type = "tabs"
                ,id = "chart_tabs"
                ,tabPanel(title = "Chart")
                ,tabPanel(title = "Table")
                ,tabPanel(title = "Box Title 1 #correct")
              )
            )
            ,column(
              width = 6
              ,tabsetPanel(type = "tabs"
                ,id = "chart_tabs"
                ,tabPanel(title = "Chart")
                ,tabPanel(title = "Table")
                ,tabPanel(title = "Box Title 2 #correct")
              )
            )
          )

          ,tabPanel(title = "Tab 2")
          ,tabPanel(title = "Tab 3 #I don't want this to align right")
          ,tabPanel(title = "Tab 4")
       )
    )
    ,tabPanel(title = "Nav tab 2")
    ,tabPanel(title = "Nav tab 3 - #not affected coz different class")
  )
)

server <- function(input, output) {
}

shinyApp(ui, server)