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

debugcn 发表于 Dev

塞巴斯蒂安·泽基（Sebastian Zeki）

我在闪亮的应用程序中有一个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)

斯蒂芬·洛朗（Stephane Laurent）

像这样？

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)