You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
23 lines
894 B
23 lines
894 B
@page "/compohighlighter"
|
|
|
|
@rendermode RenderMode.InteractiveServer
|
|
|
|
<h3>Highlighter</h3>
|
|
<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
|
|
<div>
|
|
The <code>FluentHighlighter</code> highlights text in a string based on a search term and using <code><mark></code> tags.
|
|
</div>
|
|
|
|
|
|
<h4 class="mt-4">Example</h4>
|
|
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
|
|
<FluentTextField @bind-Value="highlight" Immediate="true" Label="Search (Delimeters: [whitespace] ,[comma] ;[semicolon])"/>
|
|
<div class="mt-3 p-2 fluent-border-s1">
|
|
<FluentHighlighter HighlightedText="@highlight" Delimiters=" ,;"
|
|
Text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur." />
|
|
</div>
|
|
</FluentCard>
|
|
|
|
@code {
|
|
string highlight = "";
|
|
}
|
|
|