add sidedrawer blazor to docs and fix gif for combobox how to article
This commit is contained in:
PROGRESS\doyordan
Родитель
f9b4615bed
Коммит
90bcba6f5b
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 11 KiB |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 17 KiB |
|
|
@ -0,0 +1,106 @@
|
|||
---
|
||||
title: Getting Started
|
||||
page_title: Getting Started with Xamarin Mobile Blazor Bindings SideDrawer Control
|
||||
description: Check our "Getting Started" documentation article for Telerik SideDrawer for Xamarin Mobile Blazor Bindings
|
||||
position: 1
|
||||
slug: sidedrawer-blazor-getting-started
|
||||
---
|
||||
|
||||
# Getting Started with SideDrawer for Xamarin Mobile Blazor Bindings
|
||||
|
||||
This article will guide you through the steps needed to add a basic **RadSideDrawer** control in your application.
|
||||
|
||||
## 1. Setting up the app
|
||||
|
||||
Take a look at the [Getting Started]({%slug blazor-mobile-bindings-overview%}#getting-started) article how to setup the Telerik Blazor Mobile Bindings for Xamarin project.
|
||||
|
||||
## 2. Adding the required Telerik references
|
||||
|
||||
You have two options:
|
||||
|
||||
* Add the Telerik.UI.for.Xamarin.Blazor Nuget package following the instructions in [Telerik NuGet package server]({%slug telerik-nuget-server%}) topic.
|
||||
|
||||
* Add the references to Telerik assemblies manually, check the list below with the required assemblies for **RadSideDrawer** component:
|
||||
|
||||
| Platform | Assemblies |
|
||||
| -------- | ---------- |
|
||||
| Portable | Telerik.XamarinForms.Blazor.Primitives<br/>Telerik.XamarinForms.Common.dll<br/>Telerik.XamarinForms.Primitives.dll |
|
||||
| Android | Telerik.Xamarin.Android.Common.dll<br/>Telerik.Xamarin.Android.Primitives.dll<br/>Telerik.XamarinForms.Common.dll<br/>Telerik.XamarinForms.Primitives.dll |
|
||||
| iOS | Telerik.Xamarin.iOS.dll <br/>Telerik.XamarinForms.Common.dll<br/>Telerik.XamarinForms.Primitives.dll |
|
||||
|
||||
## 3. Adding RadSideDrawer control
|
||||
|
||||
If your app is setup, you are ready to add a **RadSideDrawer** control.
|
||||
|
||||
```
|
||||
<ContentView>
|
||||
<Grid>
|
||||
<Layout>
|
||||
<RowDefinition GridUnitType="GridUnitType.Auto" />
|
||||
<RowDefinition GridUnitType="GridUnitType.Star" />
|
||||
</Layout>
|
||||
<Contents>
|
||||
<GridCell>
|
||||
<StackLayout Orientation="StackOrientation.Horizontal"
|
||||
Spacing="10">
|
||||
<RadButton WidthRequest="32"
|
||||
HeightRequest="32"
|
||||
BorderWidth="0"
|
||||
CornerRadius="0"
|
||||
BorderColor="Color.Transparent"
|
||||
BackgroundColor="Color.Transparent"
|
||||
BackgroundImage="@(new FileImageSource { File="HamburgerMenu.png" })"
|
||||
OnClick="@ChangeDrawerState"/>
|
||||
<Label Text="SideDrawer"
|
||||
VerticalOptions="LayoutOptions.Center" />
|
||||
</StackLayout>
|
||||
</GridCell>
|
||||
<GridCell Row="1">
|
||||
<RadSideDrawer DrawerLength="200"
|
||||
IsOpen="@IsDrawerOpen">
|
||||
<MainContent>
|
||||
<Telerik.XamarinForms.Blazor.Primitives.SideDrawer.MainContent>
|
||||
<Label Text="Main content" />
|
||||
</Telerik.XamarinForms.Blazor.Primitives.SideDrawer.MainContent>
|
||||
</MainContent>
|
||||
<DrawerContent>
|
||||
<Telerik.XamarinForms.Blazor.Primitives.SideDrawer.DrawerContent>
|
||||
<StackLayout>
|
||||
<RadButton Text="Mail" />
|
||||
<RadButton Text="Calendar" />
|
||||
<RadButton Text="People" />
|
||||
<RadButton Text="Tasks" />
|
||||
</StackLayout>
|
||||
</Telerik.XamarinForms.Blazor.Primitives.SideDrawer.DrawerContent>
|
||||
</DrawerContent>
|
||||
</RadSideDrawer>
|
||||
</GridCell>
|
||||
</Contents>
|
||||
</Grid>
|
||||
</ContentView>
|
||||
|
||||
@code
|
||||
{
|
||||
public bool IsDrawerOpen { get; set; }
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
base.OnInitialized();
|
||||
|
||||
this.IsDrawerOpen = false;
|
||||
}
|
||||
|
||||
private void ChangeDrawerState()
|
||||
{
|
||||
this.IsDrawerOpen = !this.IsDrawerOpen;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Here is the result when you set `IsOpen="True"`:
|
||||
|
||||
|
||||
|
||||
## See Also
|
||||
|
||||
- [Xamarin Mobile Blazor Bindings Overview]({%slug blazor-mobile-bindings-overview%})
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
---
|
||||
title: Overview
|
||||
page_title: Xamarin Mobile Blazor Bindings SideDrawer Documentation | Overview
|
||||
description: Check our "Overview" documentation article for Telerik SideDrawer for Xamarin Mobile Blazor Bindings
|
||||
position: 0
|
||||
slug: sidedrawer-blazor-overview
|
||||
---
|
||||
|
||||
# SideDrawer for Xamarin Mobile Blazor Bindings
|
||||
|
||||
**RadSideDrawer for Xamarin** is designed to enable users to visualize a hidden view in their applications. That view can host navigation UI, common settings or any other UI of your choice. It can be visualized using a flick gesture and can be shown from all four sides of the screen.
|
||||
|
||||
#### Figure 1: RadSideDrawer Overview
|
||||
|
||||
|
||||
|
||||
## Key features
|
||||
|
||||
Below you can find the SideDrawer keyfeatures described:
|
||||
|
||||
## Drawer positions
|
||||
|
||||
The drawer can be shown from any of the four edges of the screen. You can define its position through the DrawerLocation property. For more details on this read [Properties]({%slug sidedrawer-features-properties%}) topic.
|
||||
|
||||
RadSideDrawer control exposes the following properties:
|
||||
|
||||
* **DrawerContent**: Specifies the drawer (initially hidden) content.
|
||||
* **MainContent**: Specifies the (initially visible) content of the component.
|
||||
* **IsOpen** (*bool*): Specifies a value indicating if the drawer content is visible.
|
||||
* **DrawerLength** (*double*): Defines how much the drawer content should be extended over the main content in opened position.
|
||||
* **DrawerLocation** (*Telerik.XamarinForms.Primitives.SideDrawer.SideDrawerLocation*): Specifies the location from which the drawer will be opened. The following options are available:
|
||||
* **Left**
|
||||
* **Right**
|
||||
* **Top**
|
||||
* **Bottom**
|
||||
|
||||
|
||||
* **AreGesturesEnabled** (*bool*): Specifies ability for gestures to open and close the drawer.
|
||||
* **TouchTargetThreshold** (*double*): Defines the touchable area (number of pixels from the screen edges) that will allow to open the DrawerContent.
|
||||
|
||||
## Effects and transitions
|
||||
|
||||
RadSideDrawer supports transition animations that are applied to the opening and closing view. We provide several predefined animations that can be easily set or changed at runtime to meet our customers’ requirements.
|
||||
|
||||
The desired transition can be set through `DrawerTransitionType` property of the SideDrawer.
|
||||
|
||||
* `DrawerTransitionType` is enumeration of type `Telerik.XamarinForms.Primitives.SideDrawerTransitionType` and exposes the following members:
|
||||
|
||||
* Push (the default one)
|
||||
* Fade
|
||||
* Reveal
|
||||
* ReverseSlideOut
|
||||
* ScaleUp
|
||||
* SlideAlong
|
||||
* SlideInOnTop
|
||||
* Custom
|
||||
|
||||
* **DrawerTransitionDuration** (*double*): Defines the duration of the chosen transition.
|
||||
* **DrawerTransitionFadeOpacity** (*double*): Defines the opacity of the fade layer of the component. This controls the fade layer opacity on Android or the dim opacity on iOS.
|
||||
|
||||
### Example
|
||||
|
||||
Here is an example how to set DrawerTransitionType property:
|
||||
|
||||
```
|
||||
<RadSideDrawer DrawerLength="200"
|
||||
DrawerTransitionType="Telerik.XamarinForms.Primitives.SideDrawerTransitionType.Push">
|
||||
...........
|
||||
</RadSideDrawer>
|
||||
```
|
||||
|
||||
## See Also
|
||||
|
||||
- [Getting Started]({%slug sidedrawer-blazor-getting-started%})
|
||||
|
|
@ -11,7 +11,7 @@ slug: combobox-clear-text-on-dropdown-closed
|
|||
|
||||
The following article will show you how to clear the Text of the ComboBox when the `SelectionMode` is `Multiple` and the dropdown is closed.
|
||||
|
||||
|
||||
|
||||
|
||||
## Example
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче