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.外观的更多相关文章

  1. R shinydashboard ——2. 结构

    目录 1.Shiny和HTML 2.结构 3. 标题Header 4. 侧边栏Siderbar 5.主体/正文Body box tabBox infoBox valueBox Layouts 1.Sh ...

  2. R shinydashboard ——1. 基本用法

    shiny和shinydashboard使用虽然简单,但控件众多,需及时总结归纳. install.packages("shinydashboard") shinydashboar ...

  3. [原]CentOS7安装Rancher2.1并部署kubernetes (二)---部署kubernetes

    ##################    Rancher v2.1.7  +    Kubernetes 1.13.4  ################ ##################### ...

  4. 利用python进行数据分析2_数据采集与操作

    txt_filename = './files/python_baidu.txt' # 打开文件 file_obj = open(txt_filename, 'r', encoding='utf-8' ...

  5. Django项目:CRM(客户关系管理系统)--81--71PerfectCRM实现CRM项目首页

    {#portal.html#} {## ————————46PerfectCRM实现登陆后页面才能访问————————#} {#{% extends 'king_admin/table_index.h ...

  6. Building [Security] Dashboards w/R & Shiny + shinydashboard(转)

    Jay & I cover dashboards in Chapter 10 of Data-Driven Security (the book) but have barely mentio ...

  7. shinydashboard包---为shiny提供BI框架

    1.安装 install.packages("shinydashboard") 2.基础知识 仪表盘有三个部分:标题.侧边栏,身体.下面是最最小的仪表面板页面的UI: ## ui. ...

  8. R语言包翻译——翻译

    Shiny-cheatsheet                                                                                     ...

  9. R语言包翻译

    Shiny-cheatsheet 作者:周彦通 1.安装 install.packages("shinydashboard")  2.基础知识 仪表盘有三个部分:标题.侧边栏,身体 ...

随机推荐

  1. 在kivy中加图片

    from kivy.app import App from kivy.uix.scatterlayout import ScatterLayout from kivy.uix.image import ...

  2. Noip模拟61 2021.9.25

    T1 交通 考场上想了一个$NPC$.应该吧,是要求出图里面的所有可行的不重复欧拉路 无数种做法都无法解出,时间也都耗在这个上面的,于是就考的挺惨的 以后要是觉得当前思路不可做,就试着换一换思路,千万 ...

  3. 重建二叉树 牛客网 剑指Offer

    重建二叉树 牛客网 剑指Offer 题目描述 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3, ...

  4. vue mvc与mvvm

    一.什么是MVVM? MVVM是Model-View-ViewModel的缩写.MVVM是一种设计思想.Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑:View 代表UI ...

  5. vue3.x版本路由router跳转+传参

    显示传参模式 get import { useRouter } from 'vue-router'; const router = useRouter(); let skipEdit = (key: ...

  6. 痞子衡嵌入式:聊聊i.MXRT1xxx上的普通GPIO与高速GPIO差异及其用法

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是i.MXRT上的普通GPIO与高速GPIO差异. GPIO 可以说是 MCU 上最简单最常用的外设模块了,当一些原生功能外设接口模块不能 ...

  7. ELK集群之filebeat(6)

    filebeat工作原理 ilebeat是本地文件的日志数据采集器. 作为服务器上的代理安装,Filebeat监视日志目录或特定日志文件,tail file,并将它们转发给Elasticsearch或 ...

  8. linux下go环境配置

    环境申明: centos 7.4 1.go下载最新的版本(linux) 下载本地后rz到服务器,然后tar -zxvf  go1.9.2.linux-amd64.tar.gz   解压出go文件放在 ...

  9. Effective C++ 总结笔记(六)

    七.模板与泛型编程 41.了解隐式接口和编译器多态 1.类和模板都支持接口和多态. 2.类的接口是显式定义的--函数签名.多态是通过虚函数在运行期体现的. 3.模板的接口是隐式的(由模板函数的实现代码 ...

  10. php 变量和数据类型

    $ 定义变量: 变量来源数学是计算机语言中能存储计算结果或能表示值抽象概念.变量可以通过变量名访问.在指令式语言中,变量通常是可变的. php 中不需要任何关键字定义变量(赋值,跟Java不同,Jav ...