0

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.

Screen Shot of Ideal Structure

SharpSharpLes
  • 302
  • 4
  • 20
  • 1
    Shiny does a great job of wrapping our data work into apps, but that ease of use means we often have to add custom HTML, CSS, and/or JavaScript for specific stuff like this. Occasionally, a developer will put out libraries to augment functionality, but this specific UI layout likely requires you insert `tags$div` calls between tabs and some custom CSS for the active/inactive buttons. – Ryan Morton Aug 19 '19 at 22:26

1 Answers1

3

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:

enter image description here

teofil
  • 2,344
  • 1
  • 8
  • 17
  • could you please support in this https://stackoverflow.com/questions/59233401/in-r-how-to-create-multilevel-radiogroupbuttons-as-each-level-depends-choicena – John Smith Dec 08 '19 at 09:17