闪亮仪表板徽章菜单项

Question

如何使 menutem 徽章以不同于默认的方式对齐？ 在闪亮的UI中。：

menuItem("Test", tabName = "test", icon = icon("line-chart"),badgeLabel = "2nd", badgeColor = "green")

完整示例：

library(shiny)
library(shinydashboard)
# Default shiny
ui <- dashboardPage(
dashboardHeader(title = "Example"),
dashboardSidebar(
sidebarMenu(
  menuItem("Test", tabName = "test", icon = icon("line-chart"),
  badgeLabel   = "2nd", badgeColor = "green")
)),
dashboardBody(
tabItems(
  tabItem(tabName = "test",
      box(title = "How-to",status = "primary",solidHeader = TRUE,collapsible=TRUE, width = 8,
      sliderInput("bins",
                 "Number of bins:",
                 min = 1,
                 max = 50,
                 value = 30),
    # Show a plot of the generated distribution
    plotOutput("distPlot")
      )
    )
  )))
 # Define server logic required to draw a histogram
server <- function(input, output) {
   output$distPlot <- renderPlot({
  # generate bins based on input$bins from ui.R
  x    <- faithful[, 2] 
  bins <- seq(min(x), max(x), length.out = input$bins + 1)

  # draw the histogram with the specified number of bins
  hist(x, breaks = bins, col = 'darkgray', border = 'white')
  })
 }
# Run the application 
shinyApp(ui = ui, server = server)

在浏览器中检查它显示以下代码/：

<small class="badge pull-right bg-green">2nd</small> 

测试图片

我需要：

<small class="badge center-block bg-green">2nd</small> 

想要的图片

有什么想法吗？

Answer 1

您可以按如下方式使用 css： tags$style(type = 'text/css',".badge{min-width: 200px;}")

在您的代码中，它会是这样的：

library(shiny)
    library(shinydashboard)
    # Default shiny
    ui <- dashboardPage(
      dashboardHeader(title = "Example"),
      dashboardSidebar(
        ##The added css
        tags$style(type = 'text/css',".badge{min-width: 200px;}"),
        sidebarMenu(
          menuItem("Test", tabName = "test", icon = icon("line-chart"),
                   badgeLabel   = "2nd", badgeColor = "green")
        )),
      dashboardBody(
        tabItems(
          tabItem(tabName = "test",
                  box(title = "How-to",status = "primary",solidHeader = TRUE,collapsible=TRUE, width = 8,
                      sliderInput("bins",
                                  "Number of bins:",
                                  min = 1,
                                  max = 50,
                                  value = 30),
                      # Show a plot of the generated distribution
                      plotOutput("distPlot")
                  )
          )
        )))
    # Define server logic required to draw a histogram
    server <- function(input, output) {
      output$distPlot <- renderPlot({
        # generate bins based on input$bins from ui.R
        x    <- faithful[, 2] 
        bins <- seq(min(x), max(x), length.out = input$bins + 1)

        # draw the histogram with the specified number of bins
        hist(x, breaks = bins, col = 'darkgray', border = 'white')
      })
    }
    # Run the application 
    shinyApp(ui = ui, server = server)

你会得到这样的东西：

希望对你有帮助！