css - 使用 css 在 Shiny 的应用程序中将 tabPanel 右对齐

Question

总结:

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

到目前为止我尝试了什么:

我使用了以下解决方案:

1. This solution在仪表板的所有选项卡集中找到的右侧 float 第三个选项卡。能具体说明就好了

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？时间差

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)