R flexdashboard中如何在valueBox()上方添加自定义文本框

你可以通过调整CSS样式、扩展valueBox的HTML结构实现需求，完整可运行的修改后代码如下：

---
title: "My Design"
output:
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: fill

runtime: shiny
---

```{css}
.value-box {
  height: 140px; /* 增加高度容纳顶部文本 */
  padding-top: 30px; /* 预留顶部文本显示空间 */
  position: relative;
}
/* 自定义顶部文本的统一样式，可按需调整 */
.vb-top-text {
  position: absolute;
  top: 8px;
  left: 15px;
  font-size: 14px;
  color: #ffffff;
  font-weight: 500;
  background-color: rgba(255,255,255,0.2);
  padding: 2px 8px;
  border-radius: 4px;
  margin: 0;
}

library(shiny)
library(flexdashboard)

vb1 <- valueBox(value = tagList(
         tags$p("自定义文本1", class = "vb-top-text"),
         tags$p(paste(100, "%"), style = "font-size: 140%; margin:0;")
       ),
         caption = tags$p("My Value Box 1", 
                       style = "background-color:rgba(39, 128, 227, 0.0); 
                       border-color:rgba(39, 128, 227, 0.0); 
                       position: absolute; 
                       overflow: hidden; 
                       left: 5%; top: 1px; 
                       right: 0px; 
                       bottom: 0px; width:100%"),
    icon = "fa-thumbs-up",
    color = "success" )


vb2 <- valueBox(value = tagList(
         tags$p("自定义文本2", class = "vb-top-text"),
         tags$p(paste(50, "%"), style = "font-size: 140%; margin:0;")
       ),
         caption = tags$p("My Value Box 2", 
                       style = "background-color:rgba(39, 128, 227, 0.0); 
                       border-color:rgba(39, 128, 227, 0.0); 
                       position: absolute; 
                       overflow: hidden; 
                       left: 5%; top: 1px; 
                       right: 0px; 
                       bottom: 0px; width:100%"), 
         icon = "fa-hourglass-end", color = "danger")

vb3 <- valueBox(value = tagList(
         tags$p("自定义文本3", class = "vb-top-text"),
         tags$p(paste(80, "%"), style = "font-size: 140%; margin:0;")
       ),
         caption = tags$p("My Value Box 3", 
                       style = "background-color:rgba(39, 128, 227, 0.0); 
                       border-color:rgba(39, 128, 227, 0.0); 
                       position: absolute; 
                       overflow: hidden; 
                       left: 5%; top: 1px; 
                       right: 0px; 
                       bottom: 0px; width:100%"),
         icon = "fa-eur", color = "warning")

vb4 <- valueBox(value = tagList(
         tags$p("自定义文本4", class = "vb-top-text"),
         tags$p(paste(100, "%"), style = "font-size: 140%; margin:0;")
       ),
         caption = tags$p("My Value Box 4", 
                       style = "background-color:rgba(39, 128, 227, 0.0); 
                       border-color:rgba(39, 128, 227, 0.0); 
                       position: absolute; 
                       overflow: hidden; 
                       left: 5%; top: 1px; 
                       right: 0px; 
                       bottom: 0px; width:100%"),
         icon = "fa-clock", color = "success")

Row {.sidebar data-width=280 data-padding=10} #

tags$h4('My Side Bar')
tags$hr()

Row #

{.value-box} #

renderValueBox(vb1)

{.value-box} #

renderValueBox(vb2)

{.value-box} #

renderValueBox(vb3)

{.value-box} #

renderValueBox(vb4)

你可以按需修改`.vb-top-text`的CSS属性调整文本样式，也可以直接修改每个valueBox里的`自定义文本X`为你需要的内容。

内容的提问来源于stack exchange，提问作者LeMarque