Bagaimana untuk Menetapkan Warna Latar Belakang Tersuai untuk Tab dalam Panel tab Berkilat?

Menyesuaikan Warna Latar Belakang Tab dalam Panel tab Berkilat

Penyesuaian CSS membolehkan anda mengubah suai rupa aplikasi Berkilat, termasuk warna latar belakang tab dalam tabPanels.

Contoh:

Pertimbangkan untuk menyesuaikan warna tab dalam Panel tab Berkilat untuk meningkatkan antara muka pengguna. Contoh ini menetapkan latar belakang tab lalai kepada aqua dengan teks hitam, sambil menggunakan warna dan teks tertentu pada tab yang dipilih.

<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)

Penyesuaian:

• Tetapkan warna latar belakang tab lalai: .tabbable > .nav > li > a
• Tentukan latar belakang tersuai dan warna teks untuk tab tertentu menggunakan nilai data: .tabbable > .nav > li > a[data-value='t1']
• Ubah suai latar belakang tab aktif dan warna teks: .tabbable > .nav > li[class=active] > a

Contoh ini menyediakan penyelesaian menyeluruh untuk menyesuaikan warna latar belakang tab dalam Panel tab Berkilat, membolehkan penggayaan serba boleh untuk meningkatkan daya tarikan visual aplikasi anda.

Atas ialah kandungan terperinci Bagaimana untuk Menetapkan Warna Latar Belakang Tersuai untuk Tab dalam Panel tab Berkilat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!