美文网首页Rshiny
R-shiny UI界面基本设置

R-shiny UI界面基本设置

作者: Jason数据分析生信教室 | 来源:发表于2022-04-23 20:35 被阅读0次

    官方指南太简单了,没内容。下一期开始换个教材学。

    根据上篇文章里我们已经知道了shiny app的构造。本文会教会你如何构建UI,包括调整外观,添加文字,HTML要素。
    之前的文章里介绍过,Shiny主程序分为两个部分,UI部分(ui.R)和Server(server.R)部分。

    ui.R

    shinyUI(fluidPage(
    ))
    

    server.R

    shinyServer(function(input, output) {
    })
    

    这是构成一个shiny app的最短代码。当然没有任何内容,都是架空的。

    整体布局

    在ui.R里用fluidPage编辑可视化布局。

    # ui.R
    
    shinyUI(fluidPage(
      titlePanel("标题面板"),
      
      sidebarLayout(
        sidebarPanel( "边栏面板"),
        mainPanel("主面板")
      )
    ))
    

    也可以调整面板的位置。

    # ui.R
    
    shinyUI(fluidPage(
      titlePanel("标题面板"),
      
      sidebarLayout(position="right",
        sidebarPanel( "边栏面板"),
        mainPanel("主面板")
      )
    ))
    

    常用HTML对照表

    Shiny函数 HTML5 定义
    p <p> A paragraph of text
    h1 <h1> A first level header
    h2 <h2> A second level header
    h3 <h3> A third level header
    a <a> A hyper link
    br
    A line break (e.g. a blank line)
    div <div> A division of text with a uniform style
    span <span> An in-line division of text with a uniform style
    pre <pre> Text ‘as is’ in a fixed width font
    code <code> A formatted block of code
    img <img> An image
    strong <srtong> Bold text
    em <em> Italicized text
    HTML Directly passes a character string as HTML code

    用法举例

    library(shiny)
    
    # ui.R
    
    shinyUI(fluidPage(
      titlePanel("My Shiny App"),
      sidebarLayout(
        sidebarPanel(),
        mainPanel(
          h1("First level title"),
          h2("Second level title"),
          h3("Third level title"),
        )
      )
    ))
    

    再举个栗子

    shinyUI(fluidPage(
      titlePanel("My Shiny App"),
      sidebarLayout(
        sidebarPanel(),
        mainPanel(
          h6("Episode IV", align = "center"),
          h6("A NEW HOPE", align = "center"),
          h5("It is a period of civil war.", align = "center"),
          h4("Rebel spaceships, striking", align = "center"),
          h3("from a hidden base, have won", align = "center"),
          h2("their first victory against the", align = "center"),
          h1("evil Galactic Empire.")
        )
      )
    ))
    
    

    再来一个复杂点的

    # ui.R
    library(shiny)
    
    shinyUI(fluidPage(
      titlePanel("My Shiny App"),
      sidebarLayout(
        sidebarPanel(),
        mainPanel(
          p("p creates a paragraph of text. This paragraph is followed by br(), which makes a blank line."),
          p("When you want to start a new paragraph, just use a new p() command. If you supply a style attribute, you can change the format of the entire paragraph", style = "font-family: 'times'; font-size: 16pt"),
          strong("Strong() makes bold text."),
          em("And em() makes italicized (i.e, emphasized) text."),
          br(),
          code("code displays your text like computer code"),
          div("Use span and div to create segments of text that all have a similar style. For example, this division of text is all blue because I passed the argument 'style = color:blue' to div", style = "color:blue"),
          br(),
          p("span does the same thing, but it works with",
            span("groups of words", style = "color:blue"),
            "that appear inside a paragraph.")
        )
      )
    ))
    

    插入图片

    会用到<img>,并且可以指定宽度和长度
    这里需要添加一个名字为www的文件夹。把图片放里面。

    # ui.R
    library(shiny)
    
    # ui.R
    
    shinyUI(fluidPage(
      titlePanel("My Shiny App"),
      sidebarLayout(
        sidebarPanel(),
        mainPanel(
          img(src="jason.png", height = 200, width = 200)
        )
      )
    ))
    
    # ui.R
    library(shiny)
    
    # ui.R
    
    shinyUI(fluidPage(
      titlePanel("My Shiny App"),
      sidebarLayout(
        sidebarPanel(
          p("欢迎订阅Jason数据分析生信教室"),
          br(),
          img(src="jason.png", height = 50, width = 50)
        ),
        mainPanel(
          h2("第二课 UI界面设置", align = "center"),
          br()
        )
      )
    ))
    

    相关文章

      网友评论

        本文标题:R-shiny UI界面基本设置

        本文链接:https://www.haomeiwen.com/subject/xteqwltx.html