Build a user interface

Layout

界面的設計元素包括一些text、image和html都添加在fluidPage函數中：

titlePanel 標題欄

sidebarPanel 界面的邊欄

mainPanel 主界面

ui

titlePanel("title panel"),

sidebarLayout(

sidebarPanel("sidebar panel"),

mainPanel("main panel")

)

)

其中sidebarLayout包括兩個版面Panel的對應參數:

sidebarPanel function output

mainPanel function output

當然默認的sidebar是在界面左側的，如果想放到右邊，調節position = "right"即可

ui

titlePanel("title panel"),

sidebarLayout(position = "right",

sidebarPanel("sidebar panel"),

mainPanel("main panel")

)

)

Sidebar on the right

除此之外，還可以用navbarPage創造多頁的交互界面，fluidRow 和 column可以創造網格界面，更多的進階個性化shiny界面設計可以參考：Shiny Application 我們這里主要介紹sidebarLayout

HTML Content

我們可以添加更多個性化的標簽，借鑒了html5的格式，shiny都有對應的函數可以組織這些標簽，下表展示的是html5 tag和shiny tag的對應關系

html5.jpg

Headers

只需要在對應函數里添加需要展示的文本即可，比如下面的一級標題：

h1("My title")

My title

這樣直接運行出來的就是html標簽的格式

如果要在app里面展示，只需要把h1("My title")作為參數傳給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

其他的字體排版設置比如字體居中：h6("Episode IV", align = "center")，所有這種HTML tag的屬性都可以通過對應shiny tag的參數進行設置

Formatted text

來看一個例子：p是段落，strong表加粗，em表斜體，br表換行，code為代碼格式，div分割出獨立style的一段文字，span可以修改段落內一部分文字的格式

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

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

也可以通過height和width參數修改圖片大小：

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

為了方便R找到需要的圖片，建議在app.R對應的目錄下創建一個名為www的文件夾專門放置圖片等附件，因為R會自動對www的目錄做特殊處理，像下面這樣：

Image in www directory

rstudio.png文件可供下載

Image in an app

Other tags

可以嘗試制作下面的app，熟悉每個標簽的功能：

Target app

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。