Стиль блестящий виджет :: dropdownButton в shinydashboard :: поле заголовка - PullRequest
Новая
       24

Стиль блестящий виджет :: dropdownButton в shinydashboard :: поле заголовка

0 голосов
/ 03 сентября 2018

Фон

Я пытаюсь поместить shinyWidget::dropdownButton в заголовок shinydashboard::box. Кнопка должна иметь внешний вид кнопки, созданной при использовании складной коробки (box(..., collapsible = TRUE).

С помощью некоторого JavaScript я смог переместить раскрывающийся список, который показался мне более простым подходом, чем создание всех HTML самостоятельно.

Код ниже делает то, что я хочу сделать, однако я борюсь с css, потому что элементы в выпадающем меню частично белого на белый (что, я думаю, имеет смысл, потому что они (великие) дети класса .box-tools)

Что я хочу

Я хочу, чтобы все элементы управления в раскрывающемся списке выглядели так, как будто я поместил раскрывающийся список в тело поля:

Dropdown in the Body

Цель: Раскрытие в теле

Dropdown in the Header

Текущая ситуация: Выпадающий заголовок

Вопросы

Как мне этого добиться? Какие правила css я должен использовать, чтобы убедиться, что любой вид элемента управления выглядит так, как если бы он был в теле коробки? Могу ли я добиться того же поведения еще проще? (Например, обернуть все мои элементы управления в раскрывающемся списке в другом элементе)? Я знаю свои основы в css, но здесь я немного растерялся, какие правила мне нужно учитывать, чтобы достичь желаемого результата.

Код 

library(shiny)
library(shinydashboard)
library(shinyWidgets)
library(shinyjs)

makeDropDown <- function(i) {
  dropdownButton(
    h3("Heading"),
    selectInput(paste0("sel", i), "Select:", LETTERS),
    downloadButton(paste0("down", i), "Load"),
    circle = FALSE,
    icon = icon("cog")
  )
}

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    useShinyjs(),
    box(solidHeader = TRUE,
        status = "info",
        title = "Box",
        div(
          makeDropDown(1),
          class = "box-tools pull-right",
          id = "moveme"
        ),
        makeDropDown(2)
    )
  )
)

server <- function(input, output, session) {
  runjs("$('.box-header').append($('#moveme').detach())")
}

shinyApp(ui, server)

1 Ответ

0 голосов
/ 03 сентября 2018

Вы правы, некоторые правила CSS перезаписаны, вы можете использовать встроенный CSS с !important для управления внешним видом: 

makeDropDown <- function(i) {
  dropdownButton(
    tags$div(
      style = "color: black !important;", # for text
      h3("Heading"),
      selectInput(paste0("sel", i), "Select:", LETTERS),
      downloadButton(
        outputId = paste0("down", i), label = "Load", 
        style = "background-color: #f4f4f4 !important; color: #444 !important; border: 1px solid #ddd !important;" # for button
      )
    ),
    circle = FALSE,
    icon = icon("cog")
  )
}

В противном случае, возможно, у @DivadNojnarg есть лучшее решение в shinydashboardPlus, я его спрошу!

...