Skip to content

Adding the Class parameter to SortableList #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
GerardFR wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Adding the Class parameter to SortableList #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions Pages/Index.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,4 +40,7 @@
<section class="section">
<ForceFallback></ForceFallback>
</section>
<section class="section">
<SimpleListWithClass></SimpleListWithClass>
</section>
</div>
85 changes: 85 additions & 0 deletions Shared/Demos/SimpleListWithClass.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<div class="container">
<h1 class="title is-size-1 has-text-centered">Simple List</h1>
<Tabs CodeContent="@codeContent">
<ExampleContent>
<div class="columns">
<div class="column is-half">
<SortableList Id="simpleListWithClass" Class="d-flex flex-wrap gap-2" Items="items" OnUpdate="@SortList" Context="item">
<SortableItemTemplate>
<div class="card has-border-light has-background-blazor has-text-white has-cursor-grab">
<p class="is-size-4 p-2 ml-4">@item.Name</p>
</div>
</SortableItemTemplate>
</SortableList>
</div>
</div>
</ExampleContent>
</Tabs>
</div>

@code {

private string codeContent = $@"
<SortableList Id=""simpleListWithClass"" Class=""d-flex flex-wrap gap-2"" Items=""items"" OnUpdate=""@SortList"" Context=""item"">
<SortableItemTemplate>
<div class=""has-border has-background-white has-cursor-pointer"">
<p class=""is-size-4 p-2 ml-4"">@item.Name</p>
</div>
</SortableItemTemplate>
</SortableList>

@code {{
public class Item
{{
public int Id {{ get; set; }}
public string Name {{ get; set; }}
}}

public List<Item> items = Enumerable.Range(1, 10).Select(i => new Item {{ Id = i, Name = $""Item {{i:00}}"" }}).ToList();

private void SortList((int oldIndex, int newIndex) indices)
{{
// deconstruct the tuple
var (oldIndex, newIndex) = indices;

var items = this.items;
var itemToMove = items[oldIndex];
items.RemoveAt(oldIndex);

if (newIndex < items.Count)
{{
items.Insert(newIndex, itemToMove);
}}
else
{{
items.Add(itemToMove);
}}

StateHasChanged();
}}
}}";

public List<Item> items = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i:00}" }).ToList();


private void SortList((int oldIndex, int newIndex) indices)
{
// deconstruct the tuple
var (oldIndex, newIndex) = indices;

var items = this.items;
var itemToMove = items[oldIndex];
items.RemoveAt(oldIndex);

if (newIndex < items.Count)
{
items.Insert(newIndex, itemToMove);
}
else
{
items.Add(itemToMove);
}

StateHasChanged();
}
}
5 changes: 4 additions & 1 deletion Shared/SortableList.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

@typeparam T

<div id="@Id">
<div id="@Id" class="@Class">
@foreach (var item in Items)
{
@if (SortableItemTemplate is not null)
Expand Down Expand Up @@ -53,6 +53,9 @@
[Parameter]
public bool ForceFallback { get; set; } = true;

[Parameter]
public string? Class { get; set; }

private DotNetObjectReference<SortableList<T>>? selfReference;

protected override async Task OnAfterRenderAsync(bool firstRender)
Expand Down
2 changes: 2 additions & 0 deletions wwwroot/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.1/css/bulma.min.css" />
<!-- font awesome from cdn -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="BlazorSortable.styles.css" rel="stylesheet" />
</head>

Expand All @@ -23,6 +24,7 @@
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>

</html>