CreateAppBarModern

Hello World

Content:
- Methods

A modern appbar with a search input, leading icon and trailing icon.

abm = MUI.CreateAppBarModern( hint, controlIcon, options, color ) → Object

Example - Basic click to expand contents

cfg.Light
cfg.MUI

function OnStart()
{
    color = MUI.colors.teal
    app.InitializeUIKit(color.teal)

    lay = MUI.CreateLayout("Absolute", "FillXY")

        apb = MUI.CreateAppBarModern("Search for games", "more_vert")
        var apbHeight = apb.GetHeight()

        scr = app.CreateScroller(1, 1, "NoScrollBar")

            pageLay = MUI.CreateLayout("Linear", "VCenter")
            pageLay.SetSize(1, 1.2)
            pageLay.SetPadding(0, 0, apbHeight, 0)
                var txt = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ..."
                pageLay.AddChild( MUI.CreateTextParagraph(txt) )
            scr.AddChild(pageLay)

        lay.AddChild(scr)
        lay.AddChild(apb)

    app.AddLayout(lay)
}

Copy All

Example - Sample page click to expand contents

cfg.Light
cfg.MUI

function OnStart()
{
    color = MUI.colors.teal
    app.InitializeUIKit(color.teal)

    lay = MUI.CreateLayout("Absolute", "FillXY")

        apb = MUI.CreateAppBarModern("Search for games", "more_vert", "Round")
        apb.SetOnMenuTouch(OnMenuTouch)
        apb.SetOnControlTouch(OnCtrlTouch)

        var apbHeight = apb.GetHeight()

        scr = app.CreateScroller(1, 1, "NoScrollBar")

            pageLay = MUI.CreateLayout("Linear", "VCenter")
            pageLay.SetSize(1, 1.2)
            pageLay.SetPadding(0, 0, apbHeight, 0)
                var txt = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ..."
                pageLay.AddChild( MUI.CreateTextParagraph(txt) )
            scr.AddChild(pageLay)

        lay.AddChild(scr)
        lay.AddChild(apb)

    app.AddLayout(lay)
}

function OnMenuTouch()
{
    lay.Animate("SlideToBottom")
}

function OnCtrlTouch()
{
    app.ShowPopup("You click for more options.")
}

Copy All

Example - Dark mode click to expand contents

cfg.Dark
cfg.MUI

function OnStart()
{
    color = MUI.colors.teal
    app.InitializeUIKit(color.teal)

    lay = MUI.CreateLayout("Absolute", "FillXY")

        apb = MUI.CreateAppBarModern("My Title", "menu", "search,more_vert")
        var apbHeight = apb.GetHeight()

        scr = app.CreateScroller(1, 1, "NoScrollBar")

            pageLay = MUI.CreateLayout("Linear", "VCenter")
            pageLay.SetSize(1, 1.2)
            pageLay.SetPadding(0, 0, apbHeight, 0)
                var txt = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ..."
                pageLay.AddChild( MUI.CreateTextParagraph(txt) )
            scr.AddChild(pageLay)

        lay.AddChild(scr)
        lay.AddChild(apb)

    app.AddLayout(lay)
}

Copy All