Shiny Basic系列:

参考教程：https://mastering-shiny.org/

（1）IO控件

（2）Layout布局

（3）Reactive用法

（4）Feedback提醒

（5）Module模块

Shiny Package系列:

（1）shinyWidgets

（2）shinyJS

（3）shinydashboard

（4）shinydashboardPlus

（5）bslib

（6）Other pkgs

shinydashboardPlus为shinydashboard包的升级版本，同时兼容shinydashboard的用法

1
2

library(shiny)   # v1.7.4
library(shinydashboardPlus) # v2.0.3

1. skeleton更新

1.1 Controlbar

  • https://shinydashboardplus.rinterface.com/articles/controlbar
  • 通过dashboardPage()的controlbar参数设置右边侧边栏
  • 具体是在dashboardControlbar()内设置UI控件，可进一步通过controlbarMenu()/controlbarItem()设置多个Tab的内容，建议最多设置5个
  • 可通过updateControlbar以及updateControlbarMenu动态更新显示状态
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

menu <- controlbarMenu(
  id = "controlbarMenu",
  controlbarItem(
    "Tab 1",
    "Welcome to tab 1"
  ),
  controlbarItem(
    "Tab 2",
    numericInput("num", "Observations:", 200, min = 1, max = 1000, step = 100)
  )
)

ui = dashboardPage(
    ..., 
    controlbar = dashboardControlbar(
    	menu,
        ...
    )
)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

ui = dashboardPage(
  header = dashboardHeader(),
  sidebar = dashboardSidebar(),
  body = dashboardBody(),
  footer = dashboardFooter(left = "Left content", right = "Right content"),
  title = "DashboardPage"
)
server = function(input, output) { }

shinyApp(ui, server)

1.3 Header

  • https://shinydashboardplus.rinterface.com/articles/enhanced-header
  • 在shinydashboard包中可使用dropdownMenu在dashboardHeader设置不同类型的文本提醒下拉菜单（默认右侧）
  • 而shinydashboardplus支持在dashboardHeader（leftUI参数）的左侧设置多种类型下拉菜单
    • 来自shinyWidgets的dropdownButton()，可嵌入UI控件
    • 来自shinydashboard的dropdownMenu()，可设置3类文本
    • 来自shinydashboardplus的dropdownBlock()，可嵌入UI控件
 1
 2
 3
 4
 5
 6
 7
 8
 9
10

ui = dashboardPage(
  ...,
  header = dashboardHeader(
    leftUi = tagList(
      dropdownButton(...),
      dropdownMenu(...),
      dropdownBlock(...),
    )
  )
)

2. box()更新

https://shinydashboardplus.rinterface.com/articles/improved-boxes

2.1 动作按钮

在设置box的id（例如为"mybox"）前提下，有4类动作按钮

  • toggle：折叠或展开box body；(input$mybox$collapsed)
  • remove：隐藏box；(input$mybox$visible为FALSE)
  • restore：恢复box； (input$mybox$visible为TRUE)
  • update：更新box内的content
1
2
3
4

# server.R
observeEvent(input$toggle_box, {
  updateBox("mybox", action = "toggle")
})

2.2 右上角装饰UI

（1）通过box()函数的参数在box右上角设置多种功能的ui元素：

  • label参数：通过函数boxLabel()设置，起到类似badge的作用；
  • dropdownMenu参数：通过函数boxDropdown()/boxDropdownItem()设置下拉列表；
  • collapsible参数：折叠box选项
  • closable参数：隐藏box选项
  • boxSidebar参数：通过函数boxSidebar()设置侧边栏

（2） descriptionBlock()函数可以在box内展示关键的数字/文本

2.3 定制化box

  • userBox()：展示个人信息，也可以通过updateBox()实现动态更新
1
2
3
4
5
6

userDescription(
  title = "Nadia Carmichael",
  subtitle = "lead Developer",
  type = 2,
  image = "https://adminlte.io/themes/AdminLTE/dist/img/user7-128x128.jpg",
)
  • flipBox()：具有正反面（front/back），可通过updateFlipBox()实现动态更新

3. 其它新增

3.1 accordion()布局

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

accordion(
  id = "accordion1",
  accordionItem(
    title = "Accordion 1 Item 1",
    status = "danger",
    collapsed = TRUE,
    "This is some text!"
  ),
  accordionItem(
    title = "Accordion 1 Item 2",
    status = "warning",
    collapsed = FALSE,
    "This is some text!"
  )
)

3.2 skin主题颜色

1
2
3
4

skin = c("blue", "blue-light", "black", "black-light", 
         "purple", "purple-light", "green", "green-light", 
         "red", "red-light", "yellow", "yellow-light", 
         "midnight")
  • 此外，也可以通过skinSelector()在右侧控制栏提供所有选择（midnight除外）
 1
 2
 3
 4
 5
 6
 7
 8
 9
10

ui = dashboardPage(
  header = dashboardHeader(),
  sidebar = dashboardSidebar(),
  body = dashboardBody(),
  controlbar = dashboardControlbar(collapsed = FALSE, skinSelector()),
  title = "Skin Selector"
)
server = function(input, output) { }

shinyApp(ui, server)

3.3 preloader界面

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

ui = dashboardPage(
  preloader = list(html = tagList(spin_1(), "Loading ..."), color = "#3c8dbc"),
  header = dashboardHeader(),
  body = dashboardBody(
    actionButton("reload", "Reload")
  ),
  sidebar = dashboardSidebar()
)
server = function(input, output, session) {
  observeEvent(input$reload, {
    session$reload()
  })
  
}

shinyApp(ui, server)

4. bs4Dash

Bootstrap 4 shinydashboard using AdminLTE3 兼容shinydashboard以及shinydashboardPlus的用法。

4.1 Skeleton优化

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

library(shiny)    # v0.7.2
library(bs4Dash)  # v2.3.3 

shinyApp(
  ui = dashboardPage(
    title = "Basic Dashboard",
    header = dashboardHeader(),
    sidebar = dashboardSidebar(),
    controlbar = dashboardControlbar(),
    footer = dashboardFooter(),
    body = dashboardBody()
  ),
  server = function(input, output) {}
)

  • dashboardPage()

    • scrollToTop参数：快速回到顶部按钮

  • dashboardSidebar()

    • minified参数：隐藏侧边栏时，仍保留图标
    • expandOnHover参数：鼠标触动时，自动展开侧边栏

  • dashboardHeader()

    • title参数可通过dashboardBrand设置多元的标题属性

  • dashboardControlbar()

    • pinned参数可使右侧边栏保持open状态

  • dashboardBody()

    • box()内可通过设置maximizable参数添加全屏展示按钮

4.2 Popover, tooltips浮窗

  • popover()，addPopover()/removePopover() 点击触发式浮窗

  • tooltip()，addTooltip()/removeTooltip 接触触发式浮窗

Tips: 上述两类浮窗需要在header栏右侧的help switch开启状态下才能生效

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

# 以tooltip为例，具体可查看每个函数的帮助文档
ui = dashboardPage(
  header = dashboardHeader(),
  sidebar = dashboardSidebar(),
  body = dashboardBody(
    tooltip(
      actionButton("goButton", "Hover to see the tooltip"),
      title = "My tooltip",
      placement = "top"
    )
  )
)
server = function(input, output, session) {}

shinyApp(ui, server)

图片滑动gallery展示效果可通过carousel()/carouselItem()设置，其在bs4Dash与shinydashboardPlus均支持