maomi
介绍
入门
文档

样式函数

函数与函数参数

在多个 class 间复用类似的样式属性时，可以使用函数。

stylesheet! {
fn paddings() {
padding = Px(1) Px(2);
}
class my_class {
color = red;
paddings();
}
class my_another_class {
paddings();
}
}

函数可以带有参数，但参数只能是数值类型 f32 或者字符串类型 &str 。

数值参数可以在带单位的值中使用。

stylesheet! {
fn paddings(v: f32, h: f32) {
padding = Px(v) Px(h);
}
class my_class {
color = red;
paddings(1, 2);
}
}

字符串参数可以用于颜色值。

stylesheet! {
fn text_color(c: &str) {
color = Color(c);
}
class my_class {
text_color("00d2ff");
}
}

动态样式

除了 class ，一种特殊的函数也可以用于指定样式。

这种特殊的函数接受一个参数，并使用 style 定义（而不是 fn ）。

stylesheet! {
style text_color(c: &str) {
color = Color(c);
}
}
#[component(Backend = DomBackend)]
struct MyWebsite {
template: template! {
<div style:text_color=&{ self.color }> "My Website" </div>
},
color: String,
}

它可以用于属性值需要被动态计算得出的时候。

< 样式常量
全局样式表 >
基础入门
编写一个组件
模板语法
模板节点
模板分支
模板列表
模板更新
事件
样式表
样式类
条件样式
样式常量
样式函数
全局样式表
组件
使用组件
组件事件
属性
高级特性
服务器端渲染
i18n 国际化支持
性能建议
运行时性能建议
编译期性能建议