在 R闪亮中使用“introjs”突出显示选择器输入

Question

我想使用函数 introjs 为我的 R 闪亮应用程序编写一个介绍之旅，其中突出显示的元素之一是 pickerInput。但我在正确突出显示方面遇到了麻烦。

这是一个例子：

library(shiny)
library(rintrojs)

ui <- fluidPage(
  introjsUI(),
  pickerInput(
    inputId = "color",
    label = "What is your favorite color?",
    choices = c("Red", "Green", "Blue")
  ),
  br(),
  actionButton(inputId = "tour", label = "Start Tour")
)

server <- function(input, output, session) {
  introjs(session)
  observeEvent(input$tour, {
    introjs(session, options = list(
      steps = list(
        list(element = "#color",
             intro = "Pick a color."),
        list(element = "#tour",
             intro = "This is a button.")
      )
    ))
  })
}

shinyApp(ui, server)

我希望突出显示整个 pickerInput （就像突出显示按钮时一样）。但这就是发生的事情：

突出显示有问题：

如果我使用 introBox 而不是在 introjs 调用中指定游览的元素，问题就解决了。但由于我想实现多个游览，这篇文章中的解决方案建议不要使用 introBox。

有没有办法正确突出显示pickerInput？

Answer 1

您需要更改突出显示的 CSS 选择器。使用

.dropdown

代替

#color

这个

 list(element = "#color",
             intro = "Pick a color."),

应该改为：

        list(element = ".dropdown",
             intro = "Pick a color."),

说明：您在

#color

函数中定义为

pickerInput()

的 html id 实际上并不是下拉菜单的 html id，而是您从下拉菜单中选择的选项的 html id。如果您需要访问服务器中的该选择，但要更改下拉菜单的外观（或使用 introjs 定位它），则必须使用

#color

的父容器（即

.dropdown）的 css 选择器，这非常有用

.

这是下拉菜单类，而不是特定下拉菜单的 ID，因此如果您有多个下拉菜单，它们可能都会被选中。如果这是一个问题，您可以通过定位该菜单的 html id 或将该下拉菜单包装在 div 中然后定位该 div 来解决它。

编辑：如果您有多个下拉菜单

使用 Web 开发人员工具查找其 html ID，然后单独定位它们。如果你想要好记的名字，你可能需要像这样

tags$div()

将它们包裹在

tags$div(id="memorable-name",pickerInput(...) )

中，但是你可能还需要调整

#memorable-name

的 css 以使 div 的大小与子下拉菜单。

这是一个仅使用使用开发人员工具找到的两个下拉菜单的 html id 的示例

library(shiny)
library(rintrojs)

ui <- fluidPage(
  introjsUI(),
  pickerInput(
    inputId = "color",
    label = "What is your favorite color?",
    choices = c("Red", "Green", "Blue")
  ),
  br(),
  pickerInput(
    inputId = "fruit",
    label = "What is your favorite fruit?",
    choices = c("Apples", "Oranges", "Bananas")
  ),
  br(),
  actionButton(inputId = "tour", label = "Start Tour")
)

server <- function(input, output, session) {
  introjs(session)
  observeEvent(input$tour, {
    introjs(session, options = list(
      steps = list(
        list(element = "div.form-group:nth-child(1) > div:nth-child(2)",
             intro = "Pick a color."),
        list(element = "div.form-group:nth-child(3) > div:nth-child(2)",
             intro = "Pick a fruit."),
        list(element = "#tour",
             intro = "This is a button.")
        
        
      )
    ))
  })
}

shinyApp(ui, server)