How to Pin Mudblazor Card

user_15483926 0
Viewed 82

I have created this card list with several mudblazor components.

enter image description here

this is the code for this card list.

        <MudGrid>
                
                    @foreach (var pincard in pincards)
                    {
                        <MudItem xs="6" md="3">
                            <div class="dashboard-tile-card">
                                <div class="dashboard-tile-card-header">
                                    <span> @pincard</span>
                                    <MudIconButton Icon="@Icons.TwoTone.PushPin"/>
                                </div>
                                <div class="dashboard-tile-icon ">
                                    <img src="/img/finance.svg" width="50%" />
                                </div>
                                <div class="dashboard-card-action">
                                    <a class="text-white">...</a><MudIcon Style="@($"color:{Colors.Grey.Lighten5};")" Icon="@Icons.Filled.ArrowForward"></MudIcon>
                                </div>
                            </div>
                        </MudItem>
                    }
                
                   
    
       </MudGrid>
@code{
   List<string> pincards = new List<string>();

   protected override async Task OnInitializedAsync()
   {
            pincards.Add("Mycard1");
            pincards.Add("Mycard2");
            pincards.Add("Mycard3");
            pincards.Add("Mycard4");
            
   }
}

The purpose of this top right corner pin button is to provide an unpinning option for each card if we want. when we press that pin button, it should be unpinned or removed from this list. then I need to know how to do this ?? appreciate your help

blazor-jsinterop mudblazor blazor css
1 Answers

First of all, you can create your card with the component MudCard from MudBlazor it will be easier To answer your question . Create a function

private void RemovePinCard(string cardId){    
        pincards.Remove(cardId);
   }


<MudGrid>
                
                    @foreach (var pincard in pincards)
                    {
                        <MudItem xs="6" md="3">
                            <div class="dashboard-tile-card">
                                <div class="dashboard-tile-card-header">
                                    <span> @pincard</span>
                                    <MudIconButton Icon="@Icons.TwoTone.PushPin" OnClick="@(()=>RemovePinCard(pincard))"/>
                                </div>
                                <div class="dashboard-tile-icon ">
                                    <img src="/img/finance.svg" width="50%" />
                                </div>
                                <div class="dashboard-card-action">
                                    <a class="text-white">...</a><MudIcon Style="@($"color:{Colors.Grey.Lighten5};")" Icon="@Icons.Filled.ArrowForward"></MudIcon>
                                </div>
                            </div>
                        </MudItem>
                    }
                
                   
    
       </MudGrid>
user_155929660
Related