r - valuebox 在行中，但 renderValueBox 在列中

Question

我正在尝试连续制作 2 个值框。如果我使用 valueBox() 它可以工作，但一旦它是 renderValueBox()，它就会将它们堆叠在一起。

删除 ### returns 文本但不删除颜色或我可能添加的任何图标

如果它不是反应性的，它会更近但间隔不均匀

box_left <- valueBox(value = "left")
box_right<- valueBox(value = "right")
fillRow(box_left, box_right)

---
title: "Untitled"
runtime: shiny
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---

```{r setup, include=FALSE}
library(flexdashboard)
```

Sidebar {.sidebar}
--------------------

```{r}
textInput("left", "1st text", "left")
textInput("right","2nd text", "right")
```


Column
--------------------

###

```{r, fig.height=3}
output$box_left <- renderValueBox( valueBox(value = input$left) )
output$box_right <- renderValueBox( valueBox(value = input$right) )

# all of these produce the same results
fillRow(
  valueBoxOutput("box_left"), 
  valueBoxOutput("box_right")
)
# splitLayout(box_left, box_right)

# fillRow(box_left, box_right)

# fluidRow(
#   column(6, box_left),
#   column(6, box_right)
# )
```

###

```{r, fig.height=4}
mtcars
```

Column
--------------------

### 

```{r}

```

### 

```{r}

```

Answer 1

让我们应用一些简单的 CSS 样式来解决问题

---
title: "Untitled"
runtime: shiny
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---

```{r setup, include=FALSE}
library(flexdashboard)
```

Sidebar {.sidebar}
--------------------

```{r}
textInput("left", "1st text", "left")
textInput("right","2nd text", "right")
```


Column
--------------------
```{r}
tags$style(
  "
  .section.level3.value-box.bg-primary p.value{
    display: flex;
    justify-content: space-around;
  }
  "
)
```

###

```{r, fig.height=3}
output$box_left <- renderValueBox(valueBox(value = input$left) )
output$box_right <- renderValueBox( valueBox(value = input$right) )

# all of these produce the same results
fillRow(
  valueBoxOutput("box_left"), 
  valueBoxOutput("box_right")
)
# splitLayout(box_left, box_right)

# fillRow(box_left, box_right)

# fluidRow(
#   column(6, box_left),
#   column(6, box_right)
# )
```

###

```{r, fig.height=4}
mtcars
```

Column
--------------------

### 

```{r}

```

### 

```{r}

```

添加图标和标题

如果你添加图标和标题，只有一个会很奇怪地出现。对我来说，这是包中的错误。如果您检查元素，flexdash 在 R 代码级别以某种方式将它们合并到 1 个值框，而不是 HTML 或 CSS.

的错误

为了克服这个问题，我们将它们分成 2 行，然后通过 CSS 技巧将 2 行合并为 1 列：

---
title: "Untitled"
runtime: shiny
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---

```{r setup, include=FALSE}
library(flexdashboard)
```

Sidebar {.sidebar}
--------------------

```{r}
textInput("left", "1st text", "left")
textInput("right","2nd text", "right")
```


Column
--------------------

```{css}
.my-boxes {display: flex}
.section.level3.value-box.bg-primary {width: 50%}
```


<div class="my-boxes">
###



```{r, fig.height=3}
output$box_left <- renderValueBox(valueBox(value = input$left,icon = "fa-arrow-circle-o-left", caption = "left side") )
output$box_right <- renderValueBox( valueBox(value = input$right,icon = "fa-arrow-circle-o-left", caption = "right side") )


div(valueBoxOutput("box_left"))
```

###

```{r}
div(valueBoxOutput("box_right"))
```

</div>

###

```{r, fig.height=4}
mtcars
```

Column
--------------------

### 

```{r}

```

### 

```{r}

```

r - valuebox 在行中，但 renderValueBox 在列中

r - valuebox is in row but renderValueBox is column

r

shiny

flexdashboard

添加图标和标题