rgpui/
styled.rs

1//! 样式 trait：为元素提供链式样式设置 API。
2
3use crate::{
4    self as rgpui, AbsoluteLength, AlignContent, AlignItems, AlignSelf, BlendMode, BorderStyle,
5    CursorStyle, DefiniteLength, Display, Fill, FlexDirection, FlexWrap, Font, FontFeatures,
6    FontStyle, FontWeight, GridPlacement, GridTemplate, GridTemplateMinSize, Hsla, JustifyContent,
7    Length, SharedString, StrikethroughStyle, StyleRefinement, TextAlign, TextOverflow,
8    TextStyleRefinement, UnderlineStyle, WhiteSpace, point, px, relative, rems,
9};
10pub use rgpui_macros::{
11    border_style_methods, box_shadow_style_methods, cursor_style_methods, margin_style_methods,
12    overflow_style_methods, padding_style_methods, position_style_methods,
13    visibility_style_methods,
14};
15const ELLIPSIS: SharedString = SharedString::new_static("…");
16
17/// 可设置样式的元素的 trait。
18/// 使用此功能可选择使用实用程序 CSS 类似样式 API。
19// 在 rust-analyzer 上禁用，因为 rust-analyzer 永远不需要展开此宏，由于 rust-analyzer 的 proc-macro srv 中的低效，展开可能需要长达 10 秒
20#[cfg_attr(
21    all(any(feature = "inspector", debug_assertions), not(rust_analyzer)),
22    rgpui_macros::derive_inspector_reflection
23)]
24pub trait Styled: Sized {
25    /// 返回此元素样式内存的引用。
26    fn style(&mut self) -> &mut StyleRefinement;
27
28    rgpui_macros::style_helpers!();
29    rgpui_macros::visibility_style_methods!();
30    rgpui_macros::margin_style_methods!();
31    rgpui_macros::padding_style_methods!();
32    rgpui_macros::position_style_methods!();
33    rgpui_macros::overflow_style_methods!();
34    rgpui_macros::cursor_style_methods!();
35    rgpui_macros::border_style_methods!();
36    rgpui_macros::box_shadow_style_methods!();
37
38    /// 将元素的显示类型设置为 `block`。
39    /// [文档](https://tailwindcss.com/docs/display)
40    fn block(mut self) -> Self {
41        self.style().display = Some(Display::Block);
42        self
43    }
44
45    /// 将元素的显示类型设置为 `flex`。
46    /// [文档](https://tailwindcss.com/docs/display)
47    fn flex(mut self) -> Self {
48        self.style().display = Some(Display::Flex);
49        self
50    }
51
52    /// 将元素的显示类型设置为 `grid`。
53    /// [文档](https://tailwindcss.com/docs/display)
54    fn grid(mut self) -> Self {
55        self.style().display = Some(Display::Grid);
56        self
57    }
58
59    /// 将元素的显示类型设置为 `none`。
60    /// [文档](https://tailwindcss.com/docs/display)
61    fn hidden(mut self) -> Self {
62        self.style().display = Some(Display::None);
63        self
64    }
65
66    /// 设置用于渲染滚动条的空间。
67    ///
68    /// 仅当此元素的溢出设置为
69    /// `Overflow::Scroll` 时才会影响元素的布局。
70    fn scrollbar_width(mut self, width: impl Into<AbsoluteLength>) -> Self {
71        self.style().scrollbar_width = Some(width.into());
72        self
73    }
74
75    /// 将元素的空白设置为 `normal`。
76    /// [文档](https://tailwindcss.com/docs/whitespace#normal)
77    fn whitespace_normal(mut self) -> Self {
78        self.text_style().white_space = Some(WhiteSpace::Normal);
79        self
80    }
81
82    /// 将元素的空白设置为 `nowrap`。
83    /// [文档](https://tailwindcss.com/docs/whitespace#nowrap)
84    fn whitespace_nowrap(mut self) -> Self {
85        self.text_style().white_space = Some(WhiteSpace::Nowrap);
86        self
87    }
88
89    /// 设置如果需要则用省略号 (...) 截断溢出的文本。
90    /// [文档](https://tailwindcss.com/docs/text-overflow#ellipsis)
91    fn text_ellipsis(mut self) -> Self {
92        self.text_style().text_overflow = Some(TextOverflow::Truncate(ELLIPSIS));
93        self
94    }
95
96    /// 设置如果需要则在开头用省略号 (...) 截断溢出的文本。
97    /// 通常更适合文件路径，因为结尾比开头更重要。
98    /// 注意：这在 Tailwind CSS 中不存在。
99    fn text_ellipsis_start(mut self) -> Self {
100        self.text_style().text_overflow = Some(TextOverflow::TruncateStart(ELLIPSIS));
101        self
102    }
103
104    /// 设置如果需要则在中间用省略号 (...) 截断溢出的文本。
105    /// 保留文本的开头和结尾。适用于文件名。
106    /// 注意：这在 Tailwind CSS 中不存在。
107    fn text_ellipsis_middle(mut self) -> Self {
108        self.text_style().text_overflow = Some(TextOverflow::TruncateMiddle(ELLIPSIS));
109        self
110    }
111
112    /// 设置元素的文本溢出行为。
113    fn text_overflow(mut self, overflow: TextOverflow) -> Self {
114        self.text_style().text_overflow = Some(overflow);
115        self
116    }
117
118    /// 设置元素的对齐方式。
119    fn text_align(mut self, align: TextAlign) -> Self {
120        self.text_style().text_align = Some(align);
121        self
122    }
123
124    /// 将文本对齐设置为左
125    fn text_left(mut self) -> Self {
126        self.text_align(TextAlign::Left)
127    }
128
129    /// 将文本对齐设置为居中
130    fn text_center(mut self) -> Self {
131        self.text_align(TextAlign::Center)
132    }
133
134    /// 将文本对齐设置为右
135    fn text_right(mut self) -> Self {
136        self.text_align(TextAlign::Right)
137    }
138
139    /// 设置截断以防止文本换行，并在需要时用省略号 (...) 截断溢出的文本。
140    /// [文档](https://tailwindcss.com/docs/text-overflow#truncate)
141    fn truncate(mut self) -> Self {
142        self.overflow_hidden().whitespace_nowrap().text_ellipsis()
143    }
144
145    /// 设置截断文本前显示的行数。
146    /// [文档](https://tailwindcss.com/docs/line-clamp)
147    fn line_clamp(mut self, lines: usize) -> Self {
148        let mut text_style = self.text_style();
149        text_style.line_clamp = Some(lines);
150        self.overflow_hidden()
151    }
152
153    /// 将元素的 flex 方向设置为 `column`。
154    /// [文档](https://tailwindcss.com/docs/flex-direction#column)
155    fn flex_col(mut self) -> Self {
156        self.style().flex_direction = Some(FlexDirection::Column);
157        self
158    }
159
160    /// 将元素的 flex 方向设置为 `column-reverse`。
161    /// [文档](https://tailwindcss.com/docs/flex-direction#column-reverse)
162    fn flex_col_reverse(mut self) -> Self {
163        self.style().flex_direction = Some(FlexDirection::ColumnReverse);
164        self
165    }
166
167    /// 将元素的 flex 方向设置为 `row`。
168    /// [文档](https://tailwindcss.com/docs/flex-direction#row)
169    fn flex_row(mut self) -> Self {
170        self.style().flex_direction = Some(FlexDirection::Row);
171        self
172    }
173
174    /// 将元素的 flex 方向设置为 `row-reverse`。
175    /// [文档](https://tailwindcss.com/docs/flex-direction#row-reverse)
176    fn flex_row_reverse(mut self) -> Self {
177        self.style().flex_direction = Some(FlexDirection::RowReverse);
178        self
179    }
180
181    /// 设置元素允许 flex 项目根据需要增长和收缩，忽略其初始大小。
182    /// [文档](https://tailwindcss.com/docs/flex#flex-1)
183    fn flex_1(mut self) -> Self {
184        self.style().flex_grow = Some(1.);
185        self.style().flex_shrink = Some(1.);
186        self.style().flex_basis = Some(relative(0.).into());
187        self
188    }
189
190    /// 设置元素允许 flex 项目增长和收缩，考虑其初始大小。
191    /// [文档](https://tailwindcss.com/docs/flex#auto)
192    fn flex_auto(mut self) -> Self {
193        self.style().flex_grow = Some(1.);
194        self.style().flex_shrink = Some(1.);
195        self.style().flex_basis = Some(Length::Auto);
196        self
197    }
198
199    /// 设置元素允许 flex 项目收缩但不增长，考虑其初始大小。
200    /// [文档](https://tailwindcss.com/docs/flex#initial)
201    fn flex_initial(mut self) -> Self {
202        self.style().flex_grow = Some(0.);
203        self.style().flex_shrink = Some(1.);
204        self.style().flex_basis = Some(Length::Auto);
205        self
206    }
207
208    /// 设置元素防止 flex 项目增长或收缩。
209    /// [文档](https://tailwindcss.com/docs/flex#none)
210    fn flex_none(mut self) -> Self {
211        self.style().flex_grow = Some(0.);
212        self.style().flex_shrink = Some(0.);
213        self.style().flex_basis = Some(Length::Auto);
214        self
215    }
216
217    /// 设置此元素的 flex 项目的初始大小。
218    /// [文档](https://tailwindcss.com/docs/flex-basis)
219    fn flex_basis(mut self, basis: impl Into<Length>) -> Self {
220        self.style().flex_basis = Some(basis.into());
221        self
222    }
223
224    /// 设置元素允许 flex 项目增长以填充任何可用空间。
225    /// [文档](https://tailwindcss.com/docs/flex-grow)
226    fn flex_grow(mut self, grow: f32) -> Self {
227        self.style().flex_grow = Some(grow);
228        self
229    }
230
231    /// 设置元素防止 flex 项目增长。
232    /// [文档](https://tailwindcss.com/docs/flex-grow#dont-grow)
233    fn flex_grow_0(mut self) -> Self {
234        self.style().flex_grow = Some(0.);
235        self
236    }
237
238    /// Enables flex item growth (flex-grow: 1).
239    /// [Docs](https://tailwindcss.com/docs/flex-grow#grow-1)
240    fn flex_grow_1(mut self) -> Self {
241        self.style().flex_grow = Some(1.);
242        self
243    }
244
245    /// 设置元素允许 flex 项目在需要时收缩。
246    /// [文档](https://tailwindcss.com/docs/flex-shrink)
247    fn flex_shrink(mut self) -> Self {
248        self.style().flex_shrink = Some(1.);
249        self
250    }
251
252    /// 设置元素防止 flex 项目收缩。
253    /// [文档](https://tailwindcss.com/docs/flex-shrink#dont-shrink)
254    fn flex_shrink_0(mut self) -> Self {
255        self.style().flex_shrink = Some(0.);
256        self
257    }
258
259    /// Enables flex item shrinking (flex-shrink: 1).
260    /// [Docs](https://tailwindcss.com/docs/flex-shrink#shrink-1)
261    fn flex_shrink_1(mut self) -> Self {
262        self.style().flex_shrink = Some(1.);
263        self
264    }
265
266    /// 设置元素允许 flex 项目换行。
267    /// [文档](https://tailwindcss.com/docs/flex-wrap#wrap-normally)
268    fn flex_wrap(mut self) -> Self {
269        self.style().flex_wrap = Some(FlexWrap::Wrap);
270        self
271    }
272
273    /// 设置元素以相反方向换行 flex 项目。
274    /// [文档](https://tailwindcss.com/docs/flex-wrap#wrap-reversed)
275    fn flex_wrap_reverse(mut self) -> Self {
276        self.style().flex_wrap = Some(FlexWrap::WrapReverse);
277        self
278    }
279
280    /// 设置元素防止 flex 项目换行，导致不可变项目在必要时溢出容器。
281    /// [文档](https://tailwindcss.com/docs/flex-wrap#dont-wrap)
282    fn flex_nowrap(mut self) -> Self {
283        self.style().flex_wrap = Some(FlexWrap::NoWrap);
284        self
285    }
286
287    /// 设置元素将 flex 项目对齐到容器交叉轴的起始位置。
288    /// [文档](https://tailwindcss.com/docs/align-items#start)
289    fn items_start(mut self) -> Self {
290        self.style().align_items = Some(AlignItems::FlexStart);
291        self
292    }
293
294    /// 设置元素将 flex 项目对齐到容器交叉轴的末尾。
295    /// [文档](https://tailwindcss.com/docs/align-items#end)
296    fn items_end(mut self) -> Self {
297        self.style().align_items = Some(AlignItems::FlexEnd);
298        self
299    }
300
301    /// 设置元素将 flex 项目沿容器交叉轴的中心对齐。
302    /// [文档](https://tailwindcss.com/docs/align-items#center)
303    fn items_center(mut self) -> Self {
304        self.style().align_items = Some(AlignItems::Center);
305        self
306    }
307
308    /// 设置元素将 flex 项目沿容器交叉轴的基线对齐。
309    /// [文档](https://tailwindcss.com/docs/align-items#baseline)
310    fn items_baseline(mut self) -> Self {
311        self.style().align_items = Some(AlignItems::Baseline);
312        self
313    }
314
315    /// 设置元素拉伸 flex 项目以填充容器交叉轴的可用空间。
316    /// [文档](https://tailwindcss.com/docs/align-items#stretch)
317    fn items_stretch(mut self) -> Self {
318        self.style().align_items = Some(AlignItems::Stretch);
319        self
320    }
321
322    /// 设置此特定元素如何沿容器交叉轴对齐。
323    /// [文档](https://tailwindcss.com/docs/align-self#start)
324    fn self_start(mut self) -> Self {
325        self.style().align_self = Some(AlignSelf::Start);
326        self
327    }
328
329    /// 设置此元素对齐到容器交叉轴的末尾。
330    /// [文档](https://tailwindcss.com/docs/align-self#end)
331    fn self_end(mut self) -> Self {
332        self.style().align_self = Some(AlignSelf::End);
333        self
334    }
335
336    /// 设置此元素对齐到容器交叉轴的起始位置。
337    /// [文档](https://tailwindcss.com/docs/align-self#start)
338    fn self_flex_start(mut self) -> Self {
339        self.style().align_self = Some(AlignSelf::FlexStart);
340        self
341    }
342
343    /// 设置此元素对齐到容器交叉轴的末尾。
344    /// [文档](https://tailwindcss.com/docs/align-self#end)
345    fn self_flex_end(mut self) -> Self {
346        self.style().align_self = Some(AlignSelf::FlexEnd);
347        self
348    }
349
350    /// 设置此元素沿容器交叉轴的中心对齐。
351    /// [文档](https://tailwindcss.com/docs/align-self#center)
352    fn self_center(mut self) -> Self {
353        self.style().align_self = Some(AlignSelf::Center);
354        self
355    }
356
357    /// 设置此元素沿容器交叉轴的基线对齐。
358    /// [文档](https://tailwindcss.com/docs/align-self#baseline)
359    fn self_baseline(mut self) -> Self {
360        self.style().align_self = Some(AlignSelf::Baseline);
361        self
362    }
363
364    /// 设置此元素拉伸以填充容器交叉轴的可用空间。
365    /// [文档](https://tailwindcss.com/docs/align-self#stretch)
366    fn self_stretch(mut self) -> Self {
367        self.style().align_self = Some(AlignSelf::Stretch);
368        self
369    }
370
371    /// 设置元素将 flex 项目对齐到容器主轴的起始位置。
372    /// [文档](https://tailwindcss.com/docs/justify-content#start)
373    fn justify_start(mut self) -> Self {
374        self.style().justify_content = Some(JustifyContent::Start);
375        self
376    }
377
378    /// 设置元素将 flex 项目对齐到容器主轴的末尾。
379    /// [文档](https://tailwindcss.com/docs/justify-content#end)
380    fn justify_end(mut self) -> Self {
381        self.style().justify_content = Some(JustifyContent::End);
382        self
383    }
384
385    /// 设置元素将 flex 项目沿容器主轴的中心对齐。
386    /// [文档](https://tailwindcss.com/docs/justify-content#center)
387    fn justify_center(mut self) -> Self {
388        self.style().justify_content = Some(JustifyContent::Center);
389        self
390    }
391
392    /// 设置元素将 flex 项目沿容器主轴对齐，使得每个项目之间有相等的空间。
393    /// [文档](https://tailwindcss.com/docs/justify-content#space-between)
394    fn justify_between(mut self) -> Self {
395        self.style().justify_content = Some(JustifyContent::SpaceBetween);
396        self
397    }
398
399    /// 设置元素将项目沿容器主轴对齐，使得每个项目两侧有相等的空间。
400    /// [文档](https://tailwindcss.com/docs/justify-content#space-around)
401    fn justify_around(mut self) -> Self {
402        self.style().justify_content = Some(JustifyContent::SpaceAround);
403        self
404    }
405
406    /// 设置元素将项目沿容器主轴对齐，使得每个项目周围有相等的空间，同时
407    /// 考虑到使用 justify-around 时通常会在每个项目之间看到的空间加倍。
408    /// [文档](https://tailwindcss.com/docs/justify-content#space-evenly)
409    fn justify_evenly(mut self) -> Self {
410        self.style().justify_content = Some(JustifyContent::SpaceEvenly);
411        self
412    }
413
414    /// 设置元素将内容项目打包到其默认位置，就像未设置 align-content 值一样。
415    /// [文档](https://tailwindcss.com/docs/align-content#normal)
416    fn content_normal(mut self) -> Self {
417        self.style().align_content = None;
418        self
419    }
420
421    /// 设置元素将内容项目打包到容器交叉轴的中心。
422    /// [文档](https://tailwindcss.com/docs/align-content#center)
423    fn content_center(mut self) -> Self {
424        self.style().align_content = Some(AlignContent::Center);
425        self
426    }
427
428    /// 设置元素将内容项目打包到容器交叉轴的起始位置。
429    /// [文档](https://tailwindcss.com/docs/align-content#start)
430    fn content_start(mut self) -> Self {
431        self.style().align_content = Some(AlignContent::FlexStart);
432        self
433    }
434
435    /// 设置元素将内容项目打包到容器交叉轴的末尾。
436    /// [文档](https://tailwindcss.com/docs/align-content#end)
437    fn content_end(mut self) -> Self {
438        self.style().align_content = Some(AlignContent::FlexEnd);
439        self
440    }
441
442    /// 设置元素将内容项目沿容器交叉轴打包，使得每个项目之间有相等的空间。
443    /// [文档](https://tailwindcss.com/docs/align-content#space-between)
444    fn content_between(mut self) -> Self {
445        self.style().align_content = Some(AlignContent::SpaceBetween);
446        self
447    }
448
449    /// 设置元素将内容项目沿容器交叉轴打包，使得每个项目两侧有相等的空间。
450    /// [文档](https://tailwindcss.com/docs/align-content#space-around)
451    fn content_around(mut self) -> Self {
452        self.style().align_content = Some(AlignContent::SpaceAround);
453        self
454    }
455
456    /// 设置元素将内容项目沿容器交叉轴打包，使得每个项目之间有相等的空间。
457    /// [文档](https://tailwindcss.com/docs/align-content#space-evenly)
458    fn content_evenly(mut self) -> Self {
459        self.style().align_content = Some(AlignContent::SpaceEvenly);
460        self
461    }
462
463    /// 设置元素允许内容项目填充容器交叉轴的可用空间。
464    /// [文档](https://tailwindcss.com/docs/align-content#stretch)
465    fn content_stretch(mut self) -> Self {
466        self.style().align_content = Some(AlignContent::Stretch);
467        self
468    }
469
470    /// 设置元素的宽高比。
471    /// [文档](https://tailwindcss.com/docs/aspect-ratio)
472    fn aspect_ratio(mut self, ratio: f32) -> Self {
473        self.style().aspect_ratio = Some(ratio);
474        self
475    }
476
477    /// 将元素的宽高比设置为 1/1 —— 等宽等高。
478    /// [文档](https://tailwindcss.com/docs/aspect-ratio)
479    fn aspect_square(mut self) -> Self {
480        self.style().aspect_ratio = Some(1.0);
481        self
482    }
483
484    /// 设置元素的背景颜色。
485    fn bg<F>(mut self, fill: F) -> Self
486    where
487        F: Into<Fill>,
488        Self: Sized,
489    {
490        self.style().background = Some(fill.into());
491        self
492    }
493
494    /// 设置元素的边框样式。
495    fn border_dashed(mut self) -> Self {
496        self.style().border_style = Some(BorderStyle::Dashed);
497        self
498    }
499
500    /// 启用连续（圆角）角舍入而不是圆形。
501    /// 这会产生平滑的 Apple 风格圆角，匹配 SwiftUI 的连续角样式。
502    fn continuous_corners(mut self) -> Self {
503        self.style().continuous_corners = Some(true);
504        self
505    }
506
507    /// 返回已在此元素上配置的文本样式的可变引用。
508    fn text_style(&mut self) -> &mut TextStyleRefinement {
509        let style: &mut StyleRefinement = self.style();
510        &mut style.text
511    }
512
513    /// 设置此元素的文本颜色。
514    ///
515    /// 此值将级联到其子元素。
516    fn text_color(mut self, color: impl Into<Hsla>) -> Self {
517        self.text_style().color = Some(color.into());
518        self
519    }
520
521    /// 设置此元素的字体粗细
522    ///
523    /// 此值将级联到其子元素。
524    fn font_weight(mut self, weight: FontWeight) -> Self {
525        self.text_style().font_weight = Some(weight);
526        self
527    }
528
529    /// 设置此元素的背景颜色。
530    ///
531    /// 此值将级联到其子元素。
532    fn text_bg(mut self, bg: impl Into<Hsla>) -> Self {
533        self.text_style().background_color = Some(bg.into());
534        self
535    }
536
537    /// 设置此元素的文本大小。
538    ///
539    /// 此值将级联到其子元素。
540    fn text_size(mut self, size: impl Into<AbsoluteLength>) -> Self {
541        self.text_style().font_size = Some(size.into());
542        self
543    }
544
545    /// 将文本大小设置为 'extra small'。
546    /// [文档](https://tailwindcss.com/docs/font-size#setting-the-font-size)
547    fn text_xs(mut self) -> Self {
548        self.text_style().font_size = Some(rems(0.75).into());
549        self
550    }
551
552    /// 将文本大小设置为 'small'。
553    /// [文档](https://tailwindcss.com/docs/font-size#setting-the-font-size)
554    fn text_sm(mut self) -> Self {
555        self.text_style().font_size = Some(rems(0.875).into());
556        self
557    }
558
559    /// 将文本大小设置为 'base'。
560    /// [文档](https://tailwindcss.com/docs/font-size#setting-the-font-size)
561    fn text_base(mut self) -> Self {
562        self.text_style().font_size = Some(rems(1.0).into());
563        self
564    }
565
566    /// 将文本大小设置为 'large'。
567    /// [文档](https://tailwindcss.com/docs/font-size#setting-the-font-size)
568    fn text_lg(mut self) -> Self {
569        self.text_style().font_size = Some(rems(1.125).into());
570        self
571    }
572
573    /// 将文本大小设置为 'extra large'。
574    /// [文档](https://tailwindcss.com/docs/font-size#setting-the-font-size)
575    fn text_xl(mut self) -> Self {
576        self.text_style().font_size = Some(rems(1.25).into());
577        self
578    }
579
580    /// 将文本大小设置为 'extra extra large'。
581    /// [文档](https://tailwindcss.com/docs/font-size#setting-the-font-size)
582    fn text_2xl(mut self) -> Self {
583        self.text_style().font_size = Some(rems(1.5).into());
584        self
585    }
586
587    /// 将文本大小设置为 'extra extra extra large'。
588    /// [文档](https://tailwindcss.com/docs/font-size#setting-the-font-size)
589    fn text_3xl(mut self) -> Self {
590        self.text_style().font_size = Some(rems(1.875).into());
591        self
592    }
593
594    /// 将元素的字体样式设置为 italic。
595    /// [文档](https://tailwindcss.com/docs/font-style#italicizing-text)
596    fn italic(mut self) -> Self {
597        self.text_style().font_style = Some(FontStyle::Italic);
598        self
599    }
600
601    /// 将元素的字体样式设置为 normal（非 italic）。
602    /// [文档](https://tailwindcss.com/docs/font-style#displaying-text-normally)
603    fn not_italic(mut self) -> Self {
604        self.text_style().font_style = Some(FontStyle::Normal);
605        self
606    }
607
608    /// 将文本装饰设置为下划线。
609    /// [文档](https://tailwindcss.com/docs/text-decoration-line#underling-text)
610    fn underline(mut self) -> Self {
611        let style = self.text_style();
612        style.underline = Some(UnderlineStyle {
613            thickness: px(1.),
614            ..Default::default()
615        });
616        self
617    }
618
619    /// 将文本装饰设置为删除线。
620    /// [文档](https://tailwindcss.com/docs/text-decoration-line#adding-a-line-through-text)
621    fn line_through(mut self) -> Self {
622        let style = self.text_style();
623        style.strikethrough = Some(StrikethroughStyle {
624            thickness: px(1.),
625            ..Default::default()
626        });
627        self
628    }
629
630    /// 移除此元素上的文本装饰。
631    ///
632    /// 此值将级联到其子元素。
633    fn text_decoration_none(mut self) -> Self {
634        self.text_style().underline = None;
635        self
636    }
637
638    /// 设置此元素下划线的颜色
639    fn text_decoration_color(mut self, color: impl Into<Hsla>) -> Self {
640        let style = self.text_style();
641        let underline = style.underline.get_or_insert_with(Default::default);
642        underline.color = Some(color.into());
643        self
644    }
645
646    /// 将文本装饰样式设置为实线。
647    /// [文档](https://tailwindcss.com/docs/text-decoration-style)
648    fn text_decoration_solid(mut self) -> Self {
649        let style = self.text_style();
650        let underline = style.underline.get_or_insert_with(Default::default);
651        underline.wavy = false;
652        self
653    }
654
655    /// 将文本装饰样式设置为波浪线。
656    /// [文档](https://tailwindcss.com/docs/text-decoration-style)
657    fn text_decoration_wavy(mut self) -> Self {
658        let style = self.text_style();
659        let underline = style.underline.get_or_insert_with(Default::default);
660        underline.wavy = true;
661        self
662    }
663
664    /// 将文本装饰设置为 0px 粗。
665    /// [文档](https://tailwindcss.com/docs/text-decoration-thickness)
666    fn text_decoration_0(mut self) -> Self {
667        let style = self.text_style();
668        let underline = style.underline.get_or_insert_with(Default::default);
669        underline.thickness = px(0.);
670        self
671    }
672
673    /// 将文本装饰设置为 1px 粗。
674    /// [文档](https://tailwindcss.com/docs/text-decoration-thickness)
675    fn text_decoration_1(mut self) -> Self {
676        let style = self.text_style();
677        let underline = style.underline.get_or_insert_with(Default::default);
678        underline.thickness = px(1.);
679        self
680    }
681
682    /// 将文本装饰设置为 2px 粗。
683    /// [文档](https://tailwindcss.com/docs/text-decoration-thickness)
684    fn text_decoration_2(mut self) -> Self {
685        let style = self.text_style();
686        let underline = style.underline.get_or_insert_with(Default::default);
687        underline.thickness = px(2.);
688        self
689    }
690
691    /// 将文本装饰设置为 4px 粗。
692    /// [文档](https://tailwindcss.com/docs/text-decoration-thickness)
693    fn text_decoration_4(mut self) -> Self {
694        let style = self.text_style();
695        let underline = style.underline.get_or_insert_with(Default::default);
696        underline.thickness = px(4.);
697        self
698    }
699
700    /// 将文本装饰设置为 8px 粗。
701    /// [文档](https://tailwindcss.com/docs/text-decoration-thickness)
702    fn text_decoration_8(mut self) -> Self {
703        let style = self.text_style();
704        let underline = style.underline.get_or_insert_with(Default::default);
705        underline.thickness = px(8.);
706        self
707    }
708
709    /// 设置此元素及其子元素的字体系列。
710    fn font_family(mut self, family_name: impl Into<SharedString>) -> Self {
711        self.text_style().font_family = Some(family_name.into());
712        self
713    }
714
715    /// 设置此元素及其子元素的字体特性。
716    fn font_features(mut self, features: FontFeatures) -> Self {
717        self.text_style().font_features = Some(features);
718        self
719    }
720
721    /// 设置此元素及其子元素的字体。
722    fn font(mut self, font: Font) -> Self {
723        let Font {
724            family,
725            features,
726            fallbacks,
727            weight,
728            style,
729        } = font;
730
731        let text_style = self.text_style();
732        text_style.font_family = Some(family);
733        text_style.font_features = Some(features);
734        text_style.font_weight = Some(weight);
735        text_style.font_style = Some(style);
736        text_style.font_fallbacks = fallbacks;
737
738        self
739    }
740
741    /// 设置此元素及其子元素的行高。
742    fn line_height(mut self, line_height: impl Into<DefiniteLength>) -> Self {
743        self.text_style().line_height = Some(line_height.into());
744        self
745    }
746
747    /// 设置此元素及其子元素的透明度。
748    fn opacity(mut self, opacity: f32) -> Self {
749        self.style().opacity = Some(opacity);
750        self
751    }
752
753    /// 设置渲染此元素背景时应用的混合模式。
754    fn blend_mode(mut self, mode: BlendMode) -> Self {
755        self.style().blend_mode = Some(mode);
756        self
757    }
758
759    /// 设置顺时针旋转角度（度数）。
760    fn rotate(mut self, angle_degrees: f32) -> Self {
761        self.style().rotate = Some(angle_degrees.to_radians());
762        self
763    }
764
765    /// 设置统一缩放因子。
766    fn scale(mut self, factor: f32) -> Self {
767        self.style().scale = Some(point(factor, factor));
768        self
769    }
770
771    /// 设置 x 和 y 轴的非统一缩放因子。
772    fn scale_xy(mut self, x: f32, y: f32) -> Self {
773        self.style().scale = Some(point(x, y));
774        self
775    }
776
777    /// 设置变换原点为元素大小的比例 (0.0-1.0)。
778    /// 默认为中心 (0.5, 0.5)。
779    fn transform_origin(mut self, x: f32, y: f32) -> Self {
780        self.style().transform_origin = Some(point(x, y));
781        self
782    }
783
784    /// 设置此元素的网格列。
785    fn grid_cols(mut self, cols: u16) -> Self {
786        self.style().grid_cols = Some(GridTemplate {
787            repeat: cols,
788            min_size: GridTemplateMinSize::Zero,
789        });
790        self
791    }
792
793    /// 设置具有最小内容最小大小的网格列。
794    /// 与 grid_cols 不同，它不会在 AvailableSpace::MinContent 约束下收缩到宽度 0。
795    fn grid_cols_min_content(mut self, cols: u16) -> Self {
796        self.style().grid_cols = Some(GridTemplate {
797            repeat: cols,
798            min_size: GridTemplateMinSize::MinContent,
799        });
800        self
801    }
802
803    /// 设置具有最大内容最大大小的网格列，用于基于内容宽度的列。
804    fn grid_cols_max_content(mut self, cols: u16) -> Self {
805        self.style().grid_cols = Some(GridTemplate {
806            repeat: cols,
807            min_size: GridTemplateMinSize::MaxContent,
808        });
809        self
810    }
811
812    /// 设置此元素的网格行。
813    fn grid_rows(mut self, rows: u16) -> Self {
814        self.style().grid_rows = Some(GridTemplate {
815            repeat: rows,
816            min_size: GridTemplateMinSize::Zero,
817        });
818        self
819    }
820
821    /// 设置具有最小内容最小大小的网格行。
822    /// 与 grid_rows 不同，它不会在 AvailableSpace::MinContent 约束下收缩到高度 0。
823    fn grid_rows_min_content(mut self, rows: u16) -> Self {
824        self.style().grid_rows = Some(GridTemplate {
825            repeat: rows,
826            min_size: GridTemplateMinSize::MinContent,
827        });
828        self
829    }
830
831    /// 设置具有最大内容最大大小的网格行，用于基于内容的行高。
832    fn grid_rows_max_content(mut self, rows: u16) -> Self {
833        self.style().grid_rows = Some(GridTemplate {
834            repeat: rows,
835            min_size: GridTemplateMinSize::MaxContent,
836        });
837        self
838    }
839
840    /// 设置此元素的列起始位置。
841    fn col_start(mut self, start: i16) -> Self {
842        let grid_location = self.style().grid_location_mut();
843        grid_location.column.start = GridPlacement::Line(start);
844        self
845    }
846
847    /// 将此元素的列起始位置设置为 auto。
848    fn col_start_auto(mut self) -> Self {
849        let grid_location = self.style().grid_location_mut();
850        grid_location.column.start = GridPlacement::Auto;
851        self
852    }
853
854    /// 设置此元素的列结束位置。
855    fn col_end(mut self, end: i16) -> Self {
856        let grid_location = self.style().grid_location_mut();
857        grid_location.column.end = GridPlacement::Line(end);
858        self
859    }
860
861    /// 将此元素的列结束位置设置为 auto。
862    fn col_end_auto(mut self) -> Self {
863        let grid_location = self.style().grid_location_mut();
864        grid_location.column.end = GridPlacement::Auto;
865        self
866    }
867
868    /// 设置此元素的列跨度。
869    fn col_span(mut self, span: u16) -> Self {
870        let grid_location = self.style().grid_location_mut();
871        grid_location.column = GridPlacement::Span(span)..GridPlacement::Span(span);
872        self
873    }
874
875    /// 设置此元素的行跨度。
876    fn col_span_full(mut self) -> Self {
877        let grid_location = self.style().grid_location_mut();
878        grid_location.column = GridPlacement::Line(1)..GridPlacement::Line(-1);
879        self
880    }
881
882    /// 设置此元素的行起始位置。
883    fn row_start(mut self, start: i16) -> Self {
884        let grid_location = self.style().grid_location_mut();
885        grid_location.row.start = GridPlacement::Line(start);
886        self
887    }
888
889    /// 将此元素的行起始位置设置为 "auto"
890    fn row_start_auto(mut self) -> Self {
891        let grid_location = self.style().grid_location_mut();
892        grid_location.row.start = GridPlacement::Auto;
893        self
894    }
895
896    /// 设置此元素的行结束位置。
897    fn row_end(mut self, end: i16) -> Self {
898        let grid_location = self.style().grid_location_mut();
899        grid_location.row.end = GridPlacement::Line(end);
900        self
901    }
902
903    /// 将此元素的行结束位置设置为 "auto"
904    fn row_end_auto(mut self) -> Self {
905        let grid_location = self.style().grid_location_mut();
906        grid_location.row.end = GridPlacement::Auto;
907        self
908    }
909
910    /// 设置此元素的行跨度。
911    fn row_span(mut self, span: u16) -> Self {
912        let grid_location = self.style().grid_location_mut();
913        grid_location.row = GridPlacement::Span(span)..GridPlacement::Span(span);
914        self
915    }
916
917    /// 设置此元素的行跨度。
918    fn row_span_full(mut self) -> Self {
919        let grid_location = self.style().grid_location_mut();
920        grid_location.row = GridPlacement::Line(1)..GridPlacement::Line(-1);
921        self
922    }
923
924    /// 在此元素周围绘制调试边框。
925    #[cfg(debug_assertions)]
926    fn debug(mut self) -> Self {
927        self.style().debug = Some(true);
928        self
929    }
930
931    /// 在此元素下方所有符合条件的元素上绘制调试边框。
932    #[cfg(debug_assertions)]
933    fn debug_below(mut self) -> Self {
934        self.style().debug_below = Some(true);
935        self
936    }
937}
rgpui/styled.rs

rgpui/
styled.rs
