R闪亮的mainPanel显示风格和字体

Question

我正在学习闪亮的应用程序,并且有一些关于调整布局的基本问题,特别是样式和字体.我很感激指针或明确的答案,谢谢!

考虑一个基本的输入输出应用程序:用户在sidebarPanel中输入数据,并在mainPanel中反应性地输出结果.

1. 我怎样才能将mainPanel中的输出表格式化为更像sidebarPanel？说一个大小相同的矩形,带有彩色背景(可能是另一种颜色),数据出现在相似大小的盒子里.

2. 如何控制面板内的字体类型,字体大小和字体大小？

正如您从代码中看到的那样(参见下面几行的runGist详细信息),我已成功自定义sidebarPanel中numericInput框的大小,但我无法控制字体样式(是我的标记$样式代码放错了地方？).

更重要的是出于审美目的,我无法弄清楚如何格式化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的行高而不是默认的20px,只是为了将输出框的高度调整为与输入框相同.再次,一个实验.

我也改变了server.R中的显示风格

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

这是因为我希望将结果显示在"我的输出"字样下方.通过反复试验,我发现我能挤进一个向量的字符串c()用<br><br>作为分隔符来强制换行.如果这是推荐的方法,我会感到震惊,所以如果你知道这样做的正确方法,请加入.

后续问题不太重要:

我会看看是否可以找到一种方法让我的输出结果显示在类似于sidebarPanel中输入数字的白色框中.欢迎任何建议.

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

我会选择斯科特的答案,因为他已经帮助发现了我的输出,就像我想要的那样.但如果您在上面的描述中看到错误或不正确,请进行编辑.

Answer 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>'),