美文网首页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界面基本设置

    官方指南太简单了,没内容。下一期开始换个教材学。 根据上篇文章里我们已经知道了shiny app的构造。本文会教会...

  • Android设置界面之Preference

    Android设置界面之Preference Android系统为设置界面的UI提供了一系列的接口,设置界面的部分...

  • QT界面ui设置

    去掉右下角三角形

  • 简单——拨打电话项目

    1.设置UI界面 2.根据UI写业务逻辑在mainActivity里面在OnCreate方法里面写 3.给按钮设置...

  • 2018-03-19

    UI即User Interface(用户界面)的简称。泛指用户的操作界面。View 是 iOS 里最基本的 UI ...

  • iOS页面的布局方式

    iOS有三种基本的界面布局的方法,分别是手写UI,xib和storyboard。手写UI是最早进行UI界面布局的方...

  • Photoshop 基本界面设置

    模板预设设置 选择图层设置 注意 command(ctrl) + 鼠标左键 点击psd图层可以在右侧的图层列表里定...

  • 设置UI界面用swifet

    用Swift写一个登录界面首先在AppDelegate初始化: viewcontroller里写:var img ...

  • BLENDER笔记

    01. 界面及基本操作 中文界面设置:"File" -> "User Preference"->“System",...

  • 2021-06-17 现项目组框架理解用法

    基本的UI 方面的流程 UI Owner 是 UI逻辑脚本的基类 创建 UI 界面的编写 都是在是Start.L...

网友评论

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

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