B4J Library [ABMaterial]: MashAccordion

Hi there

The MashAccordion is a fully theme-able accordion based on the material css Collapsible

One is able to theme the icon, the text and also show a themed badge.

As noted above, we have 3 MashAccordion components with clickable-buttons added like this..

Dim ma As MashAccordion
    ma.Initialize(page,"ma","")
    ma.AddItem("warning","Warning",MashPlugIns.MaterialIcons.mdi_3d_rotation,"",MashPlugIns.EnumThemes.warn,"","","")
    ma.AddItem("danger","Danger",MashPlugIns.MaterialIcons.mdi_ac_unit,"",MashPlugIns.EnumThemes.danger,"","","")
    ma.AddItem("success","Success",MashPlugIns.MaterialIcons.mdi_access_alarm,"",MashPlugIns.EnumThemes.success,"","","")
    ma.AddItem("primary","Primary",MashPlugIns.MaterialIcons.mdi_account_balance,"",MashPlugIns.EnumThemes.primary,"","","")
    ma.AddItem("info","Info",MashPlugIns.MaterialIcons.mdi_access_time,"",MashPlugIns.EnumThemes.info,"","","")
    ma.AddItem("muted","Muted",MashPlugIns.MaterialIcons.mdi_accessible,"",MashPlugIns.EnumThemes.muted,"","","")
    page.Cell(3,1).AddComponent(ma.ABMComp)
    
    Dim ma1 As MashAccordion
    ma1.Initialize(page,"ma1","")
    'ma1.CollapsibleType = ma1.EnumType.expandable
    ma1.AddItem("warning","Warning",MashPlugIns.MaterialIcons.mdi_3d_rotation,"",MashPlugIns.EnumThemes.warn_transparent,"","2",MashPlugIns.EnumThemes.black_orange)
    ma1.AddSubItem("warning","warning1","This is warning 1",MashPlugIns.MaterialIcons.mdi_format_color_text,"",MashPlugIns.EnumThemes.warn_transparent, _
    MashPlugIns.EnumThemes.green_transparent,"","")
    ma1.AddSubItem("warning","warning2","This is warning 2",MashPlugIns.MaterialIcons.mdi_accessibility,"",MashPlugIns.EnumThemes.warn_transparent,"","","")
    ma1.AddItem("danger","Danger",MashPlugIns.MaterialIcons.mdi_ac_unit,"",MashPlugIns.EnumThemes.danger_transparent,"","","")
    ma1.AddItem("success","Success",MashPlugIns.MaterialIcons.mdi_access_alarm,"",MashPlugIns.EnumThemes.success_transparent,"","","")
    ma1.AddItem("primary","Primary",MashPlugIns.MaterialIcons.mdi_account_balance,"",MashPlugIns.EnumThemes.primary_transparent,"","","")
    ma1.AddItem("info","Info",MashPlugIns.MaterialIcons.mdi_access_time,"",MashPlugIns.EnumThemes.info_transparent,"","","")
    ma1.AddItem("muted","Muted",MashPlugIns.MaterialIcons.mdi_accessible,"",MashPlugIns.EnumThemes.muted_transparent,"","","")
    page.Cell(3,2).AddComponent(ma1.ABMComp)
    
    Dim ma2 As MashAccordion
    ma2.Initialize(page,"ma2","")
    ma2.AddItem("warning","Warning",MashPlugIns.MaterialIcons.mdi_3d_rotation,"","",MashPlugIns.EnumThemes.warn_transparent,"","")
    ma2.AddItem("danger","Danger",MashPlugIns.MaterialIcons.mdi_ac_unit,"","",MashPlugIns.EnumThemes.danger_transparent,"","")
    ma2.AddItem("success","Success",MashPlugIns.MaterialIcons.mdi_access_alarm,"","",MashPlugIns.EnumThemes.success_transparent,"","")
    ma2.AddItem("primary","Primary",MashPlugIns.MaterialIcons.mdi_account_balance,"","",MashPlugIns.EnumThemes.primary_transparent,"","")
    ma2.AddItem("info","Info",MashPlugIns.MaterialIcons.mdi_access_time,"","",MashPlugIns.EnumThemes.info_transparent,"","")
    ma2.AddItem("muted","Muted",MashPlugIns.MaterialIcons.mdi_accessible,"","",MashPlugIns.EnumThemes.muted_transparent,"","")
    page.Cell(4,1).AddComponent(ma2.ABMComp)

Trapping the events of these happens via the component id..

Sub ma_click(value As Map)
    Dim valuex As String = value.Get("value")
    page.Msgbox("",valuex,"","OK",False,"","")
End Sub

Sub ma1_click(value As Map)
    Dim valuex As String = value.Get("value")
    Select Case valuex
    Case "warning"
    Case Else
        page.Msgbox("",valuex,"","OK",False,"","")
    End Select
End Sub

Sub ma2_click(value As Map)
    Dim valuex As String = value.Get("value")
    page.Msgbox("",valuex,"","OK",False,"","")
End Sub

Coming soon to MashPlugIns.