Closed jzadra closed 1 year ago
There is no "pre"-toggle defined. Just like the toggle()
and toggleState()
functions, toggleCssClass
adds a specified CSS class to an element if the class does not currently exist, and it removes it if it does exist. There is no comlex logic, if the class is already on the element then it's removed, otherwise it's added. Here's a new example to help show this:
library(shiny)
ui <- fluidPage(
shinyjs::useShinyjs(),
tags$style(".red { color: #ff0000; }"),
div(id = "changeme", "changeme"),
actionButton("test", "test")
)
server <- function(input, output, session) {
observeEvent(input$test, {
shinyjs::toggleCssClass("changeme", class = "red")
})
}
shinyApp(ui, server)
Every time you press the button, you're toggling the "red" class on the <div>
. In this example the div happens to not have that class initially, so the first time you click it the class is added, then removed, then added, etc. If you replace the <div>
line above with div(id = "changeme", "changeme", class = "red"),
then now the class will exist initially, so the first toggle will remove it, then add it, then remove, etc.
That's the basic behaviour of toggle
- a simple back and forth depending on the current state. You can also use the condition
argument to explicitly set whether the it should be on or off (this is explained in detail in the documentation).
class
is required because that's the class name that you want to toggle. You need to provide either id
or selector
. id
is just a convenience argument so that you wouldn't have to add the hashtag yourself (and it also deals with shiny module namespaces). In other words, the id
or selector
identify the element, and class
is the class to add/remove to that element.
inlineCSS
is unrelated to the toggle functions, hence it has a separate documentation entry. This function is a way to add CSS into your shiny app without having to import a stylesheet file or writing out a <style>
tag. All the rules you define there are arbitrary in the sense that it's the same CSS rules you would define in a regular css file/style tag.
For the selector
parameter, you use the same format as a CSS selector. So yes, you need to add a hashtag for IDs (but if you want to target an element by ID, you can use the id
parameter instead for convenience. It's the same effect, but with selector
you can target any element, not only by id)
The css definitions are added to the entire page, not to a specific element. You can target specific elements with your CSS rule, but the CSS rule itself will work on anything in the page that matches the selector. I looked at the documentation again now and I do think it's quite comprehensive, you may benefit from some CSS tutorials if it's still unclear.
Thanks for the detailed response! I do need to learn more CSS.
I'm struggling a bit with the add/remove/toggle class/Cssclass functions. It would be great to have a bit more documentation regarding the arguments and a few other things:
id
andclass
arguments required, or just one or the other?In the documentation for these, the following example is given:
The inclineCSS definitions apply to the top level css for background (or text if
color: white;
) is added, but it isn't clear how to specify a specific class like a panel. Further documentation on how to change more specific css classes would be helpful.For context, thishis is coming up because I have an absolutePanel for which I want to change the background color. I have it set to a white background along with some other properties in my styles.css. I have been unable to affect a change in background color using a variety of versions of calls to add/remove/toggle.
UI excerpts:
styles.css:
server:
I have tried numerous variations of this including setting an ID for the panels. It just isn't clear where the connection is between the inlineCSS definition, the call to toggleCss as far as the class argument, and whether or not to include the default (ie pre-toggle state) of the panel in styles.css or elsewhere.