Выравнивание tabPanel вправо в блестящем приложении с помощью CSS

Question

Резюме:

Я пытаюсь скопировать tabBox из shinydashboard, но без загрузки shinydashboard.Я сделал это с помощью tabsetPanel и tabPanel.Я хочу перемещать 3-ю вкладку вправо (для заголовков) каждый раз, когда я устанавливаю одну из tabsetPanel, однако бывают случаи, когда я этого не хочу.Я чувствую, что мне может понадобиться ввести какой-то собственный идентификатор или класс в CSS, чтобы я мог контролировать, какие вкладки должны плавать влево.

Что я пробовал до сих пор:

Я использовалследующие решения:

1. Это решение перемещает правые 3-ий вкладки, найденные во ВСЕХ вкладках в панели управления.Было бы хорошо, если бы я мог указать

2. Это решение является многообещающим, однако пространство вкладок теперь разделено из-за 2 tabsetPanels.

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 к вашему tabset, чтобы иметь возможность адресовать его через 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 я смог ввести идентификаторы для конкретной tabsetpanel, чтобы я хотел, чтобы ее вкладки плавали правильно.Полное решение ниже.Там, где я хотел, чтобы 3-я вкладка всплыла правильно, я добавил 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)