Skip to content

Commit 0c4c6b0

Browse files
naveenkumar-sanjeevirayannaveenkumar-sanjeevirayan
authored
Merge pull request #243 from syncfusion-content/otpinput
Modified images and added JetBrainsRider tab in OTP Input
2 parents cb492ea + 865e7ce commit 0c4c6b0

File tree

9 files changed

+167
-95
lines changed

9 files changed

+167
-95
lines changed

‎maui-toolkit/Otp-Input/Accessibility.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
---
22
layout: post
3-
title: Accessibility in .NET MAUI OtpInput Control | Syncfusion
4-
description: Learn here all about the accessibility features of Syncfusion .NET MAUI OtpInput (SfOtpInput) control.
3+
title: Accessibility in .NET MAUI OTP Input Control | Syncfusion
4+
description: Learn here all about the accessibility features of Syncfusion .NET MAUI OTP Input (SfOtpInput) control.
55
platform: maui
66
control: SfOtpInput
77
documentation: ug
88
---
99

10-
# Accessibility in .NET Maui SfOtpInput
10+
# Accessibility in .NET MAUI OTP Input (SfOtpInput)
1111

12-
The OtpInput Control is designed to work effectively with the OtpInput elements, providing voice descriptions of their OtpInput items.
12+
The OTP Input Control is designed to work effectively with the OTP Input elements, providing voice descriptions of their OTP Input items.
1313

1414
## Keyboard Interaction
1515
The following keyboard shortcuts are supported by the OTP Input component.
@@ -28,31 +28,31 @@ Description
2828
LeftArrow
2929
</td>
3030
<td>
31-
Focuses the previous input in the OTP.
31+
Focuses the previous field in the OTP Input.
3232
</td>
3333
</tr>
3434
<tr>
3535
<td>
3636
RightArrow
3737
</td>
3838
<td>
39-
Focuses the next input in OTP.
39+
Focuses the next field in OTP Input.
4040
</td>
4141
</tr>
4242
<tr>
4343
<td>
4444
Tab
4545
</td>
4646
<td>
47-
Moves the initial focus and shifts focus to the next input of the OTP.
47+
Moves the initial focus and shifts focus to the next field of the OTP Input.
4848
</td>
4949
</tr>
5050
<tr>
5151
<td>
5252
Shift + Tab
5353
</td>
5454
<td>
55-
Moves the focus to the previous input of the OTP.
55+
Moves the focus to the previous field of the OTP Input.
5656
</td>
5757
</tr>
5858
</table>

‎maui-toolkit/Otp-Input/Events.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
---
22
layout: post
3-
title: Events in .NET MAUI OtpInput control | Syncfusion®
4-
description: Learn about event support in Syncfusion® Toolkit for .NET MAUI OtpInput (SfOtpInput) control and more.
3+
title: Events in .NET MAUI OTP Input control | Syncfusion®
4+
description: Learn about event support in Syncfusion® Toolkit for .NET MAUI OTP Input (SfOtpInput) control and more.
55
platform: maui-toolkit
6-
control: OtpInput
6+
control: OTP Input
77
documentation: ug
88
---
99

10-
# Events in .NET MAUI OtpInput (SfOtpInput)
10+
# Events in .NET MAUI OTP Input (SfOtpInput)
1111

12-
Events in the OtpInput control allow developers to respond to user interactions and input changes effectively.
12+
Events in the OTP Input control allow developers to respond effectively to user interactions and input changes.
1313

1414
## ValueChanged event
1515

16-
The OtpInput component triggers the `ValueChanged` event whenever the value of an input field changes. This is particularly useful for validating input in real-time or triggering further actions as user input is completed. The `OtpInputValueChangedEventArgs` provides details about the specific changes in value.
16+
The OTP Input component triggers the `ValueChanged` event whenever the value of an input field changes. This is particularly useful for validating input in real-time or triggering further actions as user input is completed. The `OtpInputValueChangedEventArgs` provides details about the specific changes in value.
1717

1818
{% tabs %}
1919
{% highlight xaml %}

‎maui-toolkit/Otp-Input/Getting-Started.md‎

Lines changed: 103 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
---
22
layout: post
3-
title: Getting started with .NET MAUI OtpInput control | Syncfusion®
4-
description: Learn here about getting started with Syncfusion® .NET MAUI OtpInput (SfOtpInput) control in your cross-platform applications.
3+
title: Getting started with .NET MAUI OTP Input control | Syncfusion®
4+
description: Learn here about getting started with Syncfusion® .NET MAUI OTP Input (SfOtpInput) control in your cross-platform applications.
55
platform: maui-toolkit
6-
control: OtpInput
6+
control: OTP Input
77
documentation: ug
88
---
99

10-
# Getting Started with .NET MAUI OtpInput
10+
# Getting Started with .NET MAUI OTP Input
1111

12-
This section provides a quick overview of how to get started with the `OtpInput` for .NET MAUI and a walk-through to configure the .NET MAUI OtpInput in a real-time scenario. Follow the steps below to add .NET MAUI OtpInput to your project.
12+
This section provides a quick overview of how to get started with the `OTP Input` for .NET MAUI and a walk-through to configure the .NET MAUI OTP Input in a real-time scenario. Follow the steps below to add .NET MAUI OTP Input to your project.
1313

1414
{% tabcontents %}
1515
{% tabcontent Visual Studio %}
@@ -62,7 +62,7 @@ public static class MauiProgram
6262
{% endhighlight %}
6363
{% endtabs %}
6464

65-
## Step 4: Add a Basic OtpInput
65+
## Step 4: Add a Basic OTP Input
6666

6767
1. To initialize the control, import the `Syncfusion.Maui.Toolkit.OtpInput` namespace into your code.
6868

@@ -135,7 +135,7 @@ public static class MauiProgram
135135
{% endhighlight %}
136136
{% endtabs %}
137137

138-
## Step 4: Add a Basic OtpInput
138+
## Step 4: Add a Basic OTP Input
139139

140140
1. To initialize the control, import the `Syncfusion.Maui.Toolkit.OtpInput` namespace into your code.
141141

@@ -155,4 +155,99 @@ SfOtpInput otpInput = new SfOtpInput();
155155
{% endtabs %}
156156

157157
{% endtabcontent %}
158-
{% endtabcontents %}
158+
159+
{% tabcontent JetBrains Rider %}
160+
161+
## Prerequisites
162+
163+
Before proceeding, ensure the following are set up:
164+
165+
1. Ensure you have the latest version of JetBrains Rider.
166+
2. Install [.NET 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later is installed.
167+
3. Make sure the MAUI workloads are installed and configured as described [here.](https://www.jetbrains.com/help/rider/MAUI.html#before-you-start)
168+
169+
## Step 1: Create a new .NET MAUI Project
170+
171+
1. Go to **File > New Solution,** Select .NET (C#) and choose the .NET MAUI App template.
172+
2. Enter the Project Name, Solution Name, and Location.
173+
3. Select the .NET framework version and click Create.
174+
175+
## Step 2: Install the Syncfusion<sup>®</sup> MAUI Toolkit NuGet Package
176+
177+
1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.**
178+
2. Search for [Syncfusion.Maui.Toolkit](https://www.nuget.org/packages/Syncfusion.Maui.Toolkit/) and install the latest version.
179+
3. Ensure the necessary dependencies are installed correctly, and the project is restored. If not, Open the Terminal in Rider and manually run: `dotnet restore`
180+
181+
## Step 3: Register the handler
182+
183+
In the MauiProgram.cs file, register the handler for Syncfusion<sup>®</sup> Toolkit.
184+
185+
{% tabs %}
186+
{% highlight C# tabtitle="MauiProgram.cs" hl_lines="1 9" %}
187+
using Syncfusion.Maui.Toolkit.Hosting;
188+
189+
public static class MauiProgram
190+
{
191+
public static MauiApp CreateMauiApp()
192+
{
193+
var builder = MauiApp.CreateBuilder();
194+
builder
195+
.ConfigureSyncfusionToolkit()
196+
.UseMauiApp<App>()
197+
.ConfigureFonts(fonts =>
198+
{
199+
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
200+
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
201+
});
202+
203+
return builder.Build();
204+
}
205+
}
206+
207+
{% endhighlight %}
208+
{% endtabs %}
209+
210+
## Step 4: Add a Basic OTP Input
211+
212+
1. To initialize the control, import the `Syncfusion.Maui.Toolkit.OtpInput` namespace into your code.
213+
214+
2. Initialize `SfOtpInput.`
215+
216+
{% tabs %}
217+
{% highlight xaml %}
218+
219+
<otpInput:SfOtpInput />
220+
221+
{% endhighlight %}
222+
{% highlight c# %}
223+
224+
SfOtpInput otpInput = new SfOtpInput();
225+
226+
{% endhighlight %}
227+
{% endtabs %}
228+
229+
{% endtabcontent %}
230+
{% endtabcontents %}
231+
232+
## Value
233+
234+
You can specify the value of OTP Input by using the `Value` property.
235+
236+
{% tabs %}
237+
{% highlight xaml %}
238+
239+
<otpInput:SfOtpInput Value="e3c7" Type="Text" />
240+
241+
{% endhighlight %}
242+
{% highlight c# %}
243+
244+
SfOtpInput otpInput = new SfOtpInput()
245+
{
246+
Value = "e3c7",
247+
Type = OtpInputType.Text
248+
};
249+
250+
{% endhighlight %}
251+
{% endtabs %}
252+
253+
![Value Image for OTP Input](images/value.png)

‎maui-toolkit/Otp-Input/Input-Types.md‎

Lines changed: 9 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
22
layout: post
3-
title: Input Types in .NET MAUI OtpInput | Syncfusion®
4-
description: Learn here about input types in Syncfusion® .NET MAUI OtpInput (SfOtpInput) control in your cross-platform applications.
3+
title: Input Types in .NET MAUI OTP Input | Syncfusion®
4+
description: Learn here about input types in Syncfusion® .NET MAUI OTP Input (SfOtpInput) control in your cross-platform applications.
55
platform: maui-toolkit
6-
control: OtpInput
6+
control: OTP Input
77
documentation: ug
88
---
99

@@ -15,7 +15,7 @@ This section explains the the various types of OTP (One-Time Password) input com
1515

1616
### Number type
1717

18-
The `Type` property can be set to `Number`, prompting the input to handle numeric-only codes. This is ideal for scenarios demanding numeric OTPs. By default, the `Type` property is set to `Number`.
18+
The `Type` property can be set to `Number`, prompting the input to handle numeric-only codes. This is ideal for scenarios demanding numeric OTP's. By default, the `Type` property is set to `Number`.
1919

2020
{% tabs %}
2121
{% highlight xaml %}
@@ -34,11 +34,11 @@ SfOtpInput otpInput = new SfOtpInput()
3434
{% endhighlight %}
3535
{% endtabs %}
3636

37-
![Number Image for OtpInput](images/number.png)
37+
![Number Image for OTP Input](images/number.png)
3838

3939
### Text type
4040

41-
You can set the `Type` property to `Text` for inputs that may include both letters and numbers, suitable for alphanumeric OTPs.
41+
You can set the `Type` property to `Text` for inputs that may include both letters and numbers, suitable for alphanumeric OTP's.
4242

4343
{% tabs %}
4444
{% highlight xaml %}
@@ -57,11 +57,11 @@ SfOtpInput otpInput = new SfOtpInput()
5757
{% endhighlight %}
5858
{% endtabs %}
5959

60-
![Text Image for OtpInput](images/text.png)
60+
![Text Image for OTP Input](images/text.png)
6161

6262
### Password type
6363

64-
You can set the `Type` property to `Password` to use this input type as password in the OtpInput.
64+
You can set the `Type` property to `Password` to use this input type as password in the OTP Input.
6565

6666
{% tabs %}
6767
{% highlight xaml %}
@@ -80,27 +80,4 @@ SfOtpInput otpInput = new SfOtpInput()
8080
{% endhighlight %}
8181
{% endtabs %}
8282

83-
![Password Image for OtpInput](images/password.png)
84-
85-
## Value
86-
87-
You can specify the value of OtpInput by using the `Value` property.
88-
89-
{% tabs %}
90-
{% highlight xaml %}
91-
92-
<otpInput:SfOtpInput Value="e3c7" Type="Text" />
93-
94-
{% endhighlight %}
95-
{% highlight c# %}
96-
97-
SfOtpInput otpInput = new SfOtpInput()
98-
{
99-
Value = "e3c7",
100-
Type = OtpInputType.Text
101-
};
102-
103-
{% endhighlight %}
104-
{% endtabs %}
105-
106-
![Value Image for OtpInput](images/value.png)
83+
![Password Image for OTP Input](images/password.png)

0 commit comments

Comments
 (0)