azul_layout/widgets/
tabs.rs

1//! Native-styled tab widget consisting of a [`TabHeader`] (the clickable tab bar)
2//! and [`TabContent`] (the panel shown for the active tab). Styling emulates
3//! the Windows-native tab control appearance via inline CSS constants.
4
5use azul_core::{
6    callbacks::{CoreCallback, CoreCallbackData, Update},
7    dom::{Dom, DomVec, EventFilter, HoverEventFilter, IdOrClass, IdOrClass::Class, IdOrClassVec},
8    refany::RefAny,
9};
10use azul_css::{
11    dynamic_selector::{CssPropertyWithConditions, CssPropertyWithConditionsVec},
12    props::{
13        basic::*,
14        layout::*,
15        property::{CssProperty, *},
16        style::*,
17    },
18    *,
19};
20use azul_css::css::BoxOrStatic;
21
22use crate::callbacks::{Callback, CallbackInfo};
23
24const STRING_16146701490593874959: AzString = AzString::from_const_str("system:ui");
25const STYLE_BACKGROUND_CONTENT_8560341490937422656_ITEMS: &[StyleBackgroundContent] =
26    &[StyleBackgroundContent::LinearGradient(LinearGradient {
27        direction: Direction::FromTo(DirectionCorners {
28            dir_from: DirectionCorner::Top,
29            dir_to: DirectionCorner::Bottom,
30        }),
31        extend_mode: ExtendMode::Clamp,
32        stops: NormalizedLinearColorStopVec::from_const_slice(
33            LINEAR_COLOR_STOP_1400070954008106244_ITEMS,
34        ),
35    })];
36
37const STYLE_BACKGROUND_CONTENT_15534185073326444643_ITEMS: &[StyleBackgroundContent] =
38    &[StyleBackgroundContent::LinearGradient(LinearGradient {
39        direction: Direction::FromTo(DirectionCorners {
40            dir_from: DirectionCorner::Top,
41            dir_to: DirectionCorner::Bottom,
42        }),
43        extend_mode: ExtendMode::Clamp,
44        stops: NormalizedLinearColorStopVec::from_const_slice(
45            LINEAR_COLOR_STOP_16259001466875079747_ITEMS,
46        ),
47    })];
48const STYLE_BACKGROUND_CONTENT_16746671892555275291_ITEMS: &[StyleBackgroundContent] =
49    &[StyleBackgroundContent::Color(ColorU {
50        r: 255,
51        g: 255,
52        b: 255,
53        a: 255,
54    })];
55const STYLE_FONT_FAMILY_8122988506401935406_ITEMS: &[StyleFontFamily] =
56    &[StyleFontFamily::System(STRING_16146701490593874959)];
57const LINEAR_COLOR_STOP_1400070954008106244_ITEMS: &[NormalizedLinearColorStop] = &[
58    NormalizedLinearColorStop {
59        offset: PercentageValue::const_new(0),
60        color: ColorOrSystem::color(ColorU {
61            r: 240,
62            g: 240,
63            b: 240,
64            a: 255,
65        }),
66    },
67    NormalizedLinearColorStop {
68        offset: PercentageValue::const_new(100),
69        color: ColorOrSystem::color(ColorU {
70            r: 229,
71            g: 229,
72            b: 229,
73            a: 255,
74        }),
75    },
76];
77const LINEAR_COLOR_STOP_16259001466875079747_ITEMS: &[NormalizedLinearColorStop] = &[
78    NormalizedLinearColorStop {
79        offset: PercentageValue::const_new(0),
80        color: ColorOrSystem::color(ColorU {
81            r: 236,
82            g: 244,
83            b: 252,
84            a: 255,
85        }),
86    },
87    NormalizedLinearColorStop {
88        offset: PercentageValue::const_new(100),
89        color: ColorOrSystem::color(ColorU {
90            r: 221,
91            g: 237,
92            b: 252,
93            a: 255,
94        }),
95    },
96];
97
98const CSS_MATCH_13824480602841492081_PROPERTIES: &[CssPropertyWithConditions] = &[
99    // .__azul-native-tabs-header p.__azul-native-tabs-tab-not-active:hover
100    CssPropertyWithConditions::on_hover(CssProperty::BorderBottomWidth(
101        LayoutBorderBottomWidthValue::Exact(LayoutBorderBottomWidth {
102            inner: PixelValue::const_px(1),
103        }),
104    )),
105    CssPropertyWithConditions::on_hover(CssProperty::BorderLeftWidth(
106        LayoutBorderLeftWidthValue::Exact(LayoutBorderLeftWidth {
107            inner: PixelValue::const_px(1),
108        }),
109    )),
110    CssPropertyWithConditions::on_hover(CssProperty::BorderRightWidth(
111        LayoutBorderRightWidthValue::Exact(LayoutBorderRightWidth {
112            inner: PixelValue::const_px(1),
113        }),
114    )),
115    CssPropertyWithConditions::on_hover(CssProperty::BorderTopWidth(
116        LayoutBorderTopWidthValue::Exact(LayoutBorderTopWidth {
117            inner: PixelValue::const_px(1),
118        }),
119    )),
120    CssPropertyWithConditions::on_hover(CssProperty::BorderBottomStyle(
121        StyleBorderBottomStyleValue::Exact(StyleBorderBottomStyle {
122            inner: BorderStyle::Solid,
123        }),
124    )),
125    CssPropertyWithConditions::on_hover(CssProperty::BorderLeftStyle(
126        StyleBorderLeftStyleValue::Exact(StyleBorderLeftStyle {
127            inner: BorderStyle::Solid,
128        }),
129    )),
130    CssPropertyWithConditions::on_hover(CssProperty::BorderRightStyle(
131        StyleBorderRightStyleValue::Exact(StyleBorderRightStyle {
132            inner: BorderStyle::Solid,
133        }),
134    )),
135    CssPropertyWithConditions::on_hover(CssProperty::BorderTopStyle(
136        StyleBorderTopStyleValue::Exact(StyleBorderTopStyle {
137            inner: BorderStyle::Solid,
138        }),
139    )),
140    CssPropertyWithConditions::on_hover(CssProperty::BorderBottomColor(
141        StyleBorderBottomColorValue::Exact(StyleBorderBottomColor {
142            inner: ColorU {
143                r: 126,
144                g: 180,
145                b: 234,
146                a: 255,
147            },
148        }),
149    )),
150    CssPropertyWithConditions::on_hover(CssProperty::BorderLeftColor(
151        StyleBorderLeftColorValue::Exact(StyleBorderLeftColor {
152            inner: ColorU {
153                r: 126,
154                g: 180,
155                b: 234,
156                a: 255,
157            },
158        }),
159    )),
160    CssPropertyWithConditions::on_hover(CssProperty::BorderRightColor(
161        StyleBorderRightColorValue::Exact(StyleBorderRightColor {
162            inner: ColorU {
163                r: 126,
164                g: 180,
165                b: 234,
166                a: 255,
167            },
168        }),
169    )),
170    CssPropertyWithConditions::on_hover(CssProperty::BorderTopColor(
171        StyleBorderTopColorValue::Exact(StyleBorderTopColor {
172            inner: ColorU {
173                r: 126,
174                g: 180,
175                b: 234,
176                a: 255,
177            },
178        }),
179    )),
180    CssPropertyWithConditions::on_hover(CssProperty::BackgroundContent(
181        StyleBackgroundContentVecValue::Exact(StyleBackgroundContentVec::from_const_slice(
182            STYLE_BACKGROUND_CONTENT_15534185073326444643_ITEMS,
183        )),
184    )),
185    // .__azul-native-tabs-header p.__azul-native-tabs-tab-noleftborder
186    CssPropertyWithConditions::simple(CssProperty::BorderLeftWidth(
187        LayoutBorderLeftWidthValue::None,
188    )),
189    CssPropertyWithConditions::simple(CssProperty::BorderLeftStyle(
190        StyleBorderLeftStyleValue::None,
191    )),
192    CssPropertyWithConditions::simple(CssProperty::BorderLeftColor(
193        StyleBorderLeftColorValue::None,
194    )),
195    // .__azul-native-tabs-header p.__azul-native-tabs-tab-not-active
196    CssPropertyWithConditions::simple(CssProperty::PaddingRight(LayoutPaddingRightValue::Exact(
197        LayoutPaddingRight {
198            inner: PixelValue::const_px(5),
199        },
200    ))),
201    CssPropertyWithConditions::simple(CssProperty::PaddingLeft(LayoutPaddingLeftValue::Exact(
202        LayoutPaddingLeft {
203            inner: PixelValue::const_px(5),
204        },
205    ))),
206    CssPropertyWithConditions::simple(CssProperty::PaddingBottom(LayoutPaddingBottomValue::Exact(
207        LayoutPaddingBottom {
208            inner: PixelValue::const_px(1),
209        },
210    ))),
211    CssPropertyWithConditions::simple(CssProperty::PaddingTop(LayoutPaddingTopValue::Exact(
212        LayoutPaddingTop {
213            inner: PixelValue::const_px(1),
214        },
215    ))),
216    CssPropertyWithConditions::simple(CssProperty::MarginTop(LayoutMarginTopValue::Exact(
217        LayoutMarginTop {
218            inner: PixelValue::const_px(2),
219        },
220    ))),
221    // .__azul-native-tabs-header p
222    CssPropertyWithConditions::simple(CssProperty::TextAlign(StyleTextAlignValue::Exact(
223        StyleTextAlign::Center,
224    ))),
225    CssPropertyWithConditions::simple(CssProperty::Height(LayoutHeightValue::Exact(
226        LayoutHeight::Px(PixelValue::const_px(21)),
227    ))),
228    CssPropertyWithConditions::simple(CssProperty::BorderBottomWidth(
229        LayoutBorderBottomWidthValue::Exact(LayoutBorderBottomWidth {
230            inner: PixelValue::const_px(1),
231        }),
232    )),
233    CssPropertyWithConditions::simple(CssProperty::BorderLeftWidth(
234        LayoutBorderLeftWidthValue::Exact(LayoutBorderLeftWidth {
235            inner: PixelValue::const_px(1),
236        }),
237    )),
238    CssPropertyWithConditions::simple(CssProperty::BorderRightWidth(
239        LayoutBorderRightWidthValue::Exact(LayoutBorderRightWidth {
240            inner: PixelValue::const_px(1),
241        }),
242    )),
243    CssPropertyWithConditions::simple(CssProperty::BorderTopWidth(
244        LayoutBorderTopWidthValue::Exact(LayoutBorderTopWidth {
245            inner: PixelValue::const_px(1),
246        }),
247    )),
248    CssPropertyWithConditions::simple(CssProperty::BorderBottomStyle(
249        StyleBorderBottomStyleValue::Exact(StyleBorderBottomStyle {
250            inner: BorderStyle::Solid,
251        }),
252    )),
253    CssPropertyWithConditions::simple(CssProperty::BorderLeftStyle(
254        StyleBorderLeftStyleValue::Exact(StyleBorderLeftStyle {
255            inner: BorderStyle::Solid,
256        }),
257    )),
258    CssPropertyWithConditions::simple(CssProperty::BorderRightStyle(
259        StyleBorderRightStyleValue::Exact(StyleBorderRightStyle {
260            inner: BorderStyle::Solid,
261        }),
262    )),
263    CssPropertyWithConditions::simple(CssProperty::BorderTopStyle(
264        StyleBorderTopStyleValue::Exact(StyleBorderTopStyle {
265            inner: BorderStyle::Solid,
266        }),
267    )),
268    CssPropertyWithConditions::simple(CssProperty::BorderBottomColor(
269        StyleBorderBottomColorValue::Exact(StyleBorderBottomColor {
270            inner: ColorU {
271                r: 172,
272                g: 172,
273                b: 172,
274                a: 255,
275            },
276        }),
277    )),
278    CssPropertyWithConditions::simple(CssProperty::BorderLeftColor(
279        StyleBorderLeftColorValue::Exact(StyleBorderLeftColor {
280            inner: ColorU {
281                r: 172,
282                g: 172,
283                b: 172,
284                a: 255,
285            },
286        }),
287    )),
288    CssPropertyWithConditions::simple(CssProperty::BorderRightColor(
289        StyleBorderRightColorValue::Exact(StyleBorderRightColor {
290            inner: ColorU {
291                r: 172,
292                g: 172,
293                b: 172,
294                a: 255,
295            },
296        }),
297    )),
298    CssPropertyWithConditions::simple(CssProperty::BorderTopColor(
299        StyleBorderTopColorValue::Exact(StyleBorderTopColor {
300            inner: ColorU {
301                r: 172,
302                g: 172,
303                b: 172,
304                a: 255,
305            },
306        }),
307    )),
308    CssPropertyWithConditions::simple(CssProperty::BackgroundContent(
309        StyleBackgroundContentVecValue::Exact(StyleBackgroundContentVec::from_const_slice(
310            STYLE_BACKGROUND_CONTENT_8560341490937422656_ITEMS,
311        )),
312    )),
313    CssPropertyWithConditions::simple(CssProperty::AlignItems(LayoutAlignItemsValue::Exact(
314        LayoutAlignItems::Center,
315    ))),
316];
317const CSS_MATCH_13824480602841492081: CssPropertyWithConditionsVec =
318    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_13824480602841492081_PROPERTIES);
319
320const CSS_MATCH_14575853790110873394_PROPERTIES: &[CssPropertyWithConditions] = &[
321    // .__azul-native-tabs-header p.__azul-native-tabs-tab-active
322    CssPropertyWithConditions::simple(CssProperty::PaddingRight(LayoutPaddingRightValue::Exact(
323        LayoutPaddingRight {
324            inner: PixelValue::const_px(7),
325        },
326    ))),
327    CssPropertyWithConditions::simple(CssProperty::PaddingLeft(LayoutPaddingLeftValue::Exact(
328        LayoutPaddingLeft {
329            inner: PixelValue::const_px(7),
330        },
331    ))),
332    CssPropertyWithConditions::simple(CssProperty::PaddingBottom(LayoutPaddingBottomValue::Exact(
333        LayoutPaddingBottom {
334            inner: PixelValue::const_px(3),
335        },
336    ))),
337    CssPropertyWithConditions::simple(CssProperty::PaddingTop(LayoutPaddingTopValue::Exact(
338        LayoutPaddingTop {
339            inner: PixelValue::const_px(3),
340        },
341    ))),
342    CssPropertyWithConditions::simple(CssProperty::Height(LayoutHeightValue::Exact(
343        LayoutHeight::Px(PixelValue::const_px(23)),
344    ))),
345    CssPropertyWithConditions::simple(CssProperty::BoxSizing(LayoutBoxSizingValue::Exact(
346        LayoutBoxSizing::ContentBox,
347    ))),
348    CssPropertyWithConditions::simple(CssProperty::BorderBottomWidth(
349        LayoutBorderBottomWidthValue::Exact(LayoutBorderBottomWidth {
350            inner: PixelValue::const_px(1),
351        }),
352    )),
353    CssPropertyWithConditions::simple(CssProperty::BorderBottomStyle(
354        StyleBorderBottomStyleValue::Exact(StyleBorderBottomStyle {
355            inner: BorderStyle::Solid,
356        }),
357    )),
358    CssPropertyWithConditions::simple(CssProperty::BorderBottomColor(
359        StyleBorderBottomColorValue::Exact(StyleBorderBottomColor {
360            inner: ColorU {
361                r: 255,
362                g: 255,
363                b: 255,
364                a: 255,
365            },
366        }),
367    )),
368    CssPropertyWithConditions::simple(CssProperty::BackgroundContent(
369        StyleBackgroundContentVecValue::Exact(StyleBackgroundContentVec::from_const_slice(
370            STYLE_BACKGROUND_CONTENT_16746671892555275291_ITEMS,
371        )),
372    )),
373    // .__azul-native-tabs-header p
374    CssPropertyWithConditions::simple(CssProperty::TextAlign(StyleTextAlignValue::Exact(
375        StyleTextAlign::Center,
376    ))),
377    CssPropertyWithConditions::simple(CssProperty::Height(LayoutHeightValue::Exact(
378        LayoutHeight::Px(PixelValue::const_px(21)),
379    ))),
380    CssPropertyWithConditions::simple(CssProperty::BorderBottomWidth(
381        LayoutBorderBottomWidthValue::Exact(LayoutBorderBottomWidth {
382            inner: PixelValue::const_px(1),
383        }),
384    )),
385    CssPropertyWithConditions::simple(CssProperty::BorderLeftWidth(
386        LayoutBorderLeftWidthValue::Exact(LayoutBorderLeftWidth {
387            inner: PixelValue::const_px(1),
388        }),
389    )),
390    CssPropertyWithConditions::simple(CssProperty::BorderRightWidth(
391        LayoutBorderRightWidthValue::Exact(LayoutBorderRightWidth {
392            inner: PixelValue::const_px(1),
393        }),
394    )),
395    CssPropertyWithConditions::simple(CssProperty::BorderTopWidth(
396        LayoutBorderTopWidthValue::Exact(LayoutBorderTopWidth {
397            inner: PixelValue::const_px(1),
398        }),
399    )),
400    CssPropertyWithConditions::simple(CssProperty::BorderBottomStyle(
401        StyleBorderBottomStyleValue::Exact(StyleBorderBottomStyle {
402            inner: BorderStyle::Solid,
403        }),
404    )),
405    CssPropertyWithConditions::simple(CssProperty::BorderLeftStyle(
406        StyleBorderLeftStyleValue::Exact(StyleBorderLeftStyle {
407            inner: BorderStyle::Solid,
408        }),
409    )),
410    CssPropertyWithConditions::simple(CssProperty::BorderRightStyle(
411        StyleBorderRightStyleValue::Exact(StyleBorderRightStyle {
412            inner: BorderStyle::Solid,
413        }),
414    )),
415    CssPropertyWithConditions::simple(CssProperty::BorderTopStyle(
416        StyleBorderTopStyleValue::Exact(StyleBorderTopStyle {
417            inner: BorderStyle::Solid,
418        }),
419    )),
420    CssPropertyWithConditions::simple(CssProperty::BorderBottomColor(
421        StyleBorderBottomColorValue::Exact(StyleBorderBottomColor {
422            inner: ColorU {
423                r: 172,
424                g: 172,
425                b: 172,
426                a: 255,
427            },
428        }),
429    )),
430    CssPropertyWithConditions::simple(CssProperty::BorderLeftColor(
431        StyleBorderLeftColorValue::Exact(StyleBorderLeftColor {
432            inner: ColorU {
433                r: 172,
434                g: 172,
435                b: 172,
436                a: 255,
437            },
438        }),
439    )),
440    CssPropertyWithConditions::simple(CssProperty::BorderRightColor(
441        StyleBorderRightColorValue::Exact(StyleBorderRightColor {
442            inner: ColorU {
443                r: 172,
444                g: 172,
445                b: 172,
446                a: 255,
447            },
448        }),
449    )),
450    CssPropertyWithConditions::simple(CssProperty::BorderTopColor(
451        StyleBorderTopColorValue::Exact(StyleBorderTopColor {
452            inner: ColorU {
453                r: 172,
454                g: 172,
455                b: 172,
456                a: 255,
457            },
458        }),
459    )),
460    CssPropertyWithConditions::simple(CssProperty::BackgroundContent(
461        StyleBackgroundContentVecValue::Exact(StyleBackgroundContentVec::from_const_slice(
462            STYLE_BACKGROUND_CONTENT_8560341490937422656_ITEMS,
463        )),
464    )),
465    CssPropertyWithConditions::simple(CssProperty::AlignItems(LayoutAlignItemsValue::Exact(
466        LayoutAlignItems::Center,
467    ))),
468];
469const CSS_MATCH_14575853790110873394: CssPropertyWithConditionsVec =
470    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_14575853790110873394_PROPERTIES);
471
472const CSS_MATCH_17290739305197504468_PROPERTIES: &[CssPropertyWithConditions] = &[
473    // .__azul-native-tabs-header .__azul-native-tabs-before-tabs
474    CssPropertyWithConditions::simple(CssProperty::Width(LayoutWidthValue::Exact(
475        LayoutWidth::Px(PixelValue::const_px(2)),
476    ))),
477    CssPropertyWithConditions::simple(CssProperty::FlexGrow(LayoutFlexGrowValue::Exact(
478        LayoutFlexGrow {
479            inner: FloatValue::const_new(1),
480        },
481    ))),
482    CssPropertyWithConditions::simple(CssProperty::BorderBottomWidth(
483        LayoutBorderBottomWidthValue::Exact(LayoutBorderBottomWidth {
484            inner: PixelValue::const_px(1),
485        }),
486    )),
487    CssPropertyWithConditions::simple(CssProperty::BorderBottomStyle(
488        StyleBorderBottomStyleValue::Exact(StyleBorderBottomStyle {
489            inner: BorderStyle::Solid,
490        }),
491    )),
492    CssPropertyWithConditions::simple(CssProperty::BorderBottomColor(
493        StyleBorderBottomColorValue::Exact(StyleBorderBottomColor {
494            inner: ColorU {
495                r: 172,
496                g: 172,
497                b: 172,
498                a: 255,
499            },
500        }),
501    )),
502];
503const CSS_MATCH_17290739305197504468: CssPropertyWithConditionsVec =
504    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_17290739305197504468_PROPERTIES);
505
506const CSS_MATCH_18014909903571752977_PROPERTIES: &[CssPropertyWithConditions] = &[
507    // .__azul-native-tabs-content
508    CssPropertyWithConditions::simple(CssProperty::PaddingRight(LayoutPaddingRightValue::Exact(
509        LayoutPaddingRight {
510            inner: PixelValue::const_px(5),
511        },
512    ))),
513    CssPropertyWithConditions::simple(CssProperty::PaddingLeft(LayoutPaddingLeftValue::Exact(
514        LayoutPaddingLeft {
515            inner: PixelValue::const_px(5),
516        },
517    ))),
518    CssPropertyWithConditions::simple(CssProperty::PaddingBottom(LayoutPaddingBottomValue::Exact(
519        LayoutPaddingBottom {
520            inner: PixelValue::const_px(5),
521        },
522    ))),
523    CssPropertyWithConditions::simple(CssProperty::PaddingTop(LayoutPaddingTopValue::Exact(
524        LayoutPaddingTop {
525            inner: PixelValue::const_px(5),
526        },
527    ))),
528    CssPropertyWithConditions::simple(CssProperty::FlexGrow(LayoutFlexGrowValue::Exact(
529        LayoutFlexGrow {
530            inner: FloatValue::const_new(1),
531        },
532    ))),
533    CssPropertyWithConditions::simple(CssProperty::BorderTopWidth(LayoutBorderTopWidthValue::None)),
534    CssPropertyWithConditions::simple(CssProperty::BorderTopStyle(StyleBorderTopStyleValue::None)),
535    CssPropertyWithConditions::simple(CssProperty::BorderTopColor(StyleBorderTopColorValue::None)),
536    CssPropertyWithConditions::simple(CssProperty::BorderBottomWidth(
537        LayoutBorderBottomWidthValue::Exact(LayoutBorderBottomWidth {
538            inner: PixelValue::const_px(1),
539        }),
540    )),
541    CssPropertyWithConditions::simple(CssProperty::BorderLeftWidth(
542        LayoutBorderLeftWidthValue::Exact(LayoutBorderLeftWidth {
543            inner: PixelValue::const_px(1),
544        }),
545    )),
546    CssPropertyWithConditions::simple(CssProperty::BorderRightWidth(
547        LayoutBorderRightWidthValue::Exact(LayoutBorderRightWidth {
548            inner: PixelValue::const_px(1),
549        }),
550    )),
551    CssPropertyWithConditions::simple(CssProperty::BorderBottomStyle(
552        StyleBorderBottomStyleValue::Exact(StyleBorderBottomStyle {
553            inner: BorderStyle::Solid,
554        }),
555    )),
556    CssPropertyWithConditions::simple(CssProperty::BorderLeftStyle(
557        StyleBorderLeftStyleValue::Exact(StyleBorderLeftStyle {
558            inner: BorderStyle::Solid,
559        }),
560    )),
561    CssPropertyWithConditions::simple(CssProperty::BorderRightStyle(
562        StyleBorderRightStyleValue::Exact(StyleBorderRightStyle {
563            inner: BorderStyle::Solid,
564        }),
565    )),
566    CssPropertyWithConditions::simple(CssProperty::BorderBottomColor(
567        StyleBorderBottomColorValue::Exact(StyleBorderBottomColor {
568            inner: ColorU {
569                r: 172,
570                g: 172,
571                b: 172,
572                a: 255,
573            },
574        }),
575    )),
576    CssPropertyWithConditions::simple(CssProperty::BorderLeftColor(
577        StyleBorderLeftColorValue::Exact(StyleBorderLeftColor {
578            inner: ColorU {
579                r: 172,
580                g: 172,
581                b: 172,
582                a: 255,
583            },
584        }),
585    )),
586    CssPropertyWithConditions::simple(CssProperty::BorderRightColor(
587        StyleBorderRightColorValue::Exact(StyleBorderRightColor {
588            inner: ColorU {
589                r: 172,
590                g: 172,
591                b: 172,
592                a: 255,
593            },
594        }),
595    )),
596    CssPropertyWithConditions::simple(CssProperty::BackgroundContent(
597        StyleBackgroundContentVecValue::Exact(StyleBackgroundContentVec::from_const_slice(
598            STYLE_BACKGROUND_CONTENT_16746671892555275291_ITEMS,
599        )),
600    )),
601];
602const CSS_MATCH_18014909903571752977: CssPropertyWithConditionsVec =
603    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_18014909903571752977_PROPERTIES);
604
605const CSS_MATCH_3088386549906605418_PROPERTIES: &[CssPropertyWithConditions] = &[
606    // .__azul-native-tabs-header .__azul-native-tabs-after-tabs
607    CssPropertyWithConditions::simple(CssProperty::FlexGrow(LayoutFlexGrowValue::Exact(
608        LayoutFlexGrow {
609            inner: FloatValue::const_new(1),
610        },
611    ))),
612    CssPropertyWithConditions::simple(CssProperty::BorderBottomWidth(
613        LayoutBorderBottomWidthValue::Exact(LayoutBorderBottomWidth {
614            inner: PixelValue::const_px(1),
615        }),
616    )),
617    CssPropertyWithConditions::simple(CssProperty::BorderBottomStyle(
618        StyleBorderBottomStyleValue::Exact(StyleBorderBottomStyle {
619            inner: BorderStyle::Solid,
620        }),
621    )),
622    CssPropertyWithConditions::simple(CssProperty::BorderBottomColor(
623        StyleBorderBottomColorValue::Exact(StyleBorderBottomColor {
624            inner: ColorU {
625                r: 172,
626                g: 172,
627                b: 172,
628                a: 255,
629            },
630        }),
631    )),
632];
633const CSS_MATCH_3088386549906605418: CssPropertyWithConditionsVec =
634    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_3088386549906605418_PROPERTIES);
635
636const CSS_MATCH_4415083954137121609_PROPERTIES: &[CssPropertyWithConditions] = &[
637    // .__azul-native-tabs-header p.__azul-native-tabs-tab-not-active:hover
638    CssPropertyWithConditions::on_hover(CssProperty::BorderBottomWidth(
639        LayoutBorderBottomWidthValue::Exact(LayoutBorderBottomWidth {
640            inner: PixelValue::const_px(1),
641        }),
642    )),
643    CssPropertyWithConditions::on_hover(CssProperty::BorderLeftWidth(
644        LayoutBorderLeftWidthValue::Exact(LayoutBorderLeftWidth {
645            inner: PixelValue::const_px(1),
646        }),
647    )),
648    CssPropertyWithConditions::on_hover(CssProperty::BorderRightWidth(
649        LayoutBorderRightWidthValue::Exact(LayoutBorderRightWidth {
650            inner: PixelValue::const_px(1),
651        }),
652    )),
653    CssPropertyWithConditions::on_hover(CssProperty::BorderTopWidth(
654        LayoutBorderTopWidthValue::Exact(LayoutBorderTopWidth {
655            inner: PixelValue::const_px(1),
656        }),
657    )),
658    CssPropertyWithConditions::on_hover(CssProperty::BorderBottomStyle(
659        StyleBorderBottomStyleValue::Exact(StyleBorderBottomStyle {
660            inner: BorderStyle::Solid,
661        }),
662    )),
663    CssPropertyWithConditions::on_hover(CssProperty::BorderLeftStyle(
664        StyleBorderLeftStyleValue::Exact(StyleBorderLeftStyle {
665            inner: BorderStyle::Solid,
666        }),
667    )),
668    CssPropertyWithConditions::on_hover(CssProperty::BorderRightStyle(
669        StyleBorderRightStyleValue::Exact(StyleBorderRightStyle {
670            inner: BorderStyle::Solid,
671        }),
672    )),
673    CssPropertyWithConditions::on_hover(CssProperty::BorderTopStyle(
674        StyleBorderTopStyleValue::Exact(StyleBorderTopStyle {
675            inner: BorderStyle::Solid,
676        }),
677    )),
678    CssPropertyWithConditions::on_hover(CssProperty::BorderBottomColor(
679        StyleBorderBottomColorValue::Exact(StyleBorderBottomColor {
680            inner: ColorU {
681                r: 126,
682                g: 180,
683                b: 234,
684                a: 255,
685            },
686        }),
687    )),
688    CssPropertyWithConditions::on_hover(CssProperty::BorderLeftColor(
689        StyleBorderLeftColorValue::Exact(StyleBorderLeftColor {
690            inner: ColorU {
691                r: 126,
692                g: 180,
693                b: 234,
694                a: 255,
695            },
696        }),
697    )),
698    CssPropertyWithConditions::on_hover(CssProperty::BorderRightColor(
699        StyleBorderRightColorValue::Exact(StyleBorderRightColor {
700            inner: ColorU {
701                r: 126,
702                g: 180,
703                b: 234,
704                a: 255,
705            },
706        }),
707    )),
708    CssPropertyWithConditions::on_hover(CssProperty::BorderTopColor(
709        StyleBorderTopColorValue::Exact(StyleBorderTopColor {
710            inner: ColorU {
711                r: 126,
712                g: 180,
713                b: 234,
714                a: 255,
715            },
716        }),
717    )),
718    CssPropertyWithConditions::on_hover(CssProperty::BackgroundContent(
719        StyleBackgroundContentVecValue::Exact(StyleBackgroundContentVec::from_const_slice(
720            STYLE_BACKGROUND_CONTENT_15534185073326444643_ITEMS,
721        )),
722    )),
723    // .__azul-native-tabs-header p.__azul-native-tabs-tab-norightborder
724    CssPropertyWithConditions::simple(CssProperty::BorderRightWidth(
725        LayoutBorderRightWidthValue::None,
726    )),
727    CssPropertyWithConditions::simple(CssProperty::BorderRightStyle(
728        StyleBorderRightStyleValue::None,
729    )),
730    CssPropertyWithConditions::simple(CssProperty::BorderRightColor(
731        StyleBorderRightColorValue::None,
732    )),
733    // .__azul-native-tabs-header p.__azul-native-tabs-tab-not-active
734    CssPropertyWithConditions::simple(CssProperty::PaddingRight(LayoutPaddingRightValue::Exact(
735        LayoutPaddingRight {
736            inner: PixelValue::const_px(5),
737        },
738    ))),
739    CssPropertyWithConditions::simple(CssProperty::PaddingLeft(LayoutPaddingLeftValue::Exact(
740        LayoutPaddingLeft {
741            inner: PixelValue::const_px(5),
742        },
743    ))),
744    CssPropertyWithConditions::simple(CssProperty::PaddingBottom(LayoutPaddingBottomValue::Exact(
745        LayoutPaddingBottom {
746            inner: PixelValue::const_px(1),
747        },
748    ))),
749    CssPropertyWithConditions::simple(CssProperty::PaddingTop(LayoutPaddingTopValue::Exact(
750        LayoutPaddingTop {
751            inner: PixelValue::const_px(1),
752        },
753    ))),
754    CssPropertyWithConditions::simple(CssProperty::MarginTop(LayoutMarginTopValue::Exact(
755        LayoutMarginTop {
756            inner: PixelValue::const_px(2),
757        },
758    ))),
759    // .__azul-native-tabs-header p
760    CssPropertyWithConditions::simple(CssProperty::TextAlign(StyleTextAlignValue::Exact(
761        StyleTextAlign::Center,
762    ))),
763    CssPropertyWithConditions::simple(CssProperty::Height(LayoutHeightValue::Exact(
764        LayoutHeight::Px(PixelValue::const_px(21)),
765    ))),
766    CssPropertyWithConditions::simple(CssProperty::BorderBottomWidth(
767        LayoutBorderBottomWidthValue::Exact(LayoutBorderBottomWidth {
768            inner: PixelValue::const_px(1),
769        }),
770    )),
771    CssPropertyWithConditions::simple(CssProperty::BorderLeftWidth(
772        LayoutBorderLeftWidthValue::Exact(LayoutBorderLeftWidth {
773            inner: PixelValue::const_px(1),
774        }),
775    )),
776    CssPropertyWithConditions::simple(CssProperty::BorderRightWidth(
777        LayoutBorderRightWidthValue::Exact(LayoutBorderRightWidth {
778            inner: PixelValue::const_px(1),
779        }),
780    )),
781    CssPropertyWithConditions::simple(CssProperty::BorderTopWidth(
782        LayoutBorderTopWidthValue::Exact(LayoutBorderTopWidth {
783            inner: PixelValue::const_px(1),
784        }),
785    )),
786    CssPropertyWithConditions::simple(CssProperty::BorderBottomStyle(
787        StyleBorderBottomStyleValue::Exact(StyleBorderBottomStyle {
788            inner: BorderStyle::Solid,
789        }),
790    )),
791    CssPropertyWithConditions::simple(CssProperty::BorderLeftStyle(
792        StyleBorderLeftStyleValue::Exact(StyleBorderLeftStyle {
793            inner: BorderStyle::Solid,
794        }),
795    )),
796    CssPropertyWithConditions::simple(CssProperty::BorderRightStyle(
797        StyleBorderRightStyleValue::Exact(StyleBorderRightStyle {
798            inner: BorderStyle::Solid,
799        }),
800    )),
801    CssPropertyWithConditions::simple(CssProperty::BorderTopStyle(
802        StyleBorderTopStyleValue::Exact(StyleBorderTopStyle {
803            inner: BorderStyle::Solid,
804        }),
805    )),
806    CssPropertyWithConditions::simple(CssProperty::BorderBottomColor(
807        StyleBorderBottomColorValue::Exact(StyleBorderBottomColor {
808            inner: ColorU {
809                r: 172,
810                g: 172,
811                b: 172,
812                a: 255,
813            },
814        }),
815    )),
816    CssPropertyWithConditions::simple(CssProperty::BorderLeftColor(
817        StyleBorderLeftColorValue::Exact(StyleBorderLeftColor {
818            inner: ColorU {
819                r: 172,
820                g: 172,
821                b: 172,
822                a: 255,
823            },
824        }),
825    )),
826    CssPropertyWithConditions::simple(CssProperty::BorderRightColor(
827        StyleBorderRightColorValue::Exact(StyleBorderRightColor {
828            inner: ColorU {
829                r: 172,
830                g: 172,
831                b: 172,
832                a: 255,
833            },
834        }),
835    )),
836    CssPropertyWithConditions::simple(CssProperty::BorderTopColor(
837        StyleBorderTopColorValue::Exact(StyleBorderTopColor {
838            inner: ColorU {
839                r: 172,
840                g: 172,
841                b: 172,
842                a: 255,
843            },
844        }),
845    )),
846    CssPropertyWithConditions::simple(CssProperty::BackgroundContent(
847        StyleBackgroundContentVecValue::Exact(StyleBackgroundContentVec::from_const_slice(
848            STYLE_BACKGROUND_CONTENT_8560341490937422656_ITEMS,
849        )),
850    )),
851    CssPropertyWithConditions::simple(CssProperty::AlignItems(LayoutAlignItemsValue::Exact(
852        LayoutAlignItems::Center,
853    ))),
854];
855const CSS_MATCH_4415083954137121609: CssPropertyWithConditionsVec =
856    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_4415083954137121609_PROPERTIES);
857
858const CSS_MATCH_4738503469417034630_PROPERTIES: &[CssPropertyWithConditions] = &[
859    // .__azul-native-tabs-container
860    CssPropertyWithConditions::simple(CssProperty::PaddingRight(LayoutPaddingRightValue::Exact(
861        LayoutPaddingRight {
862            inner: PixelValue::const_px(5),
863        },
864    ))),
865    CssPropertyWithConditions::simple(CssProperty::PaddingLeft(LayoutPaddingLeftValue::Exact(
866        LayoutPaddingLeft {
867            inner: PixelValue::const_px(5),
868        },
869    ))),
870    CssPropertyWithConditions::simple(CssProperty::PaddingBottom(LayoutPaddingBottomValue::Exact(
871        LayoutPaddingBottom {
872            inner: PixelValue::const_px(5),
873        },
874    ))),
875    CssPropertyWithConditions::simple(CssProperty::PaddingTop(LayoutPaddingTopValue::Exact(
876        LayoutPaddingTop {
877            inner: PixelValue::const_px(5),
878        },
879    ))),
880    CssPropertyWithConditions::simple(CssProperty::FlexGrow(LayoutFlexGrowValue::Exact(
881        LayoutFlexGrow {
882            inner: FloatValue::const_new(1),
883        },
884    ))),
885];
886const CSS_MATCH_4738503469417034630: CssPropertyWithConditionsVec =
887    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_4738503469417034630_PROPERTIES);
888
889const CSS_MATCH_9988039989460234263_PROPERTIES: &[CssPropertyWithConditions] = &[
890    // .__azul-native-tabs-header
891    CssPropertyWithConditions::simple(CssProperty::FontSize(StyleFontSizeValue::Exact(
892        StyleFontSize {
893            inner: PixelValue::const_px(11),
894        },
895    ))),
896    CssPropertyWithConditions::simple(CssProperty::FontFamily(StyleFontFamilyVecValue::Exact(
897        StyleFontFamilyVec::from_const_slice(STYLE_FONT_FAMILY_8122988506401935406_ITEMS),
898    ))),
899    CssPropertyWithConditions::simple(CssProperty::FlexDirection(LayoutFlexDirectionValue::Exact(
900        LayoutFlexDirection::Row,
901    ))),
902];
903const CSS_MATCH_9988039989460234263: CssPropertyWithConditionsVec =
904    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_9988039989460234263_PROPERTIES);
905
906// -- NO PADDING
907const CSS_MATCH_18014909903571752977_PROPERTIES_NO_PADDING: &[CssPropertyWithConditions] = &[
908    // .__azul-native-tabs-content
909    CssPropertyWithConditions::simple(CssProperty::FlexGrow(LayoutFlexGrowValue::Exact(
910        LayoutFlexGrow {
911            inner: FloatValue::const_new(1),
912        },
913    ))),
914    CssPropertyWithConditions::simple(CssProperty::BackgroundContent(
915        StyleBackgroundContentVecValue::Exact(StyleBackgroundContentVec::from_const_slice(
916            STYLE_BACKGROUND_CONTENT_16746671892555275291_ITEMS,
917        )),
918    )),
919];
920const CSS_MATCH_18014909903571752977_NO_PADDING: CssPropertyWithConditionsVec =
921    CssPropertyWithConditionsVec::from_const_slice(
922        CSS_MATCH_18014909903571752977_PROPERTIES_NO_PADDING,
923    );
924
925const CSS_MATCH_4738503469417034630_PROPERTIES_NO_PADDING: &[CssPropertyWithConditions] = &[
926    // .__azul-native-tabs-container
927    CssPropertyWithConditions::simple(CssProperty::FlexGrow(LayoutFlexGrowValue::Exact(
928        LayoutFlexGrow {
929            inner: FloatValue::const_new(1),
930        },
931    ))),
932];
933const CSS_MATCH_4738503469417034630_NO_PADDING: CssPropertyWithConditionsVec =
934    CssPropertyWithConditionsVec::from_const_slice(
935        CSS_MATCH_4738503469417034630_PROPERTIES_NO_PADDING,
936    );
937
938// -- REGULAR_INACTIVE_TAB
939
940const CSS_MATCH_11510695043643111367_PROPERTIES: &[CssPropertyWithConditions] = &[
941    // .__azul-native-tabs-header p.__azul-native-tabs-tab-not-active:hover
942    CssPropertyWithConditions::on_hover(CssProperty::BorderBottomWidth(
943        LayoutBorderBottomWidthValue::Exact(LayoutBorderBottomWidth {
944            inner: PixelValue::const_px(1),
945        }),
946    )),
947    CssPropertyWithConditions::on_hover(CssProperty::BorderLeftWidth(
948        LayoutBorderLeftWidthValue::Exact(LayoutBorderLeftWidth {
949            inner: PixelValue::const_px(1),
950        }),
951    )),
952    CssPropertyWithConditions::on_hover(CssProperty::BorderRightWidth(
953        LayoutBorderRightWidthValue::Exact(LayoutBorderRightWidth {
954            inner: PixelValue::const_px(1),
955        }),
956    )),
957    CssPropertyWithConditions::on_hover(CssProperty::BorderTopWidth(
958        LayoutBorderTopWidthValue::Exact(LayoutBorderTopWidth {
959            inner: PixelValue::const_px(1),
960        }),
961    )),
962    CssPropertyWithConditions::on_hover(CssProperty::BorderBottomStyle(
963        StyleBorderBottomStyleValue::Exact(StyleBorderBottomStyle {
964            inner: BorderStyle::Solid,
965        }),
966    )),
967    CssPropertyWithConditions::on_hover(CssProperty::BorderLeftStyle(
968        StyleBorderLeftStyleValue::Exact(StyleBorderLeftStyle {
969            inner: BorderStyle::Solid,
970        }),
971    )),
972    CssPropertyWithConditions::on_hover(CssProperty::BorderRightStyle(
973        StyleBorderRightStyleValue::Exact(StyleBorderRightStyle {
974            inner: BorderStyle::Solid,
975        }),
976    )),
977    CssPropertyWithConditions::on_hover(CssProperty::BorderTopStyle(
978        StyleBorderTopStyleValue::Exact(StyleBorderTopStyle {
979            inner: BorderStyle::Solid,
980        }),
981    )),
982    CssPropertyWithConditions::on_hover(CssProperty::BorderBottomColor(
983        StyleBorderBottomColorValue::Exact(StyleBorderBottomColor {
984            inner: ColorU {
985                r: 126,
986                g: 180,
987                b: 234,
988                a: 255,
989            },
990        }),
991    )),
992    CssPropertyWithConditions::on_hover(CssProperty::BorderLeftColor(
993        StyleBorderLeftColorValue::Exact(StyleBorderLeftColor {
994            inner: ColorU {
995                r: 126,
996                g: 180,
997                b: 234,
998                a: 255,
999            },
1000        }),
1001    )),
1002    CssPropertyWithConditions::on_hover(CssProperty::BorderRightColor(
1003        StyleBorderRightColorValue::Exact(StyleBorderRightColor {
1004            inner: ColorU {
1005                r: 126,
1006                g: 180,
1007                b: 234,
1008                a: 255,
1009            },
1010        }),
1011    )),
1012    CssPropertyWithConditions::on_hover(CssProperty::BorderTopColor(
1013        StyleBorderTopColorValue::Exact(StyleBorderTopColor {
1014            inner: ColorU {
1015                r: 126,
1016                g: 180,
1017                b: 234,
1018                a: 255,
1019            },
1020        }),
1021    )),
1022    CssPropertyWithConditions::on_hover(CssProperty::BackgroundContent(
1023        StyleBackgroundContentVecValue::Exact(StyleBackgroundContentVec::from_const_slice(
1024            STYLE_BACKGROUND_CONTENT_15534185073326444643_ITEMS,
1025        )),
1026    )),
1027    // .__azul-native-tabs-header p.__azul-native-tabs-tab-not-active
1028    CssPropertyWithConditions::simple(CssProperty::PaddingRight(LayoutPaddingRightValue::Exact(
1029        LayoutPaddingRight {
1030            inner: PixelValue::const_px(5),
1031        },
1032    ))),
1033    CssPropertyWithConditions::simple(CssProperty::PaddingLeft(LayoutPaddingLeftValue::Exact(
1034        LayoutPaddingLeft {
1035            inner: PixelValue::const_px(5),
1036        },
1037    ))),
1038    CssPropertyWithConditions::simple(CssProperty::PaddingBottom(LayoutPaddingBottomValue::Exact(
1039        LayoutPaddingBottom {
1040            inner: PixelValue::const_px(1),
1041        },
1042    ))),
1043    CssPropertyWithConditions::simple(CssProperty::PaddingTop(LayoutPaddingTopValue::Exact(
1044        LayoutPaddingTop {
1045            inner: PixelValue::const_px(1),
1046        },
1047    ))),
1048    CssPropertyWithConditions::simple(CssProperty::MarginTop(LayoutMarginTopValue::Exact(
1049        LayoutMarginTop {
1050            inner: PixelValue::const_px(2),
1051        },
1052    ))),
1053    // .__azul-native-tabs-header p
1054    CssPropertyWithConditions::simple(CssProperty::TextAlign(StyleTextAlignValue::Exact(
1055        StyleTextAlign::Center,
1056    ))),
1057    CssPropertyWithConditions::simple(CssProperty::Height(LayoutHeightValue::Exact(
1058        LayoutHeight::Px(PixelValue::const_px(21)),
1059    ))),
1060    CssPropertyWithConditions::simple(CssProperty::BorderBottomWidth(
1061        LayoutBorderBottomWidthValue::Exact(LayoutBorderBottomWidth {
1062            inner: PixelValue::const_px(1),
1063        }),
1064    )),
1065    CssPropertyWithConditions::simple(CssProperty::BorderLeftWidth(
1066        LayoutBorderLeftWidthValue::Exact(LayoutBorderLeftWidth {
1067            inner: PixelValue::const_px(1),
1068        }),
1069    )),
1070    CssPropertyWithConditions::simple(CssProperty::BorderRightWidth(
1071        LayoutBorderRightWidthValue::Exact(LayoutBorderRightWidth {
1072            inner: PixelValue::const_px(1),
1073        }),
1074    )),
1075    CssPropertyWithConditions::simple(CssProperty::BorderTopWidth(
1076        LayoutBorderTopWidthValue::Exact(LayoutBorderTopWidth {
1077            inner: PixelValue::const_px(1),
1078        }),
1079    )),
1080    CssPropertyWithConditions::simple(CssProperty::BorderBottomStyle(
1081        StyleBorderBottomStyleValue::Exact(StyleBorderBottomStyle {
1082            inner: BorderStyle::Solid,
1083        }),
1084    )),
1085    CssPropertyWithConditions::simple(CssProperty::BorderLeftStyle(
1086        StyleBorderLeftStyleValue::Exact(StyleBorderLeftStyle {
1087            inner: BorderStyle::Solid,
1088        }),
1089    )),
1090    CssPropertyWithConditions::simple(CssProperty::BorderRightStyle(
1091        StyleBorderRightStyleValue::Exact(StyleBorderRightStyle {
1092            inner: BorderStyle::Solid,
1093        }),
1094    )),
1095    CssPropertyWithConditions::simple(CssProperty::BorderTopStyle(
1096        StyleBorderTopStyleValue::Exact(StyleBorderTopStyle {
1097            inner: BorderStyle::Solid,
1098        }),
1099    )),
1100    CssPropertyWithConditions::simple(CssProperty::BorderBottomColor(
1101        StyleBorderBottomColorValue::Exact(StyleBorderBottomColor {
1102            inner: ColorU {
1103                r: 172,
1104                g: 172,
1105                b: 172,
1106                a: 255,
1107            },
1108        }),
1109    )),
1110    CssPropertyWithConditions::simple(CssProperty::BorderLeftColor(
1111        StyleBorderLeftColorValue::Exact(StyleBorderLeftColor {
1112            inner: ColorU {
1113                r: 172,
1114                g: 172,
1115                b: 172,
1116                a: 255,
1117            },
1118        }),
1119    )),
1120    CssPropertyWithConditions::simple(CssProperty::BorderRightColor(
1121        StyleBorderRightColorValue::Exact(StyleBorderRightColor {
1122            inner: ColorU {
1123                r: 172,
1124                g: 172,
1125                b: 172,
1126                a: 255,
1127            },
1128        }),
1129    )),
1130    CssPropertyWithConditions::simple(CssProperty::BorderTopColor(
1131        StyleBorderTopColorValue::Exact(StyleBorderTopColor {
1132            inner: ColorU {
1133                r: 172,
1134                g: 172,
1135                b: 172,
1136                a: 255,
1137            },
1138        }),
1139    )),
1140    CssPropertyWithConditions::simple(CssProperty::BackgroundContent(
1141        StyleBackgroundContentVecValue::Exact(StyleBackgroundContentVec::from_const_slice(
1142            STYLE_BACKGROUND_CONTENT_8560341490937422656_ITEMS,
1143        )),
1144    )),
1145    CssPropertyWithConditions::simple(CssProperty::AlignItems(LayoutAlignItemsValue::Exact(
1146        LayoutAlignItems::Center,
1147    ))),
1148];
1149const CSS_MATCH_11510695043643111367: CssPropertyWithConditionsVec =
1150    CssPropertyWithConditionsVec::from_const_slice(CSS_MATCH_11510695043643111367_PROPERTIES);
1151
1152/// Header bar for a tab widget, containing the clickable tab labels.
1153#[derive(Debug, Clone)]
1154#[repr(C)]
1155pub struct TabHeader {
1156    /// Labels for each tab.
1157    pub tabs: StringVec,
1158    /// Zero-based index of the currently active tab.
1159    pub active_tab: usize,
1160    /// Optional callback invoked when a tab is clicked.
1161    pub on_click: OptionTabOnClick,
1162}
1163
1164impl Default for TabHeader {
1165    fn default() -> Self {
1166        Self {
1167            tabs: StringVec::from_const_slice(&[]),
1168            active_tab: 0,
1169            on_click: None.into(),
1170        }
1171    }
1172}
1173
1174/// State passed to the tab-click callback, indicating which tab was selected.
1175#[derive(Debug, Clone, Copy, PartialEq, Eq)]
1176#[repr(C)]
1177pub struct TabHeaderState {
1178    /// Zero-based index of the newly selected tab.
1179    pub active_tab: usize,
1180}
1181
1182/// Signature for the tab-click callback function.
1183pub type TabOnClickCallbackType = extern "C" fn(RefAny, CallbackInfo, TabHeaderState) -> Update;
1184impl_widget_callback!(
1185    TabOnClick,
1186    OptionTabOnClick,
1187    TabOnClickCallback,
1188    TabOnClickCallbackType
1189);
1190
1191azul_core::impl_managed_callback! {
1192    wrapper:        TabOnClickCallback,
1193    info_ty:        CallbackInfo,
1194    return_ty:      Update,
1195    default_ret:    Update::DoNothing,
1196    invoker_static: TAB_ON_CLICK_INVOKER,
1197    invoker_ty:     AzTabOnClickCallbackInvoker,
1198    thunk_fn:       az_tab_on_click_callback_thunk,
1199    setter_fn:      AzApp_setTabOnClickCallbackInvoker,
1200    from_handle_fn: AzTabOnClickCallback_createFromHostHandle,
1201    extra_args:     [ state: TabHeaderState ],
1202}
1203
1204impl TabHeader {
1205    pub fn create(tabs: StringVec) -> Self {
1206        Self {
1207            tabs,
1208            active_tab: 0,
1209            on_click: None.into(),
1210        }
1211    }
1212
1213    pub fn swap_with_default(&mut self) -> Self {
1214        let mut default = Self::default();
1215        core::mem::swap(&mut default, self);
1216        default
1217    }
1218
1219    pub fn set_active_tab(&mut self, active_tab: usize) {
1220        self.active_tab = active_tab;
1221    }
1222
1223    pub fn with_active_tab(mut self, active_tab: usize) -> Self {
1224        self.set_active_tab(active_tab);
1225        self
1226    }
1227
1228    pub fn set_on_click<C: Into<TabOnClickCallback>>(&mut self, refany: RefAny, on_click: C) {
1229        self.on_click = Some(TabOnClick {
1230            refany,
1231            callback: on_click.into(),
1232        })
1233        .into();
1234    }
1235
1236    pub fn with_on_click<C: Into<TabOnClickCallback>>(
1237        mut self,
1238        refany: RefAny,
1239        on_click: C,
1240    ) -> Self {
1241        self.set_on_click(refany, on_click);
1242        self
1243    }
1244
1245    pub fn dom(self) -> Dom {
1246        use azul_core::callbacks::CoreCallbackDataVec;
1247
1248        let on_click_is_some = self.on_click.is_some();
1249
1250        Dom::create_div()
1251            .with_css_props(CSS_MATCH_9988039989460234263)
1252            .with_ids_and_classes({
1253                const IDS_AND_CLASSES_6172459441955124689: &[IdOrClass] =
1254                    &[Class(AzString::from_const_str("__azul-native-tabs-header"))];
1255                IdOrClassVec::from_const_slice(IDS_AND_CLASSES_6172459441955124689)
1256            })
1257            .with_children({
1258                let mut tab_items = vec![Dom::create_div()
1259                    .with_css_props(CSS_MATCH_17290739305197504468)
1260                    .with_ids_and_classes({
1261                        const IDS_AND_CLASSES_8360971686689797550: &[IdOrClass] = &[Class(
1262                            AzString::from_const_str("__azul-native-tabs-before-tabs"),
1263                        )];
1264                        IdOrClassVec::from_const_slice(IDS_AND_CLASSES_8360971686689797550)
1265                    })];
1266
1267                let dataset = TabLocalDataset {
1268                    tab_idx: 0,
1269                    on_click: self.on_click,
1270                };
1271
1272                for (tab_idx, tab) in self.tabs.as_ref().iter().enumerate() {
1273                    let next_tab_is_active = self.active_tab == tab_idx.saturating_add(1);
1274                    let previous_tab_was_active = if self.active_tab == 0 {
1275                        false
1276                    } else {
1277                        self.active_tab == tab_idx.saturating_sub(1)
1278                    };
1279
1280                    let tab_is_active = self.active_tab == tab_idx;
1281
1282                    // classes for previous tab
1283                    const IDS_AND_CLASSES_5117007530891373979: &[IdOrClass] = &[
1284                        Class(AzString::from_const_str(
1285                            "__azul-native-tabs-tab-norightborder",
1286                        )),
1287                        Class(AzString::from_const_str(
1288                            "__azul-native-tabs-tab-not-active",
1289                        )),
1290                    ]; // CSS_MATCH_4415083954137121609
1291
1292                    // classes for current tab
1293                    const IDS_AND_CLASSES_15002865554973741556: &[IdOrClass] = &[Class(
1294                        AzString::from_const_str("__azul-native-tabs-tab-active"),
1295                    )];
1296
1297                    // classes for next tab
1298                    const IDS_AND_CLASSES_16877793354714897051: &[IdOrClass] = &[
1299                        Class(AzString::from_const_str(
1300                            "__azul-native-tabs-tab-noleftborder",
1301                        )),
1302                        Class(AzString::from_const_str(
1303                            "__azul-native-tabs-tab-not-active",
1304                        )),
1305                    ];
1306
1307                    // classes for default inactive tab
1308                    const IDS_AND_CLASSES_INACTIVE: &[IdOrClass] = &[Class(
1309                        AzString::from_const_str("__azul-native-tabs-tab-not-active"),
1310                    )];
1311
1312                    let (ids_and_classes, css_props) = if tab_is_active {
1313                        (
1314                            IDS_AND_CLASSES_15002865554973741556,
1315                            CSS_MATCH_14575853790110873394,
1316                        )
1317                    } else if next_tab_is_active {
1318                        // tab before the active tab
1319                        (
1320                            IDS_AND_CLASSES_5117007530891373979,
1321                            CSS_MATCH_4415083954137121609,
1322                        )
1323                    } else if previous_tab_was_active {
1324                        // tab after the active tab
1325                        (
1326                            IDS_AND_CLASSES_16877793354714897051,
1327                            CSS_MATCH_13824480602841492081,
1328                        )
1329                    } else {
1330                        // default inactive tab
1331                        (IDS_AND_CLASSES_INACTIVE, CSS_MATCH_11510695043643111367)
1332                    };
1333
1334                    let mut dataset = dataset.clone();
1335                    dataset.tab_idx = tab_idx;
1336                    let dataset = RefAny::new(dataset);
1337
1338                    tab_items.push(
1339                        Dom::create_text(tab.clone())
1340                            .with_callbacks(if on_click_is_some {
1341                                vec![CoreCallbackData {
1342                                    event: EventFilter::Hover(HoverEventFilter::MouseUp),
1343                                    callback: CoreCallback {
1344                                        cb: on_tab_click as usize,
1345                                        ctx: azul_core::refany::OptionRefAny::None,
1346                                    },
1347                                    refany: dataset.clone(),
1348                                }]
1349                                .into()
1350                            } else {
1351                                CoreCallbackDataVec::from_const_slice(&[])
1352                            })
1353                            .with_dataset(Some(dataset).into())
1354                            .with_css_props(css_props)
1355                            .with_ids_and_classes(IdOrClassVec::from_const_slice(ids_and_classes)),
1356                    );
1357                }
1358
1359                tab_items.push(
1360                    Dom::create_div()
1361                        .with_css_props(CSS_MATCH_3088386549906605418)
1362                        .with_ids_and_classes({
1363                            const IDS_AND_CLASSES_11001585590816277275: &[IdOrClass] = &[Class(
1364                                AzString::from_const_str("__azul-native-tabs-after-tabs"),
1365                            )];
1366                            IdOrClassVec::from_const_slice(IDS_AND_CLASSES_11001585590816277275)
1367                        }),
1368                );
1369
1370                tab_items.into()
1371            })
1372    }
1373}
1374
1375/// Content panel displayed beneath the active tab in a tab widget.
1376#[derive(Debug, Clone)]
1377#[repr(C)]
1378pub struct TabContent {
1379    /// The DOM subtree shown as the tab's content area.
1380    pub content: Dom,
1381    /// Whether the content area includes default padding.
1382    pub has_padding: bool,
1383}
1384
1385impl Default for TabContent {
1386    fn default() -> Self {
1387        Self {
1388            content: Dom::create_div(),
1389            has_padding: true,
1390        }
1391    }
1392}
1393
1394impl TabContent {
1395    pub fn new(content: Dom) -> Self {
1396        Self {
1397            content,
1398            has_padding: true,
1399        }
1400    }
1401
1402    pub fn swap_with_default(&mut self) -> Self {
1403        let mut default = Self::default();
1404        core::mem::swap(&mut default, self);
1405        default
1406    }
1407
1408    pub fn with_padding(mut self, padding: bool) -> Self {
1409        self.set_padding(padding);
1410        self
1411    }
1412
1413    pub fn set_padding(&mut self, padding: bool) {
1414        self.has_padding = padding;
1415    }
1416
1417    pub fn dom(self) -> Dom {
1418        const IDS_AND_CLASSES_2989815829020816222: &[IdOrClass] = &[Class(
1419            AzString::from_const_str("__azul-native-tabs-content"),
1420        )];
1421
1422        let tab_content_css_style = if self.has_padding {
1423            CSS_MATCH_18014909903571752977
1424        } else {
1425            CSS_MATCH_18014909903571752977_NO_PADDING
1426        };
1427
1428        Dom::create_div()
1429            .with_css_props(tab_content_css_style)
1430            .with_children(DomVec::from_vec(vec![Dom::create_div()
1431                .with_ids_and_classes(IdOrClassVec::from_const_slice(
1432                    IDS_AND_CLASSES_2989815829020816222,
1433                ))
1434                .with_children(DomVec::from_vec(vec![self.content]))]))
1435    }
1436}
1437
1438#[derive(Clone)]
1439struct TabLocalDataset {
1440    tab_idx: usize,
1441    on_click: OptionTabOnClick,
1442}
1443
1444extern "C" fn on_tab_click(mut refany: RefAny, mut info: CallbackInfo) -> Update {
1445    fn select_new_tab_inner(mut refany: RefAny, info: &mut CallbackInfo) -> Option<Update> {
1446        let mut tab_local_dataset = refany.downcast_mut::<TabLocalDataset>()?;
1447        let tab_idx = tab_local_dataset.tab_idx;
1448        let tab_header_state = TabHeaderState {
1449            active_tab: tab_idx,
1450        };
1451
1452        let result = {
1453            // rustc doesn't understand the borrowing lifetime here
1454            let tab_local_dataset = &mut *tab_local_dataset;
1455            let onclick = &mut tab_local_dataset.on_click;
1456
1457            match onclick.as_mut() {
1458                Some(TabOnClick { callback, refany }) => {
1459                    (callback.cb)(refany.clone(), info.clone(), tab_header_state)
1460                }
1461                None => Update::DoNothing,
1462            }
1463        };
1464
1465        Some(result)
1466    }
1467
1468    select_new_tab_inner(refany, &mut info).unwrap_or(Update::RefreshDom)
1469}
azul_layout/widgets/tabs.rs

azul_layout/widgets/
tabs.rs
