R-shiny UI界面基本设置

官方指南太简单了，没内容。下一期开始换个教材学。

根据上篇文章里我们已经知道了shiny app的构造。本文会教会你如何构建UI，包括调整外观，添加文字，HTML要素。
之前的文章里介绍过，Shiny主程序分为两个部分，UI部分(ui.R)和Server(server.R)部分。

ui.R

shinyUI(fluidPage(
))

server.R

shinyServer(function(input, output) {
})

这是构成一个shiny app的最短代码。当然没有任何内容,都是架空的。

整体布局

在ui.R里用fluidPage编辑可视化布局。

# ui.R

shinyUI(fluidPage(
  titlePanel("标题面板"),
  
  sidebarLayout(
    sidebarPanel( "边栏面板"),
    mainPanel("主面板")
  )
))

也可以调整面板的位置。

# ui.R

shinyUI(fluidPage(
  titlePanel("标题面板"),
  
  sidebarLayout(position="right",
    sidebarPanel( "边栏面板"),
    mainPanel("主面板")
  )
))

常用HTML对照表

Shiny函数	HTML5	定义
p	<p>	A paragraph of text
h1	<h1>	A first level header
h2	<h2>	A second level header
h3	<h3>	A third level header
a	<a>	A hyper link
br		A line break (e.g. a blank line)
div	<div>	A division of text with a uniform style
span	<span>	An in-line division of text with a uniform style
pre	<pre>	Text ‘as is’ in a fixed width font
code	<code>	A formatted block of code
img	<img>	An image
strong	<srtong>	Bold text
em	<em>	Italicized text
HTML		Directly passes a character string as HTML code

用法举例

library(shiny)

# ui.R

shinyUI(fluidPage(
  titlePanel("My Shiny App"),
  sidebarLayout(
    sidebarPanel(),
    mainPanel(
      h1("First level title"),
      h2("Second level title"),
      h3("Third level title"),
    )
  )
))

再举个栗子

shinyUI(fluidPage(
  titlePanel("My Shiny App"),
  sidebarLayout(
    sidebarPanel(),
    mainPanel(
      h6("Episode IV", align = "center"),
      h6("A NEW HOPE", align = "center"),
      h5("It is a period of civil war.", align = "center"),
      h4("Rebel spaceships, striking", align = "center"),
      h3("from a hidden base, have won", align = "center"),
      h2("their first victory against the", align = "center"),
      h1("evil Galactic Empire.")
    )
  )
))

再来一个复杂点的

# ui.R
library(shiny)

shinyUI(fluidPage(
  titlePanel("My Shiny App"),
  sidebarLayout(
    sidebarPanel(),
    mainPanel(
      p("p creates a paragraph of text. This paragraph is followed by br(), which makes a blank line."),
      p("When you want to start a new paragraph, just use a new p() command. If you supply a style attribute, you can change the format of the entire paragraph", style = "font-family: 'times'; font-size: 16pt"),
      strong("Strong() makes bold text."),
      em("And em() makes italicized (i.e, emphasized) text."),
      br(),
      code("code displays your text like computer code"),
      div("Use span and div to create segments of text that all have a similar style. For example, this division of text is all blue because I passed the argument 'style = color:blue' to div", style = "color:blue"),
      br(),
      p("span does the same thing, but it works with",
        span("groups of words", style = "color:blue"),
        "that appear inside a paragraph.")
    )
  )
))

插入图片

会用到<img>，并且可以指定宽度和长度
这里需要添加一个名字为www的文件夹。把图片放里面。

# ui.R
library(shiny)

# ui.R

shinyUI(fluidPage(
  titlePanel("My Shiny App"),
  sidebarLayout(
    sidebarPanel(),
    mainPanel(
      img(src="jason.png", height = 200, width = 200)
    )
  )
))

# ui.R
library(shiny)

# ui.R

shinyUI(fluidPage(
  titlePanel("My Shiny App"),
  sidebarLayout(
    sidebarPanel(
      p("欢迎订阅Jason数据分析生信教室"),
      br(),
      img(src="jason.png", height = 50, width = 50)
    ),
    mainPanel(
      h2("第二课 UI界面设置", align = "center"),
      br()
    )
  )
))