use_css_var
Manipulate CSS variables.
Demo
Usage
use leptos::prelude::*;
use leptos_use::use_css_var;
#[component]
fn Demo() -> impl IntoView {
let (color, set_color) = use_css_var("--color");
set_color.set("red".to_string());
view! { }
}
The variable name itself can be a Signal
.
use leptos::prelude::*;
use leptos_use::use_css_var;
#[component]
fn Demo() -> impl IntoView {
let (key, set_key) = signal("--color".to_string());
let (color, set_color) = use_css_var(key);
view! { }
}
You can specify the element that the variable is applied to as well as an initial value in case the variable is not set yet. The option to listen for changes to the variable is also available.
use leptos::prelude::*;
use leptos::html::Div;
use leptos_use::{use_css_var_with_options, UseCssVarOptions};
#[component]
fn Demo() -> impl IntoView {
let el = NodeRef::<Div>::new();
let (color, set_color) = use_css_var_with_options(
"--color",
UseCssVarOptions::default()
.target(el)
.initial_value("#eee")
.observe(true),
);
view! {
<div node_ref=el>"..."</div>
}
}
Server-Side Rendering
On the server this simply returns signal(options.initial_value)
.
Feature
This function is only available if the crate feature
use_css_var
is enabled