自定义闪亮的 Headers 栏-Java 学习之路

我正在尝试自定义一个闪亮的页面 .

My question ：如何更改完整 Headers 栏和标签的颜色 .

下面描述了我想要获得的内容以及我尝试过的内容（我在下面的示例中添加了一些不同的内容，以防任何这些因素对自定义方法产生负面影响） .

左侧的图像（合理大小）：使用How can I insert an image into the navbar on a shiny navbarPage()工作但不知道如何调整大小
图像后面的 Headers :(左对齐 Headers 使用下面的工作）
右对齐多个页面标签：使用R shiny navbarPage right aligned tabs我能够右对齐标签
更改文本和背景的颜色：使用Background color of tabs in shiny tabPanel仍然非常出色

所以主要的突出问题是颜色定制 - 请参见下图 . Headers 文本和背景颜色已更改，但颜色的变化不会延伸到整个 Headers 栏（中间仍为灰色） . 未选中时，我无法更改选项卡文本颜色或背景颜色 . 为此，我尝试在下面添加代码，以及更改 .navbar .navbar-nav 中的颜色 .

.tabbable > .nav > li > a                    {background-color: aqua;  color:black}
.tabbable > .nav > li > a[data-value='One'] {background-color: red;   color:white}

这是下面代码的当前输出 .

enter image description here

（正如你从代码中看到的那样，我通过从SO获取Q＆A的各个部分来创建Frankenstein的怪物，所以如果有更好的方法我会非常感激它 . ）

兆瓦

library(shiny)    

 ui <- fluidPage(

  list(
  tags$head(HTML('<link rel="icon", href="Rplot.png", type="image/png" />')),

  tags$style(HTML("
      .navbar .navbar-nav {float: right; 
                           color: #ff3368; 
                           font-size: 38px; 
                           background-color: #FFFF00 ; } 
      .navbar .navbar-header {float: left; } 
      .navbar-default .navbar-brand { color: #ff3368; 
                                      font-size: 38px; 
                                      background-color: #FFFF00 ;} 

  "))),

   navbarPage(
              title=div(img(src="Rplot.png"), "My Title in the Navbar"),
              tabPanel("One"),
              tabPanel("Two")
                    ))


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

shinyApp(ui, server)

1 回答

您似乎成功地为部件着色，但不是整行 . 因此，您应该检查元素（右键单击 - 检查元素）并查找父元素 .

在那里你可以看到：

<nav class="navbar navbar-default navbar-static-top" role="navigation">

你可以用css通过： .navbar.navbar-default.navbar-static-top 解决，然后设置颜色 .

代码应添加到： tags$style(HTML("...")) ，例如：

.navbar.navbar-default.navbar-static-top{background-color: #FFFF00 ;}

下面的工作示例：

library(shiny)    

ui <- fluidPage(

  list(tags$head(HTML('<link rel="icon", href="Rplot.png", 
                       type="image/png" />'),

                 tags$style(HTML("
      .navbar .navbar-nav {float: right; 
                           color: #ff3368; 
                           font-size: 38px; 
                           background-color: #FFFF00 ; } 
      .navbar.navbar-default.navbar-static-top{ color: #ff3368; 
                                      font-size: 38px; 
                                      background-color: #FFFF00 ;}
      .navbar .navbar-header {float: left; } 
      .navbar-default .navbar-brand { color: #ff3368; 
                                      font-size: 38px; 
                                      background-color: #FFFF00 ;} 

  ")))),

  navbarPage(
    title=div(img(src="Rplot.png"), "My Title in the Navbar"),
    tabPanel("One"),
    tabPanel("Two")
  ))


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

shinyApp(ui, server)

回复于 2024-05-19T08:59:24+08:00

自定义闪亮的 Headers 栏

1 回答

相关问题