Shiny tabPanel에서 탭 배경과 텍스트 색상을 사용자 정의하는 방법은 무엇입니까?

Shiny tabPanel에서 탭의 배경 사용자 정의

문제:

Shiny 응용 프로그램에서 배경을 수정하고 싶습니다. tabPanel에 있는 탭의 색상 및 텍스트 색상, 특히:

• 탭을 선택하면 배경이 검은색으로 바뀌고 흰색 텍스트가 표시되어야 합니다.
• 선택하지 않은 탭은 흰색 배경을 표시해야 합니다. 검은색 텍스트로.

해결책:

이를 달성하려면 다음과 같이 CSS 스타일을 활용할 수 있습니다.

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

설명:

이 CSS 코드는 다음과 같이 구현됩니다.

• .nav-tabs 클래스는 모든 탭의 배경을 물색 및 검정색 텍스트로 설정합니다.
• .tabbable > .nav > 리 > 클래스는 모든 탭의 배경색과 텍스트 색상을 각각 흑백으로 수정합니다.
• .nav-tabs-custom .nav-tabs li.active:hover a 및 .nav-tabs-custom .nav -tabs li.active a 클래스는 마우스를 올리거나 클릭하는 동안 활성 탭의 배경이 투명하게 유지되도록 합니다.
• .nav-tabs-custom .nav-tabs li.active 클래스는 활성 탭의 테두리 상단 색상을 설정합니다. 활성 탭을 흰색으로 변경하세요.

이 포괄적인 솔루션을 사용하면 특정 요구 사항에 맞게 빛나는 tabPanel의 탭 모양을 사용자 정의할 수 있습니다.

위 내용은 Shiny tabPanel에서 탭 배경과 텍스트 색상을 사용자 정의하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!