R shiny:bslib与shinyBS之间的使用不兼容。

huangapple go评论110阅读模式
英文:

R shiny : Incompatibility of use between bslib and shinyBS

问题

我有一个带有导航栏和默认主题的Shiny应用程序。我想在我的应用程序中的一个地方添加一个帮助按钮,当鼠标移到上面时显示弹出窗口。

我注意到使用一个具有Bootstrap版本大于3的主题会阻止弹出窗口正常工作。
使用版本3时,它可以正常工作。

以下是一个可重现的示例:

library(shiny)
library(bslib)
library(shinyBS)

ui <- navbarPage(
  title = "Shiny",

  theme = bslib::bs_theme(bootswatch = "cosmo", version = 3), # 不适用于版本4或版本5
  tabPanel(
    "Tab 1",
    fluidPage(
      mainPanel(
        bsButton("popupBtn", label = "?", style = "info")
      )
    )
  )
)

server <- function(input, output, session) {
  shinyBS::addPopover(
    session,
    "popupBtn",
    "数据",
    content = paste0("我的文本"),
    trigger = 'hover'
  )
}

shinyApp(ui, server)

如果有人有办法使主题与版本5一起工作并显示弹出窗口,请分享。

英文:

I have a shinyapp with a navbar and a default theme.
I want to add a help button in one place in my application that displays a popup when you move the mouse over it.

I noticed that using a theme with a boostrap version > 3 inhibited the popup from working.
with version = 3 it works normally

Here is a reproducible example :

library(shiny)
library(bslib)
library(shinyBS)

ui &lt;- navbarPage(
  title = &quot;Shiny&quot;,

  theme = bslib::bs_theme(bootswatch = &quot;cosmo&quot;, version = 3), # not working with version = 4 or version = 5
  tabPanel(
    &quot;Tab 1&quot;,
    fluidPage(
      mainPanel(
        bsButton(&quot;popupBtn&quot;, label = &quot;?&quot;, style = &quot;info&quot;)
      )
    )
  )
)

server &lt;- function(input, output, session) {
  shinyBS::addPopover(
    session,
    &quot;popupBtn&quot;,
    &quot;Data&quot;,
    content = paste0(&quot;Mon texte&quot;),
    trigger = &#39;hover&#39;
  )
}

shinyApp(ui, server)

If anyone has a trick to make the theme work with version = 5 and the popup

答案1

得分: 1

以下是已翻译的内容:

这是方法:

library(shiny)
library(bslib)

js &lt;- &quot;
$(document).ready(function() {
  var popoverTriggerList = 
    [].slice.call(document.querySelectorAll(&#39;[data-bs-toggle=popover]&#39;));
  var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl);
  })
});
&quot;

ui &lt;- navbarPage(
  tags$head(tags$script(HTML(js))),
  
  title = &quot;Shiny&quot;,
  theme = bslib::bs_theme(bootswatch = &quot;cosmo&quot;, version = 5), 
  
  tabPanel(
    &quot;Tab 1&quot;,
    fluidPage(
      mainPanel(
        actionButton(
          &quot;popupBtn&quot;, 
          label = &quot;?&quot;, 
          `data-bs-toggle` = &quot;popover&quot;,
          title = &quot;Popover title&quot;, 
          `data-bs-content` = 
            &quot;And here&#39;s some amazing content. It&#39;s very engaging. Right?&quot;  
        )
      )
    )
  )
)


server &lt;- function(input, output, session) {
  
}

shinyApp(ui, server)

这里是文档。

R shiny:bslib与shinyBS之间的使用不兼容。

英文:

Here is the way:

library(shiny)
library(bslib)

js &lt;- &quot;
$(document).ready(function() {
  var popoverTriggerList = 
    [].slice.call(document.querySelectorAll(&#39;[data-bs-toggle=popover]&#39;));
  var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl);
  })
});
&quot;

ui &lt;- navbarPage(
  tags$head(tags$script(HTML(js))),
  
  title = &quot;Shiny&quot;,
  theme = bslib::bs_theme(bootswatch = &quot;cosmo&quot;, version = 5), 
  
  tabPanel(
    &quot;Tab 1&quot;,
    fluidPage(
      mainPanel(
        actionButton(
          &quot;popupBtn&quot;, 
          label = &quot;?&quot;, 
          `data-bs-toggle` = &quot;popover&quot;,
          title = &quot;Popover title&quot;, 
          `data-bs-content` = 
            &quot;And here&#39;s some amazing content. It&#39;s very engaging. Right?&quot;  
        )
      )
    )
  )
)


server &lt;- function(input, output, session) {
  
}

shinyApp(ui, server)

Here is the documentation.

R shiny:bslib与shinyBS之间的使用不兼容。

huangapple
  • 本文由 发表于 2023年8月4日 23:14:38
  • 转载请务必保留本文链接:https://go.coder-hub.com/76837215.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定