R shinydashboard——3.外觀

目錄

• 1.皮膚
• 2.注銷面板
• 3.CSS
• 4. 標題延長
• 5.側邊欄寬度
• 6.圖標
• 7.狀態和顏色

1.皮膚

shinydashboard有很多顏色主題和外觀的設置。默認為藍色，可指定黑絲、紫色、綠色、紅色和黃色，如dashboardPage(skin = "black")。

個人認為還是藍色顯得穩重一點。

2.注銷面板

當使用Shiny Server Pro運行Shinydashboard應用程序並且登錄了經過身份驗證的用戶時，在右上角將出現一個顯示用戶名和注銷鏈接的面板。默認的Shiny Server Pro注銷面板：

如果想改為添加具有動態UI（在服務器上生成）的用戶面板，並隱藏默認的注銷面板，如下所示：

library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(
    # Custom CSS to hide the default logout panel
    tags$head(tags$style(HTML('.shiny-server-account { display: none; }'))),

    # The dynamically-generated user panel
    uiOutput("userpanel")
  ),
  dashboardBody()
)

server <- function(input, output, session) {
  output$userpanel <- renderUI({
    # session$user is non-NULL only in authenticated sessions
    if (!is.null(session$user)) {
      sidebarUserPanel(
        span("Logged in as ", session$user),
        subtitle = a(icon("sign-out"), "Logout", href="__logout__"))
    }
  })
}

shinyApp(ui, server)

3.CSS

可以通過在應用程序中創建www/子目錄，並在其中添加CSS文件，將自定義CSS添加到應用程序中。例如，想將dashboard的標題字體更改為與其余部分相同的字體，如下圖所示：

首先創建一個名為www/custom.css的文件，包含以下內容：

.main-header .logo {
  font-family: "Georgia", Times, "Times New Roman", serif;
  font-weight: bold;
  font-size: 24px;
}

然后從UI引用該CSS文件：

## ui.R ##
dashboardPage(
  dashboardHeader(title = "Custom font"),
  dashboardSidebar(),
  dashboardBody(
    tags$head(
      tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")
    )
  )
)

或者直接將CSS腳本嵌套再UI代碼中：

## ui.R ##
dashboardPage(
  dashboardHeader(title = "Custom font"),
  dashboardSidebar(),
  dashboardBody(
    tags$head(tags$style(HTML('
      .main-header .logo {
        font-family: "Georgia", Times, "Times New Roman", serif;
        font-weight: bold;
        font-size: 24px;
      }
    ')))
  )
)

更多CSS的個性化設置可參考：Style your apps with CSS

4. 標題延長

很多情況下，shinydashboard使用的標題會超出標題欄中的默認寬度。可以使用titleWidth增加寬度。

如下圖，將標題增加到450像素，並且通過使用自定義CSS將標題區域的背景色設置為與標題欄的其余部分相同：

shinyApp(
  ui = dashboardPage(
    dashboardHeader(
      title = "Example of a long title that needs more space",
      titleWidth = 450
    ),
    dashboardSidebar(),
    dashboardBody(
      # Also add some custom CSS to make the title background area the same
      # color as the rest of the header.
      tags$head(tags$style(HTML('
        .skin-blue .main-header .logo {
          background-color: #3c8dbc;
        }
        .skin-blue .main-header .logo:hover {
          background-color: #3c8dbc;
        }
      ')))
    )
  ),
  server = function(input, output) { }
)

5.側邊欄寬度

通過使用width參數。

shinyApp(
  ui = dashboardPage(
    dashboardHeader(
      title = "Title and sidebar 350 pixels wide",
      titleWidth = 350
    ),
    dashboardSidebar(
      width = 350,
      sidebarMenu(
        menuItem("Menu Item")
      )
    ),
    dashboardBody()
  ),
  server = function(input, output) { }
)

6.圖標

Shiny和Shinydashboard中使用的圖標實際上只是特殊字體集中的字符，它們是由Shiny的icon()創建的。

icon("calendar")
對應的HTML
<i class="fa fa-calendar"></i>

默認情況下，icon()使用的是Font-Awesome中的圖標，如果要使用Glyphicons，需要指定lib="glyphicon"：

"Calendar from Font-Awesome:", icon("calendar"),
"Cog from Glyphicons:", icon("cog", lib = "glyphicon")

來自Font-Awesome的圖標：http://fontawesome.io/icons/
來自Glyphicons的圖標： http://getbootstrap.com/components/#glyphicons

7.狀態和顏色

Shinydashboard組件的狀態參數status，是某些Bootstrap類的屬性。如status="primary"，status="success"：

Shinydashboard組件的顏色參數color，如color="red"，color="black"：

更多狀態和顏色通過?validStatuses和?validColors查看。

Ref:
https://rstudio.github.io/shinydashboard/appearance.html