bslib嵌套卡片全屏行为只能显示嵌套卡片吗？

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

Can bslib nested card fullscreen behavior show just the nested card?

问题

When I use the option full_screen = TRUE with nested cards, clicking the fullscreen icon maximizes both cards. Can it be set to show just the internal card as fullscreen?

当我使用选项 full_screen = TRUE 与嵌套的 card 时，点击全屏图标会使两个卡片都最大化。是否可以设置仅显示内部卡片为全屏？

英文:

When I use the option full_screen = TRUE with nested cards, clicking the fullscreen icon maximizes both cards. Can it be set to show just the internal card as fullscreen?

  1. library(shiny)
  2. library(bslib)
  4. ui = page(
  5.   card(
  6.     full_screen = F,
  7.     card_header(
  8.       "Main card",
  9.     ),
  10.       card(
  11.         full_screen = T,
  12.         card_header(
  13.           "Plot card"
  14.         ),
  15.         plotOutput("plot")
  16.       # )
  17.     )
  18.   )
  19. )
  21. server = function(input, output)
  22. {
  23.   output$plot = renderPlot(hist(rnorm(100)))
  24. }
  26. shinyApp(ui, server)

答案1

得分: 1

这是使用JavaScript的解决方案：

  1. library(shiny)
  2. library(bslib)
  4. # 定义自定义JavaScript
  5. js <- '
  6. function toggleFullscreen(element) {
  7.   if (!document.fullscreenElement) {
  8.     element.requestFullscreen().catch(console.log);
  9.   } else {
  10.     document.exitFullscreen();
  11.   }
  12. }
  14. $(document).on("shiny:connected", function() {
  15.   $("#nestedCard").on("click", function() {
  16.     toggleFullscreen(document.querySelector("#nestedCard"));
  17.   });
  18. });
  19. '
  21. ui = page(
  22.   headerPanel("Nested Fullscreen Card"),
  23.   mainPanel(
  24.     tags$head(tags$script(HTML(js))), # 注入自定义JS
  25.     tags$div(
  26.       id = "mainCard",
  27.       class = "card",
  28.       tags$div(
  29.         class = "card-body",
  30.         tags$h5("Main card", class = "card-title"),
  31.         tags$div(
  32.           id = "nestedCard",
  33.           class = "card",
  34.           tags$div(
  35.             class = "card-body",
  36.             tags$h5("Plot card", class = "card-title"),
  37.             plotOutput("plot")
  38.           )
  39.         )
  40.       )
  41.     )
  42.   )
  43. )
  45. server = function(input, output)
  46. {
  47.   output$plot = renderPlot(hist(rnorm(100)))
  48. }
  50. shinyApp(ui, server)

bslib嵌套卡片全屏行为只能显示嵌套卡片吗？

英文:

Here is solution using Javascript:

  1. library(shiny)
  2. library(bslib)
  4. # Define custom JavaScript
  5. js &lt;- &#39;
  6. function toggleFullscreen(element) {
  7.   if (!document.fullscreenElement) {
  8.     element.requestFullscreen().catch(console.log);
  9.   } else {
  10.     document.exitFullscreen();
  11.   }
  12. }
  14. $(document).on(&quot;shiny:connected&quot;, function() {
  15.   $(&quot;#nestedCard&quot;).on(&quot;click&quot;, function() {
  16.     toggleFullscreen(document.querySelector(&quot;#nestedCard&quot;));
  17.   });
  18. });
  19. &#39;
  21. ui = page(
  22.   headerPanel(&quot;Nested Fullscreen Card&quot;),
  23.   mainPanel(
  24.     tags$head(tags$script(HTML(js))), # Inject custom JS
  25.     tags$div(
  26.       id = &quot;mainCard&quot;,
  27.       class = &quot;card&quot;,
  28.       tags$div(
  29.         class = &quot;card-body&quot;,
  30.         tags$h5(&quot;Main card&quot;, class = &quot;card-title&quot;),
  31.         tags$div(
  32.           id = &quot;nestedCard&quot;,
  33.           class = &quot;card&quot;,
  34.           tags$div(
  35.             class = &quot;card-body&quot;,
  36.             tags$h5(&quot;Plot card&quot;, class = &quot;card-title&quot;),
  37.             plotOutput(&quot;plot&quot;)
  38.           )
  39.         )
  40.       )
  41.     )
  42.   )
  43. )
  45. server = function(input, output)
  46. {
  47.   output$plot = renderPlot(hist(rnorm(100)))
  48. }
  50. shinyApp(ui, server)

bslib嵌套卡片全屏行为只能显示嵌套卡片吗？

答案2

得分: 0

问题已在较新版本的 bslib 中得到解决：
https://github.com/rstudio/bslib/issues/558

英文:

The problem has been fixed in a newer version of bslib:
https://github.com/rstudio/bslib/issues/558

huangapple
  • 本文由 发表于 2023年5月14日 12:01:42
  • 转载请务必保留本文链接：https://go.coder-hub.com/76245761.html
  • bslib
  • r
  • shiny
匿名

发表评论

匿名网友

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

确定