Как использовать компактное представление для bslib::value_box()?
Я использую bslib::value_box() на панели инструментов Quarto.
При масштабе 90% они выглядят нормально:
Но при масштабировании 100% он разбивается на 2 ряда:
Есть ли способ, чтобы поля значений всегда были одной строкой? Я не знаю, проблема ли это 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"))
```
Ответы 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:
Идеальный! Это было отличное объяснение. Спасибо