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
140 lines
2.6 KiB
Markdown
140 lines
2.6 KiB
Markdown
---
|
|
title: "Classes"
|
|
description: "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>`.
|
|
|
|
<!--DOCUSAURUS_CODE_TABS-->
|
|
<!--Literal-->
|
|
|
|
```rust
|
|
use yew::{classes, html};
|
|
|
|
html! {
|
|
<div class={classes!("container")}></div>
|
|
};
|
|
```
|
|
|
|
<!--Multiple-->
|
|
|
|
```rust
|
|
use yew::{classes, html};
|
|
|
|
html! {
|
|
<div class={classes!("class-1", "class-2")}></div>
|
|
};
|
|
```
|
|
|
|
<!--String-->
|
|
|
|
```rust
|
|
use yew::{classes, html};
|
|
|
|
let my_classes = String::from("class-1 class-2");
|
|
|
|
html! {
|
|
<div class={classes!(my_classes)}></div>
|
|
};
|
|
```
|
|
|
|
<!--Optional-->
|
|
|
|
```rust
|
|
use yew::{classes, html};
|
|
|
|
html! {
|
|
<div class={classes!(Some("class"))} />
|
|
};
|
|
```
|
|
|
|
<!--Vector-->
|
|
|
|
```rust
|
|
use yew::{classes, html};
|
|
|
|
html! {
|
|
<div class={classes!(vec!["class-1", "class-2"])}></div>
|
|
};
|
|
```
|
|
|
|
<!--Array-->
|
|
|
|
```rust
|
|
use yew::{classes, html};
|
|
|
|
let my_classes = ["class-1", "class-2"];
|
|
|
|
html! {
|
|
<div class={classes!(my_classes.as_ref())}></div>
|
|
};
|
|
```
|
|
|
|
<!--END_DOCUSAURUS_CODE_TABS-->
|
|
|
|
## Components that accept classes
|
|
|
|
```rust
|
|
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](https://crates.io/crates/boolinator)
|
|
crate to conditionally add the "my-fill-class" class based on the `fill`
|
|
boolean attribute.
|