Tag a colleague the way they already do in chat. Mention suggests names after a trigger character, @ by default, and inserts the chosen name into the text.
Why it helps
- Suggestions after @
- Arrow keys and Enter to choose
- Fits comment boxes
Where it fits
- Comments and notes
- Task descriptions
- Chat messages
Example
<Mention @bind-Value="_text" Label="Comment" Lines="3" Items="_people" OnMention="m => _last = m.Text" Placeholder="@("Type @ to mention someone")" />
<p>Last mention: @(_last ?? "none")</p>
@code {
private string? _text;
private string? _last;
private readonly MentionItem[] _people =
[
new("1", "Ivan Petrov"), new("2", "Maria Georgieva"), new("3", "Georgi Dimitrov"), new("4", "Elena Stoyanova"), new("5", "Nikolay Ivanov")
];
}A short fragment. Add @using RayCraft.Blazor.Components to your page and use an interactive render mode.
Included in RayCraft Free. Working examples are in the GitHub repository (MIT); it holds example and demo code, not the library code.