时间戳

首页 > 解决方案 > 使用css在闪亮的应用程序中将tabPanel向右对齐

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

问题描述

概括：

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

到目前为止我已经尝试过：

我使用了以下解决方案：

  1. 此解决方案会在仪表板的所有选项卡集中找到右侧的第三个选项卡。如果我能指定就好了

  2. 这个解决方案很有希望，但是由于有 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

标签： cssrshiny

解决方案

一种可能性是动态地将一个类添加/删除到您的 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)

推荐阅读