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

azul_layout/widgets/
tabs.rs
