Question

shinymaterial软件包包括一个名为material_parallax()的函数，该函数可在滚动时在图像上产生漂亮的视差效果。该函数的唯一参数是image_source。我想在我的应用中更改此视差框的高度。

是否可以（使用自定义CSS或其他方式）更改material_parallax()的高度，从而减少垂直空间？

示例：

library(shiny)
library(shinymaterial)

ui <- material_page(include_nav_bar = FALSE,
  #I'd like this parallax to be shorter
  material_parallax(
    image_source = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Freudenberg_sg_Switzerland.jpg/1920px-Freudenberg_sg_Switzerland.jpg"),

  material_card(
    h1("This is just to add vertical space",
       plotOutput("plot"))
  )
)

server <- function(input,output){
  output$plot <- renderPlot(height = 1000,
    pairs(iris))
}

shinyApp(ui,server)

Answer 1

您可以使用以下CSS：

ui <- material_page(
  tags$head(tags$style(type="text/css", 
                       ".parallax-container{height:150px} .parallax img{height:50%}")),
  include_nav_bar = FALSE,
  #I'd like this parallax to be shorter
  material_parallax(
    image_source = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Freudenberg_sg_Switzerland.jpg/1920px-Freudenberg_sg_Switzerland.jpg"),

  material_card(
    h1("This is just to add vertical space",
       plotOutput("plot"))
  )
)

在material_parallax中更改图像的高度

1 个答案: