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

bslib包与shinydashboard包类似，提供了大量定制化的排版布局函数，方便快速搭建简洁的app。

1
2
3

library(shiny)  # v0.7.2
library(bslib)  # v0.6.2
library(htmltools)

1. 基本UI

1.1 Card面板

  • https://rstudio.github.io/bslib/articles/cards/index.html

  • 主要由card_header()）与card_body()两部分组成；

  • 一个card可以包括多个body；一个body内部可以由复杂的多个UI元素排版。

  • card内的元素默认是fillable（自适应填充），即根据其内容，自动调整其高度；可通过参数限制其最大最小高度（scroll滚动栏）

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

card(
  full_screen = TRUE,  #全屏展示按钮
  card_header(
    "This is the header"
  ),
  card_body(
    p("This is the body."),
    p("This is still the body.")
  ),
  card_footer(
    "This is the footer"
  )
)

1.2 Value box

1
2
3
4
5
6
7
8

value_box(
  title = "I got", 
  value = "99 problems", #关键词展示
  # value = textOutput("time"),
  showcase = bs_icon("music-note-beamed"), #图标
  p("bslib ain't one", bs_icon("emoji-smile")), #foot
  p("hit me", bs_icon("suit-spade"))
)

1.3 窗口弹出提示

1
2
3
4
5

actionButton(
  "btn_tip",
  "Focus/hover here for tooltip"
) |>
  tooltip("Tooltip message")
  • popover(): 点击触发弹出—适用于放置一些输入控件用以设置绘图参数等
1
2
3
4
5
6
7
8

actionButton(
  "btn_pop", 
  "Click here for popover"
) |>
  popover(
    "Popover message",
    title = "Popover title"
  )

2. 布局排版

2.1 侧边栏式面板

1
2
3
4

layout_sidebar(
  sidebar = sidebar("Sidebar"),
  "Main contents"
)

2.2 column列式面板

1
2
3
4
5
6
7
8

x <- card("A simple card")

layout_columns(x, x, x, x)

layout_columns(
  col_widths = c(6, 6, 12),
  x, x, x
)
  • layout_column_wrap()：每个card等宽，等高布局
1
2
3
4
5
6
7

layout_column_wrap(
  width = "200px",  #每个card的宽度均为200px
  # width = 1/2,    #每行设置两个card
  height = 300,
  fixed_width = TRUE,
  card1, card2, card3
)

2.3 navset多面板组合

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

navset_tab()
navset_pill()
navset_underline()
navset_pill_list()
navset_hidden()
navset_bar()

# card样式
navset_card_tab()
navset_card_pill()
navset_card_underline()

## 简单示例
navset_tab(
  nav_panel(title = "One", p("First tab content.")),
  nav_panel(title = "Two", p("Second tab content.")),
  nav_panel(title = "Three", p("Third tab content")),
  nav_spacer(), # 标题栏面板之间的空间
  nav_menu(
    title = "Links",
    nav_item(link_shiny),
    nav_item(link_posit)
  )
)

2.4 accordion手风琴式

  • accordion()/accordion_panel() 将多个面板折叠式堆放
  • open以及multiple参数可设置初始的面板打开状态
1
2
3
4
5
6

accordion(
  accordion_panel("Section A", "Some narrative for section A"),
  accordion_panel("Section B", "Some narrative for section B"),
  accordion_panel("Section C", "Some narrative for section C"),
  open = "Section B"
)

2.5 Page-level排版

1
2
3
4
5
6
7
8

# 侧边栏式页面
page_sidebar()   

# 多面板组合式页面
page_navbar()

# 自适应式页面（特征之一：没有scroll滚动条）
page_fillable()

主题设置：bs_theme()