无法在 r flexdashboard 中的 valueBox() 顶部添加文本框

Question

有时很难弄清楚如何将 flexdashboard 用于最大目的。由于资料不多，所以有时会向别人求助。

我有一个 flexdashboard 设计，如下面的代码所示：

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

runtime: shiny
---

```{css}
.value-box {
  height: 110px;
}

```


```{r global, echo = FALSE}
library(shiny)
library(flexdashboard)

vb1 <- valueBox(value = tags$p(paste(100, "%"), style = "font-size: 140%;"),
         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 = tags$p(paste(50, "%"), style = "font-size: 140%;"),
         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 = tags$p(paste(80, "%"), style = "font-size: 140%;"),
         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 = tags$p(paste(100, "%"), style = "font-size: 140%;"),
         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")

```


My Dashboard {data-icon="fa-search"}
=======================================================================

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

```{r}

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

```


Row 
-----------------------------------------------------------------------

### {.value-box}

```{r}

renderValueBox(vb1)

```


###  {.value-box}

```{r}

renderValueBox(vb2)

```


###  {.value-box}

```{r}

renderValueBox(vb3)

```

###  {.value-box}

```{r}

renderValueBox(vb4)

```

我想在值框上添加文本框（如下图黑色部分）。

如何做到？

Answer 1

这是你想要的吗？

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

runtime: shiny
---

```{css}
.value-box {
  height: 110px;
}

```


```{r global, echo = FALSE}
library(shiny)
library(flexdashboard)
top_text_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%"
bottom_text_style <- 
"position: absolute;
bottom: 0;
left: 5px;
font-weight: 600;"

vb1 <- valueBox(
    value = tags$p(paste(100, "%"), style = "font-size: 140%;"),
     caption = div(
         tags$p("My Value Box 1", style = top_text_style), 
         tags$h4("some text1", style = bottom_text_style)
      ),
     icon = "fa-thumbs-up", color = "success" 
)


vb2 <- valueBox(
    value = tags$p(paste(100, "%"), style = "font-size: 140%;"),
     caption = div(
         tags$p("My Value Box 2", style = top_text_style), 
         tags$h4("some text2", style = bottom_text_style)
      ),
     icon = "fa-hourglass-end", color = "danger"
)

vb3 <- valueBox(
    value = tags$p(paste(100, "%"), style = "font-size: 140%;"),
     caption = div(
         tags$p("My Value Box 3", style = top_text_style), 
         tags$h4("some text3", style = bottom_text_style)
      ),
     icon = "fa-eur", color = "warning"
)

vb4 <- valueBox(
    value = tags$p(paste(100, "%"), style = "font-size: 140%;"),
     caption = div(
         tags$p("My Value Box 4", style = top_text_style), 
         tags$h4("some text4", style = bottom_text_style)
      ),
    icon = "fa-clock", color = "success"
)

```


My Dashboard {data-icon="fa-search"}
=======================================================================

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

```{r}

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

```


Row 
-----------------------------------------------------------------------

### {.value-box}

```{r}

renderValueBox(vb1)

```


###  {.value-box}

```{r}

renderValueBox(vb2)

```


###  {.value-box}

```{r}

renderValueBox(vb3)

```

###  {.value-box}

```{r}

renderValueBox(vb4)

```

无法在 r flexdashboard 中的 valueBox() 顶部添加文本框

not able to add text boxes on top of valueBox() in r flexdashboard

r

shiny

flexdashboard