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

1. 基本页面

1
2
3
4

fluidPage() # 最基本，最常用

fixedPage()  # fixed maximum width
fillPage()   # fill the full page
  • 经典布局
1
2
3
4
5
6
7

fluidPage(
  titlePanel(), #标题栏
  sidebarLayout(
    sidebarPanel(), #侧边栏
    mainPanel()     #主要界面
  )
)
  • 行列堆叠
 1
 2
 3
 4
 5
 6
 7
 8
 9
10

fluidPage(
  fluidRow(
    column(4,  ...),
    column(8,  ...)
  ),
  fluidRow(
    column(6,  ...),
    column(6,  ...)
  ),
)

2. Panel布局

  • tabsetPanel: 横向拼接多个Panel（active仅显示一个）
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

fluidPage(
  tabsetPanel(
    id = "tabset"  #  current panel
    tabPanel("panel 1", ...), #第一个参数为title（id）
    tabPanel("panel 2", ...),
    tabPanel("panel 3", ...)
  )
)

# input$id表示当前显示的panel名
# 可设置type="hidden"参数，并配合server的updateTabsetPanel()参数灵活控制active panel
ui <- fluidPage(
  radioButtons("controller", "Controller", 1:3, 1)
  
  tabsetPanel(
    id = "hidden_tabs",
    type = "hidden",
    tabPanel("panel1", "Panel 1 content"),
    tabPanel("panel2", "Panel 2 content"),
    tabPanel("panel3", "Panel 3 content")
  )
)

server <- function(input, output, session) {
  observeEvent(input$controller, {
    updateTabsetPanel(session, "hidden_tabs", selected = paste0("panel", input$controller))
  })
}
  • navlistPanel()：左侧纵向拼接多个Panel（active仅显示一个）
 1
 2
 3
 4
 5
 6
 7
 8
 9
10

fluidPage(
  navlistPanel(
    id = "tabset", # current panel
    "Heading 1", # section name
    tabPanel("panel 1", ...),
    "Heading 2",
    tabPanel("panel 2", ...),
    tabPanel("panel 3", ...)
  )
)
  • navbarPage()：横向拼接多个Panel，每个Panel可以由多个二级Panel组成
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

fluidPage(
  navbarPage(
    "Page title",   
    tabPanel("panel 1", ...),
    tabPanel("panel 2", ...),
    navbarMenu("subpanels", 
               tabPanel("panel 3a", ...), #二级panel
               tabPanel("panel 3b", ...),
    )
  )
)
  • wellPanel()
1

wellPanel(style = "background: grey")
  • conditionalPanel()
1
2
3
4

conditionalPanel(
    condition = "input.Btn_id % 2 == 1",
    ...ui...
)

3. HTML tag

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

tags$p(...)       -> p(...)  #段落文本
tags$span(...)    -> span(...) # 对文本中的一部分进行样式设置
tags$strong(...)  -> strong(...) #加粗
tags$em(...)      -> em(...) #斜体

tags$h1(...)      -> h1(..., align="center") 
tags$h2(...)      -> h2(...)
tags$h3(...)      -> h3(...)
tags$h4(...)      -> h4(...)
tags$h5(...)      -> h5(...)
tags$h6(...)      -> h6(...)

tags$a(...)       -> a(..., href = "http://baidu.com")
tags$img(...)     -> img(src="p1.png", height=, width=) #www文件夹内
tags$div(...)     -> div(...) # 各种html元素
tags$code(...)    -> code(...)

tags$br(...)      -> br(...) #换行
tags$hr(...)      -> hr(...) #水平线

1
2
3
4
5
6
7

tagList()

tags$head()
tags$link()

style = "font-size: 20px; color:grey; background: #f7f7f7;
		 border-top: 1px dashed #000; margin-top: 5px; margin-bottom: 5px;"