Я использую пакет {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 во втором случае, чтобы результат был таким же, как в первом? Этот человек также может сделать запрос на извлечение, чтобы реализовать свое решение в пакете.

Примечание: на данный момент (12 октября 2020 года) вам, вероятно, потребуется установить версию для разработки {cicerone} ( devtools::install_github("JohnCoene/cicerone") ) .

ошибка вызвана созданием position: fixed; и рассмотрением того факта, что панель навигации является самым верхним элементом, т.Е. дочерним элементом тела, и это position : absolute; исправляет это путем изменения css

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

Однако это аннулирует эффект position : fixed; . Итак, способ сделать это — прослушивать нажатия пользователей на next|previous кнопки, переключаться между фиксированной позицией и абсолютной позицией, это можно сделать с помощью js и для запуска js из shiny нам нужен 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 , чтобы импортировать библиотеки javascript shinyjs на веб-страницу.
• в следующей строке стиль по умолчанию устанавливается в положение absolute.

 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 приведет к перемещению элемента над серым наложением.

Этот 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") ).