英文:
Closeable Chip on Mudblazor fileupload
问题
芯片不可点击，如果我更改MudFileUpload控件的Z-Index，它会崩溃。我还尝试将芯片的Z-Index设置为20以上，但仍然无法单击它。
你可以尝试将MudChip组件的@onclick属性设置为处理点击事件的方法，以便使芯片可点击。此外，你还需要确保MudFileUpload组件的Z-Index不会遮挡住芯片。以下是你可以尝试的更改：
<MudChip Color="Color.Dark" Text="@file" OnClose="Closed" @onclick="HandleChipClick" />
然后，在你的代码中添加一个处理点击事件的方法：
private void HandleChipClick()
{
// 处理芯片的点击事件
}
这将使MudChip组件变为可点击。另外，请确保MudFileUpload组件的Z-Index不会遮挡住芯片，以确保它仍然可以点击。
英文:
How can I create a closeable chip on Mudblazor Fileupload Drag&Drop?
Here is an example: https://try.mudblazor.com/snippet/GYwHEQvURJEkHBcX
@inject ISnackbar Snackbar
<MudStack Style="width: 100%">
<MudFileUpload T="IReadOnlyList<IBrowserFile>" OnFilesChanged="OnInputFileChanged" Hidden="false" Class="flex-1" InputClass="absolute mud-width-full mud-height-full overflow-hidden z-20" InputStyle="opacity:0"
@ondragenter="@SetDragClass" @ondragleave="@ClearDragClass" @ondragend="@ClearDragClass">
<ButtonTemplate>
<MudPaper Height="300px" Outlined="true" Class="@DragClass">
<MudText Typo="Typo.h6">Drag and drop files here or click</MudText>
@foreach (var file in fileNames)
{
<MudChip Color="Color.Dark" Text="@file" OnClose="Closed" />
}
</MudPaper>
</ButtonTemplate>
</MudFileUpload>
<MudToolBar DisableGutters="true" Class="gap-4">
<MudButton OnClick="Upload" Disabled="@(!fileNames.Any())" Color="Color.Primary" Variant="Variant.Filled">Upload</MudButton>
<MudButton OnClick="Clear" Disabled="@(!fileNames.Any())" Color="Color.Error" Variant="Variant.Filled">Clear</MudButton>
</MudToolBar>
</MudStack>
@code {
private static string DefaultDragClass = "relative rounded-lg border-2 border-dashed pa-4 mt-4 mud-width-full mud-height-full z-10";
private string DragClass = DefaultDragClass;
private List<string> fileNames = new List<string>();
private void OnInputFileChanged(InputFileChangeEventArgs e)
{
ClearDragClass();
var files = e.GetMultipleFiles();
foreach (var file in files)
{
fileNames.Add(file.Name);
}
}
void Closed(MudChip chip) {
fileNames.Remove(chip.Text);
}
private async Task Clear()
{
fileNames.Clear();
ClearDragClass();
await Task.Delay(100);
}
private void Upload()
{
//Upload the files here
Snackbar.Configuration.PositionClass = Defaults.Classes.Position.TopCenter;
Snackbar.Add("TODO: Upload your files!", Severity.Normal);
}
private void SetDragClass()
{
DragClass = $"{DefaultDragClass} mud-border-primary";
}
private void ClearDragClass()
{
DragClass = DefaultDragClass;
}
}
The chip is not clickable and if I change the Z-Index of the MudFileUpload control it collapses. I also tried to add Z-Index above 20 to the chip but I still cannot click it.
答案1
得分: 1
X 按钮不可点击，您必须将 "MudChip" 放在 MudFileUpload 标记外部，像这样：
<MudStack Style="width: 100%">
<MudFileUpload T="IReadOnlyList<IBrowserFile>" OnFilesChanged="OnInputFileChanged" Hidden="false" Class="flex-1" InputClass="absolute mud-width-full mud-height-full overflow-hidden z-20" InputStyle="opacity:0"
@ondragenter="@SetDragClass" @ondragleave="@ClearDragClass" @ondragend="@ClearDragClass">
<ButtonTemplate>
<MudPaper Height="300px" Outlined="true" Class="@DragClass">
<MudText Typo="Typo.h6">拖放文件到此处或点击</MudText>
</MudPaper>
</ButtonTemplate>
</MudFileUpload>
@foreach (var file in fileNames)
{
<MudChip Color="Color.Dark" Text="@file" OnClose="Closed" />
}
<MudToolBar DisableGutters="true" Class="gap-4">
<MudButton OnClick="Upload" Disabled="@(!fileNames.Any())" Color="Color.Primary" Variant="Variant.Filled">上传</MudButton>
<MudButton OnClick="Clear" Disabled="@(!fileNames.Any())" Color="Color.Error" Variant="Variant.Filled">清除</MudButton>
</MudToolBar>
</MudStack>
英文:
The X button is not clickable, you have to put The "MudChip" outside the MudFileUpload tag like this :
<MudStack Style="width: 100%">
<MudFileUpload T="IReadOnlyList<IBrowserFile>" OnFilesChanged="OnInputFileChanged" Hidden="false" Class="flex-1" InputClass="absolute mud-width-full mud-height-full overflow-hidden z-20" InputStyle="opacity:0"
@ondragenter="@SetDragClass" @ondragleave="@ClearDragClass" @ondragend="@ClearDragClass">
<ButtonTemplate>
<MudPaper Height="300px" Outlined="true" Class="@DragClass">
<MudText Typo="Typo.h6">Drag and drop files here or click</MudText>
</MudPaper>
</ButtonTemplate>
</MudFileUpload>
@foreach (var file in fileNames)
{
<MudChip Color="Color.Dark" Text="@file" OnClose="Closed" />
}
<MudToolBar DisableGutters="true" Class="gap-4">
<MudButton OnClick="Upload" Disabled="@(!fileNames.Any())" Color="Color.Primary" Variant="Variant.Filled">Upload</MudButton>
<MudButton OnClick="Clear" Disabled="@(!fileNames.Any())" Color="Color.Error" Variant="Variant.Filled">Clear</MudButton>
</MudToolBar>
</MudStack>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论