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.
46 lines
1.9 KiB
46 lines
1.9 KiB
@page "/compoemoji"
|
|
|
|
@rendermode RenderMode.InteractiveServer
|
|
|
|
<h3>Emoji</h3>
|
|
<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
|
|
<div>
|
|
The <code>FluentEmoji</code> are a collection of emoji in SVG format.
|
|
</div>
|
|
|
|
|
|
<h4 class="mt-4">Example</h4>
|
|
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
|
|
<FluentStack Orientation="Orientation.Horizontal">
|
|
<FluentEmoji Value="@(new Emojis.PeopleBody.Color.Default.Artist())" />
|
|
<FluentEmoji Value="@(new Emojis.SmileysEmotion.Color.Default.RollingOnTheFloorLaughing())" Width="50px" />
|
|
</FluentStack>
|
|
<h5 class="mt-2">As Markup</h5>
|
|
@(new Emojis.Objects.Color.Default.Accordion().ToMarkup("80px"))
|
|
@(new Emojis.TravelPlaces.Color.Default.Ambulance().ToMarkup())
|
|
<h5 class="mt-2">Differenct sizes</h5>
|
|
<FluentStack Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Bottom">
|
|
<div>
|
|
<span>16x16:</span><FluentEmoji Value="@(new Emojis.FoodDrink.Color.Default.Avocado())" Width="16px" />
|
|
<span>32x32:</span><FluentEmoji Value="@(new Emojis.FoodDrink.Color.Default.Avocado())" Width="32px" />
|
|
<span>64x64:</span><FluentEmoji Value="@(new Emojis.FoodDrink.Color.Default.Avocado())" Width="64px" />
|
|
<span>128x128:</span><FluentEmoji Value="@(new Emojis.FoodDrink.Color.Default.Avocado())" Width="128px" />
|
|
</div>
|
|
</FluentStack>
|
|
<h5 class="mt-2">Custom size</h5>
|
|
<div>
|
|
<FluentInputLabel for="CustomSize">Custom size</FluentInputLabel>
|
|
<FluentTextField Id="CustomSize" @bind-Value="custom" Placeholder="input number for size"/>
|
|
</div>
|
|
@if (int.TryParse(custom, out int size) && size > 0)
|
|
{
|
|
<div style="m-1">
|
|
<span>@(size)x@(size)</span> <br/>
|
|
<FluentEmoji Value="@(new Emojis.FoodDrink.Color.Default.Broccoli())" Width="@($"{size}px")"/>
|
|
</div>
|
|
}
|
|
</FluentCard>
|
|
|
|
@code {
|
|
string custom = "";
|
|
} |