1. 单页面

1.1 页面功能

fluidPage()，这么一个简洁的功能集合了shiny所需要的所有的HTML, CSS, 以及JavaScript脚本。

除此以外，shiny还提供了fixedPage()fillPage()用来固定页面显示尺寸。

下面是一个最简单的单页面模版。

fluidPage(
  titlePanel(
    # app title/description
  ),
  sidebarLayout(
    sidebarPanel(
      # inputs
    ),
    mainPanel(
      # outputs
    )
  )
)

来用中心极限理论来写一个实例。

library(shiny)
ui<- fluidPage(
    titlePanel("中心极限理论"),
    sidebarLayout(
        sidebarPanel(
            numericInput("m","样本量:",2,min=1,max=100)
        ),
        mainPanel(
            plotOutput("hist")
        )
    )
)

server<-function(input,output,session){
    output$hist<-renderPlot({
        means<-replicate(1e4,mean(runif(input$m)))
        hist(means,breaks=20)
    },res=96)
}
    
shinyApp(ui,server)

1.2 多行配置

看图说话，也不用解释。每一行的最大间距默认是12，自己设置数字来分配布局，比方说对半分的话就是6，6。

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

2.多页面

主要用到的function是 tabPanel()

实际上使用的时候，不大可能把所有信息都集中在一个页面里。需要用到多页面的网页。

2.1 Tabsets

最简单的分页方式就是用到tabsetPanel

ui <- fluidPage(
  tabsetPanel(
    tabPanel("Import data", 
      fileInput("file", "Data", buttonLabel = "Upload..."),
      textInput("delim", "Delimiter (leave blank to guess)", ""),
      numericInput("skip", "Rows to skip", 0, min = 0),
      numericInput("rows", "Rows to preview", 10, min = 1)
    ),
    tabPanel("Set parameters"),
    tabPanel("Visualise results")
  )
)

也可以用tabsetPanel 给分页命名。添加id 参数。这是id就变成了一个input

ui <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      textOutput("panel")
    ),
    mainPanel(
      tabsetPanel(
        id = "tabset",
        tabPanel("panel 1", "one"),
        tabPanel("panel 2", "two"),
        tabPanel("panel 3", "three")
      )
    )
  )
)
server <- function(input, output, session) {
  output$panel <- renderText({
    paste("Current panel: ", input$tabset)
  })
}

2.2 显示在侧面导航栏里Navlists and navbars

ui <- fluidPage(
  navlistPanel(
    id = "tabset",
    "Heading 1",
    tabPanel("panel 1", "Panel one contents"),
    "Heading 2",
    tabPanel("panel 2", "Panel two contents"),
    tabPanel("panel 3", "Panel three contents")
  )
)

还有一个办法，同样也是水平展示，但是可以显示dropdown的子菜单。

ui <- navbarPage(
  "Page title",   
  tabPanel("panel 1", "one"),
  tabPanel("panel 2", "two"),
  tabPanel("panel 3", "three"),
  navbarMenu("subpanels", 
    tabPanel("panel 4a", "four-a"),
    tabPanel("panel 4b", "four-b"),
    tabPanel("panel 4c", "four-c")
  )
)

3.Bootstrap

是css常用到的一个功能。大概可以理解成是用来私人定制外观。有兴趣的同学可以自己查阅相关资料。

4. 主题

4.1 页面主题

主题外观还是比较重要的，看上去是否高上大给人留下印象。

fluidPage(
  theme = bslib::bs_theme(...)
)

ui <- fluidPage(
  theme = bslib::bs_theme(bootswatch = "darkly"),
  sidebarLayout(
    sidebarPanel(
      textInput("txt", "Text input:", "text here"),
      sliderInput("slider", "Slider input:", 1, 100, 30)
    ),
    mainPanel(
      h1(paste0("Theme: darkly")),
      h2("Header 2"),
      p("Some text")
    )
  )
)

4.2 图形主题

图形主题和页面主题一样可以自定义。会用到thematic包。只需要在server里呼叫

thematic_shiny() 就好。

library(ggplot2)

ui <- fluidPage(
  theme = bslib::bs_theme(bootswatch = "darkly"),
  titlePanel("A themed plot"),
  plotOutput("plot"),
)

server <- function(input, output, session) {
  thematic::thematic_shiny()
  
  output$plot <- renderPlot({
    ggplot(mtcars, aes(wt, mpg)) +
      geom_point() +
      geom_smooth()
  }, res = 96)
}