带有指向选项卡面板的内部链接的Shiny Slick R转盘

7bsow1i6  于 2022-12-05  发布在  其他
关注(0)|答案(1)|浏览(113)

我想创建一个闪亮的navbarPage Jmeter 板,在登陆页面上有一个slickR旋转图像。每个图像都应该有一个操作按钮,链接到不同的tabPanel。它应该基本上看起来像这样:Screenshot of toy app下面是一个可重复的玩具例子,但它不能完成这项工作:'

library(shiny)
library(slickR)
# ui
ui <- navbarPage(title = "", id = "pageid",
                 tabsetPanel(id="tabs",
                             tab1 <- tabPanel(title="Tab 1", value="tab1",
                                              fluidRow(
                                                slickROutput("slickr1"),
                                                h1("Title", style =
                                                     "position: relative;
                                                      margin-top:-43%;
                                                      color:#4BACC6;
                                                      font-size:30px;
                                                      text-align: center"),
                                                div(actionButton("action1", "Action",
                                                                 style="position: relative;
                                                                  margin-top: 15%;
                                                                  color:#FFFEFB;
                                                                  background-color:#4BACC6;
                                                                  border-color:#4BACC6;"), 
                                                    align="center"),
                                                                            )),
                             tab2 <- tabPanel(title="Tab 2", value="tab2"),
                             tab3 <- tabPanel(title="Tab 3", value="tab3")
                 )
)

# server
server <- function(input, output, session) {
  output$slickr1 <- renderSlickR({
    slick1 <- slick_list(slick_div(
      nba_player_logo$uri[1:3],
      type = "img", links = NULL)
    )
    slickR(slick1) +
      settings(dots = TRUE,
               autoplay = TRUE)
  })
  observeEvent(input$action1, {
    updateTabsetPanel(session, "tabs",
                      selected = "tab2")
  })
}

'这段代码在carousel上的三个图像上叠加了相同的动作按钮和标题,我无法让slickR同时运行图像和动作按钮。
我尝试在slick_list中创建第二个slick_div,它贯穿三个不同的操作按钮,如下所示:`

# server
server <- function(input, output, session) {
  buttons <- list(actionButton("action1", "Action1"),
                 actionButton("action2", "Action2"),
                 actionButton("action3", "Action3"))                         
  output$slickr1 <- renderSlickR({
    slick1 <- slick_list(slick_div(
      nba_player_logo$uri[1:3],
      type = "img", links = NULL),
    slick_div(
      buttons,
      css = htmltools::css(display = "inline"),
      links = NULL)
  )
    slickR(slick1) +
      settings(dots = TRUE,
               autoplay = TRUE)
  })
  observeEvent(input$action1, {
    updateTabsetPanel(session, "tabs",
                      selected = "tab2")
  })
}

'但它最终只是把第一张幻灯片上的所有图像和第二张幻灯片上的所有操作按钮都堆叠在一起,而不是一张一张地浏览,每张幻灯片上只有一个图像和一个操作按钮。
或者,我也可以将整个图像链接到不同的标签页,我考虑过在slick_div中使用“links”选项(在上面的玩具示例中设置为NULL),但我很难确定每个标签页的url,我可以将其分配给“links”。
我是新来的闪亮,真的会很感激你的帮助!

5sxhfpxr

5sxhfpxr1#

我不太明白。这是你想要的吗?

library(shiny)
library(slickR)

css <- "
.slidetitle {
  position: relative;
  color: #4BACC6;
  font-size: 30px;
  text-align: center;
}
.slidebutton {
  position: relative;
  margin-top: -15%;
  color: #FFFEFB;
  background-color: #4BACC6;
  border-color: #4BACC6;
}
"

# ui
ui <- navbarPage(
  title = "SlickR with buttons", 
  id = "tabs",
  header = tags$head(tags$style(HTML(css))),
  tabPanel(
    title= "Tab 1", value = "tab1",
    fluidRow(
      slickR(slick_list(
        tags$div(
          tags$h1("Title 1", class = "slidetitle"),
          tags$img(
            src = "https://cdn.pixabay.com/photo/2018/07/31/22/08/lion-3576045__340.jpg",
            height = 500
          ),
          actionButton(
            "action1", "Action 1", class = "slidebutton"
          ),
          align = "center"
        ),
        tags$div(
          tags$h1("Title 2", class = "slidetitle"),
          tags$img(
            src = "https://cdn.pixabay.com/photo/2012/02/27/15/35/lion-17335__340.jpg",
            height = 500
          ),
          actionButton(
            "action2", "Action 2", class = "slidebutton"
          ),
          align = "center"
        ),
        tags$div(
          tags$h1("Title 3", class = "slidetitle"),
          tags$img(
            src = "https://www.aprenderjuntos.cl/wp-content/uploads/2020/08/LEON-SERIO-.jpg",
            height = 500
          ),
          actionButton(
            "action3", "Action 3", class = "slidebutton"
          ),
          align = "center"
        )
      )) + settings(autoplay = TRUE, dots = TRUE)
    )
  ),
  tabPanel(
    title = "Tab 2", value = "tab2",
    tags$h1("TAB 2")
  ),
  tabPanel(
    title = "Tab 3", value = "tab3",
    tags$h1("TAB3")
  )
)

# server
server <- function(input, output, session) {
  observeEvent(input$action1, {
    updateNavbarPage(session, "tabs", selected = "tab2")
  })
}

shinyApp(ui, server)

要使标题位于图像顶部,请使用以下CSS:

.slidecontainer {
  position: relative;
}
.slidetitle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #4BACC6;
  font-size: 30px;
}
.slidebutton {
  position: relative;
  margin-top: -15%;
  color: #FFFEFB;
  background-color: #4BACC6;
  border-color: #4BACC6;
}

并将类slidecontainer添加到div元素:

slickR(slick_list(
        tags$div(
          class = "slidecontainer",
          tags$h1("Title 1", class = "slidetitle"),
          tags$img(
            src = "https://cdn.pixabay.com/photo/2018/07/31/22/08/lion-3576045__340.jpg",
            height = 500
          ),
          actionButton(
            "action1", "Action 1", class = "slidebutton"
          ),
          align = "center"
        ),
        ......

相关问题