首页 文章

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

提问于
浏览 次
20

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

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

enter image description here

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

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

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

Inspect Element

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)
})

这是因为我希望将结果显示在单词"My Output"下面 . 通过反复试验，我发现我可以在矢量 c() 中使用 <br><br> 作为分隔符来挤压字符串以强制换行 . 如果这是推荐的方法，我会感到震惊，所以如果你知道这样做的正确方法，请加入 .

Follow-up Questions of lesser importance ：

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

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

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

r shiny

3 回答

  • 7

    您可以在 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>'),
    回复于
  • 3

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

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

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

    回复于
  • 3

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

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

相关问题