66 lines
2.2 KiB
Text
66 lines
2.2 KiB
Text
@page "/Disabled"
|
|
|
|
<PageTitle>Blazor Reorder Example</PageTitle>
|
|
|
|
<h1>Drag between lists</h1>
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<input id="disable" type="checkbox" @bind="@disable" />
|
|
<label for="disable">Is Disabled</label>
|
|
<div class="card">
|
|
<Reorder Items="list1" TItem="ListItem" Disabled="disable">
|
|
<div class="mb-2 mx-2">
|
|
<h5>@context.title</h5>
|
|
<p>@context.details <a href="@context.url">Go</a></p>
|
|
</div>
|
|
</Reorder>
|
|
</div>
|
|
</div>
|
|
<div class="col-4">
|
|
Disable Drop
|
|
<div class="card">
|
|
<Reorder Items="list2" TItem="ListItem" DisableDrop="true">
|
|
<div class="mb-2 mx-2">
|
|
<h5>@context.title</h5>
|
|
<p>@context.details <a href="@context.url">Go</a></p>
|
|
</div>
|
|
</Reorder>
|
|
</div>
|
|
</div>
|
|
<div class="col-4">
|
|
Only Drop
|
|
<div class="card">
|
|
<Reorder Items="list3" TItem="ListItem" DisableDrag="true">
|
|
<div class="mb-2 mx-2">
|
|
<h5>@context.title</h5>
|
|
<p>@context.details <a href="@context.url">Go</a></p>
|
|
</div>
|
|
</Reorder>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@code {
|
|
private bool disable = true;
|
|
|
|
public List<ListItem> list1 = new()
|
|
{
|
|
new ListItem("Google", "https://google.com", "Again looking for a bug ..."),
|
|
new ListItem("StackOverflow", "https://stackoverflow.com", "Could be this the solution?"),
|
|
new ListItem("GitHub", "https://github.com", "Let's get awesome code"),
|
|
new ListItem("Twitter", "https://twitter.com", "I want to rest"),
|
|
new ListItem("Another", "https://another.com", "The solution must be somewhere!!!")
|
|
};
|
|
|
|
public List<ListItem> list2 = new()
|
|
{
|
|
new ListItem("Facebook", "https://facebook.com", "Meta"),
|
|
new ListItem("Instagram", "https://instagram.com", "Meta"),
|
|
new ListItem("Whatsapp", "https://web.whatsapp.com", "Meta"),
|
|
};
|
|
|
|
public List<ListItem> list3 = new()
|
|
{
|
|
new ListItem("Oculus", "https://oculus.com", "Meta"),
|
|
};
|
|
}
|