ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

R shinydashboard——3.外观

2020-06-05 12:57:42  阅读:264  来源: 互联网

标签:外观 title color tags shinydashboard font CSS 图标


目录

1.皮肤

shinydashboard有很多颜色主题和外观的设置。默认为蓝色,可指定黑丝、紫色、绿色、红色和黄色,如dashboardPage(skin = "black")

个人认为还是蓝色显得稳重一点。

2.注销面板

当使用Shiny Server Pro运行Shinydashboard应用程序并且登录了经过身份验证的用户时,在右上角将出现一个显示用户名和注销链接的面板。默认的Shiny Server Pro注销面板:
image.png
如果想改为添加具有动态UI(在服务器上生成)的用户面板,并隐藏默认的注销面板,如下所示:
image.png

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的标题字体更改为与其余部分相同的字体,如下图所示:
image.png
首先创建一个名为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将标题区域的背景色设置为与标题栏的其余部分相同:
image.png

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参数。
image.png

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")

image.png

来自Font-Awesome的图标:http://fontawesome.io/icons/
来自Glyphicons的图标: http://getbootstrap.com/components/#glyphicons

7.状态和颜色

Shinydashboard组件的状态参数status,是某些Bootstrap类的属性。如status="primary",status="success":
image.png
Shinydashboard组件的颜色参数color,如color="red",color="black":
image.png
更多状态和颜色通过?validStatuses?validColors查看。

Ref:
https://rstudio.github.io/shinydashboard/appearance.html

标签:外观,title,color,tags,shinydashboard,font,CSS,图标
来源: https://www.cnblogs.com/jessepeng/p/13049085.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有