r上方和下方的文本元素的闪亮变化颜色
我有一个简单的闪亮应用程序,将上传的文件显示为表。该代码正常工作,这只是我想更改下面的屏幕截图中文本的颜色为white
或在黑色背景图像中突出的东西。
我该怎么做?
也许我可以使用JavaScript
来解决此问题,但我不熟悉JS
在Shiny
中的实现。
代码:
ui = navbarPage(
tags$style("table, .table {color: unset;} .dataTable th, .datatables input {color: white}"),
title = div("Projects"),
theme = shinytheme("cyborg"),
#setBackgroundImage(src="Title.background.jpg", shinydashboard = TRUE),
tabPanel("GIS Projects",
icon = icon("info"),
div(p(h1("Instructions:"),style="text-align: justify;")),
p("1. The user can upload a CSV file.", style="color:white"),
p("2. Based on the uploaded file, the app will return an interactive table that is searchable.", style="color:white"),
p("3. Based on the uploaded file, the app will allow the user to add their project details in new rows or delete existing ones.", style="color:white"),
uiOutput("all"),
sidebarLayout(
sidebarPanel(
radioButtons(
"File_Type",
label = "Choose File type",
choices = list(".csv/txt" = 1, ".xlsx" = 2),
selected = 1,
inline = TRUE
),
fileInput('file2', 'Upload Your Data',
accept = c(
'text/csv',
'text/comma-separated-values,text/plain',
'.csv',
'.xlsx'
))),
mainPanel(
downloadButton("download1","Download data as csv"),
DTOutput("contents")),)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
myData = reactive({
req(input$file2)
inFile = input$file2
if (is.null(inFile)) return(NULL)
data = read.csv(inFile$datapath, header = TRUE)
data
})
output$contents = renderDT({
req(myData())
myData()
})
}
# Run the application
shinyApp(ui = ui, server = server)
屏幕截图:
“ https://i.sstatic.net/2jvpk.png” alt =“在此处输入图像说明”>
update:
基于答案的新输出:
这仅将页码更改为白色,也更改了另一个文本除灰色的列标题和黑色的表背景(我希望为默认的白色,因为应用程序背景GIF是黑色)。我也想更改展示条目并搜索:也为白色。表行的文本将是黑色的,因为原始/默认表具有白色背景。此外,在搜索栏中输入的文本也将是黑色的,因为它具有白色背景。
I have a simple Shiny app that displays the uploaded file as a table. The code works fine, it's just that I would like to the change the color of the text in the screenshots below to white
or something that stands out against a black background image.
How can I do that?
Maybe I can use javascript
to fix this but I am not familiar with JS
nad its implementation in Shiny
.
Code:
ui = navbarPage(
tags$style("table, .table {color: unset;} .dataTable th, .datatables input {color: white}"),
title = div("Projects"),
theme = shinytheme("cyborg"),
#setBackgroundImage(src="Title.background.jpg", shinydashboard = TRUE),
tabPanel("GIS Projects",
icon = icon("info"),
div(p(h1("Instructions:"),style="text-align: justify;")),
p("1. The user can upload a CSV file.", style="color:white"),
p("2. Based on the uploaded file, the app will return an interactive table that is searchable.", style="color:white"),
p("3. Based on the uploaded file, the app will allow the user to add their project details in new rows or delete existing ones.", style="color:white"),
uiOutput("all"),
sidebarLayout(
sidebarPanel(
radioButtons(
"File_Type",
label = "Choose File type",
choices = list(".csv/txt" = 1, ".xlsx" = 2),
selected = 1,
inline = TRUE
),
fileInput('file2', 'Upload Your Data',
accept = c(
'text/csv',
'text/comma-separated-values,text/plain',
'.csv',
'.xlsx'
))),
mainPanel(
downloadButton("download1","Download data as csv"),
DTOutput("contents")),)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
myData = reactive({
req(input$file2)
inFile = input$file2
if (is.null(inFile)) return(NULL)
data = read.csv(inFile$datapath, header = TRUE)
data
})
output$contents = renderDT({
req(myData())
myData()
})
}
# Run the application
shinyApp(ui = ui, server = server)
Screenshots:
Update:
New output based on the answer:
This only changed the page numbers to white and also changed the other text except column headers to grey and table background to black (which I want as default white since the app background gif is sort of black ). I also want to change show entries and Search: to white as well. The text for the table rows would be black as the original/default table has a white background. Moreover, the text entered in the search bar would be black as well since it has a white background.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
添加
style =“ bootstrap”
到renderdt
Add
style = "bootstrap"
torenderDT