mirror of
https://github.com/yewstack/yew.git
synced 2026-01-25 16:43:15 +00:00
5e823e729d
* Update CHANGELOG Changelog run: https://github.com/yewstack/yew/actions/runs/6283917852/job/17064800916 * docusaurus docs:version 0.21 * migration guide * blog post * prettier * make website warnings go away * make GA work * Apply suggestions from code review * Apply suggestion from review Co-authored-by: Kaede Hoshikawa <futursolo@users.noreply.github.com> * prettier --------- Co-authored-by: Kaede Hoshikawa <futursolo@users.noreply.github.com>
102 lines
1.9 KiB
Plaintext
102 lines
1.9 KiB
Plaintext
---
|
|
title: 'CSS with classes!'
|
|
description: 'A handy macro to handle classes'
|
|
comment: 'Keep this file as short and simple as possible. Its purpose is to ease the reader into components in Yew instead of providing proper API docs'
|
|
---
|
|
|
|
import Tabs from '@theme/Tabs'
|
|
import TabItem from '@theme/TabItem'
|
|
|
|
Yew does not natively provide a CSS-in-Rust solution but helps with styling by providing
|
|
programmatic ways to interact with the HTML `class` attribute.
|
|
|
|
## Classes
|
|
|
|
The `classes!` macro and associated `Classes` struct simplify the use of HTML classes:
|
|
|
|
<Tabs>
|
|
<TabItem value="Literal" label="Literal">
|
|
|
|
```rust
|
|
use yew::{classes, html};
|
|
|
|
html! {
|
|
<div class={classes!("container")}></div>
|
|
};
|
|
```
|
|
|
|
</TabItem>
|
|
<TabItem value="Multiple" label="Multiple">
|
|
|
|
```rust
|
|
use yew::{classes, html};
|
|
|
|
html! {
|
|
<div class={classes!("class-1", "class-2")}></div>
|
|
};
|
|
```
|
|
|
|
</TabItem>
|
|
<TabItem value="String" label="String">
|
|
|
|
```rust
|
|
use yew::{classes, html};
|
|
|
|
html! {
|
|
<div class={classes!(String::from("class-1 class-2"))}></div>
|
|
};
|
|
```
|
|
|
|
</TabItem>
|
|
<TabItem value="Optional" label="Optional">
|
|
|
|
```rust
|
|
use yew::{classes, html};
|
|
|
|
html! {
|
|
<div class={classes!(Some("class"))} />
|
|
};
|
|
```
|
|
|
|
</TabItem>
|
|
<TabItem value="Vector" label="Vector">
|
|
|
|
```rust
|
|
use yew::{classes, html};
|
|
|
|
html! {
|
|
<div class={classes!(vec!["class-1", "class-2"])}></div>
|
|
};
|
|
```
|
|
|
|
</TabItem>
|
|
<TabItem value="Slice" label="Slice">
|
|
|
|
```rust
|
|
use yew::{classes, html};
|
|
|
|
html! {
|
|
<div class={classes!(["class-1", "class-2"].as_ref())}></div>
|
|
};
|
|
```
|
|
|
|
</TabItem>
|
|
</Tabs>
|
|
|
|
We will expand upon this concept in [more CSS](../../more/css).
|
|
|
|
## Inline Styles
|
|
|
|
Currently Yew does not provide any special help with inline styles specified via the `styles` attribute,
|
|
but you can use it like any other HTML attribute:
|
|
|
|
```rust
|
|
use yew::{classes, html};
|
|
|
|
html! {
|
|
<div style="color: red;"></div>
|
|
};
|
|
```
|
|
|
|
We will expand upon this concept in [more CSS](../../more/css).
|