Leptos-动态属性(003)

通过signal控制类和样式

到目前为止，我们已经看到了如何使用view!宏来创建事件侦听器(第一课)，以及如何通过向视图传递函数（如信号）来创建动态文本。

我们将研究如何动态更新类、样式和属性，并介绍如何而是用变量存储派生信号。

让我们从一个应该熟悉的简单组件开始 , 先来创建一个单击一个按钮来递增计数器的组件

#[component]
fn App() -> impl IntoView {
    let (count, set_count) = signal(0);

    view! {
        <button
            on:click=move |_| {
                *set_count.write() += 1;
            }
        >
            "Click me: "
            {count}
        </button>
    }
}

关于这段程序的详细解释见Leptos-动态文本(002)和Leptos-快速开始(001)

动态类

动态类的格式是 class:类名=bool 当bool为true时，类被添加。当bool为false时，类被删除。如果该值是一个访问信号的函数，则该类将在信号更改时响应性地更新。

例如给按钮设置一个count 是奇数时被添加,偶数时被删除的类red

<button
	on:click=move |_| {
		*set_count.write() += 1;
	}
	// count 为奇数的时候添加 red 类
	class:red=move || count.get() % 2 == 1
>

当然了 , 这需要为们的index.html 中存在.red 这个选择器 , 我们可以再添加几个类名用于测试 , 例如包含连字符和数字的 button-20 和 另一个普通类名green

<style>
  .red {
    color: red;
  }
</style>

在使用button-20 这种包含连字符和数字等字符的类型名的时候可以使用`(类型名 , bool)的形式

class=("button-20", move || count.get() % 2 == 1)

在需要让多个类型根据同一个bool 添加/删除的话可以使用一个数字包裹所有这些类名

class=(["button-20", "green"], move || count() % 2 == 1)

动态样式

单个 css 可以使用 style: 实现动态更新

let (count, set_count) = signal(0);

view! {
    <button
        on:click=move |_| {
            *set_count.write() += 10;
        }
        // 设置 style 属性
        style="position: absolute"
        // 动态更新的单样式
        style:left=move || format!("{}px", count.get() + 100)
        style:background-color=move || format!("rgb({}, {}, 100)", count.get(), 100)
        style:max-width="400px"
        // css 变量
        style=("--columns", move || count.get().to_string())
    >
        "Click to Move"
    </button>
}

动态属性

元素的普通属性也支持类似的方法 , 可以通过 signal 动态更新 , 例如在例子中再添加一个进度条 , 使用 signal 动态更新value

<progress
	max="50"
	value=count
/>

派生信号

当存在多个位置中使用相同的 signal 计算的结果 , 可以使用 派生信号 其实就是一个访问signal的闭包

let double_count = move || count.get() * 2;

/* insert the rest of the view */
<progress
    max="50"
    // we use it once here
    value=double_count
/>
<p>
    "Double Count: "
    // and again here
    {double_count}
</p>

派生信号可以创建响应式计算值，这些值可以在应用程序中的多个位置使用，并且开销最小。

视频: 小破站