R閃亮的mainPanel顯示樣式和字體

我在學習閃亮的應用程序，並且有一些關於調整佈局的基本問題，特別是樣式和字體。我會感謝指針或明確的答案，謝謝！R閃亮的mainPanel顯示樣式和字體

考慮一個基本的輸入輸出應用程序：用戶在sidebarPanel中輸入數據，並在mainPanel中反應輸出結果。

enter image description here

我怎麼能格式化mainPanel中輸出表看起來更像sidebarPanel？說一個大小相同的帶有彩色背景（也許是另一種顏色）的矩形，數據出現在相似大小的盒子中。
如何控制面板內的字體類型，字體大小和字體大小？

正如你可以從代碼中看到（CF runGist詳細介紹了幾個低於行），我已經成功地定製的sidebarPanel的numericInput框的大小，但我一直沒能控制字體樣式（是我的標籤$風格代碼錯位？）。

更重要的是，爲了美觀的目的，我無法弄清楚如何格式化mainPanel使其看起來像sidebarPanel。大多數情況下，我修改了這個閃亮網站的例子，但顯然我錯過了一些重要的事情。

編輯1：繼斯科特張伯倫的建議，我抄在GitHub上server.R和ui.R文件：

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

編輯2：使用Chrome/Firefox的「檢查元素」（右鍵點擊斯科特建議在html頁面的主體上，其他瀏覽器可能具有相同的功能）。下面是截圖：

檢查元素

enter image description here

斯科特的建議，使用了「檢查元素」工具被證明卓有成效。

這是我學到了什麼（如果我沒有記錯的話）：

container-fluid和row-fluid控制整體的容器。
span12控制headerPanel
span4控制sidebarPanel
span8控制mainPanel
shiny-bound-input爲輸入側
shiny-bound-output和shiny-html-output（兩者都顯示是有效的）是用於輸出側

基於這些發現，I p在mainPanel中添加了HTML樣式，因爲它看起來像是一個明顯的地方，但它似乎也在sidebarPanel中工作。直接將它放在pageWithSidebar（）中會更直觀，但這不起作用。

這裏是所編輯的光澤：

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

下面是HTML樣式：

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

我所選擇的50％的整體容器的寬度，以保持其小。

我爲sidebarPanel和mainPanel選擇了相同的顏色。

我爲輸出選擇了一個更大的字體，這在這裏並不漂亮，但在我的真實應用中很有意義。除此之外，我正在嘗試更多。

我選擇了21px的行高而不是默認的20px，只是爲了調整輸出框的高度與輸入框相同。再一次，一個實驗。

我也改變了顯示風格server.R，即

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

這是因爲我想擁有的話「我的輸出」下面顯示的結果。通過試驗和錯誤，我發現我可以使用<br><br>作爲分隔符強制換行來擠壓矢量c()中的字符串。如果這是推薦的方法，我會感到震驚的，所以如果你知道這樣做的正確方法，請加以注意。不太重要

後續問題：

我去看看，如果我能找到一種方法，有我的輸出結果顯示在一個白色的盒子類似於sidebarPanel輸入的號碼。歡迎任何建議。

可能收集所有的html修改在同一個單獨的文件中存儲在一起server.R和ui.R？

我會選擇Scott的答案，因爲他幫助發現了足以讓我的輸出達到我想要的方式。但是，如果您在上面的描述中看到錯誤或不精確的情況，請進行修改。

來源

2013-11-04 PatrickT

你可以把這兩個文件的要點，那麼我們就可以很容易地對其進行測試，像這樣的https：//gist.github。 com/SChamberlain/7309662，然後我們可以做圖書館（閃亮）; runGist（「https://gist.github.com/SChamberlain/7309662」） – sckott

工作得很好，謝謝Scott！ __library（「shiny」）runGist（「https://gist.github.com/annoporci/7313856」）__ – PatrickT

可以包含任意的HTML，例如，調用sidebarpanel中，你可以做

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

這只是一些從我閃亮的應用程序之一複製

你可以在使用檢查工具瀏覽器找出需要改變的CSS元素。

如果使用wellPanel mainPanel中這裏面修改了wellPanel是藍色

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

來源

2013-11-05 02:33:27 sckott

謝謝Scott，我終於開始測試這個了。如果我可能會提出幾個問題：1）「瀏覽器中的檢查工具」（特別是任何瀏覽器）是什麼意思？ 2）你能解釋一下它們各自的作用嗎？只有__。row-fluid {width：30％} __似乎做了一些事情，而且它將同樣的事情放在__sidebarPanel__或__mainPanel__中。您可以評論.span4，.leaflet嗎？我如何添加背景顏色到__mainPanel__？謝謝！ – PatrickT

對不起，我使用的是Chrome中的「開發人員工具」，或者是Firefox中的等效工具。我說這個B/C我不確定你需要改變頁面的哪個元素。再次抱歉，我輸入的示例代碼並不是爲了解決您的問題 - 例如從我的:) .span4正在調整span4元素，這是我認爲的側邊欄。我拿出了.leaflet，但這是我在應用中的地圖... – sckott

嘿@PatrickT我編輯了上面的代碼，部分解決方案 – sckott

另一種方式閃亮插入造型是通過其tag命令。其結果將是相同的插入普通的HTML：

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

結果將是相同的插入普通的HTML代碼（在這個例子中，結果將是相同的，通過斯科特最後的代碼片段）

來源

2015-04-18 15:22:43

這是一篇非常古老的文章，但對於後人：您可以將CSS放在mainPanel（）調用中。如果你想在側邊欄佈局mainPanel中固定位置的情節：

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

來源

2016-12-13 06:20:32

R閃亮的mainPanel顯示樣式和字體

回答

相關問題