Comments (4)
Hello,
You can override the background color using boxStyle =
argument, here's an example :
library(shiny)
library(esquisse)
ui <- fluidPage(
theme = bslib::bs_theme(version = 5L, bg = "#0A0A2A", fg = "#FFF"),
tags$h2("Demo dragulaInput"),
tags$br(),
fluidRow(
column(
width = 6,
dragulaInput(
inputId = "dad1",
label = "Default:",
sourceLabel = "Source",
targetsLabels = c("Target 1", "Target 2"),
choiceNames = lapply(
X = month.abb,
FUN = function(x) {
tags$span(class = "badge text-bg-dark", x)
}
),
choiceValues = month.abb,
boxStyle = "background-color: #131332 !important; border: 1px solid #53536A !important;",
width = "100%"
),
verbatimTextOutput(outputId = "result1"),
tags$br(),
dragulaInput(
inputId = "dad3",
label = "On same row:",
sourceLabel = "Source",
targetsLabels = c("Target 1", "Target 2"),
choices = month.abb,
width = "100%",
ncolSource = 1,
ncolGrid = 3
),
verbatimTextOutput(outputId = "result3")
)
)
)
server <- function(input, output, session) {
output$result1 <- renderPrint(str(input$dad1))
output$result3 <- renderPrint(str(input$dad3))
}
shinyApp(ui = ui, server = server)
Which gives :
from esquisse.
@pvictor thanks for the update. Is there a way to modify via css or do I have to supply the values to the dragulaInput() call?
from esquisse.
Yes can use CSS classes : .box-dad
and .container-drag-source
, using something like :
tags$style(
".box-dad, .container-drag-source {background-color: #131332 !important; border: 1px solid #53536A !important;}"
)
But I've noticed that you can't change color of the text inside the box currently, it'll need that I add an argument to the function.
from esquisse.
@pvictor thanks for the update!!
from esquisse.
Related Issues (20)
- Code not self-contained when piping into `esquisser()`
- [Feature Request] Import ggplot code HOT 1
- Bug: `esquisser(df)` does not load the df, it always shows the data selection modal HOT 1
- Feature request: ability to not show warnings HOT 4
- Question about the data security HOT 2
- [Feature Request] Grouping / Position option HOT 2
- UI issues in Shiny app HOT 1
- Esquisse creates duplicate IDs / invalid HTML HOT 1
- Esquisse as submodule gives empty ui aesthetics and plot HOT 3
- Esquisse not loading data and frozen, Rstudio V 1.1.456 in anaconda
- [Feature request] Support for plotting timelines or Gantt-like charts
- Update ReadMe with German i18n HOT 1
- Opcion barra lateral al inferior HOT 2
- What about adding geom_path to Esquisse? HOT 2
- Data missing once imported into esquisse HOT 2
- Error runnning it in Mac
- dragulaOpts - supply argument as JS? HOT 1
- Adding `alpha` into choices of aes setting
- Renaming variables while importing makes the output code unusable (comes with suggestion for solution) HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from esquisse.