mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
ed2e1ea00e
* Add doc-test to test website code snippets Heavily inspired by tokio-rs/website repo. * Fix code snippets to pass doc tests Some code snippets are explicitly ignored and some are not run to avoid having to include dependencies for one liners. * Add website code snippet tests to CI * Fix CI * Remove doc-test from workspace * Exclude doc-test from workspace * Refactor code snippets and tests Code snippets can import types from doc_test crate i.e.: ```rust use doc_test::agents::EventBus; ``` This allows for moving some boilerplate away from the example and still checks that the code compiles correctly. Also some slight changes to some of the examples and the information about `ComponentLink` which is deprecated. * Move doc-test to packages * Rename doc-test crate to website-test The new name makes it more clear the purpose of this crate. * fix ci
2.6 KiB
2.6 KiB
| title | description |
|---|---|
| Classes | A handy macro to handle classes |
Classes
The struct Classes can be used to deal with HTML classes.
When pushing a string to the set, Classes ensures that there is one element
for every class even if a single string might contain multiple classes.
Classes can also be merged by using Extend (i.e.
classes1.extend(classes2)) or push() (i.e. classes1.push(classes2)). In
fact, anything that implements Into<Classes> can be used to push new classes
to the set.
The macro classes! is a convenient macro that creates one single Classes.
Its input accepts a comma separated list of expressions. The only requirement
is that every expression implements Into<Classes>.
use yew::{classes, html};
html! {
<div class={classes!("container")}></div>
};
use yew::{classes, html};
html! {
<div class={classes!("class-1", "class-2")}></div>
};
use yew::{classes, html};
let my_classes = String::from("class-1 class-2");
html! {
<div class={classes!(my_classes)}></div>
};
use yew::{classes, html};
html! {
<div class={classes!(Some("class"))} />
};
use yew::{classes, html};
html! {
<div class={classes!(vec!["class-1", "class-2"])}></div>
};
use yew::{classes, html};
let my_classes = ["class-1", "class-2"];
html! {
<div class={classes!(my_classes.as_ref())}></div>
};
Components that accept classes
use yew::{
classes, html, Children, Classes, Component,
Context, Html, Properties
};
use boolinator::Boolinator;
#[derive(PartialEq, Properties)]
struct Props {
#[prop_or_default]
class: Classes,
fill: bool,
children: Children,
}
struct MyComponent;
impl Component for MyComponent {
type Message = ();
type Properties = Props;
fn create(_ctx: &Context<Self>) -> Self {
Self
}
fn view(&self, ctx: &Context<Self>) -> Html {
let Props {
class,
fill,
children,
} = &ctx.props();
html! {
<div
class={classes!(
"my-container-class",
fill.as_some("my-fill-class"),
class.clone(),
)}
>
{ children.clone() }
</div>
}
}
}
The example makes use of the boolinator
crate to conditionally add the "my-fill-class" class based on the fill
boolean attribute.