1use crate::{
2 self as gpui, AbsoluteLength, AlignContent, AlignItems, BorderStyle, CursorStyle,
3 DefiniteLength, Display, Fill, FlexDirection, FlexWrap, Font, FontFeatures, FontStyle,
4 FontWeight, GridPlacement, Hsla, JustifyContent, Length, SharedString, StrikethroughStyle,
5 StyleRefinement, TextAlign, TextOverflow, TextStyleRefinement, UnderlineStyle, WhiteSpace, px,
6 relative, rems,
7};
8pub use gpui_macros::{
9 border_style_methods, box_shadow_style_methods, cursor_style_methods, margin_style_methods,
10 overflow_style_methods, padding_style_methods, position_style_methods,
11 visibility_style_methods,
12};
13const ELLIPSIS: SharedString = SharedString::new_static("…");
14
15/// A trait for elements that can be styled.
16/// Use this to opt-in to a utility CSS-like styling API.
17// gate on rust-analyzer so rust-analyzer never needs to expand this macro, it takes up to 10 seconds to expand due to inefficiencies in rust-analyzers proc-macro srv
18#[cfg_attr(
19 all(any(feature = "inspector", debug_assertions), not(rust_analyzer)),
20 gpui_macros::derive_inspector_reflection
21)]
22pub trait Styled: Sized {
23 /// Returns a reference to the style memory of this element.
24 fn style(&mut self) -> &mut StyleRefinement;
25
26 gpui_macros::style_helpers!();
27 gpui_macros::visibility_style_methods!();
28 gpui_macros::margin_style_methods!();
29 gpui_macros::padding_style_methods!();
30 gpui_macros::position_style_methods!();
31 gpui_macros::overflow_style_methods!();
32 gpui_macros::cursor_style_methods!();
33 gpui_macros::border_style_methods!();
34 gpui_macros::box_shadow_style_methods!();
35
36 /// Sets the display type of the element to `block`.
37 /// [Docs](https://tailwindcss.com/docs/display)
38 fn block(mut self) -> Self {
39 self.style().display = Some(Display::Block);
40 self
41 }
42
43 /// Sets the display type of the element to `flex`.
44 /// [Docs](https://tailwindcss.com/docs/display)
45 fn flex(mut self) -> Self {
46 self.style().display = Some(Display::Flex);
47 self
48 }
49
50 /// Sets the display type of the element to `grid`.
51 /// [Docs](https://tailwindcss.com/docs/display)
52 fn grid(mut self) -> Self {
53 self.style().display = Some(Display::Grid);
54 self
55 }
56
57 /// Sets the display type of the element to `none`.
58 /// [Docs](https://tailwindcss.com/docs/display)
59 fn hidden(mut self) -> Self {
60 self.style().display = Some(Display::None);
61 self
62 }
63
64 /// Sets the whitespace of the element to `normal`.
65 /// [Docs](https://tailwindcss.com/docs/whitespace#normal)
66 fn whitespace_normal(mut self) -> Self {
67 self.text_style()
68 .get_or_insert_with(Default::default)
69 .white_space = Some(WhiteSpace::Normal);
70 self
71 }
72
73 /// Sets the whitespace of the element to `nowrap`.
74 /// [Docs](https://tailwindcss.com/docs/whitespace#nowrap)
75 fn whitespace_nowrap(mut self) -> Self {
76 self.text_style()
77 .get_or_insert_with(Default::default)
78 .white_space = Some(WhiteSpace::Nowrap);
79 self
80 }
81
82 /// Sets the truncate overflowing text with an ellipsis (…) if needed.
83 /// [Docs](https://tailwindcss.com/docs/text-overflow#ellipsis)
84 fn text_ellipsis(mut self) -> Self {
85 self.text_style()
86 .get_or_insert_with(Default::default)
87 .text_overflow = Some(TextOverflow::Truncate(ELLIPSIS));
88 self
89 }
90
91 /// Sets the text overflow behavior of the element.
92 fn text_overflow(mut self, overflow: TextOverflow) -> Self {
93 self.text_style()
94 .get_or_insert_with(Default::default)
95 .text_overflow = Some(overflow);
96 self
97 }
98
99 /// Set the text alignment of the element.
100 fn text_align(mut self, align: TextAlign) -> Self {
101 self.text_style()
102 .get_or_insert_with(Default::default)
103 .text_align = Some(align);
104 self
105 }
106
107 /// Sets the text alignment to left
108 fn text_left(mut self) -> Self {
109 self.text_align(TextAlign::Left)
110 }
111
112 /// Sets the text alignment to center
113 fn text_center(mut self) -> Self {
114 self.text_align(TextAlign::Center)
115 }
116
117 /// Sets the text alignment to right
118 fn text_right(mut self) -> Self {
119 self.text_align(TextAlign::Right)
120 }
121
122 /// Sets the truncate to prevent text from wrapping and truncate overflowing text with an ellipsis (…) if needed.
123 /// [Docs](https://tailwindcss.com/docs/text-overflow#truncate)
124 fn truncate(mut self) -> Self {
125 self.overflow_hidden().whitespace_nowrap().text_ellipsis()
126 }
127
128 /// Sets number of lines to show before truncating the text.
129 /// [Docs](https://tailwindcss.com/docs/line-clamp)
130 fn line_clamp(mut self, lines: usize) -> Self {
131 let mut text_style = self.text_style().get_or_insert_with(Default::default);
132 text_style.line_clamp = Some(lines);
133 self.overflow_hidden()
134 }
135
136 /// Sets the flex direction of the element to `column`.
137 /// [Docs](https://tailwindcss.com/docs/flex-direction#column)
138 fn flex_col(mut self) -> Self {
139 self.style().flex_direction = Some(FlexDirection::Column);
140 self
141 }
142
143 /// Sets the flex direction of the element to `column-reverse`.
144 /// [Docs](https://tailwindcss.com/docs/flex-direction#column-reverse)
145 fn flex_col_reverse(mut self) -> Self {
146 self.style().flex_direction = Some(FlexDirection::ColumnReverse);
147 self
148 }
149
150 /// Sets the flex direction of the element to `row`.
151 /// [Docs](https://tailwindcss.com/docs/flex-direction#row)
152 fn flex_row(mut self) -> Self {
153 self.style().flex_direction = Some(FlexDirection::Row);
154 self
155 }
156
157 /// Sets the flex direction of the element to `row-reverse`.
158 /// [Docs](https://tailwindcss.com/docs/flex-direction#row-reverse)
159 fn flex_row_reverse(mut self) -> Self {
160 self.style().flex_direction = Some(FlexDirection::RowReverse);
161 self
162 }
163
164 /// Sets the element to allow a flex item to grow and shrink as needed, ignoring its initial size.
165 /// [Docs](https://tailwindcss.com/docs/flex#flex-1)
166 fn flex_1(mut self) -> Self {
167 self.style().flex_grow = Some(1.);
168 self.style().flex_shrink = Some(1.);
169 self.style().flex_basis = Some(relative(0.).into());
170 self
171 }
172
173 /// Sets the element to allow a flex item to grow and shrink, taking into account its initial size.
174 /// [Docs](https://tailwindcss.com/docs/flex#auto)
175 fn flex_auto(mut self) -> Self {
176 self.style().flex_grow = Some(1.);
177 self.style().flex_shrink = Some(1.);
178 self.style().flex_basis = Some(Length::Auto);
179 self
180 }
181
182 /// Sets the element to allow a flex item to shrink but not grow, taking into account its initial size.
183 /// [Docs](https://tailwindcss.com/docs/flex#initial)
184 fn flex_initial(mut self) -> Self {
185 self.style().flex_grow = Some(0.);
186 self.style().flex_shrink = Some(1.);
187 self.style().flex_basis = Some(Length::Auto);
188 self
189 }
190
191 /// Sets the element to prevent a flex item from growing or shrinking.
192 /// [Docs](https://tailwindcss.com/docs/flex#none)
193 fn flex_none(mut self) -> Self {
194 self.style().flex_grow = Some(0.);
195 self.style().flex_shrink = Some(0.);
196 self
197 }
198
199 /// Sets the initial size of flex items for this element.
200 /// [Docs](https://tailwindcss.com/docs/flex-basis)
201 fn flex_basis(mut self, basis: impl Into<Length>) -> Self {
202 self.style().flex_basis = Some(basis.into());
203 self
204 }
205
206 /// Sets the element to allow a flex item to grow to fill any available space.
207 /// [Docs](https://tailwindcss.com/docs/flex-grow)
208 fn flex_grow(mut self) -> Self {
209 self.style().flex_grow = Some(1.);
210 self
211 }
212
213 /// Sets the element to allow a flex item to shrink if needed.
214 /// [Docs](https://tailwindcss.com/docs/flex-shrink)
215 fn flex_shrink(mut self) -> Self {
216 self.style().flex_shrink = Some(1.);
217 self
218 }
219
220 /// Sets the element to prevent a flex item from shrinking.
221 /// [Docs](https://tailwindcss.com/docs/flex-shrink#dont-shrink)
222 fn flex_shrink_0(mut self) -> Self {
223 self.style().flex_shrink = Some(0.);
224 self
225 }
226
227 /// Sets the element to allow flex items to wrap.
228 /// [Docs](https://tailwindcss.com/docs/flex-wrap#wrap-normally)
229 fn flex_wrap(mut self) -> Self {
230 self.style().flex_wrap = Some(FlexWrap::Wrap);
231 self
232 }
233
234 /// Sets the element wrap flex items in the reverse direction.
235 /// [Docs](https://tailwindcss.com/docs/flex-wrap#wrap-reversed)
236 fn flex_wrap_reverse(mut self) -> Self {
237 self.style().flex_wrap = Some(FlexWrap::WrapReverse);
238 self
239 }
240
241 /// Sets the element to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary.
242 /// [Docs](https://tailwindcss.com/docs/flex-wrap#dont-wrap)
243 fn flex_nowrap(mut self) -> Self {
244 self.style().flex_wrap = Some(FlexWrap::NoWrap);
245 self
246 }
247
248 /// Sets the element to align flex items to the start of the container's cross axis.
249 /// [Docs](https://tailwindcss.com/docs/align-items#start)
250 fn items_start(mut self) -> Self {
251 self.style().align_items = Some(AlignItems::FlexStart);
252 self
253 }
254
255 /// Sets the element to align flex items to the end of the container's cross axis.
256 /// [Docs](https://tailwindcss.com/docs/align-items#end)
257 fn items_end(mut self) -> Self {
258 self.style().align_items = Some(AlignItems::FlexEnd);
259 self
260 }
261
262 /// Sets the element to align flex items along the center of the container's cross axis.
263 /// [Docs](https://tailwindcss.com/docs/align-items#center)
264 fn items_center(mut self) -> Self {
265 self.style().align_items = Some(AlignItems::Center);
266 self
267 }
268
269 /// Sets the element to align flex items along the baseline of the container's cross axis.
270 /// [Docs](https://tailwindcss.com/docs/align-items#baseline)
271 fn items_baseline(mut self) -> Self {
272 self.style().align_items = Some(AlignItems::Baseline);
273 self
274 }
275
276 /// Sets the element to justify flex items against the start of the container's main axis.
277 /// [Docs](https://tailwindcss.com/docs/justify-content#start)
278 fn justify_start(mut self) -> Self {
279 self.style().justify_content = Some(JustifyContent::Start);
280 self
281 }
282
283 /// Sets the element to justify flex items against the end of the container's main axis.
284 /// [Docs](https://tailwindcss.com/docs/justify-content#end)
285 fn justify_end(mut self) -> Self {
286 self.style().justify_content = Some(JustifyContent::End);
287 self
288 }
289
290 /// Sets the element to justify flex items along the center of the container's main axis.
291 /// [Docs](https://tailwindcss.com/docs/justify-content#center)
292 fn justify_center(mut self) -> Self {
293 self.style().justify_content = Some(JustifyContent::Center);
294 self
295 }
296
297 /// Sets the element to justify flex items along the container's main axis
298 /// such that there is an equal amount of space between each item.
299 /// [Docs](https://tailwindcss.com/docs/justify-content#space-between)
300 fn justify_between(mut self) -> Self {
301 self.style().justify_content = Some(JustifyContent::SpaceBetween);
302 self
303 }
304
305 /// Sets the element to justify items along the container's main axis such
306 /// that there is an equal amount of space on each side of each item.
307 /// [Docs](https://tailwindcss.com/docs/justify-content#space-around)
308 fn justify_around(mut self) -> Self {
309 self.style().justify_content = Some(JustifyContent::SpaceAround);
310 self
311 }
312
313 /// Sets the element to justify items along the container's main axis such
314 /// that there is an equal amount of space around each item, but also
315 /// accounting for the doubling of space you would normally see between
316 /// each item when using justify-around.
317 /// [Docs](https://tailwindcss.com/docs/justify-content#space-evenly)
318 fn justify_evenly(mut self) -> Self {
319 self.style().justify_content = Some(JustifyContent::SpaceEvenly);
320 self
321 }
322
323 /// Sets the element to pack content items in their default position as if no align-content value was set.
324 /// [Docs](https://tailwindcss.com/docs/align-content#normal)
325 fn content_normal(mut self) -> Self {
326 self.style().align_content = None;
327 self
328 }
329
330 /// Sets the element to pack content items in the center of the container's cross axis.
331 /// [Docs](https://tailwindcss.com/docs/align-content#center)
332 fn content_center(mut self) -> Self {
333 self.style().align_content = Some(AlignContent::Center);
334 self
335 }
336
337 /// Sets the element to pack content items against the start of the container's cross axis.
338 /// [Docs](https://tailwindcss.com/docs/align-content#start)
339 fn content_start(mut self) -> Self {
340 self.style().align_content = Some(AlignContent::FlexStart);
341 self
342 }
343
344 /// Sets the element to pack content items against the end of the container's cross axis.
345 /// [Docs](https://tailwindcss.com/docs/align-content#end)
346 fn content_end(mut self) -> Self {
347 self.style().align_content = Some(AlignContent::FlexEnd);
348 self
349 }
350
351 /// Sets the element to pack content items along the container's cross axis
352 /// such that there is an equal amount of space between each item.
353 /// [Docs](https://tailwindcss.com/docs/align-content#space-between)
354 fn content_between(mut self) -> Self {
355 self.style().align_content = Some(AlignContent::SpaceBetween);
356 self
357 }
358
359 /// Sets the element to pack content items along the container's cross axis
360 /// such that there is an equal amount of space on each side of each item.
361 /// [Docs](https://tailwindcss.com/docs/align-content#space-around)
362 fn content_around(mut self) -> Self {
363 self.style().align_content = Some(AlignContent::SpaceAround);
364 self
365 }
366
367 /// Sets the element to pack content items along the container's cross axis
368 /// such that there is an equal amount of space between each item.
369 /// [Docs](https://tailwindcss.com/docs/align-content#space-evenly)
370 fn content_evenly(mut self) -> Self {
371 self.style().align_content = Some(AlignContent::SpaceEvenly);
372 self
373 }
374
375 /// Sets the element to allow content items to fill the available space along the container's cross axis.
376 /// [Docs](https://tailwindcss.com/docs/align-content#stretch)
377 fn content_stretch(mut self) -> Self {
378 self.style().align_content = Some(AlignContent::Stretch);
379 self
380 }
381
382 /// Sets the background color of the element.
383 fn bg<F>(mut self, fill: F) -> Self
384 where
385 F: Into<Fill>,
386 Self: Sized,
387 {
388 self.style().background = Some(fill.into());
389 self
390 }
391
392 /// Sets the border style of the element.
393 fn border_dashed(mut self) -> Self {
394 self.style().border_style = Some(BorderStyle::Dashed);
395 self
396 }
397
398 /// Returns a mutable reference to the text style that has been configured on this element.
399 fn text_style(&mut self) -> &mut Option<TextStyleRefinement> {
400 let style: &mut StyleRefinement = self.style();
401 &mut style.text
402 }
403
404 /// Sets the text color of this element.
405 ///
406 /// This value cascades to its child elements.
407 fn text_color(mut self, color: impl Into<Hsla>) -> Self {
408 self.text_style().get_or_insert_with(Default::default).color = Some(color.into());
409 self
410 }
411
412 /// Sets the font weight of this element
413 ///
414 /// This value cascades to its child elements.
415 fn font_weight(mut self, weight: FontWeight) -> Self {
416 self.text_style()
417 .get_or_insert_with(Default::default)
418 .font_weight = Some(weight);
419 self
420 }
421
422 /// Sets the background color of this element.
423 ///
424 /// This value cascades to its child elements.
425 fn text_bg(mut self, bg: impl Into<Hsla>) -> Self {
426 self.text_style()
427 .get_or_insert_with(Default::default)
428 .background_color = Some(bg.into());
429 self
430 }
431
432 /// Sets the text size of this element.
433 ///
434 /// This value cascades to its child elements.
435 fn text_size(mut self, size: impl Into<AbsoluteLength>) -> Self {
436 self.text_style()
437 .get_or_insert_with(Default::default)
438 .font_size = Some(size.into());
439 self
440 }
441
442 /// Sets the text size to 'extra small'.
443 /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
444 fn text_xs(mut self) -> Self {
445 self.text_style()
446 .get_or_insert_with(Default::default)
447 .font_size = Some(rems(0.75).into());
448 self
449 }
450
451 /// Sets the text size to 'small'.
452 /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
453 fn text_sm(mut self) -> Self {
454 self.text_style()
455 .get_or_insert_with(Default::default)
456 .font_size = Some(rems(0.875).into());
457 self
458 }
459
460 /// Sets the text size to 'base'.
461 /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
462 fn text_base(mut self) -> Self {
463 self.text_style()
464 .get_or_insert_with(Default::default)
465 .font_size = Some(rems(1.0).into());
466 self
467 }
468
469 /// Sets the text size to 'large'.
470 /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
471 fn text_lg(mut self) -> Self {
472 self.text_style()
473 .get_or_insert_with(Default::default)
474 .font_size = Some(rems(1.125).into());
475 self
476 }
477
478 /// Sets the text size to 'extra large'.
479 /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
480 fn text_xl(mut self) -> Self {
481 self.text_style()
482 .get_or_insert_with(Default::default)
483 .font_size = Some(rems(1.25).into());
484 self
485 }
486
487 /// Sets the text size to 'extra extra large'.
488 /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
489 fn text_2xl(mut self) -> Self {
490 self.text_style()
491 .get_or_insert_with(Default::default)
492 .font_size = Some(rems(1.5).into());
493 self
494 }
495
496 /// Sets the text size to 'extra extra extra large'.
497 /// [Docs](https://tailwindcss.com/docs/font-size#setting-the-font-size)
498 fn text_3xl(mut self) -> Self {
499 self.text_style()
500 .get_or_insert_with(Default::default)
501 .font_size = Some(rems(1.875).into());
502 self
503 }
504
505 /// Sets the font style of the element to italic.
506 /// [Docs](https://tailwindcss.com/docs/font-style#italicizing-text)
507 fn italic(mut self) -> Self {
508 self.text_style()
509 .get_or_insert_with(Default::default)
510 .font_style = Some(FontStyle::Italic);
511 self
512 }
513
514 /// Sets the font style of the element to normal (not italic).
515 /// [Docs](https://tailwindcss.com/docs/font-style#displaying-text-normally)
516 fn not_italic(mut self) -> Self {
517 self.text_style()
518 .get_or_insert_with(Default::default)
519 .font_style = Some(FontStyle::Normal);
520 self
521 }
522
523 /// Sets the text decoration to underline.
524 /// [Docs](https://tailwindcss.com/docs/text-decoration-line#underling-text)
525 fn underline(mut self) -> Self {
526 let style = self.text_style().get_or_insert_with(Default::default);
527 style.underline = Some(UnderlineStyle {
528 thickness: px(1.),
529 ..Default::default()
530 });
531 self
532 }
533
534 /// Sets the decoration of the text to have a line through it.
535 /// [Docs](https://tailwindcss.com/docs/text-decoration-line#adding-a-line-through-text)
536 fn line_through(mut self) -> Self {
537 let style = self.text_style().get_or_insert_with(Default::default);
538 style.strikethrough = Some(StrikethroughStyle {
539 thickness: px(1.),
540 ..Default::default()
541 });
542 self
543 }
544
545 /// Removes the text decoration on this element.
546 ///
547 /// This value cascades to its child elements.
548 fn text_decoration_none(mut self) -> Self {
549 self.text_style()
550 .get_or_insert_with(Default::default)
551 .underline = None;
552 self
553 }
554
555 /// Sets the color for the underline on this element
556 fn text_decoration_color(mut self, color: impl Into<Hsla>) -> Self {
557 let style = self.text_style().get_or_insert_with(Default::default);
558 let underline = style.underline.get_or_insert_with(Default::default);
559 underline.color = Some(color.into());
560 self
561 }
562
563 /// Sets the text decoration style to a solid line.
564 /// [Docs](https://tailwindcss.com/docs/text-decoration-style)
565 fn text_decoration_solid(mut self) -> Self {
566 let style = self.text_style().get_or_insert_with(Default::default);
567 let underline = style.underline.get_or_insert_with(Default::default);
568 underline.wavy = false;
569 self
570 }
571
572 /// Sets the text decoration style to a wavy line.
573 /// [Docs](https://tailwindcss.com/docs/text-decoration-style)
574 fn text_decoration_wavy(mut self) -> Self {
575 let style = self.text_style().get_or_insert_with(Default::default);
576 let underline = style.underline.get_or_insert_with(Default::default);
577 underline.wavy = true;
578 self
579 }
580
581 /// Sets the text decoration to be 0px thick.
582 /// [Docs](https://tailwindcss.com/docs/text-decoration-thickness)
583 fn text_decoration_0(mut self) -> Self {
584 let style = self.text_style().get_or_insert_with(Default::default);
585 let underline = style.underline.get_or_insert_with(Default::default);
586 underline.thickness = px(0.);
587 self
588 }
589
590 /// Sets the text decoration to be 1px thick.
591 /// [Docs](https://tailwindcss.com/docs/text-decoration-thickness)
592 fn text_decoration_1(mut self) -> Self {
593 let style = self.text_style().get_or_insert_with(Default::default);
594 let underline = style.underline.get_or_insert_with(Default::default);
595 underline.thickness = px(1.);
596 self
597 }
598
599 /// Sets the text decoration to be 2px thick.
600 /// [Docs](https://tailwindcss.com/docs/text-decoration-thickness)
601 fn text_decoration_2(mut self) -> Self {
602 let style = self.text_style().get_or_insert_with(Default::default);
603 let underline = style.underline.get_or_insert_with(Default::default);
604 underline.thickness = px(2.);
605 self
606 }
607
608 /// Sets the text decoration to be 4px thick.
609 /// [Docs](https://tailwindcss.com/docs/text-decoration-thickness)
610 fn text_decoration_4(mut self) -> Self {
611 let style = self.text_style().get_or_insert_with(Default::default);
612 let underline = style.underline.get_or_insert_with(Default::default);
613 underline.thickness = px(4.);
614 self
615 }
616
617 /// Sets the text decoration to be 8px thick.
618 /// [Docs](https://tailwindcss.com/docs/text-decoration-thickness)
619 fn text_decoration_8(mut self) -> Self {
620 let style = self.text_style().get_or_insert_with(Default::default);
621 let underline = style.underline.get_or_insert_with(Default::default);
622 underline.thickness = px(8.);
623 self
624 }
625
626 /// Sets the font family of this element and its children.
627 fn font_family(mut self, family_name: impl Into<SharedString>) -> Self {
628 self.text_style()
629 .get_or_insert_with(Default::default)
630 .font_family = Some(family_name.into());
631 self
632 }
633
634 /// Sets the font features of this element and its children.
635 fn font_features(mut self, features: FontFeatures) -> Self {
636 self.text_style()
637 .get_or_insert_with(Default::default)
638 .font_features = Some(features);
639 self
640 }
641
642 /// Sets the font of this element and its children.
643 fn font(mut self, font: Font) -> Self {
644 let Font {
645 family,
646 features,
647 fallbacks,
648 weight,
649 style,
650 } = font;
651
652 let text_style = self.text_style().get_or_insert_with(Default::default);
653 text_style.font_family = Some(family);
654 text_style.font_features = Some(features);
655 text_style.font_weight = Some(weight);
656 text_style.font_style = Some(style);
657 text_style.font_fallbacks = fallbacks;
658
659 self
660 }
661
662 /// Sets the line height of this element and its children.
663 fn line_height(mut self, line_height: impl Into<DefiniteLength>) -> Self {
664 self.text_style()
665 .get_or_insert_with(Default::default)
666 .line_height = Some(line_height.into());
667 self
668 }
669
670 /// Sets the opacity of this element and its children.
671 fn opacity(mut self, opacity: f32) -> Self {
672 self.style().opacity = Some(opacity);
673 self
674 }
675
676 /// Sets the grid columns of this element.
677 fn grid_cols(mut self, cols: u16) -> Self {
678 self.style().grid_cols = Some(cols);
679 self
680 }
681
682 /// Sets the grid rows of this element.
683 fn grid_rows(mut self, rows: u16) -> Self {
684 self.style().grid_rows = Some(rows);
685 self
686 }
687
688 /// Sets the column start of this element.
689 fn col_start(mut self, start: i16) -> Self {
690 let grid_location = self.style().grid_location_mut();
691 grid_location.column.start = GridPlacement::Line(start);
692 self
693 }
694
695 /// Sets the column start of this element to auto.
696 fn col_start_auto(mut self) -> Self {
697 let grid_location = self.style().grid_location_mut();
698 grid_location.column.start = GridPlacement::Auto;
699 self
700 }
701
702 /// Sets the column end of this element.
703 fn col_end(mut self, end: i16) -> Self {
704 let grid_location = self.style().grid_location_mut();
705 grid_location.column.end = GridPlacement::Line(end);
706 self
707 }
708
709 /// Sets the column end of this element to auto.
710 fn col_end_auto(mut self) -> Self {
711 let grid_location = self.style().grid_location_mut();
712 grid_location.column.end = GridPlacement::Auto;
713 self
714 }
715
716 /// Sets the column span of this element.
717 fn col_span(mut self, span: u16) -> Self {
718 let grid_location = self.style().grid_location_mut();
719 grid_location.column = GridPlacement::Span(span)..GridPlacement::Span(span);
720 self
721 }
722
723 /// Sets the row span of this element.
724 fn col_span_full(mut self) -> Self {
725 let grid_location = self.style().grid_location_mut();
726 grid_location.column = GridPlacement::Line(1)..GridPlacement::Line(-1);
727 self
728 }
729
730 /// Sets the row start of this element.
731 fn row_start(mut self, start: i16) -> Self {
732 let grid_location = self.style().grid_location_mut();
733 grid_location.row.start = GridPlacement::Line(start);
734 self
735 }
736
737 /// Sets the row start of this element to "auto"
738 fn row_start_auto(mut self) -> Self {
739 let grid_location = self.style().grid_location_mut();
740 grid_location.row.start = GridPlacement::Auto;
741 self
742 }
743
744 /// Sets the row end of this element.
745 fn row_end(mut self, end: i16) -> Self {
746 let grid_location = self.style().grid_location_mut();
747 grid_location.row.end = GridPlacement::Line(end);
748 self
749 }
750
751 /// Sets the row end of this element to "auto"
752 fn row_end_auto(mut self) -> Self {
753 let grid_location = self.style().grid_location_mut();
754 grid_location.row.end = GridPlacement::Auto;
755 self
756 }
757
758 /// Sets the row span of this element.
759 fn row_span(mut self, span: u16) -> Self {
760 let grid_location = self.style().grid_location_mut();
761 grid_location.row = GridPlacement::Span(span)..GridPlacement::Span(span);
762 self
763 }
764
765 /// Sets the row span of this element.
766 fn row_span_full(mut self) -> Self {
767 let grid_location = self.style().grid_location_mut();
768 grid_location.row = GridPlacement::Line(1)..GridPlacement::Line(-1);
769 self
770 }
771
772 /// Draws a debug border around this element.
773 #[cfg(debug_assertions)]
774 fn debug(mut self) -> Self {
775 self.style().debug = Some(true);
776 self
777 }
778
779 /// Draws a debug border on all conforming elements below this element.
780 #[cfg(debug_assertions)]
781 fn debug_below(mut self) -> Self {
782 self.style().debug_below = Some(true);
783 self
784 }
785}