Create Center Navigation Bar in Shiny with Symbols

问题

Currently, I have a shiny app built with the following UI structure.

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

However, I would like to change the look and feel of the navigation bars. I would like to center the tabs in the middle of the page as opposed to having them left-aligned (This post is not reproducible and does not seem sustainable). Then insert a triangle in between each tab panel to show a "story line" to indicated content from tab1, 2, etc. is informing and influencing the rest of the dashboard. Then also have the tab highlighted each time the tab changes (green color below). I inserted a quick screenshot of the general UI format I am going for. I couldn't find much online of people trying to do this. Anything to put me in the right direction would be great! Much appreciated! The below is not a hard guidance or request, but just a general style.

回答1:

You can mimic a layout like this using shinyWidgets::radioGroupButtons (and get reasonably close). Note that you still might need HTML/CSS customization of the buttons and arrows between them. This post might be a good resource: 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)

A screen shot of the layout:

来源：https://stackoverflow.com/questions/57563989/create-center-navigation-bar-in-shiny-with-symbols

标签

css

Shiny

tabs

formatting