官方指南太简单了,没内容。下一期开始换个教材学。
根据上篇文章里我们已经知道了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()
)
)
))
网友评论