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

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

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?

library(shiny)
library(bslib)

ui = page(
  card(
    full_screen = F,
    card_header(
      "Main card",
    ),
      card(
        full_screen = T,
        card_header(
          "Plot card"
        ),
        plotOutput("plot")
      # )
    )
  )
)

server = function(input, output)
{
  output$plot = renderPlot(hist(rnorm(100)))
}

shinyApp(ui, server)

答案1

得分: 1

这是使用JavaScript的解决方案:

library(shiny)
library(bslib)

# 定义自定义JavaScript
js <- '
function toggleFullscreen(element) {
  if (!document.fullscreenElement) {
    element.requestFullscreen().catch(console.log);
  } else {
    document.exitFullscreen();
  }
}

$(document).on("shiny:connected", function() {
  $("#nestedCard").on("click", function() {
    toggleFullscreen(document.querySelector("#nestedCard"));
  });
});
'

ui = page(
  headerPanel("Nested Fullscreen Card"),
  mainPanel(
    tags$head(tags$script(HTML(js))), # 注入自定义JS
    tags$div(
      id = "mainCard",
      class = "card",
      tags$div(
        class = "card-body",
        tags$h5("Main card", class = "card-title"),
        tags$div(
          id = "nestedCard",
          class = "card",
          tags$div(
            class = "card-body",
            tags$h5("Plot card", class = "card-title"),
            plotOutput("plot")
          )
        )
      )
    )
  )
)

server = function(input, output)
{
  output$plot = renderPlot(hist(rnorm(100)))
}

shinyApp(ui, server)

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

英文:

Here is solution using Javascript:

library(shiny)
library(bslib)

# Define custom JavaScript
js &lt;- &#39;
function toggleFullscreen(element) {
  if (!document.fullscreenElement) {
    element.requestFullscreen().catch(console.log);
  } else {
    document.exitFullscreen();
  }
}

$(document).on(&quot;shiny:connected&quot;, function() {
  $(&quot;#nestedCard&quot;).on(&quot;click&quot;, function() {
    toggleFullscreen(document.querySelector(&quot;#nestedCard&quot;));
  });
});
&#39;

ui = page(
  headerPanel(&quot;Nested Fullscreen Card&quot;),
  mainPanel(
    tags$head(tags$script(HTML(js))), # Inject custom JS
    tags$div(
      id = &quot;mainCard&quot;,
      class = &quot;card&quot;,
      tags$div(
        class = &quot;card-body&quot;,
        tags$h5(&quot;Main card&quot;, class = &quot;card-title&quot;),
        tags$div(
          id = &quot;nestedCard&quot;,
          class = &quot;card&quot;,
          tags$div(
            class = &quot;card-body&quot;,
            tags$h5(&quot;Plot card&quot;, class = &quot;card-title&quot;),
            plotOutput(&quot;plot&quot;)
          )
        )
      )
    )
  )
)

server = function(input, output)
{
  output$plot = renderPlot(hist(rnorm(100)))
}

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
匿名

发表评论

匿名网友

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

确定