Цвет фона вкладок в блестящей tabPanel

Я хотел бы настроить блестящее приложение, используя tabsetPanels, чтобы выбранная панель отображалась на черном фоне с белым текстом, а невыделенные вкладки отображали белый фон с черным текстом.Цвет фона вкладок в блестящей tabPanel

Например, в приложении ниже, когда выбрана вкладка «Hello», я хотел бы, чтобы «Hello» был в белом тексте на черном фоне. Но я все еще хочу, чтобы фон содержимого панели (поля ввода) оставался белым.

Ближайший вещь, которую я смог найти прийти от этого вопроса: Tab Box CSS for shinydashboard

Применяя этот код дает цветной фон на всем пути через tabsetPanel, но я до сих пор не могу найти способ изменить это для изменения фона только вкладок. Более того, я ничего не меняю в CSS .nav-tabs-custom, кажется, имеет какой-либо эффект.

Я постоянно пытаюсь применить изменения к тегу CSS tab-pane, но это вносит изменения в тело вкладки, а не в поле заголовка.

Любые идеи о том, что я могу изменить, чтобы получить поля заголовка, чтобы изменить цвет фона?

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)

источник

2016-01-26 Benjamin

EDIT: для блестящих версий> = 0,14 см. here.

Если вы выбрали ссылку с активным классом как непосредственный потомок навигатора, я думаю, вы можете получить то, что вам нужно. Пользовательский интерфейс будет выглядеть

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

источник

2016-01-27 00:40:33 jenesaisquoi

Это так! Для моей будущей ссылки я могу настроить невыбранные вкладки с помощью .tabs-above> .nav> li> a'. Спасибо. – Benjamin

Спасибо, очень полезно. Я хочу сделать это для shinydashboard, чтобы создать жидкую страницу? –

@DimitriPetrenko Я не использовал блестящий через некоторое время, вы можете задать новый вопрос – jenesaisquoi

Приведенный выше пример сломана, по-видимому (с версии 0.14.0), вероятно, из-за блестящей изменения CSS. Кроме того, название должности обещает больше, чем фактический вопрос и решение, которые действительно охватываются. Поэтому я написал новый более полный пример.

Он устанавливает фон вкладки по умолчанию как аква и черный текст.
Он устанавливает цвет нескольких вкладок как явные цвета (когда они не активны) с белым текстом.
Он устанавливает, что активный фон вкладки является черным с белым текстом.

ли не все эти цвета являются хорошей идеей с точки зрения пользовательского интерфейса с другим вопросом ...

Вот код:

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)

Вот снимок экрана:

и в случае, если это нарушает снова, и код должен быть отрегулирован, здесь current 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>

источник

2017-04-04 08:24:56

Неужели вы вспоминаете, в какой версии блеска это изменение было сделано? – Benjamin

Понятия не имею. И теперь, видя, как недавний ответ jenesalsquoi, интересно, это даже история. –

Я просто систематически просматривал все версии с 0.13.0 (версия, которую я сейчас использую в своей производственной среде). Вся серия 13 работает с ответом @ jenesalsquoi, но ваш ответ необходим, начиная с серии 14. Не могли бы вы добавить примечание к вашему ответу, указав, что это правильный ответ за 0,14 и выше? – Benjamin

Цвет фона вкладок в блестящей tabPanel

ответ

Смежные вопросы