Bagaimana untuk Menyesuaikan Warna Latar Belakang dan Teks Tab dalam Panel tab Berkilat?

Menyesuaikan Penampilan Tab dalam Panel tab Berkilat

Soalan:

Bagaimana saya boleh mengubah suai warna latar belakang dan warna teks tab dalam tabPanel berkilat? Secara khususnya, saya mahu panel yang dipilih mempunyai latar belakang hitam dengan teks putih, manakala tab yang tidak dipilih harus mempunyai latar belakang putih dengan teks hitam.

Penyelesaian:

Untuk mencapai ini, anda boleh menggunakan penggayaan CSS tersuai untuk mengubah suai penampilan tab. Berikut ialah contoh kod komprehensif yang menunjukkan cara:

• Menetapkan latar belakang lalai dan warna teks untuk semua tab.
• Tetapkan warna latar belakang dan teks secara eksplisit untuk tab tertentu apabila ia tidak aktif.
• Tukar latar belakang dan warna teks tab aktif.

Kod:

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

Hasil:

Kod ini akan menjana apl berkilat dengan tab berwarna. Latar belakang tab lalai ialah aqua dengan teks hitam. Tab "t1" akan mempunyai latar belakang merah dengan teks putih apabila tidak aktif. Perkara yang sama berlaku untuk "t2" dan "t3" dengan latar belakang biru dan hijau, masing-masing. Apabila tab dipilih, ia akan mempunyai latar belakang hitam dengan teks putih.

Nota Tambahan:

• CSs boleh disesuaikan lagi untuk melaraskan penampilan daripada tab seperti yang diperlukan.
• Kod harus berfungsi dengan versi terkini Shiny. Walau bagaimanapun, jika ia rosak pada masa hadapan, anda mungkin perlu melaraskan CSS mengikut struktur HTML dan CSS yang dikemas kini bagi Shiny.

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