Организация макета bslib с использованием условной панели в блестящем приложении
Я пытаюсь получить простой макет карты на основе столбцов в bslib, но не получаю ожидаемых результатов. В примере приложения (см. ниже) есть два столбца для элементов пользовательского интерфейса на карточке: первый столбец всегда один и тот же, а элементы пользовательского интерфейса во втором зависят от выбора в selectInput в первом столбце (с использованием двух условных панелей). Когда первый элемент выбран в «planningType», второй столбец начинается сверху, но если выбран второй элемент, то второй элемент пользовательского интерфейса столбца имеет верхнее поле (пустое пространство), от которого я не могу избавиться . Я пробовал использовать fill = FALSE и fillable = FALSE в card_body и Layout_column_wrap, но это не помогло. Можно ли что-то сделать? Большое спасибо.
library(shiny)
library(bslib)
ui <- page_fluid(
title = "Habit planner",
card(
card_header("General planning", class = "bg-primary"),
card_body(
layout_column_wrap(
width = 1/2,
# First column
selectInput("planningType",
label = "Type of planning",
choices = c("Menu" = "menu",
"Physical activity" = "physical"),
selected = "Menu"),
# Second column
layout_column_wrap(
width = 1,
conditionalPanel("input.planningType == 'menu'",
selectInput("diet",
label = "Type of diet",
choices = c("Mediterranean",
"Low calory",
"Mixed"),
selected = "Mediterranean"),
selectInput("groceries",
label = "Where do you want to buy food?",
choices = c("Town market",
"Supermarket"),
selected = "Mediterranean")
),
conditionalPanel("input.planningType == 'physical'",
selectInput("activity",
label = "Type of activity",
choices = c("Running",
"Strength training",
"Swimming"),
selected = "Running")
)
)
)
)
)
)
server <- function(input, output) { }
shinyApp(ui = ui, server = server)
Ответы 1
Это странная ошибка, но, возможно, это потому, что она экспериментальная? Не уверен. Однако это довольно легко исправить: все, что вам нужно сделать, это соединить два условия вместе, например, тегом div().
Следующая проблема, с которой вы столкнетесь, — это исчезновение раскрывающихся списков за карточкой. Вы можете решить эту проблему, используя selectizeInput и установив опцию dropdownParent = 'body'. (по сравнению с selectInput — оба используют selectize.js в фоновом режиме)
Вот простой пример того, как вы можете заставить его подчиняться вашим командам.
library(shiny)
library(bslib)
ui <- page_fluid(
title = "Habit planner",
card(
card_header("General planning", class = "bg-primary"),
card_body(
layout_column_wrap(
width = 1/2,
# First column
selectizeInput("planningType",
label = "Type of planning",
choices = c("Menu" = "menu",
"Physical activity" = "physical"),
selected = "Menu",
options = list(dropdownParent = 'body')), # I'm new
# Second column
layout_column_wrap(
width = 1,
div( # <----------- I'm new
conditionalPanel("input.planningType == 'menu'",
selectizeInput("diet",
label = "Type of diet",
choices = c("Mediterranean",
"Low calory",
"Mixed"),
selected = "Mediterranean", # I'm new
options = list(dropdownParent = 'body')),
selectizeInput("groceries",
label = "Where do you want to buy food?",
choices = c("Town market",
"Supermarket"),
selected = "Mediterranean", # I'm new
options = list(dropdownParent = 'body'))
),
conditionalPanel("input.planningType == 'physical'",
selectizeInput("activity",
label = "Type of activity",
choices = c("Running",
"Strength training",
"Swimming"),
selected = "Running", # I'm new
options = list(dropdownParent = 'body'))
)
)
)
)
)
)
)
server <- function(input, output) { }
shinyApp(ui = ui, server = server)
Я нашел другой способ разрешить выпадающим меню переполнять карточку, используя аргумент theme в конструкторе страницы и добавив настройку: theme = bs_theme(version = 5) |> bs_add_rules( c(".card {overflow: visible !important;}", ".card-body {overflow: visible !important;}"))
Спасибо @Kat, div сделал свое дело! Действительно приятно видеть, как разрешить раскрывающимся спискам переполнять карту с помощью selectizeInput с опцией dropdownParent = 'body', я этого не знал. Еще раз спасибо :)