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.
|
|
|
|
|
@page "/layoutspacer"
|
|
|
|
|
|
|
|
|
|
|
|
@rendermode RenderMode.InteractiveServer
|
|
|
|
|
|
|
|
|
|
|
|
<FluentLabel Typo="Typography.H3">Spacer</FluentLabel>
|
|
|
|
|
|
<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
|
|
|
|
|
|
<FluentLabel Typo="Typography.Body">
|
|
|
|
|
|
The <code>FluentSpacer</code> component offers a space between components.
|
|
|
|
|
|
</FluentLabel>
|
|
|
|
|
|
|
|
|
|
|
|
<FluentLabel class="my-3" Typo="Typography.H4">Spacer with flexible(default) width</FluentLabel>
|
|
|
|
|
|
<FluentCard Width="auto" Height="auto" Style="display:flex">
|
|
|
|
|
|
<FluentIcon Value="@(new Icons.Regular.Size32.Fireplace())" Color="@Color.Neutral" />
|
|
|
|
|
|
<FluentSpacer/>
|
|
|
|
|
|
<FluentIcon Value="@(new Icons.Regular.Size32.Fireplace())" Color="@Color.Accent" />
|
|
|
|
|
|
<FluentSpacer />
|
|
|
|
|
|
<FluentIcon Value="@(new Icons.Regular.Size32.Fireplace())" Color="@Color.Warning" />
|
|
|
|
|
|
<FluentSpacer />
|
|
|
|
|
|
<FluentIcon Value="@(new Icons.Regular.Size32.Fireplace())" Color="@Color.Info" />
|
|
|
|
|
|
</FluentCard>
|
|
|
|
|
|
|
|
|
|
|
|
<FluentLabel class="my-3" Typo="Typography.H4">Spacer with set width</FluentLabel>
|
|
|
|
|
|
<FluentCard Width="auto" Height="auto">
|
|
|
|
|
|
<FluentIcon Value="@(new Icons.Regular.Size32.Fireplace())" Color="@Color.Neutral" />
|
|
|
|
|
|
<FluentSpacer Width="50"/>
|
|
|
|
|
|
<FluentIcon Value="@(new Icons.Regular.Size32.Fireplace())" Color="@Color.Accent" />
|
|
|
|
|
|
<FluentSpacer Width="50" />
|
|
|
|
|
|
<FluentIcon Value="@(new Icons.Regular.Size32.Fireplace())" Color="@Color.Warning" />
|
|
|
|
|
|
<FluentSpacer Width="50" />
|
|
|
|
|
|
<FluentIcon Value="@(new Icons.Regular.Size32.Fireplace())" Color="@Color.Info" />
|
|
|
|
|
|
</FluentCard>
|
|
|
|
|
|
|
|
|
|
|
|
@code {
|
|
|
|
|
|
|
|
|
|
|
|
}
|
