Build a user interface

Layout

界面的設(shè)計(jì)元素包括一些text、image和html都添加在fluidPage函數(shù)中：

titlePanel 標(biāo)題欄

sidebarPanel 界面的邊欄

mainPanel 主界面

ui

titlePanel("title panel"),

sidebarLayout(

sidebarPanel("sidebar panel"),

mainPanel("main panel")

)

)

其中sidebarLayout包括兩個(gè)版面Panel的對(duì)應(yīng)參數(shù):

sidebarPanel function output

mainPanel function output

當(dāng)然默認(rèn)的sidebar是在界面左側(cè)的，如果想放到右邊，調(diào)節(jié)position = "right"即可

ui

titlePanel("title panel"),

sidebarLayout(position = "right",

sidebarPanel("sidebar panel"),

mainPanel("main panel")

)

)

Sidebar on the right

除此之外，還可以用navbarPage創(chuàng)造多頁(yè)的交互界面，fluidRow 和 column可以創(chuàng)造網(wǎng)格界面，更多的進(jìn)階個(gè)性化shiny界面設(shè)計(jì)可以參考：Shiny Application 我們這里主要介紹sidebarLayout

HTML Content

我們可以添加更多個(gè)性化的標(biāo)簽，借鑒了html5的格式，shiny都有對(duì)應(yīng)的函數(shù)可以組織這些標(biāo)簽，下表展示的是html5 tag和shiny tag的對(duì)應(yīng)關(guān)系

html5.jpg

Headers

只需要在對(duì)應(yīng)函數(shù)里添加需要展示的文本即可，比如下面的一級(jí)標(biāo)題：

h1("My title")

My title

這樣直接運(yùn)行出來(lái)的就是html標(biāo)簽的格式

如果要在app里面展示，只需要把h1("My title")作為參數(shù)傳給titlePanel, sidebarPanel, or mainPanel

ui

titlePanel("My Shiny App"),

sidebarLayout(

sidebarPanel(),

mainPanel(

h1("First level title"),

h2("Second level title"),

h3("Third level title"),

h4("Fourth level title"),

h5("Fifth level title"),

h6("Sixth level title")

)

)

)

顯示效果：

App with headers

其他的字體排版設(shè)置比如字體居中：h6("Episode IV", align = "center")，所有這種HTML tag的屬性都可以通過(guò)對(duì)應(yīng)shiny tag的參數(shù)進(jìn)行設(shè)置

Formatted text

來(lái)看一個(gè)例子：p是段落，strong表加粗，em表斜體，br表?yè)Q行，code為代碼格式，div分割出獨(dú)立style的一段文字，span可以修改段落內(nèi)一部分文字的格式

ui

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.")

)

)

)

Formatting options

Images

要插入圖片使用的函數(shù)是img，圖片名在src參數(shù)內(nèi)設(shè)置，eg.img(src = "my_image.png")

也可以通過(guò)height和width參數(shù)修改圖片大小：

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

為了方便R找到需要的圖片，建議在app.R對(duì)應(yīng)的目錄下創(chuàng)建一個(gè)名為www的文件夾專(zhuān)門(mén)放置圖片等附件，因?yàn)镽會(huì)自動(dòng)對(duì)www的目錄做特殊處理，像下面這樣：

Image in www directory

rstudio.png文件可供下載

Image in an app

Other tags

可以嘗試制作下面的app，熟悉每個(gè)標(biāo)簽的功能：

Target app

總結(jié)

以上是生活随笔為你收集整理的html制作阅读界面,用shiny制作html界面的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。