web-dev-qa-db-ja.com

光沢のあるtabPanelのタブの背景色

tabsetPanelsを使用して光沢のあるアプリケーションをカスタマイズして、選択したパネルが白いテキストの黒い背景に表示され、選択されていないタブが黒いテキストの白い背景に表示されるようにします。

たとえば、次のアプリケーションで、[こんにちは]タブが選択されている場合、 "こんにちは"が黒い背景に白いテキストで表示されるようにしたいと思います。しかし、パネルのコンテンツ（入力フィールド）の背景を白のままにしておく必要があります。

私が見つけることができた最も近いものはこの質問から来ます： 光沢のあるダッシュボード用のタブボックスCSS

そのコードを適用すると、tabsetPanel全体にわたって色付きの背景が生成されますが、これを変更してタブのみの背景を変更する方法はまだ見つかりません。さらに、.nav-tabs-custom cssで変更したものは何も影響を与えないようです。

私はtab-paneタグCSSに変更を適用しようと常に試みていますが、これにより、変更がタイトルボックスではなくタブの本体にプッシュされます。

タイトルボックスに背景色を変更するために何を変更できるかについてのアイデアはありますか？

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)
cssrshiny
12
Benjamin

編集：光沢のあるバージョン> = 0.14については こちら を参照してください。

Navの直接の子孫として「アクティブ」クラスのリンクを選択した場合、私はあなたが求めているものを得ることができると思います。 UIは次のようになります

ui <- shinyUI(
    fluidPage(
        tags$style(HTML("
        .tabs-above > .nav > li[class=active] > a {
           background-color: #000;
           color: #FFF;
        }")),
        tabsetPanel(
            tabPanel(
                title = "Hello",
                textInput(inputId = "text", label = "Input")
            ),
            tabPanel(
                title = "World"
            )
        )
    )
)

enter image description here

6
jenesaisquoi

上記の例は明らかに（バージョン0.14.0から）壊れています、おそらくShiny cssの変更が原因です。さらに、投稿のタイトルは、実際にカバーされる実際の質問と解決策よりも多くを約束します。だから私は新しいより包括的な例を書きました。

  • デフォルトのタブの背景を水色と黒のテキストに設定します。
  • これは、いくつかのタブの色を、白いテキストで明示的な色（アクティブでない場合）に設定します。
  • アクティブなタブの背景を白のテキストで黒に設定します。

これらすべての色がUIの観点から良いアイデアであるかどうかは別の問題です...

これがコードです：

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)

これがスクリーンショットです：

enter image description here

そして、これが再び壊れてコードを調整する必要がある場合、これがこれを生成している現在のcss/htmlです：

<body>
  <div class="container-fluid">
    <h1>Colored Tabs</h1>
    <style>
    .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}
  </style>
    <div class="tabbable">
      <ul class="nav nav-tabs">
        <li class="active">
          <a href="#tab-5851-1" data-toggle="tab" data-value="t0">t0</a>
        </li>
        <li>
          <a href="#tab-5851-2" data-toggle="tab" data-value="t1">t1</a>
        </li>
        <li>
          <a href="#tab-5851-3" data-toggle="tab" data-value="t2">t2</a>
        </li>
        <li>
          <a href="#tab-5851-4" data-toggle="tab" data-value="t3">t3</a>
        </li>
        <li>
          <a href="#tab-5851-5" data-toggle="tab" data-value="t4">t4</a>
        </li>
        <li>
          <a href="#tab-5851-6" data-toggle="tab" data-value="t5">t5</a>
        </li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" data-value="t0" id="tab-5851-1">
          <h2>normal tab</h2>
        </div>
        <div class="tab-pane" data-value="t1" id="tab-5851-2">
          <h2>red tab</h2>
        </div>
        <div class="tab-pane" data-value="t2" id="tab-5851-3">
          <h2>blue tab</h2>
        </div>
        <div class="tab-pane" data-value="t3" id="tab-5851-4">
          <h2>green tab</h2>
        </div>
        <div class="tab-pane" data-value="t4" id="tab-5851-5">
          <h2>normal tab</h2>
        </div>
        <div class="tab-pane" data-value="t5" id="tab-5851-6">
          <h2>normal tab</h2>
        </div>
      </div>
    </div>
  </div>
</body>
14
Mike Wise