22

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

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

在此处输入图像描述

  1. 如何格式化 mainPanel 中的输出表，使其看起来更像 sidebarPanel？说一个大小相同的矩形，带有彩色背景（可能是另一种颜色），并且数据出现在一个大小相似的框中。

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

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

更重要的是，出于美学目的，我无法弄清楚如何格式化 mainPanel 以使其看起来像 sidebarPanel。大多数情况下，我修改了闪亮网站上的示例，但显然我错过了一些重要的事情。

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

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

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

检查元素

在此处输入图像描述

事实证明，Scott 使用“检查元素”工具的建议非常有成效。

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

  • 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 的答案，因为他帮助发现了足够多的东西，可以让我的输出完全符合我的要求。但是，如果您在我上面的描述中看到错误或不精确之处，请进行编辑。

4

3 回答 3

7

您可以包含任意 html，例如，在对 的调用中sidebarpanel，您可以执行

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

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

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

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

HTML('<style type="text/css">
        .span8 .well { background-color: #00FFFF; }
        </style>'),
于 2013-11-05T02:33:27.393 回答
4

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

sidebarLayout(
     sidebarPanel(), 
     mainPanel(style="position:fixed;margin-left:32vw;",
          plotOutput("plot")
     )
)
于 2016-12-13T06:20:32.027 回答
3

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

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

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

于 2015-04-18T15:22:43.043 回答