如何在闪亮的选项卡上获取通知图标

Question

我在闪亮的应用程序中有一个 tabpanelSet。其中一个选项卡包含一个数据表。我希望数据表中的行数显示在选项卡标题文本旁边的一个漂亮的圆形图标中，以便用户在单击选项卡之前可以看到选项卡内数据表中的数字。

这是基本的应用程序。我想要圆形通知图标库的“详细信息”选项卡

library(shiny)
library(DT)
library(data.table)

ui <- fluidPage(

    # Application title
    titlePanel("Circular notification icon app"),

        mainPanel(
            tabsetPanel(type = "tabs",
                        tabPanel("Empty"),
                        tabPanel("Details",
                                 DT::dataTableOutput("iris"))
            )
        )
)

server <- function(input, output) {

    output$iris = DT::renderDT({
        datatable(iris,class = "display wrap",selection = "single",
                  options = list(
                      scrollX = TRUE,
                      scrollY = TRUE,
                      pageLength = 15,
                      select = "api",
                      dom = 'Bfrtip')
        )
    })
}

# Run the application
shinyApp(ui = ui, server = server)

Answer 1

像这样吗？

library(shiny)
library(DT)
library(shinyjs)

CSS <- "
#tabHeader {
  display: inline-block;
}
.circle {
  display: inline-block;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  font-size: 12px;
  color: #fff;
  line-height: 25px;
  text-align: center;
  background: #000
}"

js <- function(nrows){
  sprintf("$('#tabHeader .circle').html('%s');", nrows)
}


ui <- fluidPage(
  
  useShinyjs(),
  
  tags$head(
    tags$style(HTML(CSS))
  ),
  
  # Application title
  titlePanel("Circular notification icon app"),
  
  mainPanel(
    tabsetPanel(type = "tabs",
                tabPanel("Empty"),
                tabPanel(div(id = "tabHeader", span("Details"), 
                             div(class = "circle")),
                         DTOutput("iris"))
    )
  )
  
)


server <- function(input, output) {
  
  runjs(js(nrow(iris)))
  
  output$iris = renderDT({
    datatable(iris, class = "display wrap", selection = "single",
              options = list(
                scrollX = TRUE,
                scrollY = TRUE,
                pageLength = 15,
                select = "api",
                dom = 'Bfrtip')
    )
  })
  
}

# Run the application
shinyApp(ui = ui, server = server)