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

Penyesuaian Latar Belakang Tab dalam Panel tab Berkilat

Masalah:

Dalam aplikasi Berkilat, anda ingin mengubah suai latar belakang warna dan warna teks tab dalam tabPanel, khususnya:

• Apabila tab dipilih, latar belakangnya harus bertukar hitam dengan teks putih.
• Tab yang tidak dipilih harus memaparkan latar belakang putih dengan teks hitam.

Penyelesaian:

Untuk mencapai ini, anda boleh menggunakan gaya CSS seperti berikut:

ui <- shinyUI(fluidPage(
  tags$style(".nav-tabs {
  background-color: aqua;  color:black}
.tabbable > .nav > li > a {
background-color: #006747;
color: white;
}
.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"
      )
    )
  )
)

Penjelasan:

Kod CSS ini dilaksanakan seperti berikut:

• Kelas .nav-tabs menetapkan latar belakang semua tab kepada aqua dan teks hitam.
• Tab boleh > .nav > li > kelas masing-masing mengubah suai latar belakang dan warna teks semua tab kepada hitam dan putih.
• Tab-nav-tab-tersuai .nav-tab li.active:tuding a dan .nav-tabs-tersuai .nav -tabs li.active a kelas memastikan bahawa latar belakang tab aktif kekal telus semasa melayang atau mengklik.
• Kelas .nav-tabs-custom .nav-tabs li.active menetapkan warna atas sempadan bagi tab aktif kepada putih.

Penyelesaian komprehensif ini membolehkan anda menyesuaikan penampilan tab dalam Panel tab berkilat untuk memenuhi keperluan khusus anda.

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