Add first part of bottom sheet docs

controls/accordion/animation.md

@@ -12,12 +12,12 @@ Telerik .NET MAUI Accordion provides an option to set the animation when expandi
 
 ## Animation while expanding/collapsing
 
-To enable or disable the animation you need to use the `IsAnimationEnabled` property of `RadAccordion`. By default, the Animation is enabled.
+To enable or disable the animation you need to use the `IsAnimationEnabled` (`bool`) property of `RadAccordion`. By default, the Animation is enabled.
 
 You can also customize the duration and easing through `AnimationDuration` and `AnimationEasing` properties.
 
-* `AnimationDuration`(`int`)—Defines the duration of the animation while expanding/collapsing the AccordionItem. The default value is 500.
-* `AnimationEasing`(`Microsoft.Maui.Easing`)—Specifies animation acceleration over time. The default value is Easing.Linear.
+* `AnimationDuration`(`int`)—Defines the duration of the animation while expanding/collapsing the AccordionItem. The default value is `500`.
+* `AnimationEasing`(`Microsoft.Maui.Easing`)—Specifies animation acceleration over time. The default value is `Easing.Linear`.
 
 ## Example
 

controls/bottomsheet/animation.md

@@ -0,0 +1,29 @@
+---
+title: Animation
+page_title: .NET MAUI BottomSheet Documentation - Animation
+description: Try now the Telerik BottomSheet for .NET MAUI that delivers an animation when opening/closing the bottom view.
+position: 5
+slug: bottomsheet-animation
+---
+
+# .NET MAUI BottomSheet Animation
+
+Telerik .NET MAUI BottomSheet provides an option to set the animation when opening/closing the bottom view.
+
+## Animation while opening/closing
+
+To enable or disable the animation you need to use the `IsAnimationEnabled` (`bool`) property of `RadBottomSheet`. By default, the animation is enabled.
+
+You can also customize the duration and easing through `AnimationDuration` and `AnimationEasing` properties.
+
+* `AnimationDuration`(`uint`)—Defines the duration of the animation while opening/closing the bottom view. The default value is `1000`.
+* `AnimationEasing`(`Microsoft.Maui.Easing`)—Specifies animation acceleration over time. The default value is `Easing.CubicOut`.
+
+> For a runnable example with the BottomSheet Animation scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **BottomSheet > Features** category.
+
+## See Also
+
+- [Configure the BottomSheet]({%slug bottomsheet-configuration%})
+- [Style the BottomSheet]({%slug bottomsheet-styling%})
+- [Events]({%slug bottomsheet-events%})
+- [Methods]({%slug bottomsheet-methods%})

controls/bottomsheet/configuration.md

@@ -0,0 +1,73 @@
+---
+title: Configuration
+page_title: .NET MAUI BottomSheet Documentation - Configuration
+description: Learn more about how to configure the Telerik UI for .NET MAUI BottomSheet control.
+position: 3
+slug: bottomsheet-configuration
+---
+
+# .NET MAUI BottomSheet Configuration
+
+The purpose of this help article is to show you how to configure the states and width of the Telerik .NET MAUI BottomSheet control.
+
+## States (Built-in Transitions)
+
+The Telerik UI for .NET MAUI BottomSheet control exposes predefined states (transitions). You can specify the state by using following options:
+
+* `CurrentState`(of type `BottomSheetState`) property. The property specifies the current state of the bottom sheet. The available options for `CurrentState` are:
+
+	* `Hidden`(the default one)—Represents a hidden bottom sheet.
+	* `Minimal`—Represents a minimal bottom sheet state with height `25%`.
+	* `Partial`—Represents a partial bottom sheet state with height `50%`.
+	* `Full`—Represents a full bottom sheet state with height `90%`.
+
+The `BottomSheetState` class represents the state of a bottom sheet.
+
+The first instance of the class has as a parameters the name of the bottom sheet state and the height of the bottom sheet.
+
+```C#
+public BottomSheetState(string name, BottomSheetSize height)
+```
+
+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.
+
+```C#
+public BottomSheetState(string name, double size, bool isPercentage = false)
+```
+
+* Calling the [`GoToBottomSheetState(string name)` method]({%slug bottomsheet-methods%}). Where the `string name` is the name of the predefined sates.
+	* `Hidden`—`HiddenStateName`.
+	* `Minimal`—`StateName`.
+	* `Partial`—`PartialStateName`.
+	* `Full`—`FullStateName`.
+
+Here is an example setting the predefined name of the state inside the `GoToBottomSheetState(string name)` method:
+
+<snippet id='open-bottomsheet-view' />
+
+The `UseDefaultStates`(`bool`) property allows you to specify whether the control will generate the default states. The default value is `true`.
+
+The BottomSheet provides a read-only collection&mdash;`States` of type `ObservableCollection<BottomSheetState>`. The collection contains the available sheet states for the bottom sheet.
+
+> For a runnable example with setting the BottomSheet States, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **BottomSheet > Features** category.
+
+## Width
+
+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`.
+
+
+
+> For a runnable example with setting the BottomSheet Width, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **BottomSheet > Features** category.
+
+## Handle
+
+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.
+
+For more details review the [BottomSheet Handle Styling]({%slug bottomsheet-styling%}#handle-styling) article.
+
+## See Also
+
+- [Animation when opening and closing the bottom sheet]({%slug bottomsheet-animation%})
+- [Style the BottomSheet]({%slug bottomsheet-styling%})
+- [Events]({%slug bottomsheet-events%})
+- [Methods]({%slug bottomsheet-methods%})

controls/bottomsheet/content.md

@@ -0,0 +1,50 @@
+---
+title: Content
+page_title: .NET MAUI BottomSheet Documentation - Content
+description: Learn more about how to set a content inside the Telerik UI for .NET MAUI BottomSheet control.
+position: 3
+slug: bottomsheet-content
+---
+
+# .NET MAUI BottomSheet Content
+
+The purpose of this help article is to show you how to define content in the Telerik .NET MAUI BottomSheet control.
+
+The BottomSheet control contains a main content and a bottom sheet content.
+
+* The main content is the part that is always visible in the control.
+
+* Set a content to the bottom sheet using the `BottomSheetContent` (`View`) property.
+
+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`.
+
+**1.** Define the sample data model:
+
+<snippet id='bottomsheet-data-model' />
+
+**2.** Define the `ViewModel`:
+
+<snippet id='bottomsheet-view-model' />
+
+**3.** Define the BottomSheet in XAML with `RadCollectionView`:
+
+<snippet id='bottomsheet-animation-swipe' />
+
+**4.** Add the `telerik` namespace:
+
+```XAML
+xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
+```
+
+**5.** Add the following code for the `RadCollectionView.ItemTapped` event handler:
+
+<snippet id='bottomsheet-content-tapped-event' />
+
+> For a runnable example with the BottomSheet Content scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and review all **BottomSheet** example.
+
+## See Also
+
+- [Animation when opening and closing the bottom sheet]({%slug bottomsheet-animation%})
+- [Style the BottomSheet]({%slug bottomsheet-styling%})
+- [Events]({%slug bottomsheet-events%})
+- [Methods]({%slug bottomsheet-methods%})

controls/bottomsheet/events.md

@@ -0,0 +1,21 @@
+---
+title: Events
+page_title: .NET MAUI BottomSheet Documentation - Events
+description: 
+position: 9
+slug: bottomsheet-events
+---
+
+# .NET MAUI BottomSheet Events
+
+The .NET MAUI BottomSheet exposes the `PositionChanged` event which is raised when the position of the bottom sheet changes. 
+The `PositionChanged` event handler receives two parameters: 
+* The `sender` argument which is of type `object`, but can be cast to the `RadBottomSheet` type.
+* The `BottomSheetPositionChangedEventArgs` object which has a reference to the new position of the bottom sheet through its `Position`(of type `double`) property.
+
+# See Also
+
+- [Configure the BottomSheet]({%slug bottomsheet-configuration%})
+- [Animation when opening and closing the bottom sheet]({%slug bottomsheet-animation%})
+- [Style the BottomSheet]({%slug bottomsheet-styling%})
+- [Methods]({%slug bottomsheet-methods%})

controls/bottomsheet/getting-started.md

@@ -0,0 +1,89 @@
+---
+title: Getting Started
+page_title: .NET MAUI BottomSheet Documentation - Getting Started
+description: Get started with the Telerik UI for .NET MAUI Bottom Sheet control and learn how to add the control to your .NET MAUI application.
+position: 2
+slug: bottomsheet-getting-started
+---
+
+# Getting Started with the .NET MAUI BottomSheet
+
+This guide provides the information you need to start using the Telerik UI for .NET MAUI BottomSheet by adding the control to your project.
+
+At the end, you will achieve the following result.
+
+![BottomSheet Getting Started](images/bottomsheet-getting-started.png)
+
+## Prerequisites
+
+Before adding the BottomSheet, you need to:
+
+1. [Set up your .NET MAUI application]({%slug maui-getting-started %}#step-1-set-up-your-net-maui-application).
+
+1. [Download Telerik UI for .NET MAUI]({% slug maui-getting-started %}#step-2-download-telerik-ui-for-net-maui).
+
+1. [Install Telerik UI for .NET MAUI]({%slug maui-getting-started %}#step-3-install-telerik-ui-for-net-maui).
+
+## Define the Control
+
+**1.** When the your .NET MAUI application is set up, you are ready to add the BottomSheet control to your page.
+
+<snippet id='bottomsheet-getting-started-xaml' />
+<snippet id='bottomsheet-getting-started-csharp' />
+
+**2.** Add the `telerik` namespace:
+
+```XAML
+xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
+```
+```C#
+using Telerik.Maui.Controls;
+```
+
+**3.** Add the code for opening the BottomSheet view:
+
+<snippet id='open-bottomsheet-view' />
+
+**4.** Add the code for closing the BottomSheet view:
+
+<snippet id='close-bottomsheet-view' />
+
+**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:
+
+```C#
+using Telerik.Maui.Controls.Compatibility;
+
+public static class MauiProgram
+{
+	public static MauiApp CreateMauiApp()
+	{
+		var builder = MauiApp.CreateBuilder();
+		builder
+			.UseTelerik()
+			.UseMauiApp<App>()
+			.ConfigureFonts(fonts =>
+			{
+				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
+			});
+
+		return builder.Build();
+	}
+}
+```
+
+> For a runnable example with the BottomSheet Getting Started scenario, see the [SDKBrowser Demo Application]({%slug sdkbrowser-app%}) and go to **BottomSheet > Getting Started**.
+
+## Additional Resources
+
+- [.NET MAUI BottomSheet Product Page](https://www.telerik.com/maui-ui/bottomsheet)
+- [.NET MAUI BottomSheet Forum Page](https://www.telerik.com/forums/maui?tagId=1763)
+- [Telerik .NET MAUI Blogs](https://www.telerik.com/blogs/mobile-net-maui)
+- [Telerik .NET MAUI Roadmap](https://www.telerik.com/support/whats-new/maui-ui/roadmap)
+
+## See Also
+
+- [Configure the BottomSheet]({%slug bottomsheet-configuration%})
+- [Animation when opening and closing the bottom sheet]({%slug bottomsheet-animation%})
+- [Style the BottomSheet]({%slug bottomsheet-styling%})
+- [Events]({%slug bottomsheet-events%})
+- [Methods]({%slug bottomsheet-methods%})

controls/bottomsheet/methods.md

@@ -0,0 +1,35 @@
+---
+title: Methods
+page_title: .NET MAUI BottomSheet Documentation - Methods
+description: Learn about the methods that the Telerik UI for .NET MAUI BottomSheet control exposes and find out how to use them to configure the UI component.
+position: 11
+slug: bottomsheet-methods
+---
+
+# .NET MAUI BottomSheet Methods
+
+The Telerik UI for .NET MAUI BottomSheet component exposes the `GoToBottomSheetState(string name)` method. Use the method to transition the bottom sheet to a specified [state]({%slug %}).
+
+The example shows how to use the `GoToBottomSheetState(string name)` method:
+
+**1** Define the BottomSheet in XAML:
+
+<snippet id='bottomsheet-getting-started-xaml' />
+
+**2.** Add the `telerik` namespace:
+
+```XAML
+xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
+```
+
+**3.** Call the `GoToBottomSheetState()` method with corresponding state name:
+
+<snippet id='open-bottomsheet-view' />
+
+## See Also
+
+- [Configure the BottomSheet]({%slug bottomsheet-configuration%})
+- [Animation when opening and closing the bottom sheet]({%slug bottomsheet-animation%})
+- [Style the BottomSheet]({%slug bottomsheet-styling%})
+- [Events]({%slug bottomsheet-events%})
+

controls/bottomsheet/overview.md

@@ -0,0 +1,37 @@
+---
+title: Overview
+page_title: .NET MAUI BottomSheet Documentation - Overview
+description: Try now the Telerik UI for .NET MAUI Border, which enables you to control the look and feel of the border that wraps around your MAUI views.
+position: 0
+tags: .net maui, bottomsheet, ui for .net maui, .net maui conrols, microsoft .net maui
+slug: bottomsheet-overview
+---
+
+# .NET MAUI BottomSheet Overview
+
+The Telerik UI for .NET MAUI BottomSheet is a UI component that slides up from the bottom of the screen to reveal more content. Use the BottomSheet to display additional information, provide the user with actions or give the option for secondary navigation. 
+
+The control presents the information or actions related to the current screen but it does not cover the full screen.
+
+![.NET MAUI BottomSheet Overview](images/bottomsheet-overview.png "BottomSheet Overview")
+
+## Key Features of the Telerik .NET MAUI BottomSheet
+
+* [States]({%slug bottomsheet-configuration%}#states-built-in-transitions))—The BottomSheet control supports various states like `Full`, `Partial`, `Minimal`, and `Hidden`.
+* [Visual Handle]({%slug bottomsheet-configuration%}#setting-width)—The BottomSheet exposes a visual cue which indicates the control can be dragged.
+* [Width]({%slug bottomsheet-configuration%}#width%})—The BottomSheet allows you to set the size of its bottom sheet view with an absolute value or percentage.
+* [Setting Content]({%slug bottomsheet-content%})—The control allows you to set a content by using the `BottomSheetContent` property.
+* [Animation while opening/closing the BottomSheet]({%slug bottomsheet-animation%})—The BottomSheet allows you to enable/disable the animation when opening/closing the bottom sheet view.
+* [Flexible Styling API]({%slug bottomsheet-styling%})—Style the handle and the BottomSheet control by using the exposed styling API.
+* [Events]({%slug bottomsheet-events%})—The BottomSheet exposes an event which occurs when the position of the bottom sheet changes. 
+
+## Next Steps
+
+- [Getting Started with the Telerik UI for .NET MAUI BottomSheet]({% slug bottomsheet-getting-started %})
+
+## See Also
+
+- [.NET MAUI BottomSheet Product Page](https://www.telerik.com/maui-ui/bottomsheet)
+- [.NET MAUI BottomSheet Forum Page](https://www.telerik.com/forums/maui?tagId=1763)
+- [Telerik .NET MAUI Blogs](https://www.telerik.com/blogs/mobile-net-maui)
+- [Telerik .NET MAUI Roadmap](https://www.telerik.com/support/whats-new/maui-ui/roadmap)