如何在 RSTudio 中为 flex 仪表板选项卡的标签选择颜色?
How can I choose colors for labels of flex dashboard tabs in RSTudio?
我正在使用 flex 仪表板工具创建仪表板。仪表板有几个选项卡。我想知道如何将颜色应用于选项卡的 titles/names/labels。谢谢!
代码如下:
---
title: "A Template of Dashboard with Pages and Tabs"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
social: [ "twitter", "facebook", "menu" ]
---
<style>
body {
background-color: lightgray;
color: black;
}
.nav-tabs-custom > .nav-tabs > li.active {border-top-color: black; }
.tabset {
background-color: red;
border: 10px solid green !important;
}
</style>
## Column {data-width=120}
## Column {data-width=880 .tabset}
### Tab 1
### Tab 2
可以这样实现:
---
title: "A Template of Dashboard with Pages and Tabs"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
social: [ "twitter", "facebook", "menu" ]
---
```{css}
/* Set font color of inactive tab to green */
.nav-tabs-custom .nav-tabs > li > a {
color: green;
}
/* Set font color of active tab to red */
.nav-tabs-custom .nav-tabs > li.active > a {
color: red;
}
/* To set color on hover */
.nav-tabs-custom .nav-tabs > li.active > a:hover {
color: purple;
}
```
## Column {data-width=120}
## Column {data-width=880 .tabset}
### Tab 1
### Tab 2
我正在使用 flex 仪表板工具创建仪表板。仪表板有几个选项卡。我想知道如何将颜色应用于选项卡的 titles/names/labels。谢谢!
代码如下:
---
title: "A Template of Dashboard with Pages and Tabs"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
social: [ "twitter", "facebook", "menu" ]
---
<style>
body {
background-color: lightgray;
color: black;
}
.nav-tabs-custom > .nav-tabs > li.active {border-top-color: black; }
.tabset {
background-color: red;
border: 10px solid green !important;
}
</style>
## Column {data-width=120}
## Column {data-width=880 .tabset}
### Tab 1
### Tab 2
可以这样实现:
---
title: "A Template of Dashboard with Pages and Tabs"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
social: [ "twitter", "facebook", "menu" ]
---
```{css}
/* Set font color of inactive tab to green */
.nav-tabs-custom .nav-tabs > li > a {
color: green;
}
/* Set font color of active tab to red */
.nav-tabs-custom .nav-tabs > li.active > a {
color: red;
}
/* To set color on hover */
.nav-tabs-custom .nav-tabs > li.active > a:hover {
color: purple;
}
```
## Column {data-width=120}
## Column {data-width=880 .tabset}
### Tab 1
### Tab 2