B4J Question [BANanoReactMDL] SetProps

micro

Well-Known Member
Licensed User
Longtime User
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.

B4X:
'*** 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")

upload_2019-10-6_11-18-34.png


where am I wrong?
Thanks
 

Attachments

  • upload_2019-10-6_11-16-32.png
    upload_2019-10-6_11-16-32.png
    23.2 KB · Views: 222

micro

Well-Known Member
Licensed User
Longtime User
@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").
......:confused:
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?
B4X:
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
 
Upvote 0

Mashiane

Expert
Licensed User
Longtime User
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

B4X:
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.
 
Upvote 0
Top