英文:
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 <- navbarPage(
title = "Shiny",
theme = bslib::bs_theme(bootswatch = "cosmo", version = 3), # not working with version = 4 or version = 5
tabPanel(
"Tab 1",
fluidPage(
mainPanel(
bsButton("popupBtn", label = "?", style = "info")
)
)
)
)
server <- function(input, output, session) {
shinyBS::addPopover(
session,
"popupBtn",
"Data",
content = paste0("Mon texte"),
trigger = 'hover'
)
}
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 <- "
$(document).ready(function() {
var popoverTriggerList =
[].slice.call(document.querySelectorAll('[data-bs-toggle=popover]'));
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
})
});
"
ui <- navbarPage(
tags$head(tags$script(HTML(js))),
title = "Shiny",
theme = bslib::bs_theme(bootswatch = "cosmo", version = 5),
tabPanel(
"Tab 1",
fluidPage(
mainPanel(
actionButton(
"popupBtn",
label = "?",
`data-bs-toggle` = "popover",
title = "Popover title",
`data-bs-content` =
"And here's some amazing content. It's very engaging. Right?"
)
)
)
)
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
这里是文档。
英文:
Here is the way:
library(shiny)
library(bslib)
js <- "
$(document).ready(function() {
var popoverTriggerList =
[].slice.call(document.querySelectorAll('[data-bs-toggle=popover]'));
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
})
});
"
ui <- navbarPage(
tags$head(tags$script(HTML(js))),
title = "Shiny",
theme = bslib::bs_theme(bootswatch = "cosmo", version = 5),
tabPanel(
"Tab 1",
fluidPage(
mainPanel(
actionButton(
"popupBtn",
label = "?",
`data-bs-toggle` = "popover",
title = "Popover title",
`data-bs-content` =
"And here's some amazing content. It's very engaging. Right?"
)
)
)
)
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
Here is the documentation.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论