MudBlazor - Blazor Component Library

API

Basic Usage

Drop Zone 1

Drag me!

Just Mud

Drop Zone 2

Or me!

<MudDropContainer T="DropItem" Items="_items" ItemsSelector="@((item,dropzone) => item.Identifier == dropzone)" ItemDropped="ItemUpdated" Class="d-flex flex-wrap flex-grow-1">
    <ChildContent>
        <MudDropZone T="DropItem" Identifier="Drop Zone 1" Class="rounded mud-background-gray pa-6 ma-8 flex-grow-1">
            <MudText Typo="Typo.h6" Class="mb-4">Drop Zone 1</MudText>
         </MudDropZone>
        <MudDropZone T="DropItem" Identifier="Drop Zone 2" Class="rounded mud-background-gray pa-6 ma-8 flex-grow-1">
            <MudText Typo="Typo.h6" Class="mb-4">Drop Zone 2</MudText>
        </MudDropZone>
    </ChildContent>
    <ItemRenderer>
        <MudPaper Elevation="25" Class="pa-4 my-4">@context.Name</MudPaper>
    </ItemRenderer>
</MudDropContainer>

@code {
    private void ItemUpdated(MudItemDropInfo<DropItem> dropItem)
    {
        dropItem.Item.Identifier = dropItem.DropzoneIdentifier;
    }
    
    private List<DropItem> _items = new()
    {
        new DropItem(){ Name = "Drag me!", Identifier = "Drop Zone 1" },
        new DropItem(){ Name = "Or me!", Identifier = "Drop Zone 2" },
        new DropItem(){ Name = "Just Mud", Identifier = "Drop Zone 1" },
    };
    
    public class DropItem
    {
        public string Name { get; init; }
        public string Identifier { get; set; }
    }
}

Nested Drop Zones

Drop Zone 1

Item 1

Item 2

Drop Zone 2

Item 3

<MudDropContainer T="DropZoneItem" Items="_items" ItemsSelector="@((item, dropzone) => item.Zone == dropzone)" ItemDropped="ItemUpdated" Class="4 flex-grow-1">
    <ChildContent>
        <MudDropContainer T="DropZone" Items="_zones" ItemsSelector="@((item, dropzone) => true)" Class="5">
            <ChildContent>
                <MudDropZone T="DropZone" AllowReorder Class="6 rounded mud-background-gray px-4 py-1 ma-4" />
             </ChildContent>
             <ItemRenderer>
                 <MudPaper Class="pa-4 my-4">
                     <MudText Typo="Typo.h6">@context.Name</MudText>
                     <MudDropZone T="DropZoneItem" Identifier="@context.Name" AllowReorder Class="rounded mud-background-gray px-4 py-1 ma-4" />
                 </MudPaper>
             </ItemRenderer>
         </MudDropContainer>
     </ChildContent>
     <ItemRenderer>
         <MudPaper Class="pa-4 my-4">
             <MudText>@context.Name</MudText>
         </MudPaper>
     </ItemRenderer>
 </MudDropContainer>

@code {

    private void ItemUpdated(MudItemDropInfo<DropZoneItem> dropItem) => dropItem.Item.Zone = dropItem.DropzoneIdentifier;

    private List<DropZone> _zones = new()
    {
        new() { Name = "Drop Zone 1" },
        new() { Name = "Drop Zone 2" }
    };

    private List<DropZoneItem> _items = new()
    {
        new() { Zone = "Drop Zone 1", Name = "Item 1" },
        new() { Zone = "Drop Zone 1", Name = "Item 2" },
        new() { Zone = "Drop Zone 2", Name = "Item 3" },
    };

    private class DropZone
    {
        public string Name { get; init; }
    }

    private class DropZoneItem
    {
        public string Zone { get; set; }
        public string Name { get; init; }
    }
}

Transfer items between Drop Zones

The MudDropContainer supports transferring dragged items between its drop zones. The MudDropContainer holds the collection of items used for dragging.

Drop Item Selector

Each MudDropZone has a unique settable Identifier that is used to determine what item should be placed in what dropzone. Provide the MudDropContainer with a selector function (Func<T, string, bool>) for the property ItemSelector to place the items correctly. This method can be overridden by each drop zone. The callback ItemDropped should be used to update the data item, when a drag operation has finished.

Drop Zone 1

Item 1

Item 2

Item 3

Drop Zone 2

Item 4

Item 5

Drop Zone 3

<MudDropContainer T="DropItem" Items="_items" ItemsSelector="@((item,dropzone) => item.Selector == dropzone)" ItemDropped="ItemUpdated" Class="d-flex flex-wrap flex-grow-1">
    <ChildContent>
        @for (int i = 1; i < 4; i++) 
         {
             var dropzone = i.ToString();
             <MudPaper Class="ma-4 flex-grow-1">
                 <MudList Clickable="true" Class="d-flex flex-column mud-height-full">
                     <MudListSubheader>Drop Zone @dropzone</MudListSubheader>
                     <MudDropZone T="DropItem" Identifier="@dropzone" Class="flex-grow-1" />
                 </MudList>
             </MudPaper>
         }
    </ChildContent>
    <ItemRenderer>
        <MudListItem Text="@context.Name"/>
    </ItemRenderer>
</MudDropContainer>

@code {
    private void ItemUpdated(MudItemDropInfo<DropItem> dropItem)
    {
        dropItem.Item.Selector = dropItem.DropzoneIdentifier;
    }

    private List<DropItem> _items = new()
    {
        new DropItem(){ Name = "Item 1", Selector = "1" },
        new DropItem(){ Name = "Item 2", Selector = "1" },
        new DropItem(){ Name = "Item 3", Selector = "1" },
        new DropItem(){ Name = "Item 4", Selector = "2" },
        new DropItem(){ Name = "Item 5", Selector = "2" },
    };
    
    public class DropItem
    {
        public string Name { get; init; }
        public string Selector { get; set; }
    }
}