Хобрук: Ваш путь к мастерству в программировании

изменить цвет actionButton Shiny R

Я пытаюсь найти способ заставить actionButton изменять цвет (и, возможно, другие элементы стиля). Цель очень общая, и я буду использовать ее для многих ответов кнопок в моем сложном приложении shinyDashboard. Проще говоря: если нажата кнопка или изменяется определенный элемент (например, ползунок ввода), связанный с кнопкой, кнопка должна изменить цвет.

Обычно я кодирую свои кнопки в Shiny, например, вот так:

  actionButton(inputId= "RunFullModel", label =icon("tree-deciduous", lib = "glyphicon"), 
                       style = "color: white; 
                       background-color: #35e51d; 
                       position: relative; 
                       left: 3%;
                       height: 35px;
                       width: 35px;
                       text-align:center;
                       text-indent: -2px;
                       border-radius: 6px;
                       border-width: 2px")),

Я просматривал свою задницу, но не повезло с чем-то, что работает. Я смотрел shinyjs от @Dean Attali, чтобы сделать это, но я могу заставить его работать только для изменения фона печатного текста, как в примере ниже. Часть, использующая ToggleClass или AddClass, похоже, не работает для actionButton ("x", "y"). Я также пробовал использовать updateActionButton из самого блестящего пакета, но это не позволяет включить style = "..." в команду.

library(shiny)
library(shinyjs)
library(shinyBs)
if (interactive()) {
  shinyApp(
    ui = fluidPage(
      useShinyjs(),
      inlineCSS(list(.red = "background: red")),
      inlineCSS(list(.blue = "style = 'background-color: blue'")),
      actionButton("checkbox", "Make it red"),
      bsButton("checkbox2", "Make me blue"),
      p(id = "element", "Watch what happens to me")
    ),
    server = function(input, output) {
      observe({
        toggleClass(id = "element", class = "red",
                    condition = input$checkbox)
      })
      observe({
        toggleCssClass(id = "checkbox2", class = ".blue",
                    condition = input$checkbox)
      })
    }
  )
}

Демо-модель shinyjs находится здесь: http://deanattali.com/shinyjs/overview#demo и похоже, что toggleClass работает там для кнопки с идентификатором «btn», но прямого примера кода нет, а косвенный пример из другого раздела страницы shinyjs, похоже, не работает.

Вариант 3 Я попытался использовать часть style = "background-color: .... read R variable" для доступа к переменной R, которая содержит имя цвета, то есть mycolor ‹-" красный ", но это тоже не работает, и мои знания javascript слишком ограничены, чтобы понять, как это работает.

Итак, .... если у кого-то есть идея, как заставить переключение цвета работать с shinyjs или другим методом, который работает с моей кнопкой, указанной выше, я был бы очень признателен и выражаю вам свою вечную благодарность. (застрял на этом в течение нескольких недель с этой проблемой)

отметка

p.s. Я также изучил bsButtons, но они слишком ограничены для того, что я хочу, с параметрами класса по умолчанию.

26.04.2017

Ответы:


1

Это должно быть выполнимо в «чистом» сиянии: используйте renderUI() для создания кнопки и вставьте условия, чтобы проверить, была ли кнопка уже нажата.

Я решил сохранить информацию (была ли нажата кнопка) в reactiveVariable, поскольку вы написали, что планируете вызвать изменение цвета: «при нажатии кнопки, или конкретный элемент (например, входной ползунок) изменяется который связан с кнопкой ". Таким образом, вы также можете изменить global$clicked из других входов.

library(shiny)
shinyApp(
  ui = fluidPage(
    uiOutput("button")
  ),
  server = function(input, output) {
    global <- reactiveValues(clicked = FALSE)

    observe({
      if(length(input$RunFullModel)){
        if(input$RunFullModel) global$clicked <- TRUE
      } 
    })

    output$button <-  renderUI({
      if(!is.null(input$RunFullModel) & global$clicked){
        actionButton(inputId= "RunFullModel", label =icon("tree-deciduous", lib = "glyphicon"), 
                     style = "color: white; 
                     background-color: #35e51d; 
                     position: relative; 
                     left: 3%;
                     height: 35px;
                     width: 35px;
                     text-align:center;
                     text-indent: -2px;
                     border-radius: 6px;
                     border-width: 2px")        
      }else{
        actionButton(inputId= "RunFullModel", label =icon("tree-deciduous", lib = "glyphicon"))
      }

    })
  }
)
26.04.2017
  • Боже, это такое простое решение, и я должен был увидеть это сам, поскольку я все время использую такого рода наблюдения в своем приложении. Иногда, я полагаю, ваш мозг просто дает осечку, когда вы слишком долго ломаете голову над чем-то. Спасибо! 27.04.2017
  • Нет проблем, мы все были там;) 27.04.2017
  • Новые материалы

    Введение в контекст React
    В этом посте мы поговорим о Context API, который был представлен в React 16, и о том, как вы можете их использовать. Что такое контекст? Глядя на определение из react docs , оно..

    Шлюз с лицензией OSS, совместимый с Apollo Federation v2, появится в WunderGraph
    Сегодня мы рады сообщить, что мы сотрудничаем с поддерживаемой YC Tailor Technologies, Inc. для внедрения Apollo Federation v2. Реализация будет лицензирована MIT (Engine) и Apache 2.0..

    Это оно
    Ну, я официально уволился с работы! На этой неделе я буду лихорадочно выполнять последние требования Думающего , чтобы я мог сосредоточиться на поиске работы. Что именно это значит?..

    7 полезных библиотек JavaScript, которые вы должны использовать в своем следующем проекте
    Усильте свою разработку JavaScript Есть поговорка «Не нужно изобретать велосипед». Библиотеки — лучший тому пример. Это поможет вам написать сложные и трудоемкие функции простым способом...

    Базовое руководство по переносу концепций обучения в глубокое обучение
    Обзор По мере того, как машинное обучение становится все более мощным и продвинутым, модели, обеспечивающие эту расширенную возможность, становятся все больше и начинают требовать огромного..

    C в C.R.U.D с использованием React-Redux
    Если вы использовали React, возможно, вы знакомы с головной болью, связанной с обратным потоком данных. Передача состояния реквизитам от родительских компонентов к дочерним компонентам может..

    5 обязательных элементов современного инструмента конвейера данных
    В цифровом мире предприятия используют конвейеры данных для перемещения, преобразования и хранения огромных объемов данных. Эти конвейеры составляют основу бизнес-аналитики и играют..