Bagaimana untuk Menyesuaikan Warna Latar Belakang Panel Tab Berkilat?

Menyesuaikan Warna Latar Belakang dalam Panel Tab Berkilat

Dalam aplikasi Berkilat, panel tab menyediakan cara yang mudah untuk menyusun kandungan ke dalam bahagian yang berbeza. Untuk meningkatkan daya tarikan visual, anda mungkin mahu menyesuaikan warna latar belakang tab. Ini boleh dicapai menggunakan penggayaan CSS.

Penggayaan Lalai

Secara lalai, panel tab Berkilat menggunakan latar belakang berwarna terang untuk tab tidak aktif dan latar belakang yang lebih gelap untuk tab aktif. Pemilih CSS .nav-tabs boleh digunakan untuk menggunakan warna latar belakang pada kedua-dua tab aktif dan tidak aktif.

Contoh: Menyesuaikan Warna Latar Belakang

Contoh kod berikut menunjukkan cara untuk menyesuaikan warna latar belakang kedua-dua tab aktif dan tidak aktif:

<code class="r">ui <- shinyUI(
  fluidPage(
    tags$style(".nav-tabs { background-color: #FF0000; } .nav-tabs li.active a { background-color: #0000FF; }"),
    tabsetPanel(
      tabPanel(title = "Hello"),
      tabPanel(title = "World")
    )
  )
)

server <- shinyServer(function(input, output) {})

shinyApp(ui, server)</code>

Dalam contoh ini, tab tidak aktif mempunyai warna latar belakang merah manakala tab aktif mempunyai warna latar belakang biru.

Memperibadikan Tab Individu

Anda juga boleh menyesuaikan warna latar belakang tab individu berdasarkan nilai tabnya. Ini boleh dicapai menggunakan pemilih CSS yang menyasarkan elemen tab tertentu.

Contoh: Menyesuaikan Tab Individu

Contoh kod berikut menunjukkan cara menyesuaikan warna latar belakang tab individu :

<code class="r">ui <- shinyUI(
  fluidPage(
    tags$style(".nav-tabs li a[data-value='t1'] { background-color: #FF0000; } .nav-tabs li a[data-value='t2'] { background-color: #0000FF; }"),
    tabsetPanel(
      tabPanel("t1", title = "Hello"),
      tabPanel("t2", title = "World")
    )
  )
)

server <- shinyServer(function(input, output) {})

shinyApp(ui, server)</code>

Dalam contoh ini, tab "Hello" mempunyai latar belakang merah manakala tab "Dunia" mempunyai latar belakang biru.

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