Skip to content

Commit b252905

Browse files
didiyordanovadidiyordanova
committed
update content
1 parent d364eb6 commit b252905

File tree

8 files changed

+136
-17
lines changed

8 files changed

+136
-17
lines changed

‎controls/bottomsheet/animation.md

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,7 @@ You can also customize the duration and easing through `AnimationDuration` and `
1919
* `AnimationDuration`(`uint`)—Defines the duration of the animation while opening/closing the bottom view. The default value is `1000`.
2020
* `AnimationEasing`(`Microsoft.Maui.Easing`)—Specifies animation acceleration over time. The default value is `Easing.CubicOut`.
2121

22-
## Example
23-
24-
The snippet below shows how the `AnimationDuration`, `AnimationEasing` properties can be applied:
25-
26-
22+
> For a runnable example with the BottomSheet Animation scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **BottomSheet > Features** category.
2723
2824
## See Also
2925

‎controls/bottomsheet/configuration.md

Lines changed: 44 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,56 @@ slug: bottomsheet-configuration
1010

1111
The purpose of this help article is to show you how to configure the states and width of the Telerik .NET MAUI BottomSheet control.
1212

13-
## Setting States
13+
## States (Built-in Transitions)
1414

15+
The Telerik UI for .NET MAUI BottomSheet control exposes predefined states (transitions). You can specify the state by using following options:
1516

17+
* `CurrentState`(of type `BottomSheetState`) property. The property specifies the current state of the bottom sheet. The available options for `CurrentState` are:
1618

17-
## Setting Width
19+
* `Hidden`(the default one)—Represents a hidden bottom sheet.
20+
* `Minimal`—Represents a minimal bottom sheet state with height `25%`.
21+
* `Partial`—Represents a partial bottom sheet state with height `50%`.
22+
* `Full`—Represents a full bottom sheet state with height `90%`.
1823

24+
The `BottomSheetState` class represents the state of a bottom sheet.
1925

26+
The first instance of the class has as a parameters the name of the bottom sheet state and the height of the bottom sheet.
2027

21-
## Customize Handle
28+
```C#
29+
public BottomSheetState(string name, BottomSheetSize height)
30+
```
31+
32+
The second instance of the class has as a parameters the name of the bottom sheet state and the height of the bottom sheet, and if the size parameter represents a percentage.
33+
34+
```C#
35+
public BottomSheetState(string name, double size, bool isPercentage = false)
36+
```
37+
38+
* Calling the [`GoToBottomSheetState(string name)` method]({%slug bottomsheet-methods%}). Where the `string name` is the name of the predefined sates.
39+
* `Hidden`—`HiddenStateName`.
40+
* `Minimal`—`StateName`.
41+
* `Partial`—`PartialStateName`.
42+
* `Full`—`FullStateName`.
43+
44+
Here is an example setting the predefined name of the state inside the `GoToBottomSheetState(string name)` method:
45+
46+
<snippet id='open-bottomsheet-view' />
47+
48+
The `UseDefaultStates`(`bool`) property allows you to specify whether the control will generate the default states. The default value is `true`.
49+
50+
The BottomSheet provides a read-only collection&mdash;`States` of type `ObservableCollection<BottomSheetState>`. The collection contains the available sheet states for the bottom sheet.
51+
52+
> For a runnable example with setting the BottomSheet States, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **BottomSheet > Features** category.
53+
54+
## Width
55+
56+
You can specify the width for the bottom sheet, by using the `BottomSheetWidth` (`struct` of type `BottomSheetSize`) property. You can set a percentage or an absolute value to the `BottomSheetWidth`.
57+
58+
59+
60+
> For a runnable example with setting the BottomSheet Width, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **BottomSheet > Features** category.
61+
62+
## Handle
2263

2364
The BottomSheet exposes a visual cue which indicates the control can be dragged. You can customize the handle by using the `HandleStyle` (`Style` with target type `BottomSheetHandle`) property.
2465

‎controls/bottomsheet/content.md

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
---
2-
title: Configuration
3-
page_title: .NET MAUI BottomSheet Documentation - Configuration
4-
description: Learn more about how to configure the Telerik UI for .NET MAUI BottomSheet control.
2+
title: Content
3+
page_title: .NET MAUI BottomSheet Documentation - Content
4+
description: Learn more about how to set a content inside the Telerik UI for .NET MAUI BottomSheet control.
55
position: 3
66
slug: bottomsheet-content
77
---
88

9-
# .NET MAUI BottomSheet Configuration
9+
# .NET MAUI BottomSheet Content
1010

1111
The purpose of this help article is to show you how to define content in the Telerik .NET MAUI BottomSheet control.
1212

@@ -16,6 +16,32 @@ The BottomSheet control contains a main content and a bottom sheet content.
1616

1717
* Set a content to the bottom sheet using the `BottomSheetContent` (`View`) property.
1818

19+
Here is a sample scenario when using the Telerik .NET MAUI [`RadCollectionView`]({%slug collectionview-overview%}) in the main content of the BottomSheet and a detailed view in the `BottomSheetContent`.
20+
21+
**1.** Define the sample data model:
22+
23+
<snippet id='bottomsheet-data-model' />
24+
25+
**2.** Define the `ViewModel`:
26+
27+
<snippet id='bottomsheet-view-model' />
28+
29+
**3.** Define the BottomSheet in XAML with `RadCollectionView`:
30+
31+
<snippet id='bottomsheet-animation-swipe' />
32+
33+
**4.** Add the `telerik` namespace:
34+
35+
```XAML
36+
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
37+
```
38+
39+
**5.** Add the following code for the `RadCollectionView.ItemTapped` event handler:
40+
41+
<snippet id='bottomsheet-content-tapped-event' />
42+
43+
> For a runnable example with the BottomSheet Content scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and review all **BottomSheet** example.
44+
1945
## See Also
2046

2147
- [Animation when opening and closing the bottom sheet]({%slug bottomsheet-animation%})

‎controls/bottomsheet/getting-started.md

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,19 @@ Before adding the BottomSheet, you need to:
3636
```XAML
3737
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
3838
```
39-
40-
**3.** Register the Telerik controls through the `Telerik.Maui.Controls.Compatibility.UseTelerik` extension method called inside the `CreateMauiApp` method of the `MauiProgram.cs` file of your project:
39+
```C#
40+
using Telerik.Maui.Controls;
41+
```
42+
43+
**3.** Add the code for opening the BottomSheet view:
44+
45+
<snippet id='open-bottomsheet-view' />
46+
47+
**4.** Add the code for closing the BottomSheet view:
48+
49+
<snippet id='close-bottomsheet-view' />
50+
51+
**5.** Register the Telerik controls through the `Telerik.Maui.Controls.Compatibility.UseTelerik` extension method called inside the `CreateMauiApp` method of the `MauiProgram.cs` file of your project:
4152

4253
```C#
4354
using Telerik.Maui.Controls.Compatibility;

‎controls/bottomsheet/methods.md

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,17 @@ The example shows how to use the `GoToBottomSheetState(string name)` method:
1414

1515
**1** Define the BottomSheet in XAML:
1616

17-
**2.** Call the `GoToBottomSheetState()` method with corresponding state name:
17+
<snippet id='bottomsheet-getting-started-xaml' />
1818

19+
**2.** Add the `telerik` namespace:
1920

21+
```XAML
22+
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
23+
```
24+
25+
**3.** Call the `GoToBottomSheetState()` method with corresponding state name:
26+
27+
<snippet id='open-bottomsheet-view' />
2028

2129
## See Also
2230

‎controls/bottomsheet/overview.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ The control presents the information or actions related to the current screen bu
1717

1818
## Key Features of the Telerik .NET MAUI BottomSheet
1919

20-
* [States]({%slug bottomsheet-configuration%}#setting-states)&mdash;The BottomSheet control supports various states like `Full`, `Partial`, `Minimal`, and `Hidden`.
20+
* [States]({%slug bottomsheet-configuration%}#states-built-in-transitions))&mdash;The BottomSheet control supports various states like `Full`, `Partial`, `Minimal`, and `Hidden`.
2121
* [Visual Handle]({%slug bottomsheet-configuration%}#setting-width)&mdash;The BottomSheet exposes a visual cue which indicates the control can be dragged.
22-
* [Width]({%slug %})&mdash;The BottomSheet allows you to set its width.
22+
* [Width]({%slug bottomsheet-configuration%}#width%})&mdash;The BottomSheet allows you to set the size of its bottom sheet view with an absolute value or percentage.
2323
* [Setting Content]({%slug bottomsheet-content%})&mdash;The control allows you to set a content by using the `BottomSheetContent` property.
2424
* [Animation while opening/closing the BottomSheet]({%slug bottomsheet-animation%})&mdash;The BottomSheet allows you to enable/disable the animation when opening/closing the bottom sheet view.
2525
* [Flexible Styling API]({%slug bottomsheet-styling%})&mdash;Style the handle and the BottomSheet control by using the exposed styling API.

‎controls/bottomsheet/styling.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,24 @@ The Telerik UI for .NET MAUI BottomSheet control provides the following Style pr
1616
* `BorderThickness` (`Thickness`)&mdash;Specifies the border thickness around the control.
1717
* `CornerRadius` (`Thickness`)&mdash;Specifies the corner radius of the border around the control.
1818

19+
Here is an example of the BottomSheet styling.
20+
21+
**1.** Define the BottomSheet in XAML:
22+
23+
<snippet id='bottomsheet-style' />
24+
25+
**2.** Define the `RadBottomSheet` style in page's resources:
26+
27+
<snippet id='bottomsheet-style-resource' />
28+
29+
**3.** Add the `telerik` namespace:
30+
31+
```XAML
32+
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
33+
```
34+
35+
> For a runnable example with the BottomSheet Style scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **BottomSheet > Styling** category.
36+
1937
## Handle Styling
2038

2139
You can style the handle by setting the `HandleStyle` property to the `RadBottomSheet`. The target type of the `HandleStyle` is `BottomSheetHandle`.
@@ -30,6 +48,23 @@ The available properties are described below:
3048
* `WidthRequest` (`double`)&mdash;Specifies the width of the handle.
3149
* `HeightRequest` (`double`)&mdash;Specifies the height of the handle.
3250

51+
Here is an example of the BottomSheet handle styling.
52+
53+
**1.** Define the BottomSheet in XAML:
54+
55+
<snippet id='bottomsheet-handle-style' />
56+
57+
**2.** Define the `BottomSheetHandle` style in page's resources:
58+
59+
<snippet id='bottomsheet-handle-style-resource' />
60+
61+
**3.** Add the `telerik` namespace:
62+
63+
```XAML
64+
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
65+
```
66+
> For a runnable example with the BottomSheet Handle Style scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **BottomSheet > Styling** category.
67+
3368
## See Also
3469

3570
- [Configure the BottomSheet]({%slug bottomsheet-configuration%})

‎controls/bottomsheet/swipe-gesture.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ The BottomSheet control for .NET MAUI allows you to use the swipe gesture for op
1212

1313
You can disable the swipe gesture by setting the `IsSwipeEnabled` (`bool`) property. The default value is `true`.
1414

15+
> For a runnable example with the BottomSheet Swipe scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **BottomSheet > Features** category.
16+
1517
## See Also
1618

1719
- [Animation when opening and closing the bottom sheet]({%slug bottomsheet-animation%})

0 commit comments

Comments
 (0)