shiny入门课【3.布局指引】

概览

shiny提供了几种基本的布局：

• 最简单的布局是左侧边栏右主页的布局。
• 使用栅栏自定义布局
• 使用 tabsetPanel()和navlistPanel()函数实现分段布局。
• 使用 navbarPage()函数实现头部导航布局。

侧边栏布局

示例如下：

代码语言：javascript复制

ui <- fluidPage(

  titlePanel("Hello Shiny!"),

  sidebarLayout(

    sidebarPanel(
      sliderInput("obs", "Number of observations:",  
                  min = 1, max = 1000, value = 500)
    ),

    mainPanel(
      plotOutput("distPlot")
    )
  )
)

网格布局

使用网格布局实现侧边栏效果：

代码语言：javascript复制

ui <- fluidPage(

  titlePanel("Hello Shiny!"),

  fluidRow(
  
    column(4,
      wellPanel(
        sliderInput("obs", "Number of observations:",  
                    min = 1, max = 1000, value = 500)
      )       
    ),

    column(8,
      plotOutput("distPlot")
    )
  )

标签页

标签页也可以通过position来指定展示位置。

代码语言：javascript复制

ui <- fluidPage(

  titlePanel("Tabsets"),

  sidebarLayout(
    
    sidebarPanel(
      # Inputs excluded for brevity
    ),
  
    mainPanel(
      tabsetPanel(
        tabPanel("Plot", plotOutput("plot")), 
        tabPanel("Summary", verbatimTextOutput("summary")), 
        tabPanel("Table", tableOutput("table"))
      )
    )
  )
)

Navlists

代码语言：javascript复制

ui <- fluidPage(
  
  titlePanel("Application Title"),
  
  navlistPanel(
    "Header A",
    tabPanel("Component 1"),
    tabPanel("Component 2"),
    "Header B",
    tabPanel("Component 3"),
    tabPanel("Component 4"),
    "-----",
    tabPanel("Component 5")
  )
)

导航栏

通过navbarPage()函数可以实现导航栏效果，每个页面都是单独的。

代码语言：javascript复制

ui <- navbarPage("My Application",
  tabPanel("Component 1"),
  tabPanel("Component 2"),
  tabPanel("Component 3")
)

二级导航

使用navbarMenu()函数实现下拉菜单。

代码语言：javascript复制

ui <- navbarPage("My Application",
  tabPanel("Component 1"),
  tabPanel("Component 2"),
  navbarMenu("More",
    tabPanel("Sub-Component A"),
    tabPanel("Sub-Component B"))
)

自定义样式

shiny支持自定义样式，将样式文件放在www目录即可。

代码语言：javascript复制

ui <- fluidPage(theme = "bootstrap.css",
                  
  titlePanel("My Application")
  
  # application UI              
)

position shiny 布局

0 人点赞