Doric/doric-demo/src/NavbarDemo.ts

import { Group, Panel, navbar, text, gravity, Color, LayoutSpec, vlayout, Gravity, hlayout, scroller, layoutConfig, image, modal, navigator } from "doric";
import { title, label, colors } from "./utils";

const shareIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAMAAADDpiTIAAACZFBMVEUAAABEREBEREBEREBEREBEREBEREBEREBEREBEREBEREBEREBEREBEREBEREBDQ0NDQ0JCQkJCQkJDQ0JCQkJDQ0NBQUBBQUBAQEBAQEBBQUFCQkFCQkFBQUFCQkI8PDxDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NBQUE7OztDQ0NDQ0NDQ0NDQ0NERERDQ0NDQ0NCQkJCQkJCQkJDQ0NBQUFCQkJDQ0NAQD5AQEBDQ0NCQkJCQkJCQkJCQkJDQ0NEREQAAABBQUFCQkJBQUFCQkJDQ0NBQUGAgIBDQ0JDQ0NCQkJCQkJCQkJFRUVFRURBQUFCQkJCQkJCQkJDQ0JDQ0JDQ0NCQkJDQ0NDQ0FLS0dBQUFCQkJBQUEzMzNDQ0JCQkJCQkJCQkJCQkJCQkJCQkJAQD1CQkJCQkJAQEBAQD5CQkJCQkJCQkJCQkFCQkJDQ0JCQkJBQUFCQkFERENBQUBGRkRCQkJCQkI+Pj1AQDxDQ0NCQkJAQEBCQkJCQkJCQkJCQkJHR0VCQkJDQ0NCQkJDQ0JCQkJCQkJBQUFBQUFERENBQUFCQkJCQkJDQ0JDQ0NDQ0NBQUBDQ0NCQkJDQ0NCQkJBQUFCQkJCQkJCQkJCQkJAQEBDQ0NBQUFDQ0NBQUFCQkJBQUFCQkJCQkJBQUFBQUFBQUFBQUFDQ0NDQ0NCQkJAQEBDQ0NCQkJCQkFCQkJEREI9PT1CQkJAQEBCQkJDQ0FCQkJCQkBCQkIvLyxBQUFCQkJCQkJDQ0NCQkJFRUVCQkJCQkJCQkE8PDxDQ0NCQkJBQUFCQkJCQkJBQUE9PTxCQkIOEjPPAAAAy3RSTlMAAQIDBAUGBwgJCgsMDg87RPPyRfE5REM4OjdCQznwD6KxsK2sysecDV1UVV4PW3aMpquek39mHixvquDjrXMxATuT4ueZQwIgd9zkgBormvX5oDIhmPyjKRFz73oFM8jRMm72+haoshAlz9gjM+o56z02KjUb1+EXD7jCBIOL/kYZ3ZGWN/v9M7tLSsPJTLUZKHJ5yx9qba/s7iQmVleBpcPb7cTHiYhhWHgcQcU/nBwV3yg0MNoetgN59BudnxyH5k4RXHeNrKeUE9PuQWMAAA+kSURBVHja7d37n1R1HcfxM7M7y+zOLuGC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

@Entry
class NavbarDemo extends Panel {
    build(rootView: Group): void {
        scroller(
            vlayout(
                [
                    title("Navbar Demo"),
                    label('isHidden').apply({
                        width: 200,
                        height: 50,
                        backgroundColor: colors[0],
                        textSize: 30,
                        textColor: Color.WHITE,
                        layoutConfig: layoutConfig().just(),
                        onClick: () => {
                            navbar(context).isHidden().then(e => modal(context).alert(`Navbar isHidden:${e}`)).catch(e => {
                                modal(context).alert(e)
                            })
                        }
                    }),
                    label('setHidden').apply({
                        width: 200,
                        height: 50,
                        backgroundColor: colors[0],
                        textSize: 30,
                        textColor: Color.WHITE,
                        layoutConfig: layoutConfig().just(),
                        onClick: () => {
                            navbar(context).isHidden()
                                .then(e => navbar(context).setHidden(!e))
                                .catch(e => {
                                    modal(context).alert(e)
                                })
                        }
                    }),
                    label('setTitle').apply({
                        width: 200,
                        height: 50,
                        backgroundColor: colors[0],
                        textSize: 30,
                        textColor: Color.WHITE,
                        layoutConfig: layoutConfig().just(),
                        onClick: () => {
                            navbar(context).setTitle('Setted Title')
                                .catch(e => {
                                    modal(context).alert(e)
                                })
                        }
                    }),
                    label('setBgColor').apply({
                        width: 200,
                        height: 50,
                        backgroundColor: colors[0],
                        textSize: 30,
                        textColor: Color.WHITE,
                        layoutConfig: layoutConfig().just(),
                        onClick: () => {
                            navbar(context).setBgColor(Color.YELLOW)
                                .catch(e => {
                                    modal(context).alert(e)
                                })
                        }
                    }),
                    label('setLeft').apply({
                        width: 200,
                        height: 50,
                        backgroundColor: colors[0],
                        textSize: 30,
                        textColor: Color.WHITE,
                        layoutConfig: layoutConfig().just(),
                        onClick: () => {
                            navbar(context).setLeft(text({
                                width: 70,
                                height: 44,
                                textColor: Color.BLACK,
                                layoutConfig: layoutConfig().just().configAlignment(Gravity.Center),
                                text: "Left",
                            }))
                                .catch(e => {
                                    modal(context).alert(e)
                                })
                        }
                    }),
                    label('setRight').apply({
                        width: 200,
                        height: 50,
                        backgroundColor: colors[0],
                        textSize: 30,
                        textColor: Color.WHITE,
                        layoutConfig: layoutConfig().just(),
                        onClick: () => {
                            navbar(context).setRight(hlayout([
                                text({
                                    width: 70,
                                    height: 44,
                                    textColor: Color.BLACK,
                                    layoutConfig: layoutConfig().just().configAlignment(Gravity.Center),
                                    text: "Right",
                                }),
                                image({
                                    imageBase64: shareIcon
                                }).apply({
                                    layoutConfig: layoutConfig().just().configAlignment(gravity().centerY()),
                                    width: 33,
                                    height: 33,
                                    onClick: () => {
                                        modal(context).toast('Right Clicked', Gravity.Bottom)
                                    }
                                })
                            ]))
                                .catch(e => {
                                    modal(context).alert(e)
                                })
                        }
                    }),
                    label('setCenter').apply({
                        width: 200,
                        height: 50,
                        backgroundColor: colors[0],
                        textSize: 30,
                        textColor: Color.WHITE,
                        layoutConfig: layoutConfig().just(),
                        onClick: () => {
                            navbar(context).setCenter(hlayout([
                                text({
                                    width: 70,
                                    height: 44,
                                    textColor: Color.BLACK,
                                    layoutConfig: layoutConfig().just().configAlignment(Gravity.Center),
                                    text: "Center",
                                }),
                            ]).apply({
                                backgroundColor: Color.RED
                            }))
                                .catch(e => {
                                    modal(context).alert(e)
                                })
                        }
                    }),
                    label('Pop').apply({
                        width: 200,
                        height: 50,
                        backgroundColor: colors[0],
                        textSize: 30,
                        textColor: Color.WHITE,
                        layoutConfig: layoutConfig().just(),
                        onClick: () => {
                            navigator(context).pop()
                        }
                    }),
                ],
                {
                    layoutConfig: layoutConfig().most().configHeight(LayoutSpec.FIT),
                    gravity: gravity().center(),
                    space: 10,
                }),
            {
                layoutConfig: layoutConfig().most(),
                backgroundColor: Color.BLUE,
            }
        ).in(rootView)
    }
}