css - 使用符号在 Shiny 中创建中心导航栏

Question

目前，我有一个使用以下 UI 结构构建的 Shiny 应用。

tabsetPanel(tabPanel("Tab1"),
tabPanel("Tab2"),
tabPanel("Tab3"),
tabPanel("Tab4")

但是，我想更改导航栏的外观。我想将选项卡居中放置在页面中间，而不是让它们左对齐(This 帖子不可重现，而且似乎不可持续)。然后在每个选项卡面板之间插入一个三 Angular 形，以显示“故事线”以指示来自选项卡 1、2 等的内容正在通知并影响仪表板的其余部分。然后每次选项卡更改时也突出显示选项卡(下面的绿色)。我插入了一张我想要的通用 UI 格式的快速截图。我在网上找不到太多尝试这样做的人。任何能让我朝着正确方向前进的东西都会很棒!非常感激!以下不是硬性指导或要求，只是一个大概的风格。

Answer 1

您可以使用 shinyWidgets::radioGroupButtons 来模仿这样的布局(并且相当接近)。请注意，您可能仍然需要对按钮和箭头之间的按钮和箭头进行 HTML/CSS 自定义。这篇文章可能是一个很好的资源:Create a Button with right triangle/pointer

library(shiny)
library(shinyWidgets)


ui <- fluidPage(titlePanel("Hack with shinyWidgets::radioGroupButtons"),
                mainPanel(
                  fluidRow(
                    column(width = 3, "some space"),
                    column(
                      width = 9,
                      align = "center",
                      radioGroupButtons(
                        inputId = "item",
                        label = "",
                        status = "success",
                        size = "lg",
                        direction = "horizontal",
                        justified = FALSE,
                        width = "100%",
                        individual = TRUE,
                        checkIcon = list(
                          "yes" = icon("check"),
                          "yes" = icon("check"),
                          "yes" = icon("check"),
                          "yes" = icon("check")
                        ), 
                        choiceNames = as.list(names(iris)[1:4]),
                        choiceValues = as.list(1:4)
                      )
                    )
                  ),
                  tags$hr(),
                  column(width = 3, "some space"),
                  column(
                    width = 9,
                    align = "center",
                    textOutput("text"),
                    wellPanel(dataTableOutput("out"))
                  )
                ))

server <- function(input, output) {

  out_tbl <- reactive({
    x <- iris[,c(5, as.numeric(input$item))]
    return(x)
  })

  output$out <- renderDataTable({
    out_tbl()
  },options = list(pageLength = 5)
  )

  output$text <- renderText({paste("Contents for tab", input$item)})
}

shinyApp(ui, server)

布局的屏幕截图: