Question

我在闪亮的应用程序中使用了navbarPage。它允许创建2个tabpanels。我想自定义第一个tabpanel的背景。

我发现的最佳选择包括使用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"
                ))
            ))

最基本的服务器。你可以这样做：

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

这有点骇人听闻，但它可以起作用：

要解决导航栏和标签内容之间存在空间的问题，您可以添加.my_style_1 { margin-top: -20px; }（因为导航栏的边距为20px）
要使图像覆盖整个宽度，首先需要做的是使图像全宽，因此添加.my_style_1 { width: 100%; }。然后你需要摆脱父容器流体的左右填充，所以有两个简单的选项（可能更多）：要么.container-fluid { padding-left: 0; padding-right: 0; }，但你还需要记住这将删除来自所有其他选项卡的一些填充，因此您可以手动将填充添加到其他选项卡。或者你可以做.my_style_1 { position: absolute; left: 0;。看哪哪个更适合你

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

1 个答案: