Question

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

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

enter image description here

我如何将mainPanel中的输出表格式化为更像sidebarPanel？说一个大小相同的矩形，带有彩色背景（可能是另一种颜色），数据出现在相似大小的盒子里。
如何控制面板内的字体类型，字体大小和字体大小？

从代码中可以看到（参见下面几行中的runGist详细信息），我已成功自定义sidebarPanel中numericInput框的大小，但我无法控制字体样式（是我的标签$ style code misplaced？）。

更重要的是，出于审美目的，我无法弄清楚如何格式化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页面的主体，其他浏览器可能具有相同的功能）。以下是截图：

检查元素

enter image description here

这是我学到的东西（如果我没弄错的话）：

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

您可以在sidebarpanel的调用中添加任意html，您可以

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

Answer 2

这是一个非常古老的帖子，但对于后代：你可以把css放在你的mainPanel（）调用中。如果您想在侧边栏布局中的主面板中使用固定位置图：

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

Answer 3

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

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

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

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

3 个答案: