R包bs4Dash控件效果对照图

2023-05-16

记录一下bs4Dash各个控件的效果,方便查找和对照。
案例均来自于官方文档。

accordion

accordion(
  id = "accordion1",
  accordionItem(
    title = "Accordion 1 Item 1",
    status = "danger",
    collapsed = F,
    "This is some text!"
  )
)

在这里插入图片描述

popover

popover(
  actionButton("goButton", "Click me to see the popover!"),
  title = "My popover",
  placement = "right",
  content = "Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
)

在这里插入图片描述

tooltip

tooltip(
          actionButton("goButton", "Hover to see the tooltip"),
          title = "My tooltip",
          placement = "top"
        )

在这里插入图片描述

appButton

appButton(
        inputId = "myAppButton",
        label = "Users", 
        icon = icon("users"), 
        color = "orange",
        dashboardBadge(textOutput("btnVal"), color = "primary")
      )

在这里插入图片描述

attachmentBlock

attachmentBlock(
       image = "https://adminlte.io/themes/v3/dist/img/user1-128x128.jpg",
       title = "Test",
       href = "https://google.com",
       "This is the content"
      )

在这里插入图片描述

blockQuote

fluidRow(
      blockQuote("Blablabla", color = "indigo"),
      blockQuote("Blablabla", color = "danger"),
      blockQuote("Blablabla", color = "teal"),
      blockQuote("Blablabla", color = "orange"),
      blockQuote("Blablabla", color = "warning"),
      blockQuote("Blablabla", color = "fuchsia")
     )

在这里插入图片描述

boxComment

boxComment(
              image = "https://adminlte.io/themes/AdminLTE/dist/img/user3-128x128.jpg",
              title = paste("Comment", i),
              date = "01.05.2018",
              paste0("The ", i, "-th comment")
            )

在这里插入图片描述

boxPad

boxPad(
            color = "purple",
            descriptionBlock(
              header = "8390", 
              text = "VISITS", 
              rightBorder = FALSE,
              marginBottom = TRUE
            )
          )

在这里插入图片描述

boxProfile

boxProfile(
                image = "https://adminlte.io/themes/AdminLTE/dist/img/user4-128x128.jpg",
                title = "Nina Mcintire",
                subtitle = "Software Engineer",
                bordered = TRUE,
                boxProfileItem(
                  title = "Followers",
                  description = 1322
                ),
                boxProfileItem(
                  title = "Following",
                  description = 543
                ),
                boxProfileItem(
                  title = "Friends",
                  description = 13287
                )
              )

在这里插入图片描述

boxSidebar

box(
          title = "Update box sidebar",
          closable = TRUE,
          width = 12,
          height = "500px",
          solidHeader = FALSE,
          collapsible = TRUE,
          actionButton("update", "Toggle card sidebar"),
          sidebar = boxSidebar(
            id = "mycardsidebar",
            p("Sidebar Content")
          )
        )

在这里插入图片描述

dashboardBadge

dashboardBadge("Badge 1", color = "danger"),
     actionButton(
      inputId = "badge", 
      label = "Hello", 
      icon = NULL, 
      width = NULL, 
      dashboardBadge(1, color = "primary")
     )

在这里插入图片描述

callout

callout(
        title = "I am a danger callout!",
        elevation = 4,
        status = "danger",
        "There is a problem that we need to fix. 
        A wonderful serenity has taken possession of 
        my entire soul, like these sweet mornings of 
        spring which I enjoy with my whole heart."
       )

在这里插入图片描述

carousel

carousel(
          id = "mycarousel",
          carouselItem(
            caption = "Item 1",
            tags$img(src = "https://pic2.zhimg.com/v2-5141def5f12716555c28270a8d2fa567_b.jpg")
          ),
          carouselItem(
            caption = "Item 2",
            tags$img(src = "https://p.qqan.com/up/2020-11/16061230758938414.jpg")
          )
        )

infoBox

fluidRow(
              infoBox(
                title = "Messages",
                value = 1410,
                icon = icon("envelope"),
                color = "orange",
                fill = TRUE,
              ),
              infoBox(
                title = "Bookmarks",
                color = "info",
                value = 240,
                icon = icon("bookmark"),
                tabName = "tab2"
              )
            )

在这里插入图片描述

jumbotron

jumbotron(
          title = "Hello, world!",
          lead = "This is a simple hero unit, a simple jumbotron-style 
      component for calling extra attention to featured 
      content or information.",
          "It uses utility classes for typography and spacing 
      to space content out within the larger container.",
          status = "info",
          href = "https://www.google.com"
        )

在这里插入图片描述

listGroup

listGroup(
            type = "action",
            listGroupItem(
              "Cras justo odio",
              active = TRUE, 
              disabled = FALSE, 
              href = "https://www.google.com"
            ),
            listGroupItem(
              active = FALSE, 
              disabled = FALSE, 
              "Dapibus ac facilisis in",
              href = "https://www.google.com"
            ),
            listGroupItem(
              "Morbi leo risus",
              active = FALSE, 
              disabled = TRUE, 
              href = "https://www.google.com"
            )
          )

在这里插入图片描述

loading

box(
          title = "loading spinner",
          loadingState()
        )

在这里插入图片描述

progressBar

box(
          title = "Horizontal",
          progressBar(
            value = 10,
            striped = TRUE,
            animated = TRUE
          ),
          progressBar(
            value = 50,
            status = "warning",
            size = "xs"
          ),
          progressBar(
            value = 20,
            status = "danger",
            size = "sm"
          ),
          multiProgressBar(
            value = c(50, 20),
            status = c("warning", "danger"),
            size = "sm"
          )
        )

在这里插入图片描述

bs4Ribbon

box(
       width = 4,
       title = "Blue ribbon",
       bs4Ribbon(
        text = "New",
        color = "primary"
       )
      

在这里插入图片描述

socialBox

socialBox(
          title = userBlock(
            image = "https://adminlte.io/themes/AdminLTE/dist/img/user4-128x128.jpg",
            title = "Social Box",
            subtitle = "example-01.05.2018"
          ),
          "Some text here!",
          attachmentBlock(
            image = "https://adminlte.io/themes/v3/dist/img/user1-128x128.jpg",
            title = "Test",
            href = "https://google.com",
            "This is the content"
          )

在这里插入图片描述

starBlock

box(
      title = "Star example",
      starBlock(5),
      starBlock(5, color = "fuchsia"),
      starBlock(1, color = "danger"),
      starBlock(3, color = "secondary")
     )

在这里插入图片描述

tabBox

tabBox(
  id = "tabcard",
  title = "A card with tabs",
  selected = "Tab 2",
  status = "primary",
  solidHeader = F,
  type = "tabs",
  tabPanel(
    title = "Tab 1",
    "Content 1"
  ),
  tabPanel(
    title = "Tab 2",
    "Content 2"
  )
)

在这里插入图片描述

timelineBlock

box(
          title = "Timeline",
          timelineBlock(
            width = 12,
            reversed = TRUE,
            timelineEnd(color = "danger"),
            timelineLabel("10 Feb. 2014", color = "pink"),
            timelineItem(
              elevation = 4, 
              title = "Item 1",
              icon = icon("gears"),
              color = "olive",
              time = "now",
              footer = "Here is the footer",
              "This is the body"
            ),
            timelineItem(
              title = "Item 2",
              border = FALSE
            )

在这里插入图片描述

userBox

userBox(
          title = userDescription(
            title = "Nadia Carmichael",
            subtitle = "lead Developer",
            type = 2,
            image = "https://adminlte.io/themes/AdminLTE/dist/img/user7-128x128.jpg",
          ),
          status = "primary",
          gradient = TRUE,
          background = "primary",
          boxToolSize = "xl",
          "Some text here!",
          footer = "The footer here!"
        )

在这里插入图片描述

dashboardUser

 dashboardUser(
          name = "Divad Nojnarg",
          image = "https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg",
          title = "shinydashboardPlus",
          subtitle = "Author",
          footer = p("The footer", class = "text-center"),
          fluidRow(
            dashboardUserItem(
              width = 6,
              "Item 1"
            ),
            dashboardUserItem(
              width = 6,
              "Item 2"
            )
          )
        )

在这里插入图片描述

bs4Valuebox

valueBox(
            value = 150,
            subtitle = "New orders",
            color = "primary",
            icon = icon("shopping-cart")
          )

在这里插入图片描述

productList

productList(
            productListItem(
              image = "https://www.pngmart.com/files/1/Haier-TV-PNG.png", 
              title = "Samsung TV", 
              subtitle = "$1800", 
              color = "warning",
              "This is an amazing TV, but I don't like TV!"
            )

在这里插入图片描述

ionicon

ionicon(name ="heart"),
ionicon(name ="beer")

在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

R包bs4Dash控件效果对照图 的相关文章

  • Ubuntu 中软件包缓存文件损坏问题

    终端输入 xff1a sudo apt get update 出现如下问题 解决方法 xff1a 输入 sudo rm rf var lib apt lists
  • linux开机自启系统服务的大致原理

    Linux启动系统服务 init启动 init读取 etc inittab文件 xff0c 获取运行等级 span class token comment The default runlevel 启动时的运行等级 span id 5 in
  • apache2 配置https

    配置Apache2 https 开启ssl模块 span class token function sudo span a2enmod ssl 启用ssl站点 span class token function sudo span a2en
  • JAVA对数字+字符串,中文一二三四等特殊格式字符串进行特殊排序

    提示 xff1a 对数字 43 字符串 中文一二三四 格式字符串去重 排序 重组 可以对customSort 类的46 53行进行修改 查看新排序效果 代码如下 xff08 示例 xff09 1 SortTest 类 xff1a span
  • Linux安装Jenkins

    手把手教你在Linux上安装jenkins xff0c 废话不多说 xff0c 直接上教程 1 xff0c 用windows到官网下载jenkins 2 346 1 1 noarch rpm xff0c 下载链接 xff1a https w
  • 舵机控制(STM32F103C8T6)

    前言 本文是以STM32F103C8T6作为主控芯片 xff0c 通过PB6端口输出PWM xff0c 实现控制180 舵机 一 舵机控制原理 xff08 一 xff09 概述 舵机是一种位置伺服驱动器器 xff0c 是一种带有输出轴的小装
  • 设计模式详解:建造者模式

    今天来看一下创建新模式中的第五种模式 xff1a 建造者模式 仍然是先看两张图 xff0c 复习模式类型 xff0c 加深记忆 定义 xff1a 建造者模式 xff1a 将一个复杂对象的构建与它的表示分离 xff0c 使得同样的构建过程可以
  • 动态数码管显示(STM32F103C8T)

    一 前言 本实验是通过使用STM32F103C8T6作为主控 xff0c 八段数码 xff08 共阴极 xff09 是通过74HC245双向缓冲器控制数段选 xff0c 74HC138译码器控制位选 每个数码管显示与位号相对应的数字 xff
  • 取字模软件的使用

    1 点击运行 取字模软件 EXE 2 输入文本 xff0c 完成后按Ctrl 43 Enter按键结束输入 xff0c 如下图 3 设置字体显示的大小16 16 xff0c 如下图 xff1a 4 设置字体格式 xff0c 字体大小 xff
  • 51单片机应用篇-- --数码管60秒计时,独立按键可调

    开篇先说一句废话 本旺名字叫萨摩耶 xff0c xff0c Please 叫我旺财 xff0c xff0c xff0c 哈哈 xff0c 招财进宝嘛 xff01 缘由 本来按照我的学习计划 xff0c 我现在应该是单片机的学习过程 xff0
  • SOLIDWORKS生成URDF文件后部分文件散乱分布

    问题 xff1a SOLIDWORKS生成URDF文件在正确配置关节坐标系的情况下 xff0c 依然出现了部分零件散乱分布的情况 xff0c 例如图所示 xff1a 问题原因 xff1a 同样的零件多次装配 解决办法 xff1a 要插入同一
  • Matlab笔记:Matlab function生成C代码并运行

    1 Matlab函数 xff0c 输入 x y z roll pitch yaw xff0c 输出out为8 6的数组 2 点击Matlab coder 3 选择要生成的函数 4 定义输入类型 xff0c 输入的六个数选择double数值
  • matlab接收ROS发布的话题通信数据并实时画图

    版本说明 matlab R2021b ROS noetic matlab与ROS通信连接 在matlab和ROS连接之前 xff0c 需要先运行ROS核心 xff0c 记录ROS端的IP地址 再查找并记录matlab端 xff08 我这里是
  • simulink联合STM32CubeMX开发串口通信程序

    摘要 使用SIMULINK联合STM32CubeMX生成STM32F407串口发送数据代码 xff0c 发送的数据为正弦函数波形 再用SIMULINK写一个串口接收数据模型 xff0c 接收来自STM32发送的数据 xff0c 最后绘制出波
  • element 默认主题样式

    使用方法 span class token keyword import span ElementUI span class token keyword from span span class token string 39 elemen
  • 深入RUST标准库内核(一)标准库内容概述

    本书github链接 inside rust std library 本书前面章节 xff1a 深入RUST标准库内核 xff08 序言 深入RUST标准库内核 引言概述本书目的目标读者本书约定 RUST标准库体系概述core库编译器内置i
  • 深入RUST标准库内核(序言)

    对RUST的兴趣来自于Linus认真考虑将RUST作为Linux内核开发语言的新闻报道 因此开始了对RUST探索 xff0c 不久后基本上就从心底里认同了这门语言 xff0c RUST不仅是高性能及安全的语言 xff0c 它的语法设计也会带

随机推荐

  • 手记:把代码上传到Gitee等远程仓库的过程记录及常见问题

    很久没用git了 xff0c 指令都有点生疏了 xff0c 今天上传了一些代码到码云上 xff0c 先把过程记录下来供使用git的朋友参考 没有用图形化界面 xff0c 因为只有熟悉指令才能真正的理解领会 步骤一 xff1a 1 安装git
  • I2C总线协议原理

    首先I2C总线一共分为2根 xff0c 一根是SCL xff08 serial clock xff09 xff0c 还有一根是SDA xff08 serial data xff09 xff0c 一根是用来同步时钟的 xff0c 一根是发送接
  • 常用默认端口+URL解析+HTTP详解

    常用默认端口 http端口80 https端口443 tomcat端口8080 URL详解 http www aspxfans com 8080 news index asp boardID 61 5 amp ID 61 24618 amp
  • Vue3.0 setup函数

    setup 1 Vue3 0中一个新的配置项 xff0c 值为一个函数 2 setup是所有Composition API 组合API 表演舞台 3 组件中所用到的 xff1a 数据 方法等等 xff0c 均要配置在setup中 4 set
  • 【青训营】Go的高质量编程

    Go的高质量编程 本文内容总结自字节跳动青年训练营 第五届 后端组 什么是高质量 xff1f 各种边界条件是否完备异常情况能正常处理 xff0c 稳定性有保障易读易维护 Go语言开发者Dave Cheney指出 xff0c 编程需要遵循以下
  • c++取一个整数a从右端开始的4~7位。(注意考虑多种情况)

    c 43 43 取一个整数a从右端开始的4 xff5e 7位 xff08 注意考虑多种情况 xff09 1 思路分析及原理 4 7位的范围是10 3 10 7 1 xff0c 我们可以利用这个来判断数字的长度 从右端截取一个整数的4 7位
  • 您备案的网站未指向阿里云国内节点(不含香港)服务器,备案号可能被取消接入

    解决方法 xff1a 将你的域名添加一个二级域名 xff0c 解析到某些阿里云国内节点服务器上就行了 例如我博客域名为 www hyzhad com xff0c 就可以添加一个或者两个 A 记录 xff0c 记录值为阿里云国内节点服务器的
  • centos相关软件下载地址

    CentOS7 6 下载地址 CentOS 7 x86 64 DVD 1810 iso CentOS 7 6 DVD 版 4G http mirrors 163 com centos 7 6 1810 isos x86 64 CentOS
  • C++笔记(《C++新经典》)

    C 43 43 新经典 第1章 C C 43 43 1 1 C和C 43 43 语言的起源 特点 关系与讲解范畴1 2 C C 43 43 语言市场需求与就业需求分析1 3 再谈C C 43 43 就业1 4 搭建开发语言环境 第2章 数据
  • FileZilla连接ubuntu

    我新搭建了一个ubuntu 1 查看ssh的状态 xff1a sudo service sshd status 如果出现 xff1a ssh span class token punctuation span service span cl
  • office2016 excel复制粘贴就卡死

    原因 可能和这个帐户的缓存有关系 xff0c 或第三方软件有关系 xff0c 1 xff1a 重新安装office无效 2 xff1a 按照微软 xff0c 点文件 选项 com加载项 把里面复选框都去掉 xff0c 均无效 网上好多类似文
  • 路虽远,行则将至;事虽难,做则必成。

    新年第一天 xff0c 以奋斗为起点
  • Microsoft Visual C++ 14.0 or greater is required. Get it with “Microsoft C++ Build Tools“的解决办法

    在Windows系统上使用pip安装一些软件时 xff0c 会出现下面这样的问题 error Microsoft Visual C 43 43 14 0 or greater is required Get it with Microsof
  • tp5 A non-numeric value encountered解决方法

    报错信息如下 解决方法 xff1a 在对应的控制器方法加入下面这行代码即可 ini set 34 error reporting 34 34 E ALL amp E NOTICE 34
  • 自学Python day05-for循环

    语法 for 临时变量 in 序列名 xff1a xxxx 序列的意思是 xff0c 一个数据是由多个数据组成的 xff0c 例如列表 xff1a 1 2 xff0c 3 xff0c 3 xff0c 4 5 xff0c 6 7 xff0c
  • 并查集--解析关押罪犯问题(二)

    在网上看到一道ACM竞赛题 xff0c 很巧妙的运用了并查集解决了一个现实生活的问题 xff0c 然而网上的解析太少 xff0c 在这里贴出来我的思考 xff1a 题目 xff1a S 城现有两座监狱 xff0c 一共关押着N 名罪犯 xf
  • 如何在Windows下安装ubuntu子系统

    TOCM 如何在Windows下安装ubuntu子系统 1 windows设置 首先打开控制面板 xff0c Windows设置 xff0c 勾选Windows下的linux系统 外链图片转存失败 源站可能有防盗链机制 建议将图片保存下来直
  • R语言批量生成CaseWhen的解决方案

    近期写R代码 xff0c 经常用dplyr case when结合stringr str detect进行条件判断 痛点 xff1a 判断条件可能会改或增删 xff0c 全写在case when里 xff0c 代码冗余且不利于复制和维护 x
  • R新管道操作符 |> 使用体验

    R users应该对magrittr的 gt 管道符都不陌生 然后R官方估计看如此普及不能再装看不见了 xff0c 于是4 1版本官方也出了个管道操作符 gt xff0c 简直就是baseR党的福音啊 虽然我不是忠实的baseR党 xff0
  • R包bs4Dash控件效果对照图

    记录一下bs4Dash各个控件的效果 xff0c 方便查找和对照 案例均来自于官方文档 accordion accordion span class token punctuation span id span class token op