Skip to content

horusstudio.maui.materialdesigncontrols.materialchip.md

Latest commit

 

History

History
407 lines (231 loc) · 11.6 KB

horusstudio.maui.materialdesigncontrols.materialchip.md

File metadata and controls

407 lines (231 loc) · 11.6 KB

MaterialChip

Chips help people enter information, make selections, filter content, or trigger actions and follow Material Design Guidelines. See more.

Namespace: HorusStudio.Maui.MaterialDesignControls

Inherits from: MaterialChip → ContentView


Remarks: The MaterialViewGroup class allows grouping chips, providing control over the selection type (Single or Multiple), item selection through bindings, and commands that trigger when the selection changes.

XAML sample

xmlns:material="clr-namespace:HorusStudio.Maui.MaterialDesignControls;assembly=HorusStudio.Maui.MaterialDesignControls"

<material:MaterialChip
       Type="Normal"
       LeadingIcon="plus.png"
       Text="Suggestion both"
       TrailingIcon="horus_logo.png"/>

C# sample

var chip = new MaterialChip
{
    Type = MaterialChipType.Normal,
    LeadingIcon = "plus.png",
    Text = "Suggestion both",
    TrailingIcon="horus_logo.png"
};

See more example

Properties

ApplyLeadingIconTintColor

Gets or sets if leading icon should use tint color or not. This is a bindable property.

Property type: Boolean

Default value: true


ApplyTrailingIconTintColor

Gets or sets if trailing icon should use tint color or not. This is a bindable property.

Property type: Boolean

Default value: true


AutomationId

Gets or sets a value that allows the automation framework to find and interact with this element.

Property type: String

Remarks: This value may only be set once on an element.

When set on this control, the AutomationId is also used as a base identifier for its internal elements:

  • The MaterialChip control uses the same AutomationId value.
  • The chip's text label uses the identifier "{AutomationId}_Text".

This convention allows automated tests and accessibility tools to consistently locate all subelements of the control.


BackgroundColor

Gets or sets a background color for Chip. This is a bindable property.

Property type: Color

Default value: Theme: Light = MaterialLightTheme.SurfaceContainerLow - Dark = MaterialDarkTheme.SurfaceContainerLow


BorderColor

Gets or sets stroke color for Chip. This is a bindable property.

Property type: Color

Default value: Theme: Light = MaterialLightTheme.Outline - Dark = MaterialDarkTheme.Outline

Remarks:

  • This property has no effect if IBorderElement.BorderWidth is set to 0.

  • On Android this property will not have an effect unless VisualElement.BackgroundColor is set to a non-default color.


BorderWidth

Gets or sets border width for Chip in device-independent units. This is a bindable property.

Property type: Double

Default value: 1

Remarks: Set this value to a non-zero value in order to have a visible border.


Command

Gets or sets the command to invoke when Chip is activated. This is a bindable property.

Property type: ICommand

Default value: null

Remarks: This property is used to associate a command with an instance of Chips. This property is most often set in the MVVM pattern to bind callbacks back into the ViewModel.

  • VisualElement.IsEnabled is controlled by the Command.CanExecute(object) if set.

CommandParameter

Gets or sets the parameter to pass to the MaterialChip.Command property. This is a bindable property.

Property type: Object

Default value: null


CornerRadius

Gets or sets the corner radius for Chip. This is a bindable property.

Property type: CornerRadius

Default value: CornerRadius(8)


FontFamily

Gets or sets a font family for Chip. This is a bindable property.

Property type: String

Default value: MaterialFontFamily.Default


FontSize

Gets or sets font size for Chip. This is a bindable property.

Property type: Double

Default value: MaterialFontSize.LabelLarge / Tablet: 14 - Phone: 11


IsEnabled

Gets or sets if Chip is enabled. This is a bindable property.

Property type: Boolean

Default value: true


IsSelected

Gets or sets if Chip is selected (Filter type only). Inherited from IGroupableView.IsSelected. This is a bindable property.

Property type: Boolean

Default value: false


LeadingIcon

Gets or sets a leading icon for Chip. This is a bindable property.

Property type: ImageSource

Default value: null


LeadingIconSize

Gets or sets the leading icon size. This is a bindable property.

Property type: Double

Default value: 18 x 18.


LeadingIconTintColor

Gets or sets tint color for Chip's leading icon. This is a bindable property.

Property type: Color

Default value: Theme: Light = MaterialLightTheme.Primary - Dark = MaterialDarkTheme.Primary


Padding

Gets or sets the padding for Chip. This is a bindable property.

Property type: Thickness

Default value: Thickness(16,0)


Shadow

Gets or sets the shadow effect cast by the element. This is a bindable property.

Property type: Shadow

Default value: MaterialElevation.Level1


ShadowColor

Gets or sets shadow color for Chip. This is a bindable property.

Property type: Color

Default value: Theme: Light = MaterialLightTheme.Shadow - Dark = MaterialDarkTheme.Shadow


Text

Gets or sets text for Chip. This is a bindable property.

Property type: String

Default value: string.Empty


TextColor

Gets or sets text color for Chip. This is a bindable property.

Property type: Color

Default value: Theme: Light = MaterialLightTheme.OnSurfaceVariant - Dark = MaterialDarkTheme.OnSurfaceVariant


TouchAnimation

Gets or sets a custom animation to be executed when Chip is activated. Inherited from ITouchableView.TouchAnimation. This is a bindable property.

Property type: ITouchAnimation

Default value: null


TouchAnimationType

Gets or sets an animation to be executed when Chip is activated. Inherited from ITouchableView.TouchAnimationType. This is a bindable property.

Property type: TouchAnimationTypes

Name Value Description
None 0 None: no animation runs.
Fade 1 Fade: Represents an animation that simulates a "fade" effect by changing the opacity over the target element.
Scale 2 Scale: Represents an animation that simulates a "sink" or "sunken" effect by scaling the target element.
Bounce 3 Bounce: Represents an animation that simulates a "sink" or "sunken" effect with a "bounce" effect when the user releases the target element.

Default value: TouchAnimationTypes.Fade


TrailingIcon

Gets or sets a trailing icon for Chip. This is a bindable property.

Property type: ImageSource

Default value: null


TrailingIconSize

Gets or sets the trailing icon size. This is a bindable property.

Property type: Double

Default value: 18 x 18.


TrailingIconTintColor

Gets or sets tint color for Chip's trailing icon. This is a bindable property.

Property type: Color

Default value: Theme: Light = MaterialLightTheme.Primary - Dark = MaterialDarkTheme.Primary


Type

Gets or sets Chip type. This is a bindable property.

Property type: MaterialChipType

Name Value Description
Filter 0 Filter chips
Normal 1 Assist, input and suggestion chips

Default value: MaterialChipType.Normal

Remarks:

  • Normal: Help narrow a user’s intent by presenting dynamically generated suggestions, such as possible responses.

  • Filter: Use tags or descriptive words to filter content. They can be a good alternative to segmented buttons or checkboxes when viewing a list or search results.


Value

Gets or sets a value for Chip. Inherited from IGroupableView.Value. This is a bindable property.

Property type: Object

Default value: MaterialChip.Text

Remarks: If a value is not explicitly set, the control will use the Text property if set or the Id property as its default.


Events

Clicked

Occurs when the chips is clicked/tapped.


Touch

Occurs when the chip is touched.


Known issues and pending features

  • The Selected property in Appium is not supported when using the AutomationId of this control.