From f4dfe6f79db3adef37dc9db72f84bda1dcf194f6 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Tue, 2 Jan 2024 18:25:21 +0200 Subject: [PATCH 01/27] docs(common): Prefix and Suffix documentation --- _contentTemplates/common/inputs.md | 6 ++++ common-features/dimensions.md | 2 +- common-features/input-adornments.md | 42 ++++++++++++++++++++++ common-features/input-validation.md | 2 +- common-features/loading-sign.md | 2 +- components/autocomplete/overview.md | 4 ++- components/combobox/overview.md | 2 ++ components/maskedtextbox/overview.md | 2 ++ components/multicolumncombobox/overview.md | 10 +----- components/multiselect/overview.md | 2 ++ components/numerictextbox/overview.md | 2 ++ components/textarea/overview.md | 2 ++ components/textbox/overview.md | 2 ++ 13 files changed, 67 insertions(+), 13 deletions(-) create mode 100644 common-features/input-adornments.md diff --git a/_contentTemplates/common/inputs.md b/_contentTemplates/common/inputs.md index 784f2362cb..dd4b1932bf 100644 --- a/_contentTemplates/common/inputs.md +++ b/_contentTemplates/common/inputs.md @@ -7,3 +7,9 @@ Also check the dedicated KB article about [programmatic input component focusing Consider setting `DebounceDelay="0"` to the component inside the editor template. This is how the default editors in all Telerik Blazor components work. Otherwise, fast users may try to save changes before the data item in edit mode receives the new value. #end + +#adornments +## Adornments + +The component allows adding custom elements as prefix and suffix. [Read more about how to render custom adornments before and after the input element...]({%slug common-features/input-adornments%}) +#end diff --git a/common-features/dimensions.md b/common-features/dimensions.md index 7b1c6c9f19..4709439edc 100644 --- a/common-features/dimensions.md +++ b/common-features/dimensions.md @@ -5,7 +5,7 @@ description: How dimensions work and are set in the Telerik UI for Blazor compon slug: common-features/dimensions tags: telerik,blazor,dimensions,width,height,percent,pixel published: True -position: 3 +position: 7 --- # Dimensions diff --git a/common-features/input-adornments.md b/common-features/input-adornments.md new file mode 100644 index 0000000000..1fdcc5c3ef --- /dev/null +++ b/common-features/input-adornments.md @@ -0,0 +1,42 @@ +--- +title: Input Adornments +page_title: Input Adornments +description: How to add prefix and suffix adornments in the input elements of the components. +slug: common-features/input-adornments +tags: telerik,blazor,input,adornments,prefix,suffix +published: True +position: 2 +--- + +# Input Adornments + +Telerik UI for Blazor supports adornments for some of the components that incorporate input element. This functionality allows you to add custom elements as [prefix and suffix adornments](#basics). + +>caption In this article: + +* [Basics](#basics) +* [Supported components](#supported-components) +* [Adding prefix and suffix in UI for Blazor components](#adding-prefix-and-suffix-in-ui-for-blazor-components) + +## Basics + +What are prefix and suffix. Example use cases. Information about separator? + +## Supported components + +The prefix and suffix adornments are supported by the following components: + +* [AutoComplete]({%slug autocomplete-overview%}) +* [ComboBox]({%slug components/combobox/overview%}) +* [MaskedTextbox]({%slug maskedtextbox-overview%}) +* [MultiColumnComboBox]({%slug multicolumncombobox-overview%}) +* [MultiSelect]({%slug multiselect-overview%}) +* [NumericTextBox]({%slug components/numerictextbox/overview%}) +* [TextArea]({%slug textarea-overview%}) +* [TextBox]({%slug components/textbox/overview%}) + +## Adding prefix and suffix in UI for Blazor components + +Include information and example/s on how to add prefix and suffix. + + \ No newline at end of file diff --git a/common-features/input-validation.md b/common-features/input-validation.md index fd7d202125..1ec0a9f53f 100644 --- a/common-features/input-validation.md +++ b/common-features/input-validation.md @@ -5,7 +5,7 @@ description: How to validate Blazor inputs. slug: common-features/input-validation tags: telerik,blazor,validation,data,annotation,form published: True -position: 2 +position: 3 --- # Input Validation diff --git a/common-features/loading-sign.md b/common-features/loading-sign.md index 02a52fddda..016aa205ee 100644 --- a/common-features/loading-sign.md +++ b/common-features/loading-sign.md @@ -5,7 +5,7 @@ description: Components that peform long running operations can show a loading i slug: common-features-loading-sign tags: telerik,blazor,loading,sign,busy,indicator,data published: True -position: 2 +position: 5 --- # Loading Sign diff --git a/components/autocomplete/overview.md b/components/autocomplete/overview.md index 91a8540549..d039c9a986 100644 --- a/components/autocomplete/overview.md +++ b/components/autocomplete/overview.md @@ -51,11 +51,13 @@ The Blazor AutoComplete @[template](/_contentTemplates/dropdowns/features.md#dat ## Filtering The Blazor AutoComplete @[template](/_contentTemplates/dropdowns/features.md#filtering) [Read more about the Blazor AutoComplete filter...]({%slug autocomplete-filter%}) - + ## Grouping The Blazor AutoComplete @[template](/_contentTemplates/dropdowns/features.md#grouping) [Read more about the Blazor AutoComplete grouping...]({%slug components/autocomplete/grouping%}) +@[template](/_contentTemplates/common/inputs.md#adornments) + ## Templates @[template](/_contentTemplates/dropdowns/features.md#templates) [Read more about the Blazor AutoComplete templates...]({%slug autocomplete-templates%}) diff --git a/components/combobox/overview.md b/components/combobox/overview.md index 0a36a27e21..71f541382f 100644 --- a/components/combobox/overview.md +++ b/components/combobox/overview.md @@ -57,6 +57,8 @@ The Blazor ComboBox @[template](/_contentTemplates/dropdowns/features.md#filteri The Blazor ComboBox @[template](/_contentTemplates/dropdowns/features.md#grouping) [Read more about the Blazor ComboBox grouping...]({% slug components/combobox/grouping %}). +@[template](/_contentTemplates/common/inputs.md#adornments) + ## Templates @[template](/_contentTemplates/dropdowns/features.md#templates) [Read more about the Blazor ComboBox templates...]({% slug components/combobox/templates %}). diff --git a/components/maskedtextbox/overview.md b/components/maskedtextbox/overview.md index 2bceb3fd3b..bf28607e51 100644 --- a/components/maskedtextbox/overview.md +++ b/components/maskedtextbox/overview.md @@ -35,6 +35,8 @@ The component value is: @MaskedValue } ```` +@[template](/_contentTemplates/common/inputs.md#adornments) + ## 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). diff --git a/components/multicolumncombobox/overview.md b/components/multicolumncombobox/overview.md index 8ad3dad897..4ac36a5e89 100644 --- a/components/multicolumncombobox/overview.md +++ b/components/multicolumncombobox/overview.md @@ -65,39 +65,34 @@ The +
TextArea
+ + + + + + + + +
+
TextBox
+ + + + + + +
+ +
+
MaskedTextBox
+ + + + + + +
+ +
+
NumericTextBox
+ + + + m + + +
+ +
+
AutoComplete
+ + + + + + +
+ +
+
ComboBox
+ + + + + + +
+ +
+
MultiColumnComboBox
+ + + + + + + + + + +
+ +
+
MultiSelect
+ + + + + + +
+ +@code { + private List Products = Enumerable.Range(1, 20).Select(x => $"Product {x}").ToList(); + + private List ProductModels = Enumerable.Range(1, 20).Select(x => new Product { ProductId = x, ProductName = "Product " + x }).ToList(); + + private List SelectedProducts { get; set; } + + private string TextValue { get; set; } + private string SelectedProduct { get; set; } + + private int Height { get; set; } + + public class Product + { + public int ProductId { get; set; } + public string ProductName { get; set; } + } +} + + +```` ## Adding Suffix in UI for Blazor Components +To add a suffix, declare `<*ComponentName*SuffixTemplate>` tag as direct child of the `` tag. + +The `SuffixTemplate` is a `RenderFragment` which allows you to declare any desired content as a prefix - be that simple text, HTML elements or components. + +> Note about suffix size + +>caption Suffix in UI for Blazor inputs and selects + +````CSHTML +
+
TextArea
+ + + + + + +
+ +
+
TextBox
+ + + + + + +
+ +
+
MaskedTextBox
+ + + + + + +
+ +
+
NumericTextBox
+ + + + + + +
+ +
+
AutoComplete
+ + + + + + +
+ +
+
ComboBox
+ + + + + + +
+ +
+
MultiColumnComboBox
+ + + + + + + + + + +
+ +
+
MultiSelect
+ + + + + + +
+ +@code { + private List Products = Enumerable.Range(1, 20).Select(x => $"Product {x}").ToList(); + + private List ProductModels = Enumerable.Range(1, 20).Select(x => new Product { ProductId = x, ProductName = "Product " + x }).ToList(); + + private List SelectedProducts { get; set; } + + private string TextValue { get; set; } + private string SelectedProduct { get; set; } + + private int Height { get; set; } + + public class Product + { + public int ProductId { get; set; } + public string ProductName { get; set; } + } +} + + +```` + ## Managing Separators -## TextArea Specifics \ No newline at end of file +By default, the prefix and suffix are visually divided from the input element of the components by a separator. You can control whether the separator for the prefix and suffix will be visible through the following parameters: + +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + +| Parameter | Type | Description | +| ----------- | ----------- | -------| +| `ShowPrefixSeparator` | `bool`
(`true`) | Specifies whether the prefix separator is rendered. If a prefix template is not declared, the separator will not be rendered, regardless of the parameter value. | +| `ShowSuffixSeparator` | `bool`
(`true`) | Specifies whether the suffix separator is rendered. If a prefix template is not declared, the separator will not be rendered, regardless of the parameter value | + +## TextArea Specifics + +In addition to the above-listed configuration settings, the TextArea exposes a couple of other options that allow you to control the position of the adornments. + +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + +| Parameter | Type | Description | +| ----------- | ----------- | -------| +| `AdornmentsOrientation` | `TextAreaAdornmentsOrientation`
(`TextAreaAdornmentsOrientation.Vertical`) | Configures the positioning of the TextArea prefix and suffix templates. The possible values are Horizontal and Vertical. If the value is set to Horizontal, the templates will appear above (prefix) and below (suffix) the TextArea. If the value is set to Vertical, the templates will be displayed on the left (prefix) and on the right (suffix). By default, the templates are positioned vertically. | +| `AdornmentsFlow` | `TextAreaAdornmentsFlow`
(`TextAreaAdornmentsFlow.Horizontal`) | Configures the flow of the elements in the TextArea prefix and suffix templates, determining whether the elements will be ordered in a row or column. The possible values are Horizontal (in a row) and Vertical (in a column). By default, the elements (adornments) within the templates are positioned horizontally. | + +## See also + +* [Live Demo: TextArea Adornments](https://demos.telerik.com/blazor-ui/textarea/adornments) +* [Live Demo: TextBox Adornments](https://demos.telerik.com/blazor-ui/textbox/adornments) +* [Live Demo: MaskedTextBox Adornments](https://demos.telerik.com/blazor-ui/maskedtextBox/adornments) +* [Live Demo: NumericTextBox Adornments](https://demos.telerik.com/blazor-ui/numerictextBox/adornments) +* [Live Demo: AutoComplete Adornments](https://demos.telerik.com/blazor-ui/autocomplete/adornments) +* [Live Demo: ComboBox Adornments](https://demos.telerik.com/blazor-ui/combobox/adornments) +* [Live Demo: MultiColumnComboBox Adornments](https://demos.telerik.com/blazor-ui/multicolumncombobox/adornments) +* [Live Demo: MultiSelect Adornments](https://demos.telerik.com/blazor-ui/multiselect/adornments) \ No newline at end of file From c43b051d3bc65832f10401aa7345881300e56fcb Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Fri, 12 Jan 2024 19:47:48 +0200 Subject: [PATCH 04/27] docs(common):add floating label specifics --- _contentTemplates/common/inputs.md | 27 ++++++++++++++++++++++ common-features/input-adornments.md | 34 ++++++++++++++++------------ components/floatinglabel/overview.md | 3 +++ knowledge-base/textbox-add-icon.md | 3 +++ 4 files changed, 53 insertions(+), 14 deletions(-) diff --git a/_contentTemplates/common/inputs.md b/_contentTemplates/common/inputs.md index dd4b1932bf..caaddfa117 100644 --- a/_contentTemplates/common/inputs.md +++ b/_contentTemplates/common/inputs.md @@ -13,3 +13,30 @@ Consider setting `DebounceDelay="0"` to the component inside the editor template The component allows adding custom elements as prefix and suffix. [Read more about how to render custom adornments before and after the input element...]({%slug common-features/input-adornments%}) #end + +#floating-label-and-preffix +When using the `PrefixTemplate` for a component wrapped in a [FloatingLabel]({%slug floatinglabel-overview%}), the label will overlap the prefix. + +To ensure both the FloatingLabel and the prefix content will be properly displayed, configure the label position like so: + +````CSHTML + + + + + + + + + + +@code{ + public string TextValue { get; set; } +} +```` +#end \ No newline at end of file diff --git a/common-features/input-adornments.md b/common-features/input-adornments.md index 0a772035f2..f797d18b67 100644 --- a/common-features/input-adornments.md +++ b/common-features/input-adornments.md @@ -20,6 +20,8 @@ Telerik UI for Blazor supports adornments for some of the components that incorp * [Adding Suffix in UI for Blazor Components](#adding-suffix-in-ui-for-blazor-components) * [Managing separators](#managing-separators) * [TextArea Specifics](#textarea-specifics) +* [FloatingLabel Specifics](#floatinglabel-specifics) + ## Basics @@ -131,7 +133,7 @@ The `PrefixTemplate` is a `RenderFragment` which allows you to declare any desir
MultiColumnComboBox
@code { + private string TextValue { get; set; } + private string SelectedProduct { get; set; } + private int SelectedProductId { get; set; } + private int Height { get; set; } + private List Products = Enumerable.Range(1, 20).Select(x => $"Product {x}").ToList(); private List ProductModels = Enumerable.Range(1, 20).Select(x => new Product { ProductId = x, ProductName = "Product " + x }).ToList(); private List SelectedProducts { get; set; } - private string TextValue { get; set; } - private string SelectedProduct { get; set; } - - private int Height { get; set; } - public class Product { public int ProductId { get; set; } @@ -279,7 +281,7 @@ The `SuffixTemplate` is a `RenderFragment` which allows you to declare any desir
MultiColumnComboBox
@code { + private string TextValue { get; set; } + private string SelectedProduct { get; set; } + private int SelectedProductId { get; set; } + private int Height { get; set; } + private List Products = Enumerable.Range(1, 20).Select(x => $"Product {x}").ToList(); private List ProductModels = Enumerable.Range(1, 20).Select(x => new Product { ProductId = x, ProductName = "Product " + x }).ToList(); private List SelectedProducts { get; set; } - private string TextValue { get; set; } - private string SelectedProduct { get; set; } - - private int Height { get; set; } - public class Product { public int ProductId { get; set; } @@ -339,7 +341,7 @@ The `SuffixTemplate` is a `RenderFragment` which allows you to declare any desir ## Managing Separators -By default, the prefix and suffix are visually divided from the input element of the components by a separator. You can control whether the separator for the prefix and suffix will be visible through the following parameters: +By default, the prefix and suffix are visually divided from the input element of the components by a separator. You can control whether the prefix and suffix separator will be visible through the following parameters: @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) @@ -350,7 +352,7 @@ By default, the prefix and suffix are visually divided from the input element of ## TextArea Specifics -In addition to the above-listed configuration settings, the TextArea exposes a couple of other options that allow you to control the position of the adornments. +In addition to the above-listed configuration settings, the TextArea exposes a couple of additional options that allow you to control the position of the adornments. @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) @@ -359,6 +361,10 @@ In addition to the above-listed configuration settings, the TextArea exposes a c | `AdornmentsOrientation` | `TextAreaAdornmentsOrientation`
(`TextAreaAdornmentsOrientation.Vertical`) | Configures the positioning of the TextArea prefix and suffix templates. The possible values are Horizontal and Vertical. If the value is set to Horizontal, the templates will appear above (prefix) and below (suffix) the TextArea. If the value is set to Vertical, the templates will be displayed on the left (prefix) and on the right (suffix). By default, the templates are positioned vertically. | | `AdornmentsFlow` | `TextAreaAdornmentsFlow`
(`TextAreaAdornmentsFlow.Horizontal`) | Configures the flow of the elements in the TextArea prefix and suffix templates, determining whether the elements will be ordered in a row or column. The possible values are Horizontal (in a row) and Vertical (in a column). By default, the elements (adornments) within the templates are positioned horizontally. | +## FloatingLabel Specifics + +@[template](/_contentTemplates/common/inputs.md#floating-label-and-preffix) + ## See also * [Live Demo: TextArea Adornments](https://demos.telerik.com/blazor-ui/textarea/adornments) diff --git a/components/floatinglabel/overview.md b/components/floatinglabel/overview.md index dc8b3f6a62..35e697bed3 100644 --- a/components/floatinglabel/overview.md +++ b/components/floatinglabel/overview.md @@ -77,6 +77,9 @@ If a Telerik component has both a `Placeholder` and a floating label, the behavi * When the floating label is **over the component**, then the placeholder is **not rendered**. * When the floating label is **outside the component** and the focused component has no value, the placeholder **is visible**. +## Integration with Prefix Adornment + +@[template](/_contentTemplates/common/inputs.md#floating-label-and-preffix) ## FloatingLabel Parameters diff --git a/knowledge-base/textbox-add-icon.md b/knowledge-base/textbox-add-icon.md index a8e0650705..d5ef5ecae1 100644 --- a/knowledge-base/textbox-add-icon.md +++ b/knowledge-base/textbox-add-icon.md @@ -29,6 +29,9 @@ Is there anyway to do an 'addon' button with the TelerikTextBox? ## Solution +>important **UI for Blazor 5.1.0** includes [Prefix and Suffix templates]({%slug common-features/input-adornments%}). Use that instead. + + TextBoxes (`` elements) can only hold plain text. It is possible to render an icon next to the textbox and position it over the textbox. The `` element itself will need some left padding to free space for the icon. >caption Display icon over TextBox input From fdd9956c3afe1dca26e9f1325156b3a922be2c9f Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Fri, 12 Jan 2024 20:35:14 +0200 Subject: [PATCH 05/27] docs(common):fixes --- _contentTemplates/common/inputs.md | 4 ++-- common-features/input-adornments.md | 13 ++----------- 2 files changed, 4 insertions(+), 13 deletions(-) diff --git a/_contentTemplates/common/inputs.md b/_contentTemplates/common/inputs.md index caaddfa117..8bb93e9897 100644 --- a/_contentTemplates/common/inputs.md +++ b/_contentTemplates/common/inputs.md @@ -15,9 +15,9 @@ The component allows adding custom elements as prefix and suffix. [Read more abo #end #floating-label-and-preffix -When using the `PrefixTemplate` for a component wrapped in a [FloatingLabel]({%slug floatinglabel-overview%}), the label will overlap the prefix. +When using the [`PrefixTemplate`]({%slug common-features/input-adornments%}#adding-prefix-in-ui-for-blazor-components) for a component wrapped in a [FloatingLabel]({%slug floatinglabel-overview%}), the label will overlap the prefix. -To ensure both the FloatingLabel and the prefix content will be properly displayed, configure the label position like so: +To ensure both the FloatingLabel and the prefix content are properly displayed, configure the label position like so: ````CSHTML ```` -## Adding Suffix in UI for Blazor Components +## Adding a Suffix Adornment. To add a suffix, declare `<*ComponentName*SuffixTemplate>` tag as direct child of the `` tag. From b0be98f73d62587d52ffef66f0ab2b8129badc65 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Mon, 29 Jan 2024 11:40:31 +0200 Subject: [PATCH 17/27] Update common-features/input-adornments.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- common-features/input-adornments.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/common-features/input-adornments.md b/common-features/input-adornments.md index 5179bcaa7f..69a3354132 100644 --- a/common-features/input-adornments.md +++ b/common-features/input-adornments.md @@ -40,7 +40,7 @@ The following input components support prefix and suffix adornments: ## Adding a Prefix Adornment -To add a prefix, declare `<*ComponentName*PrefixTemplate>` tag as direct child of the `` tag. +To add a prefix, declare a `<*ComponentName*PrefixTemplate>` tag as a direct child of the `` tag. The `PrefixTemplate` is a `RenderFragment`, which allows you to declare any desired content as a prefix—simple text, HTML elements, or components. The `PrefixTemplate` is a `RenderFragment` which allows you to declare any desired content as a prefix - be that simple text, HTML elements or components. From 5d239100d86f58a6e3b362aaa3b14e23786016e1 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Mon, 29 Jan 2024 11:40:43 +0200 Subject: [PATCH 18/27] Update common-features/input-adornments.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- common-features/input-adornments.md | 1 - 1 file changed, 1 deletion(-) diff --git a/common-features/input-adornments.md b/common-features/input-adornments.md index 69a3354132..8b510f8dff 100644 --- a/common-features/input-adornments.md +++ b/common-features/input-adornments.md @@ -42,7 +42,6 @@ The following input components support prefix and suffix adornments: To add a prefix, declare a `<*ComponentName*PrefixTemplate>` tag as a direct child of the `` tag. The `PrefixTemplate` is a `RenderFragment`, which allows you to declare any desired content as a prefix—simple text, HTML elements, or components. -The `PrefixTemplate` is a `RenderFragment` which allows you to declare any desired content as a prefix - be that simple text, HTML elements or components. >caption Prefix in UI for Blazor inputs and selects From 56e72ca52d14ae878cb03bef13ac7594ec81ad18 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Mon, 29 Jan 2024 11:40:56 +0200 Subject: [PATCH 19/27] Update common-features/input-adornments.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- common-features/input-adornments.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/common-features/input-adornments.md b/common-features/input-adornments.md index 8b510f8dff..630ced991d 100644 --- a/common-features/input-adornments.md +++ b/common-features/input-adornments.md @@ -43,7 +43,7 @@ The following input components support prefix and suffix adornments: To add a prefix, declare a `<*ComponentName*PrefixTemplate>` tag as a direct child of the `` tag. The `PrefixTemplate` is a `RenderFragment`, which allows you to declare any desired content as a prefix—simple text, HTML elements, or components. ->caption Prefix in UI for Blazor inputs and selects +>caption Adding a prefix adornment in UI for Blazor ````CSHTML
From 2ce4ec174f456eadd482174a59409ba960121b0c Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Mon, 29 Jan 2024 11:41:10 +0200 Subject: [PATCH 20/27] Update common-features/input-adornments.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- common-features/input-adornments.md | 1 - 1 file changed, 1 deletion(-) diff --git a/common-features/input-adornments.md b/common-features/input-adornments.md index 630ced991d..256655c685 100644 --- a/common-features/input-adornments.md +++ b/common-features/input-adornments.md @@ -187,7 +187,6 @@ To add a prefix, declare a `<*ComponentName*PrefixTemplate>` tag as a direct chi To add a suffix, declare `<*ComponentName*SuffixTemplate>` tag as direct child of the `` tag. -The `SuffixTemplate` is a `RenderFragment` which allows you to declare any desired content as a prefix - be that simple text, HTML elements or components. >caption Suffix in UI for Blazor inputs and selects From f8bd85812eceee5a62e757096acdd2f3f72b8e0b Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Mon, 29 Jan 2024 11:41:22 +0200 Subject: [PATCH 21/27] Update common-features/input-adornments.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- common-features/input-adornments.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/common-features/input-adornments.md b/common-features/input-adornments.md index 256655c685..a9cd876093 100644 --- a/common-features/input-adornments.md +++ b/common-features/input-adornments.md @@ -185,7 +185,7 @@ To add a prefix, declare a `<*ComponentName*PrefixTemplate>` tag as a direct chi ## Adding a Suffix Adornment. -To add a suffix, declare `<*ComponentName*SuffixTemplate>` tag as direct child of the `` tag. +To add a suffix, declare a `<*ComponentName*SuffixTemplate>` tag as a direct child of the `` tag. The `SuffixTemplate` is a `RenderFragment`, which allows you to declare any desired content as a prefix—a simple text, HTML elements, or components. >caption Suffix in UI for Blazor inputs and selects From d5b232a8e88dedb5b42bef68e4c73692f48c1588 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Mon, 29 Jan 2024 11:41:34 +0200 Subject: [PATCH 22/27] Update common-features/input-adornments.md Co-authored-by: Yordan <60105689+yordan-mitev@users.noreply.github.com> --- common-features/input-adornments.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/common-features/input-adornments.md b/common-features/input-adornments.md index a9cd876093..6102415f75 100644 --- a/common-features/input-adornments.md +++ b/common-features/input-adornments.md @@ -188,7 +188,7 @@ To add a prefix, declare a `<*ComponentName*PrefixTemplate>` tag as a direct chi To add a suffix, declare a `<*ComponentName*SuffixTemplate>` tag as a direct child of the `` tag. The `SuffixTemplate` is a `RenderFragment`, which allows you to declare any desired content as a prefix—a simple text, HTML elements, or components. ->caption Suffix in UI for Blazor inputs and selects +>caption Adding a suffix adornment in UI for Blazor ````CSHTML
From faf682535803545f2ffc785d5cdb49c8c69aa9fd Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Mon, 29 Jan 2024 12:15:05 +0200 Subject: [PATCH 23/27] chore(adornments): address feedback --- common-features/input-adornments.md | 46 ++++++++++++++--------------- knowledge-base/textbox-add-icon.md | 7 +++-- 2 files changed, 27 insertions(+), 26 deletions(-) diff --git a/common-features/input-adornments.md b/common-features/input-adornments.md index 6102415f75..3fa39560d2 100644 --- a/common-features/input-adornments.md +++ b/common-features/input-adornments.md @@ -10,14 +10,16 @@ position: 2 # Input Adornments -Telerik UI for Blazor supports adornments for some of the components that incorporate input element. This functionality allows you to add custom elements as [prefix and suffix adornments](#basics). +Telerik UI for Blazor supports adornments for some of the components that incorporate input element. Using adornments allows you to enhance the Telerik UI for Blazor components by adding custom prefix and suffix elements. + +A prefix input adornment refers to an element placed before the user input field. You may use it to provide clarity on the expected data in the input such as currency symbols or unit indicators. Conversely, a suffix input adornment is an element positioned after the user input field. It often serves to provide direct functionality for the entered data like password visibility toggles, formatting or clearing the input. >caption In this article: -* [Supported components](#supported-components) -* [Adding a prefix adornment](#adding-a-prefix-adornment) -* [Adding a suffix adornment](#adding-a-suffix-adornment) -* [Using separators](#using-separators) +* [Supported Components](#supported-components) +* [Adding a Prefix Adornment](#adding-a-prefix-adornment) +* [Adding a Suffix Adornment](#adding-a-suffix-adornment) +* [Using Separators](#using-separators) * [TextArea Specifics](#textarea-specifics) * [FloatingLabel Specifics](#floatinglabel-specifics) @@ -26,17 +28,14 @@ Telerik UI for Blazor supports adornments for some of the components that incorp The following input components support prefix and suffix adornments: -* Simple inputs: - * [MaskedTextbox]({%slug maskedtextbox-overview%}) - * [NumericTextBox]({%slug components/numerictextbox/overview%}) - * [TextArea]({%slug textarea-overview%}) - * [TextBox]({%slug components/textbox/overview%}) - -* Selects: - * [AutoComplete]({%slug autocomplete-overview%}) - * [ComboBox]({%slug components/combobox/overview%}) - * [MultiColumnComboBox]({%slug multicolumncombobox-overview%}) - * [MultiSelect]({%slug multiselect-overview%}) +* [AutoComplete]({%slug autocomplete-overview%}) +* [ComboBox]({%slug components/combobox/overview%}) +* [MaskedTextbox]({%slug maskedtextbox-overview%}) +* [MultiColumnComboBox]({%slug multicolumncombobox-overview%}) +* [MultiSelect]({%slug multiselect-overview%}) +* [NumericTextBox]({%slug components/numerictextbox/overview%}) +* [TextArea]({%slug textarea-overview%}) +* [TextBox]({%slug components/textbox/overview%}) ## Adding a Prefix Adornment @@ -183,11 +182,10 @@ To add a prefix, declare a `<*ComponentName*PrefixTemplate>` tag as a direct chi ```` -## Adding a Suffix Adornment. +## Adding a Suffix Adornment To add a suffix, declare a `<*ComponentName*SuffixTemplate>` tag as a direct child of the `` tag. The `SuffixTemplate` is a `RenderFragment`, which allows you to declare any desired content as a prefix—a simple text, HTML elements, or components. - >caption Adding a suffix adornment in UI for Blazor ````CSHTML @@ -328,7 +326,7 @@ To add a suffix, declare a `<*ComponentName*SuffixTemplate>` tag as a direct chi ```` -## Managing Separators +## Using Separators By default, the prefix and suffix are visually divided from the input element of the components by a separator. You can control whether the prefix and suffix separator will be visible through the following parameters: @@ -356,11 +354,11 @@ In addition to the common configuration settings listed in this article, the Tex ## See also -* [Live Demo: TextArea Adornments](https://demos.telerik.com/blazor-ui/textarea/adornments) -* [Live Demo: TextBox Adornments](https://demos.telerik.com/blazor-ui/textbox/adornments) -* [Live Demo: MaskedTextBox Adornments](https://demos.telerik.com/blazor-ui/maskedtextBox/adornments) -* [Live Demo: NumericTextBox Adornments](https://demos.telerik.com/blazor-ui/numerictextBox/adornments) * [Live Demo: AutoComplete Adornments](https://demos.telerik.com/blazor-ui/autocomplete/adornments) * [Live Demo: ComboBox Adornments](https://demos.telerik.com/blazor-ui/combobox/adornments) +* [Live Demo: MaskedTextBox Adornments](https://demos.telerik.com/blazor-ui/maskedtextBox/adornments) * [Live Demo: MultiColumnComboBox Adornments](https://demos.telerik.com/blazor-ui/multicolumncombobox/adornments) -* [Live Demo: MultiSelect Adornments](https://demos.telerik.com/blazor-ui/multiselect/adornments) \ No newline at end of file +* [Live Demo: MultiSelect Adornments](https://demos.telerik.com/blazor-ui/multiselect/adornments) +* [Live Demo: NumericTextBox Adornments](https://demos.telerik.com/blazor-ui/numerictextBox/adornments) +* [Live Demo: TextArea Adornments](https://demos.telerik.com/blazor-ui/textarea/adornments) +* [Live Demo: TextBox Adornments](https://demos.telerik.com/blazor-ui/textbox/adornments) diff --git a/knowledge-base/textbox-add-icon.md b/knowledge-base/textbox-add-icon.md index d5ef5ecae1..c18a1580ed 100644 --- a/knowledge-base/textbox-add-icon.md +++ b/knowledge-base/textbox-add-icon.md @@ -27,10 +27,13 @@ I would like to add a icon in the TextBox, like a search icon, or email or phone Is there anyway to do an 'addon' button with the TelerikTextBox? -## Solution +## Solution 1 ->important **UI for Blazor 5.1.0** includes [Prefix and Suffix templates]({%slug common-features/input-adornments%}). Use that instead. +As of **UI for Blazor 5.1.0**, you may use [Prefix and Suffix templates]({%slug common-features/input-adornments%}) to add the desired content as prefix or suffix to the TextBox. +## Solution 2 + +This solution applies to **UI for Blazor 5.0.x or earlier**. TextBoxes (`` elements) can only hold plain text. It is possible to render an icon next to the textbox and position it over the textbox. The `` element itself will need some left padding to free space for the icon. From adbb682123823d96050b7db14f0c2705b12fdf63 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Mon, 29 Jan 2024 12:53:39 +0200 Subject: [PATCH 24/27] chore(adornments): document dropdowns specifics --- common-features/input-adornments.md | 52 +++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/common-features/input-adornments.md b/common-features/input-adornments.md index 3fa39560d2..da804b09c6 100644 --- a/common-features/input-adornments.md +++ b/common-features/input-adornments.md @@ -22,6 +22,7 @@ A prefix input adornment refers to an element placed before the user input field * [Using Separators](#using-separators) * [TextArea Specifics](#textarea-specifics) * [FloatingLabel Specifics](#floatinglabel-specifics) +* [DropDowns Specifics](#dropdowns-specifics) ## Supported Components @@ -352,6 +353,57 @@ In addition to the common configuration settings listed in this article, the Tex @[template](/_contentTemplates/common/inputs.md#floating-label-and-preffix) +## DropDowns Specifics + +This section applies to the components that incorporate popup element: + +* [AutoComplete]({%slug autocomplete-overview%}) +* [ComboBox]({%slug components/combobox/overview%}) +* [MultiColumnComboBox]({%slug multicolumncombobox-overview%}) +* [MultiSelect]({%slug multiselect-overview%}) + +By design, `Alt` + `Down` key combination opens the popup element when the component is focused. If you have added another dropdown component as a prefix or suffix adornment, focusing that component and pressing `Alt` + `Down` keys will open both popup elements - the one that belongs to the main component and the other associated with the dropdown in the prefix/suffix template. + +To prevent that behavior, you may wrap the content of the prefix/suffix template and stop the `keydown` event propagation. + +>caption Stop the `keydown` event propagation + +````CSHTML + + +
+ + +
+ + +
+ + +
+ + + +@code { + private string SelectedTeam { get; set; } = "Team 1"; + + private string SelectedRole { get; set; } + + private List Roles { get; set; } = new List { + "Manager", "Developer", "QA", "Technical Writer", "Support Engineer", "Sales Agent", "Architect", "Designer" + }; + + private List Teams { get; set; } = new List { + "Team 1", "Team 2", "Team 3" + }; +} +```` + ## See also * [Live Demo: AutoComplete Adornments](https://demos.telerik.com/blazor-ui/autocomplete/adornments) From e0ef76598d82ad7b5060ed65de9bd70e14240f10 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Mon, 29 Jan 2024 12:57:07 +0200 Subject: [PATCH 25/27] Update knowledge-base/textbox-add-icon.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/textbox-add-icon.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/textbox-add-icon.md b/knowledge-base/textbox-add-icon.md index c18a1580ed..5835f2d225 100644 --- a/knowledge-base/textbox-add-icon.md +++ b/knowledge-base/textbox-add-icon.md @@ -29,7 +29,7 @@ Is there anyway to do an 'addon' button with the TelerikTextBox? ## Solution 1 -As of **UI for Blazor 5.1.0**, you may use [Prefix and Suffix templates]({%slug common-features/input-adornments%}) to add the desired content as prefix or suffix to the TextBox. +As of **UI for Blazor 5.1.0**, you can use [Prefix and Suffix templates]({%slug common-features/input-adornments%}) to add the desired content as a prefix or suffix to the TextBox. ## Solution 2 From 8654d7e98ac670a867a5c66d52e06d337797dbfd Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Mon, 29 Jan 2024 12:58:30 +0200 Subject: [PATCH 26/27] Update _contentTemplates/common/inputs.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- _contentTemplates/common/inputs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_contentTemplates/common/inputs.md b/_contentTemplates/common/inputs.md index bf6199c0fd..de10f46bae 100644 --- a/_contentTemplates/common/inputs.md +++ b/_contentTemplates/common/inputs.md @@ -17,7 +17,7 @@ The component allows you to add custom elements as prefixes and suffixes. [Read #floating-label-and-preffix When using the [`PrefixTemplate`]({%slug common-features/input-adornments%}#adding-prefix-in-ui-for-blazor-components) for a component wrapped in a [FloatingLabel]({%slug floatinglabel-overview%}), the label will overlap the prefix. -To ensure both the FloatingLabel and the prefix content are properly displayed, configure the label position like so: +To ensure both the FloatingLabel and the prefix content are properly displayed, move the label with CSS: ````CSHTML