Added a mud text list component

This commit is contained in:
Thorsten Sommer 2024-05-28 20:46:44 +02:00
parent 8924acb5c1
commit a990011311
Signed by: tsommer
GPG Key ID: 371BBA77A02C0108
3 changed files with 34 additions and 0 deletions

View File

@ -0,0 +1,8 @@
<MudList Clickable="@this.Clickable" Class="@this.Classes">
@foreach(var item in this.Items)
{
<MudListItem Icon="@this.Icon" Style="display: flex; align-items: flex-start;">
<MudText Typo="Typo.body1" Style="text-align: justify; hyphens: auto;"><b>@item.Header:</b> @item.Text</MudText>
</MudListItem>
}
</MudList>

View File

@ -0,0 +1,22 @@
using Microsoft.AspNetCore.Components;
namespace AIStudio.Components.Blocks;
public partial class MudTextList : ComponentBase
{
[Parameter]
public bool Clickable { get; set; }
[Parameter]
public IList<TextItem> Items { get; set; } = [];
[Parameter]
public string Icon { get; set; } = Icons.Material.Filled.CheckCircle;
[Parameter]
public string Class { get; set; } = "";
private string Classes => $"mud-text-list {this.Class}";
}
public readonly record struct TextItem(string Header, string Text);

View File

@ -29,4 +29,8 @@
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
src: url('fonts/roboto-v30-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ src: url('fonts/roboto-v30-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
.mud-text-list .mud-list-item-icon {
margin-top: 4px;
} }