Bagaimana untuk Menyesuaikan Warna Tab dalam tabPanel Berkilat?

Menukar Warna Latar Belakang Tab dalam Panel tab Berkilat

Cabaran Penyesuaian

Dalam cabaran ini, kami berhasrat untuk meningkatkan penampilan aplikasi Berkilat menggunakan tabsetPanel. Kami berhasrat untuk mencipta UI dengan panel yang dipilih menampilkan teks putih pada latar belakang hitam, manakala tab tidak aktif mengekalkan latar belakang putih dengan teks hitam.

Coretan Kod

Di bawah ialah kod yang digunakan untuk menggambarkan penyelesaian:

library(shiny)

ui <- shinyUI(
  fluidPage(
    tags$style(".nav-tabs {
  background-color: #006747;
    }

.nav-tabs-custom .nav-tabs li.active:hover a, .nav-tabs-custom .nav-tabs li.active a {
background-color: transparent;
border-color: transparent;
}

.nav-tabs-custom .nav-tabs li.active {
    border-top-color: #FFF;
}"),
    tabsetPanel(
      tabPanel(
        title = "Hello",
        textInput(inputId = "text", label = "Input")
      ),
      tabPanel(
        title = "World"
      )
    )
  )
)

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


})

shinyApp(ui=ui, server=server)

Pecahan Penyelesaian

1. Penyesuaian CSS: Kami menggunakan CSS untuk mengubah suai penampilan tab. Khususnya, kami menyasarkan kelas .nav-tabs untuk menetapkan warna latar belakang kepada aqua dan warna teks kepada hitam. Selain itu, kami menggunakan gaya untuk menukar latar belakang tab aktif dan warna sempadan.
2. Warna: Tab aktif digayakan dengan latar belakang hitam dan teks putih, manakala tab tidak aktif memaparkan warna putih latar belakang dengan teks hitam.
3. Tab Boleh Disesuaikan: Kami menetapkan warna eksplisit kepada pelbagai tab apabila ia tidak aktif, mengekalkan perbezaan visual yang diingini.

Hasil

Penyelesaian menyediakan aplikasi yang menarik secara visual di mana tab aktif diserlahkan dengan latar belakang hitam dan teks putih. Tab yang tidak aktif kekal mudah dibezakan dengan latar belakang putih dan teks hitamnya.

Nota tentang Penapisan Berterusan

Memandangkan perubahan CSS Berkilat cenderung berlaku dari semasa ke semasa, adalah penting untuk menyesuaikan kod dengan sewajarnya. Walau bagaimanapun, prinsip teras yang digariskan dalam penyelesaian ini harus terus membimbing proses penyesuaian.

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