Peace
/
BlazorFluentUIPractice
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

text field

Browse Source
main
Peace 10 months ago
parent 822da24d25
commit 85bf5ace9b
2 changed files with 85 additions and 2 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 5
      BlazorFluentUI/Components/App.razor
  2. 82
      BlazorFluentUI/Components/Pages/FormInputs/FormInputTextField.razor

5
BlazorFluentUI/Components/App.razor
Unescape View File

@ -19,10 +19,11 @@
<body>
<Routes @rendermode="RenderMode.InteractiveServer"/>
<script src="_framework/blazor.web.js"></script>
<script src="_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js" type="module" async></script>
<script src="_content/Microsoft.FluentUI.AspNetCore.Components/js/loading-theme.js" type="text/javascript"></script>
<loading-theme storage-name="theme"></loading-theme>
<script src="_framework/blazor.web.js"></script>
<script src="_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js" type="module" async></script>
</body>
</html>

82
BlazorFluentUI/Components/Pages/FormInputs/FormInputTextField.razor
Unescape View File

@ -1,5 +1,7 @@
@page "/forminputtexfield"
@inject NavigationManager navManger;
@rendermode RenderMode.InteractiveServer
<FluentLabel Typo="Typography.H3">TextField</FluentLabel>
@ -34,6 +36,86 @@
</FluentStack>
</FluentCard>
<FluentLabel class="my-3" Typo="Typography.H4">Displays</FluentLabel>
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
<FluentStack Orientation="Orientation.Vertical">
<h5>Full Width</h5>
<FluentTextField @bind-Value="dval1" Style="width:100%" />
<div>
<h5>Placeholder</h5>
<FluentTextField @bind-Value="dval2" Placeholder="This is Placeholder" />
</div>
<div>
<h5>Icons</h5>
<FluentStack Orientation="Orientation.Vertical">
<FluentTextField @bind-Value="dval3">
<FluentIcon Value="@(new Icons.Regular.Size20.AnimalRabbit())" Color="Color.Accent" Slot="start" />
</FluentTextField>
<FluentTextField @bind-Value="dval3">
<FluentIcon Value="@(new Icons.Regular.Size20.AnimalRabbit())" Color="Color.Accent" Slot="end" />
</FluentTextField>
<FluentTextField @bind-Value="dval3">
<FluentIcon Value="@(new Icons.Regular.Size20.AnimalRabbit())" Color="Color.Accent" Slot="start" />
<FluentIcon Value="@(new Icons.Regular.Size20.AnimalRabbit())" Color="Color.Accent" Slot="end" />
</FluentTextField>
</FluentStack>
</div>
</FluentStack>
</FluentCard>
<FluentLabel class="my-3" Typo="Typography.H4">Types</FluentLabel>
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
<FluentEditForm Model="@tmodel">
<FluentStack Orientation="Orientation.Vertical">
<div>
<h5>Password</h5>
<FluentTextField @bind-Value="tval1" TextFieldType="TextFieldType.Password">Password</FluentTextField>
</div>
<div>
<h5>Email (with spellcheck)</h5>
<FluentTextField @bind-Value="tval2" TextFieldType="TextFieldType.Email">Email</FluentTextField>
</div>
<div>
<h5>Telephone number</h5>
<FluentTextField @bind-Value="tval3" TextFieldType="TextFieldType.Tel">Tel</FluentTextField>
</div>
<div>
<h5>Url</h5>
<FluentTextField @bind-Value="tval4" TextFieldType="TextFieldType.Url">Url</FluentTextField>
</div>
<div>
<h5>InputMode (Numeric)</h5>
<FluentTextField @bind-Value="tval5" TextFieldType="TextFieldType.Text" InputMode="InputMode.Numeric">InputMode.Numeric</FluentTextField>
</div>
<FluentButton Type="ButtonType.Submit" Appearance="Appearance.Accent" OnClick="@(() => NavigateToThisPage())">Check</FluentButton>
</FluentStack>
</FluentEditForm>
</FluentCard>
<FluentLabel class="my-3" Typo="Typography.H4">Focus</FluentLabel>
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
<h4>Focus Async</h4>
<div style="display:flex">
<FluentTextField @ref="focusTest" @bind-Value="fval"></FluentTextField>
<FluentButton Class="ms-2" OnClick="@(() => focusTest?.FocusAsync())">FocusAsync</FluentButton>
</div>
</FluentCard>
@code {
string? eval1, eval2, eval3, eval4;
string? dval1, dval2, dval3;
string? tval1, tval2, tval3, tval4, tval5;
string tmodel = string.Empty;
void NavigateToThisPage()
{
navManger.NavigateTo("/forminputtexfield");
}
FluentTextField? focusTest;
string? fval;
}

Write Preview
Loading…
Cancel
Save