css - 如何在 Shiny 的滑动中更好地定位“下一个/后退”按钮，以消除大的空白区域？

Question

Shinyglide 包正是我所需要的，它使用轮播作为分组单选按钮，为用户提供了多种数据解析选择。

但是，“下一步”(和“后退”)按钮占据了很大的空白区域。我想将按钮移动到与滑动行一致的位置(参见底部的图片)。有谁知道如何做到这一点？ CSS 有什么技巧吗？通读 Glide 手册，唯一的选择是“顶部”和“底部”。

如果无法移动“下一个/后退”按钮，则第二个选项是插入(有点多余的)文本行，但与“下一个/后退”按钮保持一致，以至少掩盖令人烦恼的大空白。

实际的面板比本示例中提供的信息多得多，因此我试图使页面尽可能干净。

请参阅底部的图片，它可以更好地解释我正在尝试做的事情。

可重现的示例:

library(dplyr)
library(DT)
library(shiny)
library(shinyglide)

ui <- 
  fluidPage(
    fluidRow(div(style = "margin-top:15px"),
      strong("Input choices shown in row below, click ´Next´ to see more choices:"),
        column(12, glide(
           height = "25",
           controls_position = "top",
           screen(
             div(style = "margin-top:10px"),
             wellPanel(    
               radioButtons(inputId = 'group1',
                 label = NULL,
                 choiceNames = c('By period','By MOA'), 
                 choiceValues = c('Period','MOA'),
                 selected = 'Period',
                 inline = TRUE
                 ),
               style = "padding-top: 12px; padding-bottom: 0px;"
               )
          ),
          screen(
            div(style = "margin-top:10px"),
            wellPanel(    
              radioButtons(inputId = 'group2',
                label = NULL,
                choiceNames = c('Exclude CT','Include CT'), 
                choiceValues = c('Exclude','Include'),
                selected = 'Exclude',
                inline = TRUE
                ),
             style = "padding-top: 12px; padding-bottom: 0px;"
             )
          )
         )
        )
      ),
    DTOutput("plants")
  ) 

server <- function(input, output, session) {
  output$plants <- renderDT({iris %>% datatable(rownames = FALSE)})
}

shinyApp(ui, server)

Answer 1

您可以将自定义控制元素与 custom_controls 结合使用，然后将其悬停在右上角显示的屏幕上，并将容器设置为绝对定位。为容器设置有限的宽度将确保后退按钮不会飞得太远。

大致如下:

glide(custom_controls = div(class = "glide-controls", glideControls()), ...)

# Somewhere in the UI
tags$style(
  ".glide-controls { position: absolute; top: 18px; right: 15px; width: 160px; }"
)

只需确保还设置controls_position = "bottom"，以便控件悬停在屏幕内容上方，而不是下方。

一个最小的示例应用程序:

library(shiny)
library(shinyglide)

ui <- fixedPage(
  h3("Simple shinyglide app"),
  tags$style(
    ".glide-controls { position: absolute; top: 18px; right: 15px; width: 160px; }"
  ),
  glide(
    custom_controls = div(class = "glide-controls", glideControls()),
    screen(wellPanel(p("First screen."))),
    screen(wellPanel(p("Second screen.")))
  )
)

server <- function(input, output, session) {}

shinyApp(ui, server)