停止切换/隐藏的对象移动

Stop toggled / hidden objects from moving

我正在编写一个闪亮的应用程序,其中有两列带有 valueBoxes。我希望用户能够切换某些框以使 UI 不那么混乱。问题是这些框是按行分组的,使用 shinyjs::toggle() 不仅会隐藏有问题的框,还会将其从 UI 中删除并将其下方的框移到顶部。这意味着现在来自不同行(因此不同组)的两个框彼此相邻,这给用户提供了错误信息。

有没有办法让它在隐藏盒子时保留一些相同大小的白色 space 而不是将下方的盒子移到顶部?

我试过将盒子放在它们自己的流体行或固定行中,但这没有达到预期的效果。

# Example App

library(shiny)
library(shinydashboard)
library(shinyjs)

## UI ##

ui <- dashboardPage(

  skin = "black",
  dashboardHeader(
    title = "Template"
    ),

  dashboardSidebar(
    actionButton("toggle_btn", "Toggle!")
  ),

  dashboardBody(

    useShinyjs(),

    fluidRow(
      column(width = 4,
             valueBoxOutput("box1", width = 12),
             valueBoxOutput("box3", width = 12)), 
      column(width = 4,
             valueBoxOutput("box2", width = 12),
             valueBoxOutput("box4", width = 12))
    )
  )
)

## Server ##

server <- function(input, output) { 

  output$box1 <- renderValueBox({

    valueBox(value = 1,
             subtitle = "Row 1, Box 1")
  })

  output$box2 <- renderValueBox({

    valueBox(value = 2,
             subtitle = "Row 1, Box 2")
  })

  output$box3 <- renderValueBox({

    valueBox(value = 1,
             subtitle = "Row 2, Box 3")
  })

  output$box4 <- renderValueBox({

    valueBox(value = 2,
            subtitle = "Row 2, Box 4")
  })

  observeEvent(input$toggle_btn, {

    toggle("box2",
           anim = "TRUE")
  })

  }

shinyApp(ui, server)

正如您在我的示例中看到的那样,当单击 "Toggle!" 方框 4 向上移动到方框 2 的位置时,我想阻止它这样做。

添加 fluidRows 是正确的方法(每行 valueBoxes 一个 fluidRow)。 请看以下内容:

# Example App

library(shiny)
library(shinydashboard)
library(shinyjs)

## UI ##

ui <- dashboardPage(

    skin = "black",
    dashboardHeader(
        title = "Template"
    ),

    dashboardSidebar(
        actionButton("toggle_btn", "Toggle!")
    ),

    dashboardBody(

        useShinyjs(),

        fluidRow(
            column(width = 4,
                   valueBoxOutput("box1", width = 12)), 
            column(width = 4,
                   valueBoxOutput("box2", width = 12))
        ),
        fluidRow(
            column(width = 4,
                   valueBoxOutput("box3", width = 12)), 
            column(width = 4,
                   valueBoxOutput("box4", width = 12))
        )
    )
)

## Server ##

server <- function(input, output) { 

    output$box1 <- renderValueBox({

        valueBox(value = 1,
                 subtitle = "Row 1, Box 1")
    })

    output$box2 <- renderValueBox({

        valueBox(value = 2,
                 subtitle = "Row 1, Box 2")
    })

    output$box3 <- renderValueBox({

        valueBox(value = 1,
                 subtitle = "Row 2, Box 3")
    })

    output$box4 <- renderValueBox({

        valueBox(value = 2,
                 subtitle = "Row 2, Box 4")
    })

    observeEvent(input$toggle_btn, {

        toggle("box2",
               anim = "TRUE")
    })

}

shinyApp(ui, server)