首頁 > web前端 > css教學 > 如何在Shiny tabPanel中自訂選項卡的背景和文字顏色?

如何在Shiny tabPanel中自訂選項卡的背景和文字顏色?

Linda Hamilton
發布: 2024-10-24 08:16:02
原創
246 人瀏覽過

How to Customize Background and Text Colors of Tabs in Shiny tabPanel?

在Shiny tabPanel 中自訂選項卡外觀

問題:

如何修改選項卡的背景顏色和文字顏色在閃亮的選項卡面板中?具體來說,我希望選定的面板具有黑色背景和白色文本,而未選定的選項卡應具有白色背景和黑色文字。

解決方案:

實現此時,您可以使用自訂 CSS 樣式來修改標籤的外觀。這是一個全面的程式碼範例,示範如何:

  • 為所有標籤設定預設背景和文字顏色。
  • 明確設定特定選項卡的背景和文字顏色(當它們不是時)活動。
  • 更改活動標籤的背景和文字顏色。

代碼:

<code class="r">library(shiny)

ui <- shinyUI(fluidPage(
  h1("Colored Tabs"),
  tags$style(HTML("
    .tabbable > .nav > li > a                  {background-color: aqua;  color:black}
    .tabbable > .nav > li > a[data-value='t1'] {background-color: red;   color:white}
    .tabbable > .nav > li > a[data-value='t2'] {background-color: blue;  color:white}
    .tabbable > .nav > li > a[data-value='t3'] {background-color: green; color:white}
    .tabbable > .nav > li[class=active]    > a {background-color: black; color:white}
  ")),
  tabsetPanel(
    tabPanel("t0", h2("normal tab")),
    tabPanel("t1", h2("red tab")),
    tabPanel("t2", h2("blue tab")),
    tabPanel("t3", h2("green tab")),
    tabPanel("t4", h2("normal tab")),
    tabPanel("t5", h2("normal tab"))
  )
))

server <- function(input, output) {}
shinyApp(ui = ui, server = server)</code>
登入後複製

結果:

此代碼將產生一個帶有彩色選項卡的閃亮應用程式。預設選項卡背景將為淺綠色並帶有黑色文字。 “t1”選項卡在不活動時將具有紅色背景和白色文字。這同樣適用於分別具有藍色和綠色背景的“t2”和“t3”。當選擇選項卡時,它將具有黑色背景和白色文字。

附加說明:

  • CSS 可以進一步自訂以調整外觀根據需要添加選項卡。
  • 程式碼應適用於最新版本的 Shiny。但是,如果將來出現問題,您可能需要根據 Shiny 更新的 HTML 和 CSS 結構來調整 CSS。

以上是如何在Shiny tabPanel中自訂選項卡的背景和文字顏色?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板