Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add a Way to Dynamically Update CSS for Components #1798

Open
GiorgioMiglia opened this issue Dec 12, 2024 · 1 comment
Open

Add a Way to Dynamically Update CSS for Components #1798

GiorgioMiglia opened this issue Dec 12, 2024 · 1 comment
Labels
needs-triage

Comments

@GiorgioMiglia
Copy link

Currently, there is no straightforward way to update the CSS of a component after it has been loaded, even if it has an ui.update function. The only workaround I found involves removing the element with the old style and re-rendering it with the new style, which is not ideal.

Suggested Enhancement:
Introduce functionality to dynamically update the CSS of components without requiring a full re-render. This could be particularly useful for components like cards and value boxes.
@cpsievert
Copy link
Collaborator

Is it technically possible to restyle without re-rendering the component with a clever use of ui.tags.style() and reactivity. For example, the button here toggle red on/off for the <body>:

from shiny.express import input, render, ui

ui.input_action_button("btn", "Press me")

@render.ui
def style():
    if input.btn() % 2 == 1:
        return ui.tags.style("body { background-color: red; }")
    else:
        return None

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
needs-triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@cpsievert @GiorgioMiglia