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

2018-07-01 23:20:53

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

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

在这里输入图像描述

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

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

从代码中可以看到（参见下面的几行），我已经成功定制了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页面的主体，其他浏览器可能具有相同的功能）。以下是截图：

检查元素

在这里输入图像描述

斯科特建议使用“检查元素”工具证明是非常有成果的。

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

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一起存储。

我会选择斯科特的答案，因为他已经帮助我发现了足以让我的输出达到我想要的方式。但是，如果您在上面的描述中看到错误或不精确的情况，请进行修改。

例如，您可以在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>'),

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

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

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

这是一个非常古老的帖子，但是对于后人来说：您可以将CSS放在mainPanel（）调用中。如果你想在mainPanel中的一个固定位置图在侧边栏布局中：

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

链接地址: http://www.djcxy.com/p/89135.html

上一篇: R shiny mainPanel display style and font

下一篇: How to enable user to switch between ggplot2 and gVis graphs in R Shiny?