B4J Question [BANanoReactMDL] SetProps

[micro]

Hi Mashiane
as usual I do tests your projects to learn.
In your BANanoReactMDLDemo, in pgLesson15/Sub Show, i tried to add an image in the header but
I can't set a margin/padding on the left.

'*** HEADER ***
    'fixed header
    lay.SetFixedHeader(True)
    'lay.Header.SetWaterFall(True)
    Dim imghead As MDLImage
    imghead.Initialize(BR, "logo").SetPropHeight(60).SetProps(CreateMap("margin-left": "20px"))
    imghead.SetSrc("./assets/logo.png")
    lay.Header.AddReactElement(imghead.Image)
    'set the header title
    lay.Header.SetSpacer(True)
    lay.Header.SetTitle("BANanoReactMDL")

where am I wrong?
Thanks

 

[Mashiane]

@micro Thanks for your interest, appreciated. To set a margin or padding on an element use .SetStyle. This is used to set all css related properties for an element. SetProp is used to set an attribute e.g. id = "nav1" .SetProp(createmap("id":"nav1").

All the best.

 

[micro]

@micro Thanks for your interest, appreciated. To set a margin or padding on an element use .SetStyle. This is used to set all css related properties for an element. SetProp is used to set an attribute e.g. id = "nav1" .SetProp(createmap("id":"nav1").

......
I had not seen the SetStyle property, i'm sorry.
Another question:
In Sub BadgeShow how i can add event on link click and badge?

Sub Badges_Show
    Dim div As ReactElement = BR.div("mybadges")
    div.AddElement(BR.CreateElement("p",CreateMap(),"Badges"))
   
    Dim badge1 As MDLItem
    badge1.Initialize(BR, "div").SetMaterialIcons("account_box").SetBadge(1).SetBadgeOverlap(True)
    '
    div.AddElement(badge1.item)
    div.AddBR
    '
    div.AddElement(BR.CreateElement("span",CreateMap("data-badge":"4","className":"mdl-badge"),"Inbox")) '<-----Event
    div.AddBR
    '
    div.AddElement(BR.CreateElement("a", CreateMap("data-badge":"10","href":"#","className":"mdl-badge"),"This link has a badge."))
    div.AddBR
    '
    div.AddElement(BR.CreateElement("a", CreateMap("data-badge":"5","href":"#","className":"mdl-badge mdl-badge--no-background"),"This link has a badge.")) '<---- Event
    div.Render("grid")
    MDL.upgrade
End Sub

Thanks

 

[Mashiane]

Each ReactElement has a .SetOnClick method that you can define. This you pass the module and methodName.

1. So you can append .SetOnClick(me, "badgeClick") before the closing bracket
2. Then you can define a click sub like

Sub badgeClick(e as BANAnoEvent)
  log(e)
End Sub

3. Rather though set an id property also for the element so that you can get the id of the target element using the id with BR.GetIDFromEvent(e).

Ta!

PS: Please note that due to this lib using functional components I still have to master setting/getting component states. There is a hook that the FB guys have done though for this and I will implement such in the future.