5.4 页面布局

5.4.1 页面函数

  1. fluidPage()

    用于创建流畅的页面布局。页面由行与列组成。行的存在是为了控制元素出现在同一行上，列的存在是为了定义元素在12单位宽的页面中占据多少宽度。

fluidRow()函数控制每一行的内容

  1. fixedPage()

    固定页面在典型显示器上的宽度限制为940像素，在较小和较大的显示器上分别为724像素或1170像素。

fixedRow()函数控制每一行的内容

  1. fillPage()

    尽可能地创建出填满浏览器窗口的页面

5.4.2 布局函数

布局函数就是控制一个页面中各个元素的布局

5.4.2.1 单页布局

下面就简单介绍经典布局——侧边栏布局sidebarLayout，常与标题栏titlePanel()搭配

library(shiny)

ui <- fluidPage(
  titlePanel("Central limit theorem"),
  sidebarLayout(
    sidebarPanel(
      numericInput("m", "Number of samples:", 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)

其基本布局为“标题栏+侧边栏+主面板”。

5.4.2.2 多页布局

  1. 标签卡式布局

    tabsetPanel()创建标签卡这个整体，tabPanel()创建子标签卡的内容

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

tabsetPanel()的参数id用于返回当前选中的子标签卡的名称

  1. 导航栏式布局

    第一个布局函数是navlistPanel，可以说是tabsetPanel()的侧边形式

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

注意Heaning 1与Heading 2类似侧边栏中的小标题

第二个布局函数是navbarPage()与navbarMenu()。前者控制导航栏置于顶部，后者生成一个下拉式菜单，里面包含了多个子标签卡

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

5.4.3 bslib风格布局

除此之外，官网Shiny Layouts中还展示了基于bslib包的布局函数，个人认为更加美观与便捷。

使用时记得导入library(bslib)

  1. Navbars

    导航栏式布局，导航栏被置于顶部或底部

  2. Sidebars

    经典侧边栏布局

  3. Tabs

    标签卡式布局

  4. Panels & Cards

    Panels不知道算什么风格，Cards就是在页面上呈现卡片式窗口

  5. Arrange Elements

    自定义布局