停止切换/隐藏的对象移动
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)
我正在编写一个闪亮的应用程序,其中有两列带有 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)