Shiny学习（二）

前面介绍了Shiny的基本构成Shiny学习（一）下面接着学习如何构建用户界面。

首先，创建Shiny应用程序所需的最基本的框架。如下，生成一个空白用户界面。

library(shiny)

# Define UI ----
ui <- fluidPage(
  
)

# Define server logic ----
server <- function(input, output) {
  
}

# Run the app ----
shinyApp(ui = ui, server = server)

image.png

1.设置布局

Shiny使用fluidPage创建一个显示界面，该显示界面可自动调整为用户浏览器窗口的尺寸。还可以通过在fluidPage函数中设置元素对用户界面进行布局。

例如，ui下面的函数创建一个用户界面，该用户界面具有标题面板和侧边栏布局（包括侧边栏面板和主面板）。请注意，这些元素位于fluidPage函数中。

ui <- fluidPage(
  titlePanel("title panel"),

  sidebarLayout(
    sidebarPanel("sidebar panel"),
    mainPanel("main panel")
  )
)

2.设置标题大小

对于Shiny排版的设计需要HTML,与HTML5非常相似。

h1 <h1> 一级头
h2 <h2> 二级头
h3 <h3> 第三级标题
h4 <h4> 第四级标题
h5 <h5> 第五级标题
h6 <h6> 第六级标题

h1 h2等设置不同大小的标题，align = "center"将标题居中

ui <- fluidPage(
  titlePanel("My Shiny App"),
  sidebarLayout(
    sidebarPanel(),
    mainPanel(
      h1("First level title (center) ",align = "center"),
      h2("Second level title"),
      h3("Third level title"),
      h4("Fourth level title"),
      h5("Fifth level title"),
      h6("Sixth level title")
    )
  )
)

3.文字格式

p <p> 一段文字
a <a> 超级链接
br
换行符（例如，空行）
div <div>具有统一样式的文本
span <span> 行内文本的统一样式
pre <pre> 以固定宽度的字体按原样显示文本
code <code> 格式化的代码块
img <img> 一个图像
strong <strong> 粗体文字
em <em> 斜体文字

ui <- fluidPage(
  titlePanel("My Shiny App"),
  sidebarLayout(
    sidebarPanel(),
    mainPanel(
      p("p creates a paragraph of text."),
      p("A new p() command starts a new paragraph. Supply a style attribute to change the format of the entire paragraph.", style = "font-family: 'times'; font-si16pt"),
      strong("strong() makes bold text."),
      em("em() creates italicized (i.e, emphasized) text."),
      br(),
      code("code displays your text similar to computer code"),
      div("div creates segments of text with a similar style. 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 as div, but it works with",
        span("groups of words", style = "color:blue"),
        "that appear inside a paragraph.")
    )
  )
)

image.png

4.插入图片

图片可以增强应用的外观并帮助用户理解内容。Shiny通过img将图像文件放置在相应位置。要插入图像，需要img函数指定图像文件的名称作为src参数（例如img(src = "my_image.png")）。还可以设置其他HTML参数，例如高度和宽度。请注意，高度和宽度将以像素为单位。

img(src = "my_image.png", height = 72, width = 72)

该img功能在特定位置查找图像文件。这个文件必须位于与app.R脚本相同的目录下的一个的文件夹www中。这个www除了存储图像，还可以存储其他web需要的部件。

因此，如果要使用名为rstudio.png的图像，则App-1目录应如下所示：

image.png

ui <- fluidPage(
  titlePanel("My Shiny App"),
  sidebarLayout(
    sidebarPanel(),
    mainPanel(
      img(src = "rstudio.png", height = 140, width = 400)
    )
  )
)

欢迎关注微信公众号~

公众号二维码.jpg

参考：
https://shiny.rstudio.com/tutorial/written-tutorial