Остановить движение переключенных / скрытых объектов - PullRequest
Новая
       8

Остановить движение переключенных / скрытых объектов

1 голос
/ 02 мая 2019

Я пишу блестящее приложение, в котором у меня есть два столбца со значениями.Я бы хотел, чтобы пользователь мог переключать определенные поля, чтобы пользовательский интерфейс был менее загроможденным.Проблема заключается в том, что блоки сгруппированы по строкам, и использование shinyjs::toggle() не только скрывает соответствующий блок, но и удаляет его из пользовательского интерфейса и перемещает блок под ним вверх.Это означает, что теперь два блока из разных строк (и, следовательно, разных групп) находятся рядом друг с другом, что дает пользователю неверную информацию.

Есть ли способ сделать так, чтобы при сокрытии ящика оставалось некое пустое пространство того же размера вместо перемещения нижнего ящика вверху?

Я пытался поместить ящики вих собственные плавные стрелки или фиксированные стрелки, но это не дало желаемого эффекта. 

# 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, что я хотел бы помешать ему сделать.

1 Ответ

1 голос
/ 03 мая 2019

Добавление FluidRows - это правильный подход (один FluRow для каждой строки ValueBoxes).Пожалуйста, смотрите следующее: 

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