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

巴特西

R shinydashboard——3.外观