R shinydashboard——3.外观
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.外观的更多相关文章
- R shinydashboard ——2. 结构
目录 1.Shiny和HTML 2.结构 3. 标题Header 4. 侧边栏Siderbar 5.主体/正文Body box tabBox infoBox valueBox Layouts 1.Sh ...
- R shinydashboard ——1. 基本用法
shiny和shinydashboard使用虽然简单,但控件众多,需及时总结归纳. install.packages("shinydashboard") shinydashboar ...
- [原]CentOS7安装Rancher2.1并部署kubernetes (二)---部署kubernetes
################## Rancher v2.1.7 + Kubernetes 1.13.4 ################ ##################### ...
- 利用python进行数据分析2_数据采集与操作
txt_filename = './files/python_baidu.txt' # 打开文件 file_obj = open(txt_filename, 'r', encoding='utf-8' ...
- Django项目:CRM(客户关系管理系统)--81--71PerfectCRM实现CRM项目首页
{#portal.html#} {## ————————46PerfectCRM实现登陆后页面才能访问————————#} {#{% extends 'king_admin/table_index.h ...
- Building [Security] Dashboards w/R & Shiny + shinydashboard(转)
Jay & I cover dashboards in Chapter 10 of Data-Driven Security (the book) but have barely mentio ...
- shinydashboard包---为shiny提供BI框架
1.安装 install.packages("shinydashboard") 2.基础知识 仪表盘有三个部分:标题.侧边栏,身体.下面是最最小的仪表面板页面的UI: ## ui. ...
- R语言包翻译——翻译
Shiny-cheatsheet ...
- R语言包翻译
Shiny-cheatsheet 作者:周彦通 1.安装 install.packages("shinydashboard") 2.基础知识 仪表盘有三个部分:标题.侧边栏,身体 ...
随机推荐
- Beta阶段第六次会议
第六次会议 时间:2020.5.22 完成工作 姓名 任务 难度 完成度 xyq 1.编写技术博客 中 90% ltx 1.编写小程序2.添加全局变量之后页面无法加载的bug 中 90% lm(迟到) ...
- 第4次 Beta Scrum Meeting
本次会议为Beta阶段第4次Scrum Meeting会议 会议概要 会议时间:2021年6月4日 会议地点:「腾讯会议」线上进行 会议时长:0.5小时 会议内容简介:对完成工作进行阶段性汇报:对下一 ...
- 计算机网络之流量控制(停止-等待协议、滑动窗口、后退N帧协议GBN、选择重传协议SR)、滑动窗口、可靠传输机制
文章转自:https://blog.csdn.net/weixin_43914604/article/details/104908762 学习课程:<2019王道考研计算机网络> 学习目的 ...
- 攻防世界 web4.cookie
题有几种解法,我有点懒,懒的打开burp,所以可以直接在浏览器拿flag, 首先访问ip/cookie.php,提示:See the http response 接着F12查看响应头 给你cyberp ...
- fd定时器--timerfd学习
定时器 可以用系统定时器信号SIGALARM 最近工作需要于是又发现了一个新玩意timerfd配合epoll使用. man 手册看一下 TIMERFD_CREATE(2) Linux Programm ...
- hdu 4288 Coder (线段树+离线)
题意: 刚开始有一个空集合.有三种操作: 1.往集合中加入一个集合中不存在的数 x 2.从集合中删除一个已经存在的数 x 3.计算集合的digest sum并输出. digest sum求 ...
- PHP查看内存占用
function test(){ echo memory_get_usage(), '<br>'; $start = memory_get_usage(); $a = []; for ($ ...
- QuantumTunnel:内网穿透服务设计
背景 最近工作中有公网访问内网服务的需求,便了解了内网穿透相关的知识.发现原理和实现都不复杂,遂产生了设计一个内网穿透的想法. 名字想好了,就叫QuantumTunnel,量子隧道,名字来源于量子纠缠 ...
- SimpleNVR流媒体服务系统录像功能解析
录像的回放与观看是许多人在使用视频监控时必不可少的需求.人不可能每时每刻都观看视频,而录像能对摄像机的视频信息进行存储,方便用户的后期回放查看,因此,SimpleNVR的录像功能应运而生. ...
- properties 文件解析
1.提供properties文件 jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql://localhost:3306/future?useUn ...