如何使用 bslib::value_box() 的紧凑视图？

Question

我在四开仪表板中使用

bslib::value_box()

。

在 90% 缩放时，它们看起来不错：

• 

但是在 100% 缩放时，它被分成 2 行：

• 

有没有办法让值框始终为 1 行？我不知道这是一个

bslib

问题还是

quarto

问题，或者只是我需要搞乱的一些 CSS。希望有人能给点建议。

---
title: "Test"
format: dashboard
---

# Page 1

## Sidebar {.sidebar}

## Column
### Row {height="200px"}

```{r}
library(bslib)
library(bsicons)

value_box("Box 1", value =  123, showcase = bs_icon("rocket-takeoff"))
value_box("Box 2", value =  456, showcase = bs_icon("rocket-takeoff"))
value_box("Box 3", value =  789, showcase = bs_icon("rocket-takeoff"))
value_box("Box 4", value = 1011, showcase = bs_icon("rocket-takeoff"))
value_box("Box 5", value = 1213, showcase = bs_icon("rocket-takeoff"))

```

Answer 1

首先请注意，您所看到的

bslib

中没有问题，这是小value_box的“故意行为”。特别是，默认的

showcase_layout

是

left center

，您在 100% 缩放时看到的是

left

（区域）和

center

（展示）。也就是说，停用此功能的一种可能性是您将

sass

变量

$bslib-value-box-horizontal-break-point

设置为使用

1px

表示

bslib::bs_add_variables

。否则设置为

300px

。以下最小闪亮应用程序基于您的代码，下面的屏幕截图显示了设置变量的效果。您可以将其翻译为与仪表板类似的方式。

library(shiny)
library(bslib)
library(bsicons)

ui <- page_fluid(
  theme = bslib::bs_theme() |>
    bs_add_variables("bslib-value-box-horizontal-break-point" = "1px"),
  layout_column_wrap(
    value_box("Box 1", value =  123, showcase = bs_icon("rocket-takeoff")),
    value_box("Box 2", value =  456, showcase = bs_icon("rocket-takeoff")),
    value_box("Box 3", value =  789, showcase = bs_icon("rocket-takeoff")),
    value_box("Box 4", value = 1011, showcase = bs_icon("rocket-takeoff")),
    value_box("Box 5", value = 1213, showcase = bs_icon("rocket-takeoff"))
  )
)

shinyApp(ui, \(...) {})

有标准值

300px

:

将值设置为

1px

: