Как вставить textInput в панель навигации bslib::page_sidebar()?

Я хочу вставить строку поиска внутри navbar, как это сделать?

library(shiny)   
library(bslib)

page_sidebar(
  tags$head(
    tags$link(rel = "stylesheet", type = "text/css", href = "style.css")
  ),
  title = "Weather",textInput("search","Search"),
  sidebar = sidebar("sidebar",
                    card(" ",actionButton("card_click", card_body("Cities",align = "center"))),
                    card(" ",actionButton("card_click-1", card_body("Maps",align = "center"))),
                    card(" ",actionButton("card_click-2", card_body("About Me",align = "center"))),
                    ),
  
  layout_columns(
    
    card("card1",
         card_body(card("card2",height = "200px"),card("card3",height = "200px"))
         
         ), col_widths = c(8,4),
    layout_columns(card("card4")))
  
)

Мне нужна панель поиска там, где находится красное поле. Есть ли способ сделать это?

html css r shiny bslib

07.05.2024 16:47

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете использовать абсолютное позиционирование.

position:absolute;
left:foo;
right:foo

07.05.2024 16:52

Ответ принят как подходящий

Вы можете обернуть title внутри tagList, который содержит метки для title («погода») и textInput, а затем использовать display: grid; на navbar, а также подходящую column-gap:

library(shiny)   
library(bslib)

page_sidebar(
  tags$head(
    tags$style(HTML('
                     .navbar.navbar-static-top {display: grid;}
                     .navbar.navbar-static-top > div:first-child {column-gap: 8.25rem;}
                    ')
               )
  ),
  title = tagList(tags$div("Weather") |> tagAppendAttributes(class = "bslib-page-title navbar-brand"), 
                  textInput("searchInput","Search")),
  sidebar = sidebar("sidebar",
                    card(" ",actionButton("card_click", card_body("Cities",align = "center"))),
                    card(" ",actionButton("card_click-1", card_body("Maps",align = "center"))),
                    card(" ",actionButton("card_click-2", card_body("About Me",align = "center"))),
  ),
  layout_columns(
    card("card1",
         card_body(card("card2",height = "200px"),card("card3",height = "200px"))
         
    ), col_widths = c(8,4),
    layout_columns(card("card4")))
)

07.05.2024 20:12

Другие вопросы по теме

Анимация изменения ширины элемента при условном рендеринге родственного элемента с помощью v-show

Как использовать clip-path и показывать содержимое под ним

Расположение полосок гистограммы CSS внизу элемента div

Сжать границу HTML-элемента, который делит пространство с плавающим элементом

Я пытаюсь заполнить столбец строки изображением

Сделайте границу линейного градиента без левой границы

Попутный ветер «список-нет» не работает в сафари

Как я могу выбрать первый элемент, если допустимы различные дополнительные элементы?

Как разместить фоновое изображение в самом верху окна?

Chrome/MacOS и Firefox/MacOS могут отображать строку с глифами из двух шрифтов, но Chrome/iOS и Safari/Any — нет

Как вставить textInput в панель навигации bslib::page_sidebar()?

Ответы 2

Другие вопросы по теме

Похожие вопросы