У меня есть этот минимальный пример, адаптированный отсюда 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?
Как отметил @StéphaneLaurent, просто используйте tags$script("$(\"input:radio[value=0]\").parent().css('background-color', '#7EF373');")
и т. д.
@StéphaneLaurent и ismirsehregal большое спасибо вам обоим. Я многое узнаю по вашему посту. Однако я борюсь с этим <stackoverflow.com/questions/74537975/…> уже несколько дней. Я просто хочу, чтобы пользователь мог сохранить реактивный фрейм данных на свой жесткий диск (скачать его). В идеале в следующий раз, если на этом жестком диске уже есть csv, новые данные будут добавлены. Совсем потерял большое спасибо.
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);
}
});
});
Невероятный Стефан Лоран. Большое спасибо!!!
Это не CSS, это JavaScript. Я думаю, вы можете удалить
[name=...]
, чтобы настроить таргетинг на две группы только с одним набором из четырех строк.