目录
- 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
作者：Bioinfarmer
若要及时了解动态信息，请关注同名微信公众号：Bioinfarmer。
