[dev-v5] Add SortableList #4487
Draft
+1,479
−6
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
MarvinKlein1508
suggested changes
Feb 1, 2026
|
|
||
| @if (ItemTemplate is not null) | ||
| { | ||
| <div @ref="@_element" id="@Id" class="@ClassValue" style="@StyleValue"> |
Collaborator
There was a problem hiding this comment.
should add AdditionalAttributes
| /// Gets or sets the list of items to be displayed in a sortable list. | ||
| /// </summary> | ||
| [Parameter, AllowNull] | ||
| public IEnumerable<TItem> Items { get; set; } |
Collaborator
There was a problem hiding this comment.
since this allows null should it be IEnumerable<TItem>? instead?
| /// Gets or sets whether elements are cloned instead of moved. Set Pull to "clone" to enable this. | ||
| /// </summary> | ||
| [Parameter] | ||
| public bool Clone { get; set; } = false; |
Collaborator
There was a problem hiding this comment.
false is the default value and don't need to be specified
| /// Set to true to use an element with classname `.sortable-grab` as the handle. | ||
| /// </summary> | ||
| [Parameter] | ||
| public bool Handle { get; set; } = false; |
Collaborator
There was a problem hiding this comment.
false is the default value and don't need to be specified
| /// Gets or sets the border width on the list. Must be a valid CSS measurement. | ||
| /// </summary> | ||
| [Parameter] | ||
| public string? ListBorderWidth { get; set; } |
Collaborator
There was a problem hiding this comment.
I'm not sure about all of this parameters for changing basic CSS. What do you think @dvoituron ?
| /// <summary /> | ||
| protected override async Task OnAfterRenderAsync(bool firstRender) | ||
| { | ||
|
|
| public bool Disabled { get; set; } = false; | ||
| } | ||
|
|
||
| public List<Item> items1 = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList(); |
Collaborator
There was a problem hiding this comment.
we should remove public and private from the demos to keep them lighter and be consistent with the other demos
- Add tests - Update docs - Update styles
Unit Tests
Details on your Workflow / Core Tests page. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request introduces a new
FluentSortableListcomponent for Blazor Fluent UI, providing a drag-and-drop sortable list powered by SortableJS. The update includes the component implementation, JavaScript interop, documentation, and a comprehensive set of usage examples demonstrating sorting, moving, cloning, filtering, disabling, drag handles, and fallback behaviors.Although SortableJS does not come with a11y support, we enhanced the
FluentSortableListcomponent to support keyboard accessibility. Users can navigate through the list items using the arrow up/down keys. An item can be grabbed and released by using the space bar or pressing enter. A grabbed item can then be moved in the list with the arrow up and down keys.The component also provides appropriate ARIA attributes to enhance screen reader support.
The most important changes are:
Component Implementation and Integration
FluentSortableListBlazor component, which renders a sortable list using a providedItemTemplateand exposes event hooks for sorting and moving items. (FluentSortableList.razor)FluentSortableList.ts)sortablejsas a new dependency in the project. (package.json)Documentation
FluentSortableList.md)Examples and Demos
.razorfiles showcasing different use cases:Minor Improvements
FluentDataGrid.razor.cs)