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