Question

我正在编写一个闪亮的应用程序，其中有两列带有valueBoxes。我希望用户能够切换某些框，以使UI更加整洁。问题在于，这些框按行分组，并且使用shinyjs::toggle()不仅会隐藏有问题的框，还会将其从UI中删除并将其下方的框向上移动。这意味着现在来自不同行（因此不同组）的两个框彼此相邻，这给用户提供了错误的信息。

有没有一种方法可以使当隐藏一个盒子时保留一些相同大小的空白而不是将下部盒子向上移动？

我尝试将盒子放在自己的固定行或固定行中，但是效果不理想。

# 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)

如您在我的示例中看到的那样，单击“切换！”方框4移至方框2的位置，我想阻止它执行。

Answer 1

添加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)

停止切换/隐藏对象移动

1 个答案: