Question

我想在小部件的标题旁边添加一个（？），以便用户可以悬停或点击它，获取额外的信息和他们可以点击的链接。

这就是我现在所拥有的：

## app.R ##
library(shiny)
library(shinydashboard)
library(shinyBS)
# Header
header <- dashboardHeader()
# Sidebar
sidebar <- dashboardSidebar(fileInput("chosenfile", label = h4("File input"), 
                                      accept = ".csv"),
                            bsButton("q1", label = "", icon = icon("question"),
                                     style = "info", size = "extra-small"),
                            bsPopover(id = "q1", title = "Tidy data",
                                      content = paste0("You should read the ", 
                                                       a("tidy data paper", 
                                                         href = "http://vita.had.co.nz/papers/tidy-data.pdf",
                                                         target="_blank")),
                                      placement = "right", 
                                      trigger = "click", 
                                      options = list(container = "body")
                                      )
                            )
# Body
body <- dashboardBody()
# ui
ui <- dashboardPage(header, sidebar, body)
# server
server <- function(input, output) {

}
# run
shinyApp(ui, server)

但它远非完美。例如，（？）的位置不在“文件输入”旁边，要关闭弹出框，您必须再次单击问号，而不是在弹出窗口中有（x）。

Answer 1

这个答案可能不是你最初想要的，但它仍然适合你。

你说你想要标签旁边的工具提示问号，所以我把它放在标签上。正确对齐。其次，您希望在再次单击按钮之前不要打开工具提示，因为这很烦人。那么popover选项“focus”可能对你来说是正确的。

## app.R ##
library(shiny)
library(shinydashboard)
library(shinyBS)
# Header
header <- dashboardHeader()
# Sidebar
sidebar <- dashboardSidebar(
  fileInput("chosenfile", 
    label = h4("File input ",
              tags$style(type = "text/css", "#q1 {vertical-align: top;}"),
              bsButton("q1", label = "", icon = icon("question"), style = "info", size = "extra-small")
            ),
    accept = ".csv"),
  bsPopover(id = "q1", title = "Tidy data",
    content = paste0("You should read the ", 
                a("tidy data paper", 
                  href = "http://vita.had.co.nz/papers/tidy-data.pdf",
                  target="_blank")
                ),
    placement = "right", 
    trigger = "focus", 
    options = list(container = "body")
  )
)
# Body
body <- dashboardBody()
# ui
ui <- dashboardPage(header, sidebar, body)
# server
server <- function(input, output) {}
# run
shinyApp(ui, server)

Answer 2

我对JS也不太了解，但是this post对'造型'shinyapps的帮助很大。

在同一行中显示小部件的一种方法是将每个小部件放在一个带有'style：inline-block'的div中。由于fileInput太大，（？）会一直移动到下一行，因此您可以强制告诉fileInput出现多少空间，其中'width：somepercetage％'或'width：somepixels px'。

遵循这些想法，代码将如下所示：

div(
  div(
    # edit1
    style="width:80%; display:inline-block; vertical-align: middle;",
    fileInput("chosenfile", label = h4("File input"), 
              accept = ".csv")
  ),
  div(
    # edit2
    style="display:inline-block; vertical-align: middle;",
    bsButton("q1", label = "", icon = icon("question"),
             style = "info"),
    bsPopover(id = "q1", title = "Tidy data",
              content = paste0("You should read the ", 
                               a("tidy data paper", 
                               href = "http://vita.had.co.nz/papers/tidy-data.pdf",
                                 target="_blank")),
              placement = "right", 
              trigger = "click", 
              options = list(container = "body")
    )
  )
)

添加popovers到闪亮的应用程序？

2 个答案: