Included UG for OtpInput #204
Conversation
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
|
Build Status: INQUEUE 🕒 |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
|
Build Status: INQUEUE 🕒 |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
|
|
||
| ### Text type | ||
|
|
||
| You can set the `Type` property to `Text` to use this input type as text. This is suitable when the OtpInput need to include both letters and numbers. |
There was a problem hiding this comment.
You can set the Type property to Text for inputs that may include both letters and numbers, suitable for alphanumeric OTPs.
There was a problem hiding this comment.
@naveenkumar-sanjeevirayan
Will update as suggested
| {% tabs %} | ||
| {% highlight xaml %} | ||
|
|
||
| <otp:SfOtpInput Value="e3c7"></otp:SfOtpInput> |
There was a problem hiding this comment.
for this value, need to set Type to Text. Otherwise change the value to 1234
There was a problem hiding this comment.
@naveenkumar-sanjeevirayan
Updated as suggested
| --- | ||
| layout: post | ||
| title: Customization in .NET MAUI OtpInput (SfOtpInput) | Syncfusion® | ||
| description: Learn how to customize otp input in Syncfusion® .NET MAUI OtpInput (SfOtpInput). Explore the options to enhance your otp input appearance. |
There was a problem hiding this comment.
Learn how to customize the OTP input in Syncfusion® .NET MAUI OtpInput (SfOtpInput) control. Explore various options to enhance the appearance of your OTP input.
There was a problem hiding this comment.
@naveenkumar-sanjeevirayan
Will update as suggested
|
|
||
| # Customization in .NET MAUI OtpInput (SfOtpInput) | ||
|
|
||
| A `OtpInput` consists of several elements that can be customized to enhance its appearance and functionality. |
There was a problem hiding this comment.
An OtpInput consists of multiple elements that can be customized to enhance both its appearance and functionality.
| {% tabs %} | ||
| {% highlight xaml %} | ||
|
|
||
| <otp:SfOtpInput Placeholder="x"></otp:SfOtpInput> |
There was a problem hiding this comment.
<otpInput:SfOtpInput Placeholder="x"></otpInput:SfOtpInput>
use a proper namespace
There was a problem hiding this comment.
@naveenkumar-sanjeevirayan
I haven't changed the namespace yet, will update once changed to all the files.
|
|
||
| The placeholder in OtpInput specifies the text that is shown as a hint or placeholder until the user enters a value in the input field. It acts as a guidance for the users regarding the expected input format or purpose of the input field. | ||
|
|
||
| You can set the placeholder text by using the `Placeholder` property. Additionally, when providing a single character as the placeholder value all input fields within the OTP Input component will display the same character. |
There was a problem hiding this comment.
The placeholder for the OtpInput specifies the text that appears as a hint until the user enters a value.
Set the placeholder text using the Placeholder property. When a single character is assigned, each input field will show the same character.
There was a problem hiding this comment.
@naveenkumar-sanjeevirayan
Will update as suggested
| {% endhighlight %} | ||
| {% endtabs %} | ||
|
|
||
| When a placeholder with multiple placeholder characters is provided each input field will display characters from the placeholder string in sequence based on the available OtpInput length. |
There was a problem hiding this comment.
For placeholders with multiple characters, available input fields will sequentially display each character.
There was a problem hiding this comment.
@naveenkumar-sanjeevirayan
Will update as suggested
| {% endhighlight %} | ||
| {% endtabs %} | ||
|
|
||
| ## PlaceholderColor in OtpInput component |
There was a problem hiding this comment.
Use a sub title inside the placeholder
|
|
||
| ## PlaceholderColor in OtpInput component | ||
|
|
||
| The placeholder text color can be changed by using the `PlaceholderColor` property. The default value of PlaceholderColor property is `Colors.Gray`. |
There was a problem hiding this comment.
The color of placeholder text can be changed using the PlaceholderColor property,
There was a problem hiding this comment.
@naveenkumar-sanjeevirayan
Is default value needs to be mentioned?
|
|
||
| ## Separator in OtpInput component | ||
|
|
||
| The separator in OtpInput specifies the character or symbol used to separate each input field in the OtpInput component. This separator is displayed between each input field to visually distinguish between each inputs. You can set the separator character by using the `Separator` property. |
There was a problem hiding this comment.
The Separator property defines a character or symbol used to separate each input field, visually distinguishing inputs.
There was a problem hiding this comment.
@naveenkumar-sanjeevirayan
Will update as suggested
maui-toolkit/Otp-Input/Overview.md
Outdated
|
|
||
| * `StylingMode` - Supports different styling modes : Outlined, Filled, and Underlined. | ||
|
|
||
| * `Types` - Supports different input types : Number, Password, and Text. |
There was a problem hiding this comment.
@naveenkumar-sanjeevirayan
Updated incorrect spelling for property name
|
Build Status: INPROGRESS 🔃 |
|
CI Status: SUCCESS ✅ |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: SUCCESS ✅ |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: SUCCESS ✅ |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: SUCCESS ✅ |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: FAILURE ❌ |
|
Build Status: INPROGRESS 🔃 |
|
CI Status: SUCCESS ✅ |
No description provided.