diff --git a/README.md b/README.md index 807b04d..83c244e 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,141 @@ # How to customize size of close button in Xamarin.Forms chip group -[Xamarin.Forms Chips](https://help.syncfusion.com/xamarin/chips/getting-started) allow users to display the information in token representation. These chips arranged manner named ChipGroup. Default mode of [ChipGroup](https://www.syncfusion.com/xamarin-ui-controls/xamarin-chips) is [Input](https://help.syncfusion.com/xamarin/chips/types#input) type and its default size has been customized as per in below +The chip control supports to customize the background color, border color, close button color, and more. The chip control can be customized using the following properties: -![](https://github.com/SyncfusionExamples/How-to-customize-size-of-close-button-in-Xamarin.Forms-chip-group/blob/main/Close-Button-Customization.gif) +# ShowCloseButton +The [ShowCloseButton](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfChip.html#Syncfusion_XForms_Buttons_SfChip_ShowCloseButton) property sets the visible state of close button in [SfChip](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfChip.html). + +**[XAML]** + +``` + + + + + + +``` + +**[C#]** + +``` + SfChip chip = new SfChip(); + chip.Text = "James"; + chip.WidthRequest = 150; + chip.HorizontalOptions = LayoutOptions.Center; + chip.VerticalOptions = LayoutOptions.Center; + chip.ShowCloseButton = true; +``` +# ShowSelectionIndicator + +The [ShowCloseButton](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfChip.html#Syncfusion_XForms_Buttons_SfChip_ShowSelectionIndicator +) property sets the visible state of close button in [SfChip](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfChip.html). + +**[XAML]** +``` + + + + +``` +**[C#]** + +``` + SfChip chip = new SfChip(); + chip.Text = "James"; + chip.WidthRequest = 150; + chip.HorizontalOptions = LayoutOptions.Center; + chip.VerticalOptions = LayoutOptions.Center; + chip.ShowCloseButton = true; + chip.ShowSelectionIndicator = true; +``` + +# CloseButtonColor +The [CloseButtonColor](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfChip.html#Syncfusion_XForms_Buttons_SfChip_CloseButtonColor) property customizes the color of the close button in [SfChip](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfChip.html). + +**[XAML]** + +``` + + + + +``` + +**[C#]** + +``` + SfChip chip = new SfChip(); + chip.Text = "James"; + chip.ShowCloseButton = true; + chip.CloseButtonColor = Color.White; +``` +# BorderColor +The [BorderColor](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfButton.html#Syncfusion_XForms_Buttons_SfButton_BorderColor) property customizes the color of border in [SfChip](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfChip.html). + +**[XAML]** + +``` + + +``` + +**[C#]** +``` + SfChip chip = new SfChip(); + chip.Text = "James"; + chip.WidthRequest = 150; + chip.HorizontalOptions = LayoutOptions.Center; + chip.VerticalOptions = LayoutOptions.Center; + chip.BorderWidth = 4; + chip.BorderColor = Color.Black; +``` +# BorderWidth +The [BorderWidth](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfButton.html#Syncfusion_XForms_Buttons_SfButton_BorderWidth) property customizes the thickness of border in [SfChip](https://help.syncfusion.com/cr/xamarin/Syncfusion.XForms.Buttons.SfChip.html). + +**[XAML]** + +``` + + +``` + +**[C#]** + +``` + SfChip chip = new SfChip(); + chip.Text = "James"; + chip.WidthRequest = 150; + chip.HorizontalOptions = LayoutOptions.Center; + chip.VerticalOptions = LayoutOptions.Center; + chip.BorderWidth = 8; +``` \ No newline at end of file