【问题标题】:Shiny - dashboardPage - how can I add a button to box headerShiny - dashboardPage - 我如何向框标题添加按钮
【发布时间】:2017-12-16 13:47:05
【问题描述】:

使用dashboardPage,我用盒子制作了一个仪表板。

我希望能够单击框标题上的某处来触发某些操作。我知道标题有按钮的唯一情况是可扩展框的情况。是否可以概括一下,以便在单击框标题中的某处时触发某些操作?

我的设计目标是在用户单击此按钮时更新框中的信息,即更改框的内容。

谢谢!

body <- dashboardBody(
  fluidRow(
    box(
      title = "Title 1", width = 4, solidHeader = TRUE, status = "primary",
      "Box content"
    ),
    box(
      title = "Title 1", width = 4, solidHeader = TRUE, status = "warning",
      "Box content"
    )
  )
)
# We'll save it in a variable `ui` so that we can preview it in the console
ui <- dashboardPage(
  dashboardHeader(title = "Row layout"),
  dashboardSidebar(),
  body
)
# Preview the UI in the console
shinyApp(ui = ui, server = function(input, output) { })

【问题讨论】:

  • 看看this 尤其是后面的部分:“Edit: Whole infoBox clickable

标签: javascript css r shiny shinydashboard


【解决方案1】:

如果您想要在框标题的右上角有一个按钮,您可以修改原始的box 函数,或者您可以在创建框后使用一些 JavaScript 添加按钮。

更简单的解决方案是使用actionLinkactionButton 创建一个框标题。贝娄是这两种情况的一个例子。第一个框有一个actionLink 作为标题,当用户点击它时,框的内容就会更新。在第二个盒子上,标题是用纯文本和一个小的actionButton 创建的,它也会更新盒子的内容。对于第二个框,您可以添加一些自定义样式来创建与普通框相同大小的标题。

library(shiny)
library(shinydashboard)

body <- dashboardBody(
  fluidRow(
    box(
      title = actionLink("titleId", "Update", icon = icon("refresh")), 
      width = 4, solidHeader = TRUE, status = "primary",
      uiOutput("boxContentUI")
    ),
    box(
      title = p("Title 1", 
                actionButton("titleBtId", "", icon = icon("refresh"),
                  class = "btn-xs", title = "Update")
      ), 
      width = 4, solidHeader = TRUE, status = "warning",
      uiOutput("boxContentUI2")
    )
  )
)

ui <- dashboardPage(
  dashboardHeader(title = "Row layout"),
  dashboardSidebar(),
  body
)

server = function(input, output, session) { 
  output$boxContentUI <- renderUI({
    input$titleId
    pre(paste(sample(letters,10), collapse = ", "))
  }) 

  output$boxContentUI2 <- renderUI({
    input$titleBtId
    pre(paste(sample(LETTERS,10), collapse = ", "))
  })  
}

shinyApp(ui = ui, server = server)

【讨论】:

    猜你喜欢
    • 2019-06-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-01-02
    • 1970-01-01
    • 1970-01-01
    • 2014-01-03
    • 1970-01-01
    相关资源
    最近更新 更多