英文:
Add a text above an image using mudbalzor
问题
我需要使用MudBlazor图像组件实现这种视图：
我已经正确获取了图像，但如何在图像上方添加文本，就像上面的图片一样？这是我的代码：
<MudGrid>
@foreach (var item in tabscatitm)
{
<MudItem xs="3" >
<MudImage Src=@item.ItemImageUrl Height="120" Width="120" @onclick="ItemClick"
Class="rounded-lg" Style="border: thin; border-color: darkgray; border-radius: 10px"/>
<MudText Typo="Typo.h6">@item.ItemName</MudText>
<MudText Typo="Typo.body2">@item.ItemShortName</MudText>
</MudItem>
}
</MudGrid>
英文:
I need to implement this kind of view using mudblazor image components:
I got the images correct, but how can I add text on top of the image like in the picture above? Here is my code:
<MudGrid>
u/foreach (var item in tabscatitm)
{
<MudItem xs="3" >
<MudImage Src=@item.ItemImageUrl Height="120" Width="120" u/onclick="ItemClick"
Class="rounded-lg"Style="border:thin;border-color:darkgray;border-radius:10px"/>
<MudText Typo="Typo.h6">@item.ItemName</MudText>
<MudText Typo="Typo.body2">@item.ItemShortName</MudText>
</MudItem>
}
</MudGrid>
答案1
得分: 0
以下是翻译好的部分：
你可以尝试类似这样的方法：
### CustomImage.razor
```cs
<div style="position: relative; cursor: pointer" @onclick="@this.Clicked">
@* 图像 *@
<MudImage Src="@this.Src" Alt="@this.Alt"/>
@* 文本的透明背景 *@
<MudPaper
Elevation="0"
Class="rounded-0"
Style="position: absolute; bottom: 0; left: 0; padding: 25px; width: 100vw; opacity: 0.6">
@* Hack: 文本用于为透明部分提供正确的高度，但也会以0.6的透明度显示文本 *@
<MudText Typo="Typo.h4">@this.Name</MudText>
<MudText Typo="Typo.h6">@this.ShortName</MudText>
</MudPaper>
@* 文本（黑色） *@
<span style="position: absolute; bottom: 0; left: 0; padding: 25px; width: 100vw; color: black">
<MudText Typo="Typo.h4">@this.Name</MudText>
<MudText Typo="Typo.h6">@this.ShortName</MudText>
</span>
</div>
@code {
[Parameter]
public string Src { get; set; } = default!;
[Parameter]
public string Alt { get; set; } = string.Empty;
[Parameter]
public string Name { get; set; } = default!;
[Parameter]
public string ShortName { get; set; } = default!;
[Parameter]
public EventCallback OnClick { get; set; }
private async Task Clicked()
{
await this.OnClick.InvokeAsync();
}
}
如果像这样使用：
<MudGrid>
@foreach (var item in this.items)
{
<MudItem md="6">
<CustomImage
Src="@item.Src"
Name="@item.Name"
ShortName="@item.ShortName"
OnClick="@(() => this.Click(item))"/>
</MudItem>
}
</MudGrid>
@code {
private readonly List<Item> items = new()
{
new Item { Name = "A tasty burger", ShortName = "一些更多文本或价格...", Src = "images/hamburger.jpg" },
new Item { Name = "Another burger", ShortName = "...", Src = "images/hamburger.jpg" }
};
private void Click(Item item)
{
Console.WriteLine($"点击了 {item.Name}");
}
}
结果将如下图所示：
请注意关于“Hack”的注释：我的CSS知识相当有限，但我相信你的某位同事可以帮助解决这个问题。这只是一个让你入门的快速演示。
希望这对你有所帮助！
<details>
<summary>英文:</summary>
You could try something like this:
### CustomImage.razor
```cs
<div style="position: relative; cursor: pointer" @onclick="@this.Clicked">
@* the image *@
<MudImage Src="@this.Src" Alt="@this.Alt"/>
@* A transparent background for the text *@
<MudPaper
Elevation="0"
Class="rounded-0"
Style="position: absolute; bottom: 0; left: 0; padding: 25px; width: 100vw; opacity: 0.6">
@* Hack: the text is needed to give the transparent part the proper height, but will also display the text in 0.6 transparency *@
<MudText Typo="Typo.h4">@this.Name</MudText>
<MudText Typo="Typo.h6">@this.ShortName</MudText>
</MudPaper>
@* The text (in black) *@
<span style="position: absolute; bottom: 0; left: 0; padding: 25px; width: 100vw; color: black">
<MudText Typo="Typo.h4">@this.Name</MudText>
<MudText Typo="Typo.h6">@this.ShortName</MudText>
</span>
</div>
@code {
[Parameter]
public string Src { get; set; } = default!;
[Parameter]
public string Alt { get; set; } = string.Empty;
[Parameter]
public string Name { get; set; } = default!;
[Parameter]
public string ShortName { get; set; } = default!;
[Parameter]
public EventCallback OnClick { get; set; }
private async Task Clicked()
{
await this.OnClick.InvokeAsync();
}
}
If used like this:
<MudGrid>
@foreach (var item in this.items)
{
<MudItem md="6">
<CustomImage
Src="@item.Src"
Name="@item.Name"
ShortName="@item.ShortName"
OnClick="@(() => this.Click(item))"/>
</MudItem>
}
</MudGrid>
@code {
private readonly List<Item> items = new()
{
new Item { Name = "A tasty burger", ShortName = "Some more text or a price...", Src = "images/hamburger.jpg" },
new Item { Name = "Another burger", ShortName = "...", Src = "images/hamburger.jpg" }
};
private void Click(Item item)
{
Console.WriteLine($"Clicked {item.Name}");
}
}
The result will be:
Note the comment about the hack: my CSS knowledge is rather limited, but I'm sure some colleague of yours can help with that. This is just a quick demo for you to get started.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论