Как глобально предоставить css для каждого виджета radioGroupButtons в блестящем приложении

У меня есть этот минимальный пример, адаптированный отсюда R блестящая радиогруппа Кнопка смены цвета:

library(shiny)

  ui = fluidPage(
    radioGroupButtons(
     # status = "primary ",  ##  you can change status value to change to select few colors
      inputId = "a",
      checkIcon = list(yes = icon("check")),
      choiceValues = 0:3,
      choiceNames = paste0(0:3),
      justified = TRUE, width = "300px"
    ),
    tags$script("$(\"input:radio[name='a'][value=0]\").parent().css('background-color', '#7EF373');"),
    tags$script("$(\"input:radio[name='a'][value=1]\").parent().css('background-color', '#E7E7E7');"),
    tags$script("$(\"input:radio[name='a'][value=2]\").parent().css('background-color', '#EDB6B2');"),
    tags$script("$(\"input:radio[name='a'][value=3]\").parent().css('background-color', '#DE6B63');"),
    
    radioGroupButtons(
      # status = "primary ",  ##  you can change status value to change to select few colors
      inputId = "b",
      checkIcon = list(yes = icon("check")),
      choiceValues = 0:3,
      choiceNames = paste0(0:3),
      justified = TRUE, width = "300px"
    ),
    tags$script("$(\"input:radio[name='b'][value=0]\").parent().css('background-color', '#7EF373');"),
    tags$script("$(\"input:radio[name='b'][value=1]\").parent().css('background-color', '#E7E7E7');"),
    tags$script("$(\"input:radio[name='b'][value=2]\").parent().css('background-color', '#EDB6B2');"),
    tags$script("$(\"input:radio[name='b'][value=3]\").parent().css('background-color', '#DE6B63');")
    )
  server = function(...) {}

  shinyApp(ui, server)

Он в основном окрашивает сгруппированные переключатели.

Я хотел бы применить эти цвета к каждому виджету radioGroupButtons, не используя четыре строки снова и снова.

Я попытался сделать это с файлом css в родительском каталоге, но я не знаю, как написать четыре строки в css, например.

Как написать:

 tags$script("$(\"input:radio[name='a'][value=0]\").parent().css('background-color', '#7EF373');"),
    tags$script("$(\"input:radio[name='a'][value=1]\").parent().css('background-color', '#E7E7E7');"),
    tags$script("$(\"input:radio[name='a'][value=2]\").parent().css('background-color', '#EDB6B2');"),
    tags$script("$(\"input:radio[name='a'][value=3]\").parent().css('background-color', '#DE6B63');"),

в файле .css и использовать его в виджете radioGroupButtons?

Это не CSS, это JavaScript. Я думаю, вы можете удалить [name=...], чтобы настроить таргетинг на две группы только с одним набором из четырех строк.

Stéphane Laurent 24.11.2022 11:44

Как отметил @StéphaneLaurent, просто используйте tags$script("$(\"input:radio[value=0]\").parent().css('backg‌​round-color', '#7EF373');") и т. д.

ismirsehregal 24.11.2022 11:48

@StéphaneLaurent и ismirsehregal большое спасибо вам обоим. Я многое узнаю по вашему посту. Однако я борюсь с этим <stackoverflow.com/questions/74537975/…> уже несколько дней. Я просто хочу, чтобы пользователь мог сохранить реактивный фрейм данных на свой жесткий диск (скачать его). В идеале в следующий раз, если на этом жестком диске уже есть csv, новые данные будут добавлены. Совсем потерял большое спасибо.

TarJae 24.11.2022 12:14
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
3
79
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

tags$script используется для запуска некоторого кода JavaScript, это не код CSS (tags$style используется для CSS).

Первая часть этого кода:

$(\"input:radio[name='a'][value=0]\").parent().css('background-color', '#7EF373');

то есть $(\"input:radio[name='a'][value=0]\") выбирает один или несколько элементов HTML. А именно, он нацелен на все радиовходы с атрибутом name, равным 'a', и атрибутом значения, равным 0. Вы можете удалить часть [name='a'], чтобы выбрать другую радиогруппу.

Если вы хотите поместить этот код во внешний файл, создайте файл .js в подпапке www, содержащий этот код:

$(document).ready(function() {
  $("input:radio[value=0]").parent().css('background-color', '#7EF373');
  $("input:radio[value=1]").parent().css('background-color', '#E7E7E7');
  $("input:radio[value=2]").parent().css('background-color', '#EDB6B2');
  $("input:radio[value=3]").parent().css('background-color', '#DE6B63');
});

затем включите этот файл в свое приложение, добавив этот код в пользовательский интерфейс:

tags$head(tags$script(src = "yourJSfile.js")),

См. здесь для получения дополнительной информации о выборе по значению атрибута.

Вы также можете действовать следующим образом:

$(document).ready(function() {
  $("input:radio").each(function() {
    var value = $(this).attr("value");
    var color;
    switch(value) {
      case 0:
        color = "#E7E7E7";
        break;
      case 1:
        color = "#EDB6B2";
        break;
      case 2:
        color = "#AAAAAA";
        break;
      case 3:
        color = "#DE6BB3";
    }
    $(this).parent().css('background-color', color);
  });
});

Или, если вы хотите настроить таргетинг только на эти две радиогруппы:

$(document).ready(function() {
  $("input:radio").each(function() {
    var name = $(this).attr("name");
    if (name === "a" || name === "b") {
      var value = $(this).attr("value");
      var color;
      switch(value) {
        ......
      }
      $(this).parent().css('background-color', color);
    }
  });
});

Невероятный Стефан Лоран. Большое спасибо!!!

TarJae 24.11.2022 16:03

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