add entry and masked new features, 1 kb article for accordion
This commit is contained in:
Родитель
92cfa31eb6
Коммит
8d691e5a06
|
@ -36,6 +36,26 @@ RadEntry provides **IsPassword**(*bool*) property, which when set to True, repla
|
|||
|
||||
<snippet id='entry-features-password'/>
|
||||
|
||||
## Non-Editable State
|
||||
|
||||
With R1 2021 Service Pack, RadEntry control provides a feature which allows you to choose whether the control will be editable or not - Read-Only state.
|
||||
|
||||
* **IsReadOnly** *bool* property: Specifies whether the control will be in edit mode. The default value is `False`. If you want to restrict the control from editing, set the `IsReadOnly` to `True`
|
||||
|
||||
### Example
|
||||
|
||||
<snippet id='entry-features-read-only'/>
|
||||
|
||||
## Max Length
|
||||
|
||||
From r1 2021 Service Pack, the Radentry control has an additional feature, you can restrict the number of the symbols allowed to be entered in the input field.
|
||||
|
||||
* **MaxLength** (*int*) property: Specifies the maximum number of symbols allowed to be entered.
|
||||
|
||||
### Example with MaxLength set to 10
|
||||
|
||||
<snippet id='entry-features-maxlength'/>
|
||||
|
||||
## Keyboard
|
||||
|
||||
The **Keyboard** property of type *Xamarin.Forms.Keyboard* allows you to define the type of the keyboard that will be visualized by the device.
|
||||
|
|
|
@ -17,8 +17,10 @@ slug: entry-overview
|
|||
|
||||
* **Watermark**: RadEntry allows setting a placeholder text in the control, which could hint the users what is the input that is expected. For more details read [here]({% slug entry-key-features %}#watermark).
|
||||
* **Password functionality**: You could hide the characters a user is typing for privacy reasons, check [here]({% slug entry-key-features %}#password) for more details.
|
||||
* **Border styles**: RadEntry gives you the option to customize the look of the border around the input using the BorderStyle property, for more details read [here]({% slug entry-key-features %}#borderstyle).
|
||||
* **Keyboard support**: You could specify the virtual keyboard to be used with RadEntry considering the expected input.
|
||||
* **Non-ediatble state**: Using a single property - `IsReadOnly`, you can specify whether the RadEntry control can be edited or not. Example and explanation can be found in [Key Features - Read-Only State]({%slug entry-key-features%}#non-editable-state).
|
||||
* You can define the **maximum number of symbols** allowed in the RadEntry control. For detailed explanation and example check the [Key Features - Max Length]({%slug entry-key-features%}#max-length) section.
|
||||
* **Border styles**: RadEntry gives you the option to customize the look of the border around the input using the BorderStyle property, for more details read [here]({% slug entry-key-features %}#borderstyle).
|
||||
|
||||
## See Also
|
||||
|
||||
|
|
Двоичный файл не отображается.
После Ширина: | Высота: | Размер: 14 KiB |
Двоичные данные
controls/maskedinput/images/maskedinput-theme.png
Двоичные данные
controls/maskedinput/images/maskedinput-theme.png
Двоичный файл не отображается.
До Ширина: | Высота: | Размер: 19 KiB После Ширина: | Высота: | Размер: 12 KiB |
|
@ -18,9 +18,10 @@ slug: maskedinput-overview
|
|||
## Key features ##
|
||||
|
||||
* **Validation**: RadMaskedInput control uses a mask to distinguish between proper and improper user input. Validation mechanism can be based on custom regular expressions or built-in tokens. Read more about this in the [Tokens Validation]({% slug maskedinput-features-mask-tokens %}) and [RegEx Validation]({% slug maskedinput-features-mask-extensions %}) topics.
|
||||
* **Mask Tokens**: You could choose from a set of predefined tokens in order to restrict user’s input. For more details on the available tokens go to [Tokens Validation]({% slug maskedinput-features-mask-tokens %}) topic.
|
||||
* **Mask Tokens**: You can choose from a set of predefined tokens in order to restrict user’s input. For more details on the available tokens go to [Tokens Validation]({% slug maskedinput-features-mask-tokens %}) topic.
|
||||
* **Commands**: MaskedInput allows you to attach commands that will be executed when certain actions, such as ApplyMaskStarted and ApplyMaskFinished occur. For detailed information on the matter go to [Commands]({% slug maskedinput-features-commands %}) article.
|
||||
* **Customizable Validation UI**: With RadMaskedInput you could easily modify the appearance of the input-related errors, please refer to the [Validation UI]({% slug maskedinput-features-validation %}) topic for more details.
|
||||
* **Customizable Validation UI**: With RadMaskedInput you can easily modify the appearance of the input-related errors, please refer to the [Validation UI]({% slug maskedinput-features-validation %}) topic for more details.
|
||||
* **Keyboard support**: You can specify the virtual keyboard to be used with RadMaskedInput considering the expected input.
|
||||
|
||||
## See Also
|
||||
|
||||
|
|
|
@ -25,7 +25,7 @@ Corresponding Regex | Usage
|
|||
|
||||
## Custom Regex Example
|
||||
|
||||
**MaskedInput with custom RegEx validation**
|
||||
**MaskedInput with custom RegEx validation**. The `Keyboard` type is `Numeric`.
|
||||
|
||||
<snippet id='maskedinput-features-regex-custom-validation-xaml'/>
|
||||
|
||||
|
@ -38,7 +38,7 @@ The static class **Telerik.XamarinForms.Input.MaskedInput.MaskExtensions** conta
|
|||
|
||||
## Built-in Regex Example
|
||||
|
||||
**Validation using the MaskExtensions class**
|
||||
**Validation using the MaskExtensions class**. The Masked type is Email. Note that the `Keyboard` type set is `Email`.
|
||||
|
||||
<snippet id='maskedinput-features-regex-extensions-validation-xaml'/>
|
||||
|
||||
|
|
|
@ -0,0 +1,77 @@
|
|||
---
|
||||
title: Add Items Dynamically to Accordion control
|
||||
description: How to add dynamically items to the accordion control
|
||||
type: how-to
|
||||
page_title: Add Items Dynamically to Accordion for Xamarin
|
||||
slug: accordion-add-items-dynamically
|
||||
position:
|
||||
tags: xamarin, accordion, items, dynamically
|
||||
ticketid: 1507547
|
||||
res_type: kb
|
||||
---
|
||||
|
||||
## Environment
|
||||
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Product Version</td>
|
||||
<td>2021.1 216.1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Product</td>
|
||||
<td>Accordion for Xamarin</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
## Description
|
||||
|
||||
The RadAccordion control supports adding multiple items dynamically. It provides `Children` property which is collection of `AccordionItem`.
|
||||
|
||||
The `AccrodionItem` class provides properties for customization some of them are: `Header`, `HeaderText`, `Content`, which you can use to create items for specific scenarios.
|
||||
|
||||
## Solution
|
||||
|
||||
Here is the Accorsion definition in XAML
|
||||
|
||||
```XAML
|
||||
<StackLayout>
|
||||
<primitives:RadAccordion x:Name="Accordion"/>
|
||||
<Button Text="Add new item"
|
||||
Clicked="AddNewItem_Clicked" />
|
||||
</StackLayout>
|
||||
```
|
||||
|
||||
you will need to add the following namespace:
|
||||
|
||||
```XAML
|
||||
xmlns:primitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
|
||||
```
|
||||
|
||||
### Add Items Dynamically to Accordion control
|
||||
|
||||
We will use the a Button and on its Click event we will add the items:
|
||||
|
||||
1. Create an instance of AccordionItem.
|
||||
|
||||
2. Set its HeaderText and Content properties.
|
||||
|
||||
3. Add the item to the accordion Children collection by using accordion.Children.Add().
|
||||
|
||||
Here is the implementation inside the Button Click event
|
||||
|
||||
```C#
|
||||
private void AddNewItem_Clicked(object sender, EventArgs e)
|
||||
{
|
||||
Telerik.XamarinForms.Primitives.AccordionItem accordionItem = new Telerik.XamarinForms.Primitives.AccordionItem()
|
||||
{
|
||||
HeaderText = $"Item header {this.count}",
|
||||
Content = new Label() { Text = $"Item content {this.count}" }
|
||||
};
|
||||
|
||||
this.Accordion.Children.Add(accordionItem);
|
||||
this.count++;
|
||||
}
|
||||
```
|
Загрузка…
Ссылка в новой задаче