Shiny学习（二）
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)
)
)
)
参考：