我正在使用 构建一个 Shiny 应用shinyscreenshot
。我的应用包含一个“分数”卡,其中有一个 radioGroupButtons 列表,用户可以从中进行选择。radioGroupButtons 在应用中不可见,但是,当我使用 截取屏幕截图时shinyscreenshot
,radioGroupButtons 会出现并与数值重叠,导致屏幕截图混乱。
我想在截屏时隐藏 radioGroupButtons。我尝试使用 shinyjs 来切换按钮的可见性,但没有按预期工作。
这是一个最小的可重现示例,演示了我的设置和方法:
library(shiny)
library(bs4Dash)
library(shinyWidgets)
library(shinyjs)
library(shinyscreenshot)
my_ids <- c("region_1", "region_2")
my_labels <- c("A", "B")
ui <- bs4DashPage(
title = "My Example",
header = bs4DashNavbar(),
sidebar = bs4DashSidebar(disable = TRUE),
body = bs4DashBody(
useShinyjs(),
# CSS for radio button styles and hiding elements
tags$style(HTML("
.btn-zero {background-color: white; color: black;}
.btn-zero.active {background-color: #a2ff45; color: black;}
.btn-one {background-color: white; color: black;}
.btn-one.active {background-color: #a2ff45; color: black;}
.btn-two {background-color: white; color: black;}
.btn-two.active {background-color: #a2ff45; color: black;}
.btn-three {background-color: white; color: black;}
.btn-three.active {background-color: #a2ff45; color: black;}
.region-label { line-height: 2.5; }
/* Hide elements during screenshot */
.hide-for-screenshot { display: none !important; }
")),
bs4Card(
title = "My Score",
width = 6,
style = "height: 200px; overflow: auto;",
tags$style(HTML("
.region-label { margin-top: -10px; }
")),
# Render radio buttons for each region
lapply(seq_along(my_ids), function(i) {
fluidRow(
column(6, h4(class = "region-label", paste(i-1, my_labels[i]))),
column(6, div(
style = "display: inline-block;",
shinyWidgets::radioGroupButtons(
inputId = my_ids[i],
label = NULL,
choices = 0:3,
selected = 0,
checkIcon = list(yes = icon("check")),
status = c("zero", "one", "two", "three"),
size = 'xs'
)
))
)
})
),
# Screenshot Button
actionButton("take_screenshot", "Take Screenshot", style = "margin-top: 10px;")
)
)
server <- function(input, output, session) {
observeEvent(input$take_screenshot, {
# Temporarily hide radio buttons
shinyjs::addClass(selector = ".radioGroupButtons", class = "hide-for-screenshot")
# Take screenshot and remove the hide class afterward
shinyscreenshot::screenshot()
# Show radio buttons again
shinyjs::removeClass(selector = ".radioGroupButtons", class = "hide-for-screenshot")
})
}
shinyApp(ui, server)
我尝试过的方法
自定义 CSS:我添加了一个.hide-for-screenshot
CSS 类 display: none !important
; 来隐藏元素。该类在截屏前应用,截屏后删除。
使用shinyjs
:我正在使用shinyjs::addClass
和shinyjs::removeClass
来切换.hide-for-screenshot
类radioGroupButtons
。
问题
尽管在截屏之前添加了hide-for-screenshot
类并隐藏了,但它们仍然出现在屏幕截图中。我怀疑这可能是因为没有遵守临时的 CSS 更改,或者延迟时间不足以应用样式。radioGroupButtons
shinyscreenshot
问题
如何确保截取屏幕截图radioGroupButtons
时完全隐藏?shinyscreenshot
任何建议或其他方法都将不胜感激!谢谢。