highlighter

BlazorFluentUI/Components/Layout/NavMenu.razor

@@ -63,6 +63,7 @@
                 <FluentNavLink Href="compodrag" Icon="@(new Icons.Regular.Size20.Drag())" IconColor="Color.Accent">Drag</FluentNavLink>
                 <FluentNavLink Href="compoemoji" Icon="@(new Icons.Regular.Size20.EmojiMeme())" IconColor="Color.Accent">Emoji</FluentNavLink>
                 <FluentNavLink Href="compoflipper" Icon="@(new Icons.Regular.Size20.LineHorizontal3())" IconColor="Color.Accent">Flipper</FluentNavLink>
+                <FluentNavLink Href="compohighlighter" Icon="@(new Icons.Regular.Size20.Highlight())" IconColor="Color.Accent">Highlighter</FluentNavLink>
 
             </FluentNavGroup>
         </FluentNavMenu>

BlazorFluentUI/Components/Pages/Components/CompoFlipper.razor

@@ -9,7 +9,7 @@
 </div>
 
 
-<h4 class="mt-4">Default Example</h4>
+<h4 class="mt-4">Example</h4>
 <FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
     <h5>Previous</h5>
     <FluentFlipper Direction="FlipperDirection.Previous"/>

BlazorFluentUI/Components/Pages/Components/CompoHightlighter.razor

@@ -0,0 +1,23 @@
+@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>&lt;mark&gt;</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 = "";
+}