在navbarPage中使用tabPanel时如何更改特定选项卡的显示属性 [英] How to change the display attributes of SPECIFIC tabs when using tabPanel in navbarPage
本文介绍了在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屋!
查看全文