Bootstrap Text-Input with Smiley- and File-Support for Blazor. Fully customizable!
Not actively maintained, unless I receive a couple of issues :-)
NuGet-Url: Nuget.org/packages/WSDT.Blazor.EmojiFileInput
-
Install-Package WSDT.Blazor.EmojiFileInput -
And add to your Startup.cs-file:
using EmojiPicker;
services.AddEmojiPicker();- Add the component to your .razor-View:
@using WSDT.EmojiFilePicker
<EmojiInput />- Add parameters and have fun :-)
| Attribute | Type | Example | Usage |
|---|---|---|---|
| @bind-Message | string |
ChatMsg |
Binds value of input-field to your outer model for validation, form-submission, ... |
| MessageChanged | EventCallback |
null |
Overwrite default onMessageChanged-Callback. Basically just needed for binding. |
| AddFiles | Action> |
public void AddFiles(List<string> imgs)
{
foreach (string i in imgs) {
AddToMsg($"<img src='{i}'/>");
}
ChatService.Send();
StateHasChanged();
} |
Receive the links to uploaded files as List. Files are uploaded to the provided FileUploadRoute. In case you expect images to be uploaded you could e.g. add them to your view. |
| FileUploadRoute | string |
"/api/v1/file_upload" |
Defines the local route to save uploaded files. |
| CancellationToken | CancellationToken |
new CancellationTokenSource().Token |
Optional cancellation token for file upload route. |
| Placeholder | string |
"Message" |
Defines the placeholder for your text-input. |
| AutoComplete | string |
"on" | "off" |
Defines whether HTML autocompletion is enabled. |
| AddonPrepend | string |
EmojiList.Envelopeor "✉" |
Defines the Prepend-Addon for the bootstrap input. |
| ShowFilePicker | bool |
true |
Should file-picker-Button and Dropzone be enabled? |
| ShowClearBtn | bool |
true |
Displays a regular clear-Btn. |
| ClearBtnLbl | string |
"Reset" |
Label to show on the clear-button. |
| ShowSubmit | bool |
true |
Displays a regular submit-Btn. No callback is required as this component is not nested by a form. |
| IsSubmitDisabled | bool |
@(!ChatService.IsConnected()) |
If Submit-Btn is shown, then this property en- or disables the button. |
| SubmitBtnLbl | string |
"Send" |
Sets the Submit-Label, if the button is shown. |
| SmileyBtnIcon | string |
EmojiList.Smileyor "😁" |
Defines the smiley-button icon. |
| FileBtnIcon | string |
EmojiList.Open_File_Folderor "📎" |
Defines the file-button icon. |
| CustomSymbols | List<string> |
new List<string>()
{
"⺀", "⽥", "⽨", "⽣", "㣕"
} |
Add custom symbols to create a new tab at the end of the emoji picker. |
| ShowPreview | bool |
true |
Will show a markdown & html live-preview of the inputted message, if true. |
| StyleBtnClearContainer | string |
width: 100px; |
Defines the css-style(s) the clear-btn container. |
| StyleBtnClear | string |
color: #ff0000; |
Defines the css-style(s) for the clear-btn. |
| StylePreviewContainer | string |
color: #ff0000; |
Defines the css-style(s) for the message-preview container. |
| ClassEmojiTabBtnActive | string |
btn-dark |
Defines the css-class(es) for the active tab-button within the emoji-panel. |
| ClassEmojiTabBtnInActive | string |
btn-light |
Defines the css-class(es) for the inactive tab-buttons within the emoji-panel. |
| StyleTextInputContainer | string |
display:inline-block;width:50px; |
Defines inline-style for the surrounding div of our text-input. |
| StyleTextInput | string |
background-color:#555; |
Defines inline-style of our text-input. |
| StyleFileBtnContainer | string |
width:100px; |
Defines inline-style of the surrounding div of the file-button. |
| StyleFileBtn | string |
color:#fff; |
Defines inline-style of our file-button. |
| StyleDropzone | string |
background-color:#cc3f00; |
Defines inline-style of our file-dropzone. |
| StyleEmojiBtnContainer | string |
width:25px; |
Defines inline-style of the surrounding div of our emoji-button. |
| StyleEmojiBtn | string |
font-size:18px; |
Defines inline-style of our emoji-button. |
| StyleEmojiPopoverContainer | string |
font-size:18px; |
Defines inline-style of the surrounding div of our smiley-popover. |
| StyleBtnSubmitContainer | string |
display:inline;text-align:justify; |
Defines inline-style of the surrounding div of our submit-button. |
| StyleBtnSubmit | string |
font-size:10px; |
Defines inline-style of our submit-button. |
- Configurable (e.g. submit-btn, file-picker, ... can be deactivated)
- Supports File-Uploads (support for multiple files simultaneously) and provides a collapsable dropzone
- Supports Smileys via simple Popover
- bootstrap (>= 4.4.1)
- Microsoft.Extensions.DependencyInjection (>= 3.1.3)
- Tewr.Blazor.FileReader (>= 1.5.0.20109)
This project is licensed under GNU V3, so contributions/pull-requests are welcome. All contributors get listed here.
Contributors
- Kevin Riedl (WSDT)