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