Shiny-HTML

摘要： 開頭先推薦一個Shiny達人整理的一些Shiny Tips： Shiny tips & tricks for improving your apps and solving common problems 剛學習Shiny的時候，總覺得Shiny這麼方便，再...

剛學習Shiny的時候，總覺得Shiny這麼方便，再也不用去看HTML/CSS/JS了，直到對於Shiny app展示效果越來越高時，發現Shiny一些工具的預設引數已經無法滿足一些需求了，這時又得返回來依靠HTML的一些用法來實現。。。所以現在覺得Shiny是一個連線R語言用於快速視覺化結果的工具，至於做一些網頁或者更加美觀的網頁，還是得會一點HTML相關知識；如果不追求網頁互動效果以及美觀程度，Shiny的函式的預設引數就足夠了。當然如果瞭解更多的HTML/CSS/JS知識，也就可以設計出更加好的Shiny app

下面是針對shiny中使用HTML來制定更加個性化的UI介面的一些總結

本質上Shiny中的每個函式都是一個HTML程式碼，如：

> titlePanel("This is a title")
<h2>This is a title</h2>

而Shiny中對於使用HTML的一些標籤語法可以用tags 來呼叫，如tags$h2("Header2") ，因此一些的Shiny外掛其實是由多個HTML標籤所構成的HTML外掛

> downloadButton
function (outputId, label = "Download", class = NULL, ...) 
{
aTag <- tags$a(id = outputId, class = paste("btn btn-default shiny-download-link", 
class), href = "", target = "_blank", download = NA, 
icon("download"), label, ...)
}

這樣的話，其實我們可以直接用一些HTML標籤來代替Shiny函式（只是有時這樣的話，佈局方面要注意一點，可能會跟Shiny預設的佈局有點衝突，導致不太美觀，但是簡單的代替還是沒問題的）

HTML標籤使用以及屬性就參考w3schools的HTML 教程

1. 插入圖片（圖片記得放在shiny檔案同一目錄的www資料夾中），tags$img 中可以加各種HTML的標籤的屬性

   tags$img(src="prm.png", width = "100%", height = "100%")

2. 在R ui.R中不能直接使用HTML標籤語法（因為會被直接轉化為字串），可用HTML 函式來轉化為可識別的HTML標籤

   HTML("<strong>Raw HTML!</strong>")

3. 對於樣式，可以用tags$style(HTML("...")) 來對一些標籤來增加CSS樣式語法，如：

   tags$head(tags$style(HTML("...")))

   對一些文字增加樣式，比如增加字型、顏色、對齊等等，可以直接在標籤裡增加style引數，可以看下以下兩種的區別

   tags$p("This is just a test!", 
    style = "font-family: 'Source Sans Pro'; color: #0FF; text-align: center"),
   p("This is just a test!")

   對於一些網頁上的header增加一個有背景圖片的主標題，也是可以用style來設計的，以及增加一點內邊距

   h1("APT Tools Web", 
    style = "font-family: 'Source Sans Pro';
   color: #fff; text-align: center;
   background-image: url('texturebg.png');
   padding: 20px")

   還可以增加比較定製化的div邊框（內邊距、線條以及顏色等），配合style樣式

   div(p("This is just a test"), style = "padding: 20px; border: 1px solid #E6E9ED; width: 30%")

   其實shiny中的一些自帶函式也是支援style的，比如想對verbatimTextOutput() 函式（用於shiny輸出文字text內容）設定一些背景顏色、文字顏色、對齊排布等等；value 是verbatimTextOutput() 函式的outputId，類似於class類，然後在style中用#value 來指定CSS用於對應的id

   tags$style(type='text/css', '#value {background-color: white; color: green; height: 35px; overflow: visible; text-align:left; padding: 8px}'),
   verbatimTextOutput("value")

   也可以修改類似於fluidRow() 佈局函式的樣式（其中tags$head(...) 表示將CSS加到HTML的head標籤內）：

   fluidRow(
   class = "myRow1", 
   column(6, div(style = "height:200px; background-color:yellow;", "Topleft")),
   column(6, div(style = "height:100px; background-color:blue;", "Topright"))
   ),
   tags$head(
   tags$style(
   ".myRow1{height:350px; background-color:pink;}"
   )
   )

4. 還有些比較常見的HTML用法：

   • 超連結：tags$a(href="www.rstudio.com", "Click here!")
   • 空白行：br() ortags$br()
   • 水平線：hr() ortags$hr()
   • 內聯元素：tag$span() ，多用於指定文字樣式
   • 指令碼：tags$script(HTML(...)) ，可以用於加入JS指令碼

因此可知，shiny開發者們其實是基於shiny的HTML標籤的方式來開發新的shiny工具，使其他R使用者以更加方便的方式來搭建shiny互動介面

本文出自於http://www.bioinfo-scrounger.com 轉載請註明出處