mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
636692507e
* Convert components concept docs from SC to FC - moved struct components to advanced topics - added docs about HOC for Suspense and Context - added a ease-in topic before components that introduces HTML/CSS/JS in yew - edit components concept to use function components * translations * fix todo links * fix tests * spelling bee
105 lines
2.0 KiB
Plaintext
105 lines
2.0 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 in the reader into components in Yew instead of providing proper API docs"
|
|
---
|
|
|
|
import Tabs from "@theme/Tabs";
|
|
import TabItem from "@theme/TabItem";
|
|
|
|
> Yew mostly operates on the idea of keeping everything that a reusable piece of
|
|
> UI may need, in one place - rust files. But also seeks to stay close to the
|
|
> original look of the technology.
|
|
|
|
Yew does not provide css in rs solutions natively, but helps with css by providing
|
|
programmatic ways to interact with css classes.
|
|
|
|
## Classes
|
|
|
|
The struct `Classes` simplifies 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 help with inline styles natively:
|
|
|
|
```rust
|
|
use yew::{classes, html};
|
|
|
|
html! {
|
|
<div styles="color: red;"></div>
|
|
};
|
|
```
|
|
|
|
We will expand upon this concept in [more CSS](../../more/css).
|