Skip to content

895343: Replaced Blazor TextBox code instead of CSS component #4672

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 29, 2024
Merged

895343: Replaced Blazor TextBox code instead of CSS component #4672

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 20 additions & 19 deletions blazor/textbox/getting-started-webapp.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,32 +112,33 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-

## Adding icons to the Blazor TextBox

A TextBox can be created with icon as a group by creating the parent `div` element with the class `e-input-group` and add the icon element as span with the class `e-input-group-icon`.
You can add an icon to the TextBox component using the [AddIconAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_AddIconAsync_System_String_System_String_System_Collections_Generic_Dictionary_System_String_System_Object__) method. Below is an example of how to implement this in your Blazor application:

{% tabs %}
{% highlight razor %}
```cshtml
@using Syncfusion.Blazor.Inputs

<div class='e-input-group'>
<input class='e-input' Placeholder='Date of Birth' type='text'>
<span class='e-input-group-icon e-input-calendar'></span>
<div id="sample" style="margin:130px auto;width:300px">
<SfTextBox @ref=@TextBoxDropDownObj
Created="@AddDateIcon"
Placeholder="Enter Date"
FloatLabelType="@FloatLabelType.Auto">
</SfTextBox>
</div>

<style>
.e-input-group-icon:before {
font-family: e-icons;
}

.e-input-group .e-input-group-icon.e-input-calendar {
font-size: 16px;
}
@code {
SfTextBox TextBoxDropDownObj { get; set; }

.e-input-group-icon.e-input-calendar:before {
content: "\e75e";
private async void AddDateIcon()
{
if (TextBoxDropDownObj != null)
{
//Add icon to the TextBox
await TextBoxDropDownObj.AddIconAsync("append", "e-icons e-date-icon");
}
</style>

{% endhighlight %}
{% endtabs %}
}
}
```

{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhzZCKNfeoflPrc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextBox with Icon](./images/blazor-textbox-icons.png)" %}

Expand Down
39 changes: 20 additions & 19 deletions blazor/textbox/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,32 +128,33 @@ Add the Syncfusion Blazor TextBox component in the **~/Pages/Index.razor** file.

## Adding icons to the Blazor TextBox

A TextBox can be created with icon as a group by creating the parent `div` element with the class `e-input-group` and add the icon element as span with the class `e-input-group-icon`.
You can add an icon to the TextBox component using the [AddIconAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_AddIconAsync_System_String_System_String_System_Collections_Generic_Dictionary_System_String_System_Object__) method. Below is an example of how to implement this in your Blazor application:

{% tabs %}
{% highlight razor %}
```cshtml
@using Syncfusion.Blazor.Inputs

<div class='e-input-group'>
<input class='e-input' Placeholder='Date of Birth' type='text'>
<span class='e-input-group-icon e-input-calendar'></span>
<div id="sample" style="margin:130px auto;width:300px">
<SfTextBox @ref=@TextBoxDropDownObj
Created="@AddDateIcon"
Placeholder="Enter Date"
FloatLabelType="@FloatLabelType.Auto">
</SfTextBox>
</div>

<style>
.e-input-group-icon:before {
font-family: e-icons;
}

.e-input-group .e-input-group-icon.e-input-calendar {
font-size: 16px;
}
@code {
SfTextBox TextBoxDropDownObj { get; set; }

.e-input-group-icon.e-input-calendar:before {
content: "\e75e";
private async void AddDateIcon()
{
if (TextBoxDropDownObj != null)
{
//Add icon to the TextBox
await TextBoxDropDownObj.AddIconAsync("append", "e-icons e-date-icon");
}
</style>

{% endhighlight %}
{% endtabs %}
}
}
```

{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhzZCKNfeoflPrc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TextBox with Icon](./images/blazor-textbox-icons.png)" %}

Expand Down