R glänzend mainPanel Display-Stil und Schriftart

Question

Ich lerne glänzende Anwendungen und habe einige grundlegende Fragen über das Layout, insbesondere Stil und Schriftart zu optimieren. Ich wäre dankbar für Hinweise oder explizite Antworten, danke!

Betrachten Sie eine grundlegende Eingabe-Ausgabe-App: Der Benutzer gibt Daten in das SidebarPanel ein und gibt ein Ergebnis im mainPanel reaktiv aus.

1. Wie konnte ich die Ausgabetabelle in der Mainpanel-Format mehr wie die sidebarPanel aussehen? sagen Sie ein Rechteck von etwa der gleichen Größe mit einem farbigen Hintergrund (vielleicht eine andere Farbe) und die Daten in einer Box ähnlicher Größe erscheinen.

2. Wie kann ich die Schriftart, Schriftgröße und Schriftgröße in den Panels steuern?

Wie Sie aus dem Code sehen (vgl runGist Details ein paar Zeilen weiter unten), ich habe die Größe der numericInput-Box in der sidebarPanel im Customizing erfolgreich gewesen, aber ich habe nicht in der Lage gewesen, das zu kontrollieren Schriftstile (ist mein Tag $ style code falsch platziert?).

Noch wichtiger für ästhetische Zwecke konnte ich nicht herausfinden, wie das MainPanel formatiert wird, damit es wie das SidebarPanel aussehen. Meistens modifizierte ich Beispiele von der glänzenden Website, aber offensichtlich verpasste ich einige wichtige Dinge.

Edit 1:

library("shiny") 
runGist("gist.github.com/annoporci/7313856") 

Edit 2: Nach Scott Chamberlain Vorschlag habe ich die server.R und ui.R Dateien auf GitHub kopiert Scott mit vorgeschlagen Chrome/Firefox "Inspect Element" (Rechtsklick auf body of html Seite, andere Browser können die gleiche Funktion haben). Unten ist ein Screenshot:

Inspect Element

Scotts Vorschlag der "Inspect Element" Werkzeug sehr fruchtbar erwiesen zu verwenden.

Hier ist, was ich gelernt (wenn ich mich nicht irre):

• container-fluid und row-fluid Kontrolle der Gesamtbehälter.
• span12 steuert die headerPanel
• span4 steuert die sidebarPanel
• span8 steuert die mainPanel
• shiny-bound-input für die Eingangsseite ist
• shiny-bound-output und shiny-html-output (beide erscheinen als gültig) sind für die Ausgangsseite

Basierend auf diesen Ergebnissen, I p schnürte die HTML-Stile im mainPanel, weil es wie ein offensichtlicher Ort schien, aber es scheint auch innerhalb des SidebarPanel zu funktionieren.Es wäre intuitiver (für mich), es sofort in die pageWithSidebar() einzufügen, aber das hat nicht funktioniert.

ist die editierten glänzend:

runGist("https://gist.github.com/annoporci/7346772") 

Hier werden die HTML-Stile sind:

HTML('<style type="text/css"> 
    .row-fluid { width: 50%; } 
    .well { background-color: #99CCFF; } 
    .shiny-html-output { font-size: 20px; line-height: 21px; } 
    </style>') 

I 50% für die gesamte Behälterbreite gewählt, es klein zu halten.

Ich habe die selbe Farbe für das sidebarPanel und mainPanel ausgewählt.

Ich habe eine größere Schriftart für die Ausgabe ausgewählt, die hier nicht schön ist, aber in meiner Real-Life-App sinnvoll ist. Außerdem experimentiere ich mehr als alles andere.

Ich wählte eine Zeilenhöhe von 21px anstelle der Standard 20px, nur um die Höhe der Ausgabebox so zu verändern, dass sie der Eingabebox entspricht. Wieder ein Experiment.

Ich habe auch das Anzeigeformat in server.R, nämlich

output$myResults <- renderText({ 
    r <- myFunction(input$myinput) 
    c("My Output:","<br><br>",r) 
}) 

Das ist, weil ich das Ergebnis angezeigt unten die Worte „My Output“ haben wollte. Durch Versuch und Irrtum entdeckte ich, dass ich Strings in einem Vektor c() mit <br><br> als Trennzeichen drücken konnte, um einen Zeilenumbruch zu erzwingen. Ich wäre schockiert, wenn dies der empfohlene Ansatz wäre, also bitte, wenn Sie die richtige Vorgehensweise kennen.

Follow-up-Fragen von geringerer Bedeutung:

ich werden sehen, ob ich einen Weg finden kann mein Ausgangsergebnis zu haben scheinen in einem weißfarbenen Box ähnlich die Eingangsnummer im sidebarPanel. Irgendwelche Vorschläge willkommen.

Könnte es möglich sein, alle HTML-Änderungen in der gleichen, separaten Datei zu sammeln, die zusammen mit server.R und ui.R gespeichert werden?

Ich wähle Scotts Antwort, weil er geholfen hat, genug zu entdecken, um meine Ausgabe genau so zu bekommen, wie ich es wollte. Aber bitte editieren Sie, wenn Sie Fehler oder Ungenauigkeiten in meiner obigen Beschreibung sehen.

Answer 1

Sie können beliebige HTML umfassen zum Beispiel innerhalb der Aufruf sidebarpanel, können Sie

HTML('<style type="text/css"> 
    .row-fluid .span4{width: 26%;} 
    </style>') 

Dies ist nur etwas von einem meiner Shiny Apps kopiert

Sie Inspektor nutzen könnten Werkzeuge in der Browser, um herauszufinden, welche CSS-Elemente geändert werden müssen.

Wenn Sie eine wellPanel innerhalb des Mainpanel verwenden diese modifiziert, dass wellPanel blau

HTML('<style type="text/css"> 
     .span8 .well { background-color: #00FFFF; } 
     </style>'), 

Answer 2

Ein anderer Weg, um Styling in Shiny einzufügen ist durch seine tag Befehl.Das Ergebnis wird das gleiche sein wie einfache HTML einfügen:

tags$style(type="text/css", ".span8 .well { background-color: #00FFFF; }") 

das Ergebnis wird das gleiche wie das Einfügen einfachen HTML-Code sein (in diesem Beispiel das Ergebnisses von Scott die gleichen wie der letzten Code-Schnipsel wäre)

Answer 3

Dies ist ein wirklich alter Post, aber für die Nachwelt: Sie können einfach CSS in Ihrem MainPanel() Anruf setzen. Wenn Sie eine Feststellung Grundstück in der Mainpanel in einer Seitenleiste Layout wollen:

sidebarLayout(
    sidebarPanel(), 
    mainPanel(style="position:fixed;margin-left:32vw;", 
      plotOutput("plot") 
    ) 
)