It might be lack of sleep, but I can’t figure this out.
I have a Label, and I want its text to be red when it represents an error, and I want it be green when it represent “good to go”.
I found search result for C and maybe a solution for Python, but nothing for Rust.
I tried manually setting the css-classes property and running queue_draw(); it didn’t work.
I can have a gtk::Box or a Frame that I place where the Label should go, then declare two Labels, and use set_child() to switch between them, but that seems like an ugly solution.
Do you have a solution?
SOLVED:
I have to add a “.” before declaring a CSS “thing” for it to be considered a class.
Ex:
.overlay {
background: rgba(60, 60, 60, 1);
font-size: 25px;
}
instead of:
overlay {
background: rgba(60, 60, 60, 1);
font-size: 25px;)
}
Just use label.add_css_class(), label.remove_css_class() or label.set_css_classes() and make sure to properly load your CSS style sheets,
Source: the comment of d_k_bo@feddit.org
Just use
label.add_css_class(),label.remove_css_class()orlabel.set_css_classes()and make sure to properly load your CSS style sheets, this is usually done by including them as a resource alongside .ui files and icons. If you are using libadwaita, you can also use its predefined style classes.full example (requires nightly toolchain)
#!/usr/bin/env -S cargo +nightly -Zscript --- [dependencies] gtk = { package = "gtk4", version = "0.9.3", features = ["v4_12"] } --- use gtk::{glib, prelude::*}; const STYLESHEET: &str = r#" .green { color: green; } .red { color: red; } "#; fn main() -> glib::ExitCode { let app = gtk::Application::builder() .application_id("org.example.HelloWorld") .build(); app.connect_activate(|app| { let window = gtk::ApplicationWindow::builder() .application(app) .title("Hello, World!") .build(); // Stylesheets are usually bundled with application resources // and automatically loaded let css_provider = gtk::CssProvider::new(); css_provider.load_from_string(STYLESHEET); gtk::style_context_add_provider_for_display( &RootExt::display(&window), &css_provider, 0 ); let box_ = gtk::Box::new(gtk::Orientation::Vertical, 6); let label = gtk::Label::builder() .label("Hello, World") .css_classes(["green"].as_slice()) .build(); box_.append(&label); let button = gtk::Button::builder() .label("Toggle Color") .build(); box_.append(&button); button.connect_clicked(glib::clone!(#[weak] label, move |_| { if label.has_css_class("red") { label.add_css_class("green"); label.remove_css_class("red"); } else { label.add_css_class("red"); label.remove_css_class("green"); } })); window.set_child(Some(&box_)); window.present(); }); app.run() }This is embarrassing, but when was it not?
I have to add a “.” before the name of a
cssclass, I must learn my tools.I mean, it is not embarrassing for you. In the browser, the CSS’s “native platform”, you add classes, via the JavaScript API, without the dot. It’s not a stupid assumption.
To have to add the dot in the CSS class name seems a bit of an oversight in the gtkrs API.
I think you understood their comment wrong. In your code (e.g.
label.add_css_class("green");) you don’t use a dot, but in the CSS stylesheet. It works the same as with HTML/JS/CSS.(sorry for the late response, I have to get in the habit of checking my Lemmy account)
No, I get that - a stylesheet denotes a class by having a dot. A JavaScript API for adding a CSS class omits this redundancy.
I was saying that the author might not be wrong to want to avoid the redundancy in rust example as well (since it explicitly mentions CSS classes).
Well, that’s CSS :D
Note that if you create a custom Widget class, you can set a CSS name, wich isn’t a CSS class and doesn’t use a leading dot.
Yeah that’s what I’ve been using all along.