R闪亮的mainPanel显示样式和字体答案

【问题标题】：R shiny mainPanel display style and fontR闪亮的mainPanel显示样式和字体
【发布时间】：2013-11-15 15:35:34
【问题描述】：

我正在学习闪亮的应用程序，并且有一些关于调整布局的基本问题，尤其是样式和字体。我将不胜感激指针或明确的答案，谢谢！

考虑一个基本的输入输出应用程序：用户在侧边栏面板中输入数据，然后在主面板中反应性地输出结果。

如何格式化 mainPanel 中的输出表，使其看起来更像 sidebarPanel？比如说一个大小大致相同的矩形，带有彩色背景（可能是另一种颜色），并且数据出现在一个大小相似的框中。
如何控制面板内的字体类型、字体大小和字体大小？

从代码中可以看到（cf runGist 详细说明了下面几行），我已经成功自定义侧边栏面板中的 numericInput 框的大小，但是我一直无法控制字体样式（是我的 tag$style 代码放错了吗？）。

更重要的是，出于审美目的，我不知道如何格式化 mainPanel 以使其看起来像 sidebarPanel。我主要修改了闪亮网站上的示例，但显然我错过了一些重要的事情。

编辑 1：按照 Scott Chamberlain 的建议，我在 github 上复制了 server.R 和 ui.R 文件：

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

编辑 2：Scott 建议使用 Chrome/Firefox“Inspect Element”（右键单击 html 页面的正文，其他浏览器可能具有相同的功能）。下面是截图：

检查元素

Scott 使用“Inspect Element”工具的建议非常有成效。

这是我学到的（如果我没记错的话）：

container-fluid 和 row-fluid 控制整个容器。
span12 控制headerPanel
span4 控制sidebarPanel
span8 控制 mainPanel
shiny-bound-input 用于输入端
shiny-bound-output 和 shiny-html-output（两者似乎都有效）用于输出端

基于这些发现，我将 HTML 样式放置在 mainPanel 中，因为它看起来很明显，但它似乎也可以在 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 的 line-height 而不是默认的 20px，只是为了将输出框的高度调整为与输入框相同。又是一个实验。

我也在server.R中更改了显示样式，即

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

这是因为我想让结果显示在“我的输出”字样下方。通过反复试验，我发现我可以在向量c() 中压缩字符串，并使用<br><br> 作为分隔符来强制换行。如果这是推荐的方法，我会感到震惊，所以如果您知道正确的方法，请加入。

次要的后续问题：

我会看看是否能找到一种方法让我的输出结果出现在类似于侧边栏面板中的输入数字的白色框中。欢迎提出任何建议。

将所有 html 修改收集到同一个单独的文件中以与 server.R 和 ui.R 一起存储是否可行？

我会选择 Scott 的答案，因为他帮助发现了足够多的东西，可以让我的输出完全符合我的要求。但是，如果您在我上面的描述中发现错误或不准确之处，请进行编辑。

【问题讨论】：

你可以把这两个文件放在一个gist中，然后我们可以很容易地测试它，就像gist.github.com/SChamberlain/7309662，然后我们可以做library(shiny); runGist("gist.github.com/SChamberlain/7309662")
效果很好，谢谢斯科特！ 库("shiny") runGist("gist.github.com/annoporci/7313856")

标签： r shiny

【解决方案1】：

你可以包含任意的html，例如，在对sidebarpanel的调用中，你可以这样做

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

这只是从我的一个 Shiny 应用程序中复制的东西

您可以使用浏览器中的检查器工具来确定需要更改哪些 css 元素。

如果您在 mainPanel 中使用 wellPanel，则会将该 wellPanel 修改为蓝色

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

【讨论】：

感谢 Scott，我终于可以开始测试了。如果可以的话，有几个问题：1）“浏览器中的检查器工具”是什么意思（特别是任何浏览器？）； 2）你能解释一下它们的作用吗？只有 .row-fluid{width:30%} 似乎在做某事，无论我把它放在 sidebarPanel 还是放在 mainPanel 您能否对 .span4、.leaflet 发表评论？如何向 mainPanel 添加背景颜色？谢谢！
抱歉，我使用的是 Chrome 中的“开发者工具”，或者 Firefox 中的等效工具。我说这个 b/c 我不确定您需要更改页面的哪个元素。再次抱歉，我输入的示例代码并不是为了解决您的问题 - 只是例如来自我的 :) .span4 正在调整一个 span4 元素，我认为这是侧边栏。我拿出了 .leaflet，但那是我应用中的地图...
嘿@PatrickT 我在上面编辑了代码，也许是部分解决方案
@PatrickT & Scott：或者，我认为更方便的是，您可以使用tags$script(type="text/css", ".span8 .well { background-color: #00FFFF; }")
是的，谢谢，甚至写一个单独的css文件并使用includeCSS

【解决方案2】：

在 Shiny 中插入样式的另一种方法是通过其tag 命令。结果将与插入纯 HTML 相同：

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

结果将与插入纯 HTML 代码相同（在此示例中，结果将与 Scott 的最后一个代码 sn-p 相同）

【讨论】：

【解决方案3】：

这是一个非常古老的帖子，但为了后代：您可以将 css 放在您的 mainPanel() 调用中。如果您想在侧边栏布局的主面板中进行固定位置绘图：

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

【讨论】：