Material Components

Material Components are modular, meaning developers can pick and choose specific UI elements (such as buttons, cards, text fields) based on their application's requirements. This modularity enhances flexibility and allows for easy integration into existing projects.

About the component


Image Description
  •  Last Update 25 Oct, 2023
  •  Component Version : 2.0.0
  •  API 21, Android 5.0 Lollipop
  •  29 Blocks Available

Material Chips

The Material Chips component in AB allows displaying selectable items compactly. It offers customization options for appearance (colors, icons, text) and behavior (checked state, visibility), and provides events for click and state changes, along with methods for adjusting margins and padding.

Overview

A visible component thats, created horizonntally and vertically navigation bar with animation.

Events

Image Description
Events

Change

  • Event triggered when the checked state changes.

    • # Name Type(s) Default Value
    1 isChecked boolean
    Image Description
    Events

    Click

  • Event triggered when the chip is clicked.

    • Image Description
    Events

    CloseIconClick

  • Event triggered when the close icon is clicked.

    • Methods

    Image Description
    Methods

    SetMargin

  • Sets the margins of the component.

    • # Name Type(s) Default Value
    1 left number
    2 top number
    3 right number
    4 bottom number
    Image Description
    Methods

    SetPadding

  • Sets the padding of the component.

    • # Name Type(s) Default Value
    1 left number
    2 top number
    3 right number
    4 bottom number

    Properties

    Image Description
    Image Description
    Properties

    BackgroundColor

  • Gets the background color of the chip.

  • Sets the background color of the chip.

    • # Name Type(s) Default Value
    1 BackgroundColor color
    2 BackgroundColor color
    Image Description
    Image Description
    Properties

    Checked

  • Gets whether the chip is checked.


  • Sets whether the chip is checked.

    • # Name Type(s) Default Value
    1 Checked boolean
    2 Checked boolean false
    Image Description
    Properties

    CheckedIcon

  • Sets the icon to be displayed when the chip is checked.

    • # Name Type(s) Default Value
    1 icon string
    Image Description
    Image Description
    Properties

    CheckedIconColor

  • Gets the color of the icon displayed when the chip is checked.

  • Sets the color of the icon displayed when the chip is checked.

    • # Name Type(s) Default Value
    1 CheckedIconColor color
    2 CheckedIconColor color
    Image Description
    Image Description
    Properties

    CheckedIconVisible

  • Gets whether the checked icon is visible.


  • Sets whether the checked icon is visible.

    • # Name Type(s) Default Value
    1 CheckedIconVisible boolean
    2 CheckedIconVisible boolean true
    Image Description
    Properties

    ChipEndPadding

  • Sets the end padding of the chip.

    • # Name Type(s) Default Value
    1 value integer
    Image Description
    Image Description
    Properties

    ChipIconSize

  • Gets the size of the chip icon.

  • Sets the size of the chip icon.

    • # Name Type(s) Default Value
    1 ChipIconSize integer
    2 ChipIconSize integer
    Image Description
    Properties

    ChipStartPadding

  • Sets the start padding of the chip.

    • # Name Type(s) Default Value
    1 value integer
    Image Description
    Properties

    ChipStrokeWidth

  • Sets the stroke width of the chip.

    • # Name Type(s) Default Value
    1 value number
    Image Description
    Image Description
    Properties

    Elevation

  • Gets theelevation of the chip.

  • Sets the elevation of the chip.

    • # Name Type(s) Default Value
    1 Elevation integer
    2 Elevation integer
    Image Description
    Image Description
    Properties

    Ellipsize

  • Gets where the text should be ellipsized.


  • Sets where the text should be ellipsized.

    • # Name Type(s) Default Value
    1 value string
    2 value string
    Image Description
    Image Description
    Properties

    Enabled

  • Gets whether the chip is enabled.


  • Sets whether the chip is enabled.

    • # Name Type(s) Default Value
    1 Enabled boolean
    2 Enabled boolean true
    Image Description
    Image Description
    Properties

    FontBold

  • Gets whether the font should be bold.


  • Sets whether the font should be bold.

    • # Name Type(s) Default Value
    1 FontBold boolean
    2 FontBold boolean false
    Image Description
    Image Description
    Properties

    FontTypeface

  • Gets the font typeface.


  • Sets the font typeface.

    • # Name Type(s) Default Value
    1 FontTypeface integer
    2 FontTypeface string
    Image Description
    Image Description
    Properties

    Height

  • Gets the view's height.

  • SetHeight

    Sets the view's height.

    • # Name Type(s) Default Value
    1 Height Integer
    2 Height Integer
    Image Description
    Properties

    HeightPercent

  • Sets the height of the component as a percentage of its parent's height.

    • # Name Type(s) Default Value
    1 percentage number
    Image Description
    Image Description
    Properties

    Icon

  • Gets the icon of the chip.

  • Sets the icon of the chip.

    • # Name Type(s) Default Value
    1 Icon string
    2 Icon string
    Image Description
    Properties

    IconColor

  • Sets the color of the icon.

    • # Name Type(s) Default Value
    1 color color
    Image Description
    Properties

    IconEndPadding

  • Sets the end padding of the icon.

    • # Name Type(s) Default Value
    1 value integer
    Image Description
    Properties

    IconStartPadding

  • Sets the start padding of the icon.

    • # Name Type(s) Default Value
    1 value integer
    Image Description
    Image Description
    Properties

    IconVisible

  • Gets whether the icon is visible.


  • Sets whether the icon is visible.

    • # Name Type(s) Default Value
    1 IconVisible boolean
    2 IconVisible boolean true
    Image Description
    Image Description
    Properties

    RemoveContentDescription

  • Gets the content description for the remove icon.


  • Sets the content description for the remove icon.

    • # Name Type(s) Default Value
    1 contentDescription string
    2 contentDescription string
    Image Description
    Properties

    RemoveIcon

  • Sets the icon to be used for the remove action.

    • # Name Type(s) Default Value
    1 icon string
    Image Description
    Image Description
    Properties

    RemoveIconColor

  • Gets the color of the remove icon.


  • Sets the color of the remove icon.

    • # Name Type(s) Default Value
    1 RemoveIconColor color
    2 RemoveIconColor color
    Image Description
    Image Description
    Properties

    RemoveIconEndPadding

  • Gets the end padding of the remove icon.


  • Sets the end padding of the remove icon.

    • # Name Type(s) Default Value
    1 value integer
    2 value integer
    Image Description
    Image Description
    Properties

    RemoveIconSize

  • Gets the size of the remove icon.


  • Sets the size of the remove icon.

    • # Name Type(s) Default Value
    1 RemoveIconSize integer
    2 RemoveIconSize integer
    Image Description
    Image Description
    Properties

    RemoveIconStartPadding

  • Gets the start padding of the remove icon.


  • Sets the start padding of the remove icon.

    • # Name Type(s) Default Value
    1 value integer
    2 value integer
    Image Description
    Image Description
    Properties

    RemoveIconVisible

  • Gets whether the remove icon is visible.


  • Sets whether the remove icon is visible.

    • # Name Type(s) Default Value
    1 RemoveIconVisible boolean
    2 RemoveIconVisible boolean true
    Image Description
    Image Description
    Properties

    TextSize

  • Gets the text size.


  • Sets the text size.

    • # Name Type(s) Default Value
    1 TextSize integer
    2 TextSize integer
    Image Description
    Properties

    TextStartPadding

  • Sets the start padding of the text.

    • # Name Type(s) Default Value
    1 value integer
    Image Description
    Properties

    TextEndPadding

  • Sets the end padding of the text.

    • # Name Type(s) Default Value
    1 value integer
    Image Description
    Image Description
    Properties

    Visible

  • Gets whether the chip is visible.


  • Sets whether the chip is visible.

    • # Name Type(s) Default Value
    1 Visible boolean
    2 Visible boolean true
    Image Description
    Image Description
    Properties

    TextColor

  • Gets the text color of the chip.

  • Sets the text color of the chip.

    • # Name Type(s) Default Value
    1 TextColor color
    2 TextColor color