将背景图像添加到 Shiny 中的特定 tabPanel

Question

我在闪亮的应用程序中使用 navbarPage。它允许创建 2 个标签面板。我只想自定义第一个标签面板的背景。

我发现的最佳选择是使用 tag 参数创建一个特定的样式（“my_style_1”）。然后仅将其应用于 tabpanel 1。我的 Ui.R 代码如下所示：

library(shiny)
shinyUI(navbarPage(

    # --- Application name
    "my application",

    # --- Creation of a style named my_style_1
    tags$head(
        tags$style(HTML(".my_style_1{ 
                background-image: url(http://papillondamour.p.a.pic.centerblog.net/fb850229.jpg );
    }"))),

    # --- Sheet number 1 wih custom style
    tabPanel( title="Page1" ,
            column(10,
                class="my_style_1",
                br(),br(),br(),h1("A piece of text"),br(),br(),br()
            )),

    # --- Sheet number 2
    tabPanel( title="Page2" ,
            column(10,
                "Another piece of text"
                ))
            ))

还有你能做的最基本的server.R：

library(shiny)
shinyServer(function(input, output) {})

正如您所见here，它几乎可以正常工作。但是图片只覆盖了“柱子”的区域，并不是真实的背景。

如果我想对每个 tabPanel 应用相同的背景，我可以这样做

    tags$head(
        tags$style(HTML("body{ 
                background-image: url( http://papillondamour.p.a.pic.centerblog.net/fb850229.jpg );
    }"))),

我会得到这个好结果：here

Answer 1

这有点hacky，但它可以工作：

• 要解决导航栏和选项卡内容之间有一些空间的问题，您可以添加.my_style_1 { margin-top: -20px; }（因为导航栏的底部边距为 20 像素）

• 要让图片覆盖整个宽度，首先你需要做的是让图片全宽，所以添加.my_style_1 { width: 100%; }。然后你需要去掉父容器流体的左右填充，所以有两个简单的选项（可能更多）：要么做.container-fluid { padding-left: 0; padding-right: 0; }，但你还需要记住这会删除一些填充来自所有其他选项卡，因此您可以手动向其他选项卡添加填充。或者你可以做.my_style_1 { position: absolute; left: 0;。看看哪一个更适合你