在navbarPage中使用tabPanel时如何更改特定选项卡的显示属性 [英] How to change the display attributes of SPECIFIC tabs when using tabPanel in navbarPage

查看:102
本文介绍了在navbarPage中使用tabPanel时如何更改特定选项卡的显示属性的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在这个例子中,

library(shiny)
ui <- fluidPage(
  tags$style(type = 'text/css', HTML('.navbar {background-color: red;}')),
  navbarPage("",
    tabPanel("Tab 1", icon = icon("user")),
    tabPanel("Tab 2", icon = icon("cog")),
    tabPanel("Tab 3", icon = icon("sliders"))
  )
)
server <- function(input, output, session) {
}
shinyApp(ui, server)

我希望 Tab 3 是特殊的,以便它看起来与其他的不同:

I would like Tab 3 to be special such that it appears different from the rest for:

  • 未悬停和未选择时的背景颜色 + 字体颜色
  • 悬停时的背景颜色 + 字体颜色
  • 选择时的背景颜色 + 字体颜色
  • 粗体

对于其他标签,我可以坚持使用默认值.

For the other tabs, I am fine with sticking to the defaults.

我遇到的所有线程都没有直接为我解决这个问题,我没有 HTML 或 CSS 背景.有些解决了 tabsetPanel 的部分问题,但没有解决 navbarPage 的问题.

None of the threads I came across directly address this issue for me, who has no HTML or CSS background. Some addressed part of the problem for tabsetPanel, but not for navbarPage.

任何建议或重定向到傻瓜教程就足够了.

Any advice, or redirection to a tutorial for dummies would be nice enough.

谢谢!

推荐答案

library(shiny)
#select more than one Tab you can try
#1. a[data-value='Tab 2'], a[data-value='Tab 3'] {...}
#2. rename Tab 2 and Tab 3 values to Tab 02 and Tab 03 then use a[data-value*='0'] {...}
ui <- fluidPage(
       tags$style(type = 'text/css', 
                  HTML(".container-fluid > .nav > li > 
                        a[data-value='Tab 3'] {background-color: red; color:white}")),
    navbarPage("",
         tabPanel("Tab 1" ,value = "Tab 1" ,icon = icon("user")),
         tabPanel("Tab 2" ,value = "Tab 2" ,icon = icon("cog")),
         tabPanel("Tab 3" ,value = "Tab 3" ,icon = icon("sliders"))
   )
)
server <- function(input, output, session) {}
shinyApp(ui, server)

这篇关于在navbarPage中使用tabPanel时如何更改特定选项卡的显示属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆