Как изменить стиль указанного c блестящего виджета - PullRequest
Новая
       9

Как изменить стиль указанного c блестящего виджета

2 голосов
/ 06 апреля 2020

Я хочу оформить блестящий ввод из пакета dqshiny в моем Shiny app, как показано ниже - 

library(shiny)
library(dqshiny)
opts <- sapply(1:100000, function(i) paste0(sample(letters, 9), collapse=""))
shinyApp(
  ui = fluidPage(
    autocomplete_input("auto1", "Unnamed:", opts, max_options = 1000)
  ),
  server = function(input, output, session) {

  }
)

Я хочу достичь двух вещей -

  1. Хочу чтобы изменить выделение color в поле предложения с yellowish to green
  2. Также необходимо изменить расстояние между полем ввода и контейнером предложений с помощью скажем 10px.

У меня есть несколько других виджетов в моем приложении, поэтому измененные стили не должны влиять на другие виджеты.

Есть ли способ достичь этого?

Любой указатель будет высоко оценен.

1 Ответ

1 голос
/ 06 апреля 2020

Самый простой способ - просто добавить CSS прямо в заголовок. Есть действительно полезная статья о стилизации блестящих приложений здесь . 

library(shiny)
library(dqshiny)
opts <- sapply(1:100000, function(i) paste0(sample(letters, 9), collapse=""))
shinyApp(
    ui = fluidPage(
        tags$head(
            tags$style(
                HTML(
                '
                .autocomplete-items div:hover {
                    background-color: green;
                }
                #auto1autocomplete-list {
                    margin-top: 10px;
                }
                '
                )
            )
        ),
        autocomplete_input("auto1", "Unnamed:", opts, max_options = 1000)
    ),
  server = function(input, output, session) {
  }
)

img

...