使用符号在Shiny中创建中心导航栏 [英] Create Center Navigation Bar in Shiny with Symbols

问题描述

当前，我有一个使用以下UI结构构建的闪亮应用程序.

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

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

但是，我想更改导航栏的外观.我想将标签置于页面中间，而不是使其左对齐( 帖子不可复制，似乎无法持续).然后在每个选项卡面板之间插入一个三角形，以显示一条故事线"，以指示来自tab1、2的指示内容，以此类推，这将影响并影响仪表板的其余部分.然后，每次选项卡更改时，选项卡都将突出显示(下面的绿色).我插入了要使用的通用UI格式的快速屏幕截图.我在网上找不到很多尝试这样做的人.让我朝正确方向迈进的任何事情都很棒！非常感激！以下不是硬性指导或要求，而只是一般样式.

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.

推荐答案

您可以使用shinyWidgets::radioGroupButtons模仿这样的布局(并合理地关闭).请注意，您仍然可能需要自定义按钮和箭头之间的HTML/CSS.这篇文章可能是不错的资源:创建一个带有直角三角形/指针的按钮

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)

布局的屏幕截图:

这篇关于使用符号在Shiny中创建中心导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！