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.
45 lines
1.8 KiB
45 lines
1.8 KiB
@page "/compoanchor"
|
|
|
|
@rendermode RenderMode.InteractiveServer
|
|
|
|
<FluentLabel Typo="Typography.H3">Anchor</FluentLabel>
|
|
<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
|
|
The <code>FluentAnchor</code> wraps a web component of a <code>anchor</code> element.
|
|
The <code>FluentAnchor</code> component supports the same visual appearances as the <code>FluentButton</code> component as well as a hypertext appearance.
|
|
|
|
<FluentLabel class="my-3" Typo="Typography.H4">Default Example</FluentLabel>
|
|
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
|
|
<p>Default</p>
|
|
<FluentAnchor Href="#" title="Anchor tooltip">Anchor</FluentAnchor>
|
|
|
|
<p>With target</p>
|
|
<FluentAnchor Href="https://www.fluentui-blazor.net/" Target="_blank">Fluent UI Blazor</FluentAnchor>
|
|
|
|
<p>With custom action</p>
|
|
<FluentAnchor Href="#" Appearance="Appearance.Hypertext"
|
|
OnClick="@(() => message = "Anchor clicked!")">
|
|
Custom Action
|
|
</FluentAnchor>
|
|
<p><b>Message</b>: @message</p>
|
|
</FluentCard>
|
|
|
|
<FluentLabel class="my-3" Typo="Typography.H4">Anchor with Icons</FluentLabel>
|
|
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
|
|
<FluentStack Orientation="Orientation.Vertical">
|
|
<FluentAnchor Href="#">
|
|
With icon at start
|
|
<FluentIcon Value="@(new Icons.Regular.Size16.AnimalTurtle())" Color="Color.Accent" Slot="start" />
|
|
</FluentAnchor>
|
|
<FluentAnchor Href="#">
|
|
With icon at end
|
|
<FluentIcon Value="@(new Icons.Regular.Size16.AnimalTurtle())" Color="Color.Accent" Slot="end" />
|
|
</FluentAnchor>
|
|
<FluentAnchor Href="#">
|
|
<FluentIcon Value="@(new Icons.Regular.Size28.AnimalTurtle())" Color="Color.Accent" />
|
|
</FluentAnchor>
|
|
</FluentStack>
|
|
</FluentCard>
|
|
|
|
@code {
|
|
string? message;
|
|
}
|
|
|