From b065aa4ba8bf141057c8e81dcb1b9b2abb4e945c Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Fri, 10 Feb 2023 15:48:11 +0200 Subject: [PATCH 1/8] docs(maskedtextbox): Add InputMode parameter and polush Overview --- components/dateinput/overview.md | 6 +- .../images/masked-textbox-first-look.png | Bin 834 -> 0 bytes components/maskedtextbox/overview.md | 118 +++++++++++------- components/numerictextbox/overview.md | 2 +- 4 files changed, 80 insertions(+), 46 deletions(-) delete mode 100644 components/maskedtextbox/images/masked-textbox-first-look.png diff --git a/components/dateinput/overview.md b/components/dateinput/overview.md index 86ce29e9c3..1441de2206 100644 --- a/components/dateinput/overview.md +++ b/components/dateinput/overview.md @@ -89,9 +89,9 @@ The following section lists some Date Input parameters and links to other pages | Parameter | Type and Default Value | Description | |---|---|---| -| `AriaDescribedBy` | `string` | The [`aria-describedby` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) if the `input`. | -| `AriaLabel` | `string` | The [`aria-label` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) if the `input`. | -| `AriaLabelledBy` | `string` | The [`aria-labelledby` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) if the `input`. | +| `AriaDescribedBy` | `string` | The [`aria-describedby` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) of the `input`. | +| `AriaLabel` | `string` | The [`aria-label` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) of the `input`. | +| `AriaLabelledBy` | `string` | The [`aria-labelledby` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) of the `input`. | | `AutoComplete` | `string` | The [`autocomplete` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) of the `input`. | | `DebounceDelay` | `int`
(`150`) | The time in milliseconds between the last typed symbol and the value update. Use it to balance between client-side performance and number of database queries. | | `Enabled` | `bool` | Defines if the Date Input is enabled and accepts new values. | diff --git a/components/maskedtextbox/images/masked-textbox-first-look.png b/components/maskedtextbox/images/masked-textbox-first-look.png deleted file mode 100644 index bc5e99fd949971a73294fa87b3b87b3992d54b62..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 834 zcmV-I1HJr-P)+5A@WdHyG=cZDG$N#0{|NrBq09B>u|NsC0#-&vN|NrMw08)ei0001l#{d5Sg2w;H zgvNpZQl{rp00000Qu+D$du3&1Wprhwddod#>a$ZWq)ODWu>N4 zwdenq&i|$3=YF&1Wth$9|Hg!-rBbG)0D`4bRi)?0goJ{GQi6m4RfL29gi-*6Wo3TN zm}RwnWtL@Sgo091RZ^vb0EATlaP$|@0000HbVXQnPjGZ;ZE1RCWB^oYZh25nNA4oL z-2earEJ;K`RA}DqnCWtxFc5$hR`Lb4BZH3~Y15`{?)y&O|Gl!i5>Wu#!;G0^aQ6FQ zM%HTgVvy*}mh$*S2JS5K*w zo_3a1dvza^cXyJlaEI*u+(V_*Dt$aeI}I@HaF3@C)c5}}K<2t`e0;uB-P0$qDh0U6 z-Oq6;MNlkn+x0Gh?M^6KUq17$`3i%pJ?I@`+!~-X!@cK%u6Twm4riv&&M}o9TDJ#j zub;$I?{08ZaGy}rXgi5BRHl?BRIqAIC@bT%2j9se%~(_i_v)UfmX8WqhBIUEo`X9t zcNMgyA+5?QU`WI6xV=Qig~rR=IgH(%Hv6zU?McPmICslQez^(_xO4x4JF5^2+)*i* z8sFysheQGq6T z!BObDZw9>mb^3vn0s z4@cZJazUj63TdE)kg0N}40Ntl2TvJV9sQ>@~ M07*qoM6N<$f)S0MIRF3v diff --git a/components/maskedtextbox/overview.md b/components/maskedtextbox/overview.md index 270bedec2a..b5497ccfb6 100644 --- a/components/maskedtextbox/overview.md +++ b/components/maskedtextbox/overview.md @@ -10,71 +10,104 @@ position: 0 # Blazor MaskedTextbox Overview -The Blazor Masked Textbox component provides a mask and prompts the user to enter the data in the required format, and it prevents input that does not match the mask. You can use it to show the user the format the need to write things like phone numbers, credit card numbers, ZIP codes, IP addresses, percentage values and so on. +The Blazor Masked Textbox component provides a mask and prompts the user to enter the data in the required format. The component prevents input that does not match the mask. Use it to show the user the required format for values like phone numbers, credit card numbers, ZIP codes, IP addresses, percentage values and so on. -You can also add a custom CSS class or control various attributes of the `input` element such as the `name`, `placeholder`, `tabindex`, and [more](#features), and also respond to [events]({%slug maskedtextbox-events%}). +You can also add standard attributes such as custom CSS classes, `name`, `placeholder`, `tabindex`, and [more](#maskedtextbox-parameters), and also respond to [events]({%slug maskedtextbox-events%}). -## Creating MaskedTextBox +## Creating Blazor MaskedTextBox -To use a Telerik MaskedTextbox for Blazor: +To use the Telerik MaskedTextbox for Blazor: 1. Add the `` tag to your razor page. -1. Set its `Value` to the `string` you want to get out of it. -1. Provide the desired [`Mask`]({%slug maskedtextbox-mask-prompt%}) to prompt the user. +1. Set its `Value` parameter to a `string`. It supports two-way binding. +1. Set the desired [`Mask`]({%slug maskedtextbox-mask-prompt%}) to prompt the user. ->caption Basic masked textbox with two-way value binding and a credit card mask +>caption Basic Masked TextBox with two-way Value binding and a credit card mask ````CSHTML -@TheValue -
+ - - +

+The component value is: @MaskedValue @code{ - string TheValue { get; set; } + private string MaskedValue { get; set; } } ```` ->caption The result from the code snippet above before you start writing +## Validation + +You can validate the content of the `TelerikMaskedTextBox` using the Data Annotation attributes. [See the Input Validation article for an example on how to validate the content of the MaskedTextBox]({%slug common-features/input-validation%}#maskedtextbox). -![Masked Textbox first look](images/masked-textbox-first-look.png) +## Events +The [Masked TextBox component fires events for value changes and blur]({%slug maskedtextbox-events%}). Use them to respond to user actions. ## Mask-Related Parameters -The table below provides a quick overview of the mask-related parameters. You can see the [Mask and Prompt article for additional details.]({%slug maskedtextbox-mask-prompt%}) +The table below provides a quick overview of the mask-related parameters. Also see the [Mask and Prompt article]({%slug maskedtextbox-mask-prompt%}) for additional details. @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) | Parameter | Type and Default value | Description | -|-----------|------------------------|-------------| -| `IncludeLiterals` | `bool` | Controls if the literal characters from the mask (those characters that don't carry a special meaning such as brackets or dashes) are included in the `Value`. | -| `Mask` | `string` | Defines the mask (pattern) that the user has to follow. | -| `MaskOnFocus` | `bool` | Controls if the mask will be shown to the user only while the input is focused. When set to `true`, the user will see the [FloatingLabel]({%slug floatinglabel-overview%}) (if used) or `Placeholder` (if present) instead of the mask in case the textbox is empty. When there is some value in the input, the mask and input will be shown. | -| `Prompt` | `char`
`_` | Defines the prompt character the user will see in the mask where there is no user value already. | -| `PromptPlaceholder` | `char?`
` ` (empty space) | Defines the character that is added to the raw `Value` for places where there is no user input yet. | +|---|---|---| +| `IncludeLiterals` | `bool` | Controls if the literal characters from the mask are included in the `Value`. These are the characters that don't carry a special meaning such as brackets or dashes. | +| `Mask` | `string` | The mask (pattern) that the user has to follow. | +| `MaskOnFocus` | `bool` | Controls if the mask will show only while the input is focused. When `true` and there is no value, the user will see the [FloatingLabel]({%slug floatinglabel-overview%}) or `Placeholder` (if used) instead of the mask. When there is some value, the mask and value will show. | +| `Prompt` | `char`
(`_`) | The character that will show in the mask where there is no user input already. | +| `PromptPlaceholder` | `char?`
(` ` space) | The character that is added to the raw `Value` for places where there is no user input yet. | ## MaskedTextBox Parameters +See the [MaskedTextBox API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikMaskedTextBox) for a full list of parameters, methods and events. + | Parameter | Type and Default value | Description | -|-----------|------------------------|-------------| -| `Class` | `string` | Adds a custom CSS class to the `
` element. | -| `Width` | `string` | Controls the width of the `` element. | -| `DebounceDelay` | `int`
(`150`) | Specifies the time in milliseconds between the last typed symbol and the updating of the value. | -| `Enabled` | `bool`
(`true`) | Controls if the users can type in the component. | -| `Id` | `string` | Renders as the `id` attribute on the `` element, so you can attach a `