找到用cicerone修改tabPanel高亮的CSS

Question

我正在使用包

{cicerone}

在我闪亮的应用程序上创建一个游览。问题是当导航栏为

fixed-top

时，突出显示完全不透明。我花了几个小时搜索如何修改 CSS，以便结果与导航栏为

static

时相同，但没有成功。我询问了软件包维护者，但到目前为止还没有解决方案。

导航栏显示良好：

library(shiny)
library(cicerone)

home_guide <- Cicerone$
  new(id = "homeGuide")$
  step(
    "[data-value='home']",
    "Hello",
    "Hello from tab 1",
    is_id = FALSE
  )$
  step(
    "[data-value='tab']",
    "Text",
    "This is an input",
    is_id = FALSE
  )

ui <- navbarPage(
  "cicerone",
  header = list(use_cicerone()),
  id = "nav",
  # position = "fixed-top",
  tabPanel(
    "home",
    h1("First tab", id = "home_primary"),
    textInput("home_secondary", "Text")
  ),
  tabPanel(
    "tab",
    h1("Second tab", id = "tab_primary"),
    textInput("tab_secondary", "Text")
  )
)

server <- function(input, output, session){
  
  home_guide$init()$start()
  
}

shinyApp(ui, server)

导航栏显示不良（在

position = "fixed-top"

中添加

ui

）：

library(shiny)
library(cicerone)

home_guide <- Cicerone$
  new(id = "homeGuide")$
  step(
    "[data-value='home']",
    "Hello",
    "Hello from tab 1",
    is_id = FALSE
  )$
  step(
    "[data-value='tab']",
    "Text",
    "This is an input",
    is_id = FALSE
  )

ui <- navbarPage(
  "cicerone",
  header = list(use_cicerone()),
  id = "nav",
  position = "fixed-top",
  tabPanel(
    "home",
    h1("First tab", id = "home_primary"),
    textInput("home_secondary", "Text")
  ),
  tabPanel(
    "tab",
    h1("Second tab", id = "tab_primary"),
    textInput("tab_secondary", "Text")
  )
)

server <- function(input, output, session){
  
  home_guide$init()$start()
  
}

shinyApp(ui, server)

是否有 CSS 专家愿意向我展示如何修改第二种情况下的 CSS，以使结果与第一种情况相同？此人还可以发出拉取请求以在包中实现他/她的解决方案。

注意：目前（2020 年 10 月 12 日），您可能需要安装

{cicerone}

(

devtools::install_github("JohnCoene/cicerone")

) 的开发版本。

Answer 1

该错误是由制作

position: fixed;

并查看导航栏是最顶层元素（即正文的子元素）这一事实引起的，而

position : absolute;

修复此问题的方法是修改 css

.navbar-fixed-top, .navbar-fixed-bottom{
    position : absolute;
}

但是这会使

position : fixed;

的效果失效。因此，实现此目的的一种方法是监听用户点击

next|previous

按钮，在固定位置和绝对位置之间切换，这可以使用

js

来完成，并且要从闪亮的 js 运行我们需要

shinyjs

包。

install.packages("shinyjs")
library(shiny)
library(shinyjs)
library(cicerone)

homeGuide <- Cicerone$
  new(id = "homeGuide")$
  step(
    "[data-value='home']",
    "Hello",
    "Hello from tab 1",
    is_id = FALSE
  )$
  step(
    "[data-value='tab']",
    "Tab :(",
    "This is a tab",
    is_id = FALSE
  )$
  step(
    "[data-value='last']",
    "Last",
    "This is the last tab the one we check for",
    is_id = FALSE
  )$
  step(
    "home_secondary",
    "Text",
    "This is an input"
  )

用户界面

• 调用

  useShinyjs

  将shinyjs javascript库导入到网页中。
• 下一行默认将样式设置为绝对位置。

ui <- tagList(
  useShinyjs(),
  tags$head(tags$style(HTML("
      .navbar-fixed-top, .navbar-fixed-bottom{
        position : absolute;
      }
  "))),
  navbarPage(
  "cicerone",
  header = list(use_cicerone()),
  id = "nav",
   position = "fixed-top",
  tabPanel(
    "home",
    h1("First tab", id = "home_primary"),
    textInput("home_secondary", "Text")
  ),
  tabPanel(
    "tab",
    h1("Second tab", id = "tab_primary"),
    textInput("tab_secondary", "Text")
  ),
  tabPanel(
    "last",
    h1("last tab", id = "tab_last"),
    textInput("inp_text", "Text")
  )
))

服务器：

server <- function(input, output, session){
  homeGuide$init()$start()
  # if the user clicks the next button
  observeEvent(input$homeGuide_cicerone_next, {
    # check if the last highlighted element is the last tab
    if(grepl("last",input$homeGuide_cicerone_next$highlighted) ) runjs("document.querySelector('.navbar').style.position = 'fixed'; document.querySelector('.navbar').style.position") 
# because of some weird glitch you need to call the value of document.querySelector('.navbar').style.position in order for it to be changed took me a day to figure this out
   })
  # now for the previous button
  observeEvent(input$homeGuide_cicerone_previous, {
    # check if the before previous element is the last tab
    # i don't know if this is the way it should behave but apparently shiny is called before the click is sent to js and before previous actually contains the value of the previous element
      if(grepl("last",input$homeGuide_cicerone_previous$before_previous) ) runjs("document.querySelector('.navbar').style.position = 'absolute'; document.querySelector('.navbar').style.position")
   })
}

shinyApp(ui, server)

注意：更改

z-index

上方的

100002

会将元素推到灰色覆盖层上方。

Answer 2

这个 CSS 解决了这个问题（它来自 driver.js 存储库上的

此评论

）：

div#driver-highlighted-element-stage, div#driver-page-overlay {
  background: transparent !important;
  outline: 5000px solid rgba(0, 0, 0, .75)
}

现已纳入

{cicerone}

的开发版本中（将与：

devtools::install_github("JohnCoene/cicerone")

一起安装）。