Code Monkey home page Code Monkey logo

Comments (4)

pvictor avatar pvictor commented on June 10, 2024

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 :

image

from esquisse.

AdrianAntico avatar AdrianAntico commented on June 10, 2024

@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.

pvictor avatar pvictor commented on June 10, 2024

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.

AdrianAntico avatar AdrianAntico commented on June 10, 2024

@pvictor thanks for the update!!

from esquisse.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.