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

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

R shiny : Incompatibility of use between bslib and shinyBS

问题

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

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

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

  1. library(shiny)
  2. library(bslib)
  3. library(shinyBS)
  5. ui <- navbarPage(
  6.   title = "Shiny",
  8.   theme = bslib::bs_theme(bootswatch = "cosmo", version = 3), # 不适用于版本4或版本5
  9.   tabPanel(
  10.     "Tab 1",
  11.     fluidPage(
  12.       mainPanel(
  13.         bsButton("popupBtn", label = "?", style = "info")
  14.       )
  15.     )
  16.   )
  17. )
  19. server <- function(input, output, session) {
  20.   shinyBS::addPopover(
  21.     session,
  22.     "popupBtn",
  23.     "数据",
  24.     content = paste0("我的文本"),
  25.     trigger = 'hover'
  26.   )
  27. }
  29. 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 :

  1. library(shiny)
  2. library(bslib)
  3. library(shinyBS)
  5. ui &lt;- navbarPage(
  6.   title = &quot;Shiny&quot;,
  8.   theme = bslib::bs_theme(bootswatch = &quot;cosmo&quot;, version = 3), # not working with version = 4 or version = 5
  9.   tabPanel(
  10.     &quot;Tab 1&quot;,
  11.     fluidPage(
  12.       mainPanel(
  13.         bsButton(&quot;popupBtn&quot;, label = &quot;?&quot;, style = &quot;info&quot;)
  14.       )
  15.     )
  16.   )
  17. )
  19. server &lt;- function(input, output, session) {
  20.   shinyBS::addPopover(
  21.     session,
  22.     &quot;popupBtn&quot;,
  23.     &quot;Data&quot;,
  24.     content = paste0(&quot;Mon texte&quot;),
  25.     trigger = &#39;hover&#39;
  26.   )
  27. }
  29. shinyApp(ui, server)

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

答案1

得分: 1

以下是已翻译的内容：

这是方法：

  1. library(shiny)
  2. library(bslib)
  4. js &lt;- &quot;
  5. $(document).ready(function() {
  6.   var popoverTriggerList = 
  7.     [].slice.call(document.querySelectorAll(&#39;[data-bs-toggle=popover]&#39;));
  8.   var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
  9.     return new bootstrap.Popover(popoverTriggerEl);
  10.   })
  11. });
  12. &quot;
  14. ui &lt;- navbarPage(
  15.   tags$head(tags$script(HTML(js))),
  16.   
  17.   title = &quot;Shiny&quot;,
  18.   theme = bslib::bs_theme(bootswatch = &quot;cosmo&quot;, version = 5), 
  19.   
  20.   tabPanel(
  21.     &quot;Tab 1&quot;,
  22.     fluidPage(
  23.       mainPanel(
  24.         actionButton(
  25.           &quot;popupBtn&quot;, 
  26.           label = &quot;?&quot;, 
  27.           `data-bs-toggle` = &quot;popover&quot;,
  28.           title = &quot;Popover title&quot;, 
  29.           `data-bs-content` = 
  30.             &quot;And here&#39;s some amazing content. It&#39;s very engaging. Right?&quot;  
  31.         )
  32.       )
  33.     )
  34.   )
  35. )
  38. server &lt;- function(input, output, session) {
  39.   
  40. }
  42. shinyApp(ui, server)

这里是文档。

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

英文:

Here is the way:

  1. library(shiny)
  2. library(bslib)
  4. js &lt;- &quot;
  5. $(document).ready(function() {
  6.   var popoverTriggerList = 
  7.     [].slice.call(document.querySelectorAll(&#39;[data-bs-toggle=popover]&#39;));
  8.   var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
  9.     return new bootstrap.Popover(popoverTriggerEl);
  10.   })
  11. });
  12. &quot;
  14. ui &lt;- navbarPage(
  15.   tags$head(tags$script(HTML(js))),
  16.   
  17.   title = &quot;Shiny&quot;,
  18.   theme = bslib::bs_theme(bootswatch = &quot;cosmo&quot;, version = 5), 
  19.   
  20.   tabPanel(
  21.     &quot;Tab 1&quot;,
  22.     fluidPage(
  23.       mainPanel(
  24.         actionButton(
  25.           &quot;popupBtn&quot;, 
  26.           label = &quot;?&quot;, 
  27.           `data-bs-toggle` = &quot;popover&quot;,
  28.           title = &quot;Popover title&quot;, 
  29.           `data-bs-content` = 
  30.             &quot;And here&#39;s some amazing content. It&#39;s very engaging. Right?&quot;  
  31.         )
  32.       )
  33.     )
  34.   )
  35. )
  38. server &lt;- function(input, output, session) {
  39.   
  40. }
  42. 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
  • bootstrap-5
  • incompatibility
  • r
  • shiny
匿名

发表评论

匿名网友

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

确定