CreateCard

Hello World

Content:
- Methods

A material implementation of a card.

crd = MUI.CreateCard( options ) → Object

It is fully customizable to suit your likings.

options propertiesdefinitions

titleString Title text

bodyString Body text

imageString Path to the image

buttonTextString Comma separated string for button text

colorString Color string

widthNumber Fraction of the screen width

divider1Boolean Divider below the avatar

divider2Boolean Divider below the body

avatarString Path to the avatar image

avatarOnTopBoolean Is the avatar on top of the image

buttonTypeString Can be 'raised', 'raisedoutline', 'round', 'roundoutline' or 'flat'

nameString Name of the card

Example - No-image, No-Avatar click to expand contents

cfg.Light
cfg.MUI

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

    lay = MUI.CreateLayout("Linear", "VCenter,FillXY")

        var options = {
            title: "Card Title",
            body: "Lorem ipsum dolor set amit consectetur elit",
            buttonText: "SEE MORE",
            width: 0.94
        }
        var card = UI.CreateCard(options)
        lay.AddChild(card)

    app.AddLayout(lay)
}

Copy All

Example - With-image, No-Avatar click to expand contents

cfg.Light
cfg.MUI

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

    lay = MUI.CreateLayout("Linear", "VCenter,FillXY")

        var options = {
            title: "Card Title",
            body: "Lorem ipsum dolor set amit consectetur elit",
            buttonText: "LINKS,SEE MORE",
            image: "/Sys/Img/Sky.jpg",
            width: 0.94
        }
        var card = UI.CreateCard(options)
        lay.AddChild(card)

    app.AddLayout(lay)
}

Copy All

Example - With Image, With Avatar click to expand contents

cfg.Light
cfg.MUI

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

    lay = MUI.CreateLayout("Linear", "VCenter,FillXY")

        var options = {
            title: "Card Title",
            body: "Lorem ipsum dolor set amit consectetur elit",
            buttonText: "LINKS,SEE MORE",
            image: "/Sys/Img/Sky.jpg",
            width: 0.94,
            avatar: "/Sys/Img/Droid1.png"
        }
        var card = UI.CreateCard(options)
        lay.AddChild(card)

    app.AddLayout(lay)
}

Copy All

Example - Complete click to expand contents

cfg.Dark
cfg.MUI

function OnStart()
{
    lay = MUI.CreateLayout("Linear", "VCenter,FillXY")
        scrl = app.CreateScroller(1, 1, "NoScrollBar")
            lay2 = MUI.CreateLayout("Linear", "VCenter")
            lay2.SetPadding(0, 0.02, 0, 0.02)
            lay2.SetSize(1)
                var options = {
                    title: "Card Title",
                    body: "Lorem ipsum dolor set amit consectetur elit",
                    buttonText: "LINKS,SEE MORE",
                    image: "/Sys/Img/Sky.jpg",
                    width: 0.94,
                    avatar: "/Sys/Img/Droid1.png",
                    avatarOnTop: true,
                    divider1: true,
                    divider2: true
                }

                options.name = "my-card1"
                card1 = UI.CreateCard(options)
                lay2.AddChild(card1)
                card1.SetOnButtonTouch(OnBtnTouch)

                options.name = "my-card2"
                options.buttonType = "raised"
                card2 = UI.CreateCard(options)
                card2.SetMargins(0, 0.02, 0, 0)
                lay2.AddChild(card2)
                card2.SetOnButtonTouch(OnBtnTouch)
            scrl.AddChild(lay2)
        lay.AddChild(scrl)
    app.AddLayout(lay)
}

function OnBtnTouch(btnText, cardName)
{
    app.ShowPopup(btnText + " : " + cardName)
}

Copy All