update badge docs add images for badge vs badgeview, change badge types example
This commit is contained in:
PROGRESS\doyordan
Родитель
ba2deb63e8
Коммит
0fcc6fe56d
|
|
@ -10,6 +10,8 @@ slug: badge-overview
|
|||
|
||||
## Badge vs BadgeView
|
||||
|
||||
|
||||
|
||||
Badge is the marker which is displayed to show notifications, statuses, etc. The BadgeView is the control in which you can add a content and position the badge based on this content.
|
||||
|
||||
>important We recommend you use the [BadgeView control]({%slug badgeview-overview%})
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ Here is the Animation properties set to the RadBadgeVierw control:
|
|||
|
||||
<snippet id='badgeview-animation'/>
|
||||
|
||||
>tip Badge Animation example is located inside the SDK Browser Application/Examples/BadgeViewControl/Features Category folder.
|
||||
>tip Badge Animation example is located inside the [SDKBrowserApplication/Examples/BadgeViewControl/FeaturesCategory](https://github.com/telerik/xamarin-forms-sdk/tree/master/XamarinSDK/SDKBrowser/SDKBrowser/Examples/BadgeViewControl/FeaturesCategory/BadgeAnimationExample).
|
||||
|
||||
## See Also
|
||||
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ The final result:
|
|||
|
||||
|
||||
|
||||
>important ControlTemplate Example can be found inside the FeaturesCategory folder in SDK Browser Application/Examples/BadgeViewControl.
|
||||
>important ControlTemplate Example can be found inside the FeaturesCategory folder in [SDK Browser Application/Examples/BadgeViewControl](https://github.com/telerik/xamarin-forms-sdk/tree/master/XamarinSDK/SDKBrowser/SDKBrowser/Examples/BadgeViewControl/FeaturesCategory/ControlTemplateExample).
|
||||
|
||||
## See Also
|
||||
|
||||
|
|
|
|||
|
|
@ -32,10 +32,10 @@ You have two options:
|
|||
|
||||
| Platform | Assemblies |
|
||||
| -------- | ---------- |
|
||||
| Portable | Telerik.XamarinForms.Primitives.dll <br />Telerik.XamarinForms.Common.dll |
|
||||
| Android | Telerik.XamarinForms.Primitives.dll<br/>Telerik.XamarinForms.Common.dll |
|
||||
| iOS | Telerik.Xamarin.iOS.dll <br/> Telerik.XamarinForms.Primitives.dll <br />Telerik.XamarinForms.Common.dll |
|
||||
| UWP | Telerik.Core.dll<br/>Telerik.XamarinForms.Primitives.dll <br/>Telerik.XamarinForms.Common.dll |
|
||||
| Portable | Telerik.XamarinForms.Primitives.dll <br/>Telerik.XamarinForms.Common.dll <br/>Telerik.XamarinForms.SkiaSharp.dll |
|
||||
| Android | Telerik.XamarinForms.Primitives.dll <br/>Telerik.XamarinForms.Common.dll <br/>Telerik.XamarinForms.SkiaSharp.dll |
|
||||
| iOS | Telerik.Xamarin.iOS.dll <br/> Telerik.XamarinForms.Primitives.dll <br />Telerik.XamarinForms.Common.dll <br/>Telerik.XamarinForms.SkiaSharp.dll |
|
||||
| UWP | Telerik.Core.dll <br/>Telerik.XamarinForms.Primitives.dll <br/>Telerik.XamarinForms.Common.dll <br/>Telerik.XamarinForms.SkiaSharp.dll |
|
||||
|
||||
## 3. Adding RadBadgeView control
|
||||
|
||||
|
|
@ -55,11 +55,11 @@ In addition to this you need to add the following namespace:
|
|||
|
||||
## 4. Adding RadBadgeView Content and BadgeText
|
||||
|
||||
>important The BadgeView will be visualized only if its `Content` property is set.
|
||||
>important The Badge marker(indicator) which is part of the RadBadgeView will be visualized only if RadBadgeView `Content` property is set.
|
||||
|
||||
## Example
|
||||
|
||||
Add the RadBadgeView and set its `Content` property and BadgeText property.
|
||||
Add the RadBadgeView and set `Content` property and `BadgeText` property.
|
||||
|
||||
<snippet id='badgeview-getting-started-xaml'/>
|
||||
<snippet id='badgeview-getting-started-csharp'/>
|
||||
|
|
@ -70,7 +70,7 @@ Here is the result:
|
|||
|
||||
|
||||
|
||||
>important BadgeView Getting Started Example can be found in *SDK Browser/Examples/BadgeViewControl* folder.
|
||||
>important BadgeView Getting Started Example can be found in [SDK Browser/Examples/BadgeViewControl/GettingStartedCategory](https://github.com/telerik/xamarin-forms-sdk/tree/master/XamarinSDK/SDKBrowser/SDKBrowser/Examples/BadgeViewControl/GettingStartedCategory/GettingStartedExample) folder.
|
||||
|
||||
## See Also
|
||||
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ With `BadgeText` property(*string*) you can define a text. The text will be disp
|
|||
|
||||
Use the `BadgeHorizontalPositon` and `BadgeVerticalPosition` properties to position the badge marker based on the content inside the RadBadgeView. The properties are of type *Telerik.XamarinForms.Primitives.BadgePosition* and the available options are `Start`, `Center` and `End`.
|
||||
|
||||
For more details about this check the [Badge Position]({%slug badgeview-position-alignment%}) article.
|
||||
For more details about this check the [Badge Position]({%slug badgeview-position-alignment%}#badge-position) section.
|
||||
|
||||
## Badge Alignment
|
||||
|
||||
|
|
@ -92,13 +92,13 @@ For more details about this check the [Badge Position]({%slug badgeview-position
|
|||
|
||||
Specify the alignment of the badge based on the content inside the RadBadgeView using the `BadgeHorizontalAlignment` and `BadgeVerticalAlignment` properties. The properties are of type *Telerik.XamarinForms.Primitives.BadgeAlignment* and the available options are `Start`, `Center` and `End`.
|
||||
|
||||
For more details about this check the [Badge Alignment]({%slug badgeview-position-alignment%}) article.
|
||||
For more details about this check the [Badge Alignment]({%slug badgeview-position-alignment%}#badge-alignment) section.
|
||||
|
||||
## Badge Offset
|
||||
|
||||
Specify the horizontal/vertical distance between the content of the Badge and its alignment point using the `BadgeOffsetX` and `BadgeOffsetY` properties.
|
||||
|
||||
For more details please visit our [Badge Offset]({%slug badgeview-position-alignment%}) article.
|
||||
For more details please visit our [Badge Offset]({%slug badgeview-position-alignment%}#badge-offset) section.
|
||||
|
||||
## Badge Animation
|
||||
|
||||
|
|
@ -108,12 +108,17 @@ For more details please visit our [Badge Animation]({%slug badgeview-animation%}
|
|||
|
||||
## Badge Types
|
||||
|
||||
You can choose what will be the type of the badge by setting the `BadgeType` property(enumeration of type *Telerik.XamarinForms.Primitives.BadgeType*).
|
||||
|
||||
Here are the available options:
|
||||
|
||||
|
||||
|
||||
You can choose what will be the type of the badge by setting the `BadgeType` property(enumeration of type *Telerik.XamarinForms.Primitives.BadgeType*).
|
||||
For more details please visit our [Badge Types]({%slug badgeview-predefined-badges%}) article.
|
||||
|
||||
## Integration with other Controls
|
||||
|
||||
BadgeView control can be integrated with other controls like ListView, SideDrawer, TabView, Button, Label, Image, etc. It depends on the scenario you want to achieve.
|
||||
|
||||
Sample Integration Example can be found in our [Telerik UI for Xamarin Sample application](https://github.com/telerik/telerik-xamarin-forms-samples/tree/master/QSF/QSF/Examples/BadgeViewControl/IntegrationExample) and [SDK Browser application](https://github.com/telerik/xamarin-forms-sdk/tree/master/XamarinSDK/SDKBrowser/SDKBrowser/Examples/BadgeViewControl/FeaturesCategory/BadgeViewIntegrationExample).
|
||||
|
||||
## See Also
|
||||
|
||||
- [Badge Position and Alignment]({%slug badgeview-position-alignment%})
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ tags: badge, xamarin, badgeview, notifications, indicator, marker, badge for xam
|
|||
slug: badgeview-overview
|
||||
---
|
||||
|
||||
# Overview #
|
||||
# Overview
|
||||
|
||||
**Telerik BadgeView for Xamarin** allows you to display badges in your application. Badges can be used for an additional marker for any element: to decorate avatars, navigation menus, or other components in the application when the visual notification is needed.
|
||||
|
||||
|
|
@ -22,8 +22,8 @@ In addition you can change the badge look setting different predefined badge typ
|
|||
* BadgeView allows you to specify the badge **Position** based on its content. Visit the [Badge Position]({%slug badgeview-position-alignment%}#badge-position) article for more details on this feature.
|
||||
* **Alignment** - You can easily align the badge according to its content. For more details about badge alignment options, visit the [Badge Alignment]({%slug badgeview-position-alignment%}#badge-alignment) article.
|
||||
* You can choose whether to have an **Animation** while displaying the badge. In addition, you can specify the animation duration and animation easing. For more details and example -> navigate to [Badge Animation]({%slug badgeview-animation%}) topic.
|
||||
* **Predefined Badges** - You can choose in between various predefined badge types. Also, you have the option to customize and style the badge types. More information about how-to define, style and customize the predefined badges can be found in the [Predefined Badges]({%slug badgeview-predefined-badges%}) article.
|
||||
* **Flexible Styling API** and **Customization options** – Allows you to change the BadgeView BackgroundColor, Border Thickness and Color. Also, we have exposed API which you can use to fully customize and style the badge indicator. For more details, please visit our [Styling]({%slug badgeview-styling%}) and [Customizations]({%slug badgeview-customization%}) articles.
|
||||
* **Badge Types** - You can choose in between various predefined badge types. Also, you have the option to customize and style the badge types. More information about how-to define, style and customize the predefined badges can be found in the [Predefined Badges]({%slug badgeview-predefined-badges%}) article.
|
||||
* **Flexible Styling API** and **Customization options** – Allows you to change the BadgeView BackgroundColor, Border Thickness and Color. Also, we have exposed API which you can use to fully customize and style the badge indicator. For more details, please visit our [Badge Styling]({%slug badgeview-styling%}) and [Badge Customization]({%slug badgeview-customization%}) articles.
|
||||
|
||||
## See Also
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,15 @@ You can use the following properties to specify the alignment of the badge accor
|
|||
|
||||
|
||||
|
||||
## Example with Badge Alignment and Position
|
||||
## Badge Offset
|
||||
|
||||
Use the following properties to specify the horizontal/vertical distance between the content of the Badge and its alignment point:
|
||||
|
||||
* **BadgeOffsetX**(*double*): Specifies the horizontal distance between the content of the Badge and its alignment point. The default value is `0`.
|
||||
|
||||
* **BadgeOffsetY**(*double*): Specifies the vertical distance between the content of the Badge and its alignment point. The default value is `0`.
|
||||
|
||||
## Example with Badge Alignment, Position and Offset
|
||||
|
||||
Here is the BadgeView definition:
|
||||
|
||||
|
|
@ -44,13 +52,7 @@ And the result:
|
|||
|
||||
|
||||
|
||||
## Badge Offset
|
||||
|
||||
Use the following properties to specify the horizontal/vertical distance between the content of the Badge and its alignment point:
|
||||
|
||||
* **BadgeOffsetX**(*double*): Specifies the horizontal distance between the content of the Badge and its alignment point. The default value is `0`.
|
||||
|
||||
* **BadgeOffsetY**(*double*): Specifies the vertical distance between the content of the Badge and its alignment point. The default value is `0`.
|
||||
Sample Badge Alignment, Position, and Offset example can be found [here](https://github.com/telerik/xamarin-forms-sdk/tree/master/XamarinSDK/SDKBrowser/SDKBrowser/Examples/BadgeViewControl/FeaturesCategory/BadgeAlignPositionExample).
|
||||
|
||||
## See Also
|
||||
|
||||
|
|
|
|||
|
|
@ -37,16 +37,22 @@ Define the BadgeView:
|
|||
|
||||
Use the following namespace:
|
||||
|
||||
<snippet id='xmlns-telerikprimitives'/>
|
||||
```XAML
|
||||
xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
|
||||
xmlns:telerikListView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls"
|
||||
xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
|
||||
```
|
||||
|
||||
The code used for choosing different badge type
|
||||
The result:
|
||||
|
||||
<snippet id='badgeview-badge-types-code-behind'/>
|
||||
|
||||
|
||||
Badge Types example can be found in our [SDK Browser Application](https://github.com/telerik/xamarin-forms-sdk/tree/master/XamarinSDK/SDKBrowser/SDKBrowser/Examples/BadgeViewControl/FeaturesCategory/BadgeTypesExample).
|
||||
|
||||
## See Also
|
||||
|
||||
- [Key Features]({%slug badgeview-key-features%})
|
||||
- [Badge Position and Alignment]({%slug badgeview-position-alignment%})
|
||||
- [Badge Position, Alignment and Offset]({%slug badgeview-position-alignment%})
|
||||
- [Badge Animation]({%slug badgeview-animation%})
|
||||
- [Styling]({%slug badgeview-styling%})
|
||||
- [CustomizAation]({%slug badgeview-customization%})
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ The final Result::
|
|||
|
||||
|
||||
|
||||
>tip Badge Styling Example can be found inside the FeaturesCategory folder in SDK Browser Application/Examples/BadgeViewControl
|
||||
>tip Badge Styling Example can be found inside the FeaturesCategory folder in [SDK Browser Application/Examples/BadgeViewControl](https://github.com/telerik/xamarin-forms-sdk/tree/master/XamarinSDK/SDKBrowser/SDKBrowser/Examples/BadgeViewControl/FeaturesCategory/StylingExample).
|
||||
|
||||
## See Also
|
||||
|
||||
|
|
|
|||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 9.0 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 68 KiB |
Двоичные данные
controls/badgeview/images/badgeview-position-alignment.png
Двоичные данные
controls/badgeview/images/badgeview-position-alignment.png
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 12 KiB После Ширина: | Высота: | Размер: 14 KiB |
|
|
@ -34,9 +34,9 @@ If you don't want to add the all Telerik.UI.for.Xamarin nuget package, you have
|
|||
| Platform | Assemblies |
|
||||
| -------- | ---------- |
|
||||
| Portable | Telerik.XamarinForms.Primitives.dll |
|
||||
| Android | Telerik.Xamarin.Android.Primitives.dll <br/>Telerik.XamarinForms.Primitives.dll |
|
||||
| iOS | Telerik.Xamarin.iOS.dll <br/>Telerik.XamarinForms.Primitives.dll |
|
||||
| UWP | Telerik.Core.dll <br/> Telerik.UI.Xaml.Primitives.UWP.dll <br/>Telerik.XamarinForms.Common.dll <br/>Telerik.XamarinForms.Primitives.dll |
|
||||
| Android | Telerik.Xamarin.Android.Primitives.dll <br/>Telerik.XamarinForms.Primitives.dll <br/>Telerik.XamarinForms.Common.dll <br/>Telerik.XamarinForms.SkiaSharp.dll |
|
||||
| iOS | Telerik.Xamarin.iOS.dll <br/>Telerik.XamarinForms.Primitives.dll <br/>Telerik.XamarinForms.Common.dll <br/>Telerik.XamarinForms.SkiaSharp.dll |
|
||||
| UWP | Telerik.Core.dll <br/> Telerik.UI.Xaml.Primitives.UWP.dll <br/>Telerik.XamarinForms.Common.dll <br/>Telerik.XamarinForms.Primitives.dll <br/>Telerik.XamarinForms.Common.dll <br/>Telerik.XamarinForms.SkiaSharp.dll |
|
||||
|
||||
## 3. Adding RadShadow control
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче