Let’s learn shiny together (2)——shiny page layout

What is shiny? Shiny is an R package that allows you to easily build interactive web applications (apps) directly from R. This series is a long tutorial, taking you to learn shiny from simple to deep.

In the previous section, we briefly introduced in the article "R Language Series Tutorial—Let's learn shiny together (1)", what is shiny and what is it used for, and this section introduces how to page shiny layout. Shiny's page layout is mainly through the fluidPage function, which is a fluid layout page just like its name. We first import the R package and set it up

library(shiny)

# Define UI ----界面部分，主要布局
ui <- fluidPage(
  
)

# Define server logic  服务器界面
server <- function(input, output) {
    
    
  
}
shinyApp(ui = ui, server = server)
如果不对fluidPage函数进行设置，将输出一个空白页面. fluidPage函数包含有titlePanel函数和 sidebarLayout函数这两个常用的部分。titlePanel函数用于设置标题，sidebarLayout布置侧边栏和主区域,创建一个带有侧边栏sidebarPanel()和主区域mainPanel()的布局sidebarAlayout()
ui <- fluidPage(
  titlePanel("title panel"),
  sidebarLayout(
    sidebarPanel("sidebar panel"),
    mainPanel("什么是shiny？Shiny是一个R包，可让您轻松地直接从 R 构建交互式 Web 应用程序（应用程序）。本系列是个长教程，带你由浅入深学习shiny。")
  )
)
shinyApp(ui = ui, server = server)

Other parts can also be modified

ui <- fluidPage(
  titlePanel("零基础说科研shiny教程"),
  
  sidebarLayout(position = "right",
                sidebarPanel("侧面板控件"),
                mainPanel("什么是shiny？Shiny是一个R包，可让您轻松地直接从 R 构建交互式 Web 应用程序（应用程序）。本系列是个长教程，带你由浅入深学习shiny。")
  )
)

shinyApp(ui = ui, server = server)

Modify the title format of h1, add the title part to be enclosed in brackets, and modify the position of the position

ui <- fluidPage(
  titlePanel(h1("零基础说科研shiny教程")),
  
  sidebarLayout(position = "right",
                sidebarPanel("侧面板控件"),
                mainPanel(h3("什么是shiny？Shiny是一个R包，可让您轻松地直接从 R 构建交互式 Web 应用程序（应用程序）。本系列是个长教程，带你由浅入深学习shiny。"))
  )
)

shinyApp(ui = ui, server = server)

The HTML syntax of the title page can be seen in the figure below

Use align = "center" to center the text

ui <- fluidPage(
  titlePanel(h1("零基础说科研shiny教程")),
  
  sidebarLayout(position = "right",
                sidebarPanel("侧面板控件"),
                mainPanel(h3("什么是shiny？Shiny是一个R包，可让您轻松地直接从 R 构建交互式 Web 应用程序（应用程序）。
                             本系列是个长教程，带你由浅入深学习shiny。", align = "center"))
  )
)

shinyApp(ui = ui, server = server)

The following shows the application characteristics of various grammars, br() is a newline, resulting in a space

ui <- fluidPage(
  titlePanel(h1("零基础说科研shiny教程")),
  
  sidebarLayout(position = "right",
                sidebarPanel("侧面板控件"),
                mainPanel(
                  p("p创建一段文本。"),
                  p("一个新的p()命令开始一个新的段落。提供一个样式属性来改变整个段落的格式.", style = "font-family: 'times'; font-si16pt"),
                  strong("strong()创建粗体文本。br用于换行"),
                  br(),
                  em("em()创建斜体（即强调）文本。"),
                  br(),
                  code("code 显示你的文本类似于计算机代码"),
                  div("div 创建具有类似风格的文本段。这个分割的文本都是蓝色的,因为style中进行颜色设置", style = "color:blue"),
                  br(),
                  p("span的作用与div相同，但它适用于个别单词,例如",
                    span("零基础说科研shiny教程", style = "color:blue"), 
                    "出现在一个段落中.")
                )
  )
)

shinyApp(ui = ui, server = server)

Images can enhance the appearance of an application and help users understand the content. Shiny looks for the img function to place image files in your application. To import pictures in Shiny, you need to add a www folder under your program location, and then put the pictures into the folder. For example, my example program is called "Section 2.R". We need to create a www folder in the same directory.

Put the picture in the folder, and then search it according to the name.

When you need to use it, you can directly use the img function to insert the picture

ui <- fluidPage(
  titlePanel(h1("零基础说科研shiny教程")),
  
  sidebarLayout(position = "right",
                sidebarPanel("侧面板控件"),
                mainPanel(
                  img(src = "shiny.png", height = 140, width = 400),
                  h3("什么是shiny？Shiny是一个R包，可让您轻松地直接从 R 构建交互式 Web 应用程序（应用程序）。
                             本系列是个长教程，带你由浅入深学习shiny。", align = "center"))
  )
)

shinyApp(ui = ui, server = server)

Images can also be inserted on the side control panel

ui <- fluidPage(
  titlePanel(h1("零基础说科研shiny教程")),
  
  sidebarLayout(position = "right",
                sidebarPanel(
                  h3("shiny教程第二节"),
                  p("公众号：零基础说科研将持续更新shiny教程"),
                  br(),
                  br(),
                  img(src = "ljc.png", height = 200, width = 200),
                  ),
                mainPanel(
                  img(src = "shiny.png", height = 140, width = 400),
                  h3("什么是shiny？Shiny是一个R包，可让您轻松地直接从 R 构建交互式 Web 应用程序（应用程序）。
                             本系列是个长教程，带你由浅入深学习shiny。", align = "center"))
  )
)

shinyApp(ui = ui, server = server)