折叠盒子时减小宽度

Question

我试图不仅通过减小其高度（默认行为）而且还通过减小其宽度来折叠盒子，以便另一个盒子获得额外的空间；有点像可折叠的侧边栏。如何实现？

在下面的示例中，我希望最小化框 2，并让框 1 获得框 2 释放的额外宽度：

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(

    column(width = 12,
           box(width = 9, "box 1"),
           box(width = 3, "box 2", collapsible = T),
    )
))

server <- function(input, output) {

}

shinyApp(ui, server)

Answer 1

这是一种 JavaScript 方式，可以改进以处理更多情况。

library(shiny)
library(shinydashboard)

sideBySideBoxes <- function(box1, box2) {
  tags$div(
    class = "row sbsboxes",
    box1, box2
  )
}

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tags$head(
      tags$script(src = "sbsboxes.js")
    ),
    sideBySideBoxes(
      box(width = 9, "box 1"),
      box(width = 3, "box 2", collapsible = TRUE)
    )
  )
)

server <- function(input, output) {
  
}

shinyApp(ui, server)

将以下 JavaScript 代码放入应用程序的 www 子文件夹中的文件中，将其命名为 sbsboxes.js。

$(document).ready(function() {
  $(".sbsboxes").each(function() {
    var $div = $(this);
    var $children = $div.children();
    var $child1 = $($children.get(0));
    var $child2 = $($children.get(1));
    var sm1 = $child1.attr("class");
    var sm2 = $child2.attr("class");
    var width1 = sm1[7];
    var width2 = sm2[7];
    var $box1 = $child1.find(".box");
    var $box2 = $child2.find(".box");
    $box2.on("hidden.bs.collapse", function() {
      $child2.removeClass(sm2).addClass("col-sm-1");
      $child1.removeClass(sm1).addClass("col-sm-11");
    });
    $box2.on("shown.bs.collapse", function() {
      $child2.removeClass("col-sm-1").addClass(sm2);
      $child1.removeClass("col-sm-11").addClass(sm1);
    });
  });
});