Question

我想使用.nav-tabs-custom自定义闪亮的应用程序，以便所选面板显示在带有白色文本的黑色背景中，未选中的选项卡显示带有黑色文本的白色背景。

例如，在下面的应用程序中，当＆＃34; Hello＆＃34;选项卡被选中，我想＆＃34;你好＆＃34;在黑色背景上的白色文本。但我仍然希望面板内容（输入字段）的背景保持白色。

我能找到的最接近的问题来自这个问题：Tab Box CSS for shinydashboard

应用该代码会在tabsetPanel中产生彩色背景，但我仍然无法找到修改此方法的方法来更改选项卡的背景。此外，我在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)标记CSS，但这会将更改推送到标签正文，而不是标题框。

关于我可以更改什么以获取标题框以更改背景颜色的任何想法？

{{1}}

Answer 1

上面的例子明显被打破（从版本0.14.0开始），可能是由于闪亮的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)

这是一个截图：

如果再次破坏，并且必须调整代码，这里是生成此代码的当前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>

Answer 2

编辑：对于闪亮版本＆gt; = 0.14，请参阅here。

如果您选择带有“有效”链接的链接作为导航的直接后代，我认为你可以得到你所追求的东西。用户界面看起来像

printf("please enter a number between 1 - 9");
int c[10], count=1;
//Declare an array because user may insert a bigger number
char number;
//This loop allow the user to enter an input
for(i=0;i<10;i++){
    number = getchar();
    if (number != ' '){
        c[i] = atoi(number);
        sum = sum + c[i];
    }
    else if(number == ' '){
        //Terminate the loop when user stop typing
        break;
    }
    else if( sum > 9 || sum < 0){
        //Start loop again until user enter valid input
        printf("You entered a number out of field try again\n");
        continue;
    }

}
while(c != '\n') {

        count ++;

    if ((c >= '0' && c <= '9') || count > 1) {
        printf("%d Congrats!",c);
    }
    else
    {
        printf(" %d ERROR", c);
    }

}

选项卡的背景颜色在发光的tabPanel

2 个答案: