Hintergrundfarbe der Tabs im glänzenden TabPanel
Ich möchte eine glänzende Anwendung mithilfe von tabsetPanels anpassen, sodass das ausgewählte Feld in einem schwarzen Hintergrund mit weißem Text angezeigt wird und die nicht ausgewählten Registerkarten einen weißen Hintergrund mit schwarzem Text aufweisen.
Wenn Sie beispielsweise in der Anwendung "Hello" ausgewählt haben, möchte ich, dass "Hello" in einem weißen Text auf schwarzem Hintergrund angezeigt wird. Aber ich möchte immer noch, dass der Hintergrund des Panel-Inhalts (das Eingabefeld) weiß bleibt.
Das nächste, was ich gefunden habe, kommt von dieser Frage: Tab Box CSS für Shinydashboard
Wenn Sie diesen Code anwenden, wird der gesamte TabsetPanel farbig hinterlegt, aber ich kann immer noch keine Möglichkeit finden, dies zu ändern, um den Hintergrund nur der Tabs zu ändern. Außerdem scheint nichts, was ich in .nav-tabs-custom css ändere, irgendeinen Effekt zu haben.
Ich bin ständig versucht, Änderungen am tab-pane -Tag-CSS anzuwenden, aber das überträgt Änderungen in den Hauptteil der Registerkarte, nicht in die Titelbox.
Irgendwelche Ideen, was ich ändern könnte, damit die Titelfelder die Hintergrundfarbe ändern?
%Vor%2 Antworten
EDIT: für glänzende Versionen & gt; = 0,14 siehe hier .
Wenn Sie den Link mit einer 'aktiven' Klasse als direkten Nachkomme des Navs auswählen, können Sie das bekommen, wonach Sie suchen. Die Benutzeroberfläche würde aussehen wie
%Vor% 
Das obige Beispiel ist anscheinend (ab Version 0.14.0) defekt, wahrscheinlich aufgrund eines Shiny CSS-Wechsels. Außerdem verspricht der Titel des Posts mehr als die eigentliche Frage und Lösung tatsächlich abgedeckt. Also habe ich ein neues, umfassenderes Beispiel geschrieben.
- Es setzt den Standard-Tab-Hintergrund auf aqua und schwarzen Text.
- Er setzt die Farbe mehrerer Tabs als explizite Farben (wenn sie nicht aktiv sind) mit weißem Text.
- Er setzt den aktiven Tab-Hintergrund schwarz mit weißem Text.
Ob all diese Farben aus UI-Sicht eine gute Idee sind, ist eine andere Frage ...
Hier ist der Code:
%Vor%Hier ist ein Screenshot:
Und falls das wieder bricht und der Code angepasst werden muss, ist hier der aktuelle css / html, der das erzeugt:
%Vor%