Как я могу выровнять логотип в заголовке навигационной панели блестящего приложения R, созданного с помощью bslib?
Я пытаюсь добавить логотип своей компании в блестящее приложение R, созданное с использованием {bslib}. Я пробовал разные способы добавления этого изображения в аргумент «заголовок» страницы «page_navbar». Пока изображение добавляется, оно выглядит шатко и меняет положение других элементов на ленте заголовка. Пример изображения и логотипа прилагается.
Вот демонстрационный код, иллюстрирующий проблему:
library(shiny)
library(bslib)
ui <- page_navbar(
title = div("My app",
img(src = "WCTMainLogoWhite_edited.png", height = "57.5px", width = "auto",
style = "position: absolute;
top: 1px;
right: 2%;")),
theme = bs_theme(version = 5, bootswatch = "zephyr")|> ##setting the primary color of "zephyr" bootswatch theme manually
bslib::bs_add_rules(
rules = "
.navbar.navbar-default {
background-color: $primary !important;
}
"
),
nav_panel(title = "Trends",
layout_columns(
card(
full_screen = TRUE,
card_header(
"Card 1")
)),
layout_columns(
card(
full_screen = TRUE,
card_header("Card 2")),
card(
full_screen = TRUE,
card_header("Card 3")),
col_widths = c(12, 12)
)
),
nav_panel(title = "Instructions on use", p("Content to be added"))
)
server <- function(input, output, session) {}
shinyApp(ui, server)
Есть ли лучший способ добавить изображение, которое будет совпадать с другими элементами в заголовке?
Ответы 2
Лучший способ выровнять элементы по центру — использовать flex.
Добавьте display: flex и align-items: center в родительский элемент div. Вот и все
Если вы хотите исправить существующий код, добавьте эти свойства в свой логотип.
position: absolute;.top: 0иbottom: 0;.margin: auto 0;.
Мой личный фаворит — использование flex, если есть сомнения, спрашивайте дальше. Ваше здоровье.
Я бы использовал подход, описанный в этом ответе: изображение просто добавляется к navbar. Это выглядит так и реализовано ниже.
Однако если один из них находится ниже точки останова lg, это не приведет к удовлетворительному результату, поскольку тогда navbar схлопывается и положение изображения меняется. Поэтому я реализовал css @media (max-width:992px) ниже, который устанавливает положение изображения на fixed, а также устанавливает right: 10% так, чтобы у вас все еще был доступ к navbar-toggle button.
Вы также можете сделать это наоборот и поменять положение изображения и кнопки переключения, если хотите, чтобы изображение располагалось справа.
library(shiny)
library(bslib)
ui <- page_navbar(
title = "My app",
theme = bs_theme(version = 5, bootswatch = "zephyr")|> ##setting the primary color of "zephyr" bootswatch theme manually
bslib::bs_add_rules(
rules = "
.navbar.navbar-default {
background-color: $primary !important;
}
"
),
nav_panel(title = "Trends",
tags$head(
tags$script(
HTML('$(document).ready(function() {
$(".navbar .container-fluid")
.append("<img id = \'myImage\' src=\'WCTMainLogoWhite_edited.png\' align=\'right\' height = \'57.5px\'>" );
});')),
tags$style(
HTML('@media (max-width:992px) { #myImage { position: fixed; right: 10%; top: 0.5%; }}')
# or:
# HTML('@media (max-width:992px) { #myImage { position: fixed; right: 1%; top: 0.5%; }
# div.navbar-header > button {margin-right: 175px}}')
)),
layout_columns(
card(
full_screen = TRUE,
card_header(
"Card 1")
)),
layout_columns(
card(
full_screen = TRUE,
card_header("Card 2")),
card(
full_screen = TRUE,
card_header("Card 3")),
col_widths = c(12, 12)
)
),
nav_panel(title = "Instructions on use", p("Content to be added"))
)
server <- function(input, output, session) {}
shinyApp(ui, server)
Здесь это не имеет отношения, но что касается setting the primary color of "zephyr" bootswatch theme manually, обратите внимание, что я недавно обновил свой ответ здесь и предоставил, на мой взгляд, лучшее решение, чем старое. Я не реализовал здесь, чтобы оставаться ближе к предоставленному вами коду.
Спасибо за помощь, Знакомьтесь. Исправление кода путем изменения предложенных вами элементов стиля все равно оставило много места под логотипом на ленте заголовка и изменило положение элементов навигационной панели. Итак, я последовал ответу Яна на этот вопрос.