diff --git a/examples/Demo/Shared/Pages/SortableList/Examples/SortableListFiltering.razor b/examples/Demo/Shared/Pages/SortableList/Examples/SortableListFiltering.razor index cf30a102d5..c4bd426005 100644 --- a/examples/Demo/Shared/Pages/SortableList/Examples/SortableListFiltering.razor +++ b/examples/Demo/Shared/Pages/SortableList/Examples/SortableListFiltering.razor @@ -6,7 +6,7 @@ - + @item.Name diff --git a/examples/Demo/Shared/Pages/SortableList/SortableListPage.razor b/examples/Demo/Shared/Pages/SortableList/SortableListPage.razor index 012708ac62..a2a7266b58 100644 --- a/examples/Demo/Shared/Pages/SortableList/SortableListPage.razor +++ b/examples/Demo/Shared/Pages/SortableList/SortableListPage.razor @@ -9,26 +9,6 @@

A SortableJS library adaptation for Blazor Fluent UI. Allows for reordering elements within a list using drag and drop. Inspired by and based on Burke Holland's article and code. Re-used with permission.

The FluentSortableList is a generic component that takes a list of items and a ItemTemplate that defines how to render each item in the sortable list.

-

The following CSS variables have been predefined. These can be overruled by using the component's Style parameter. See the filtering example for how to do this.

- - - 
-    .fluent-sortable-list {
-        --fluent-sortable-list-background-color: var(--neutral-layer-2);
-        --fluent-sortable-list-item-height: calc(var(--design-unit) * 8px);
-        --fluent-sortable-list-filtered: var(--warning);
-        --fluent-sortable-list-border-width: calc(var(--stroke-width) * 1px);
-        --fluent-sortable-list-border-color: var(--neutral-stroke-input-active);
-        --fluent-sortable-list-padding: calc(var(--design-unit) * 1px);
-        --fluent-sortable-list-item-border-width: calc(var(--stroke-width) * 1px);
-        --fluent-sortable-list-item-border-color: var(--neutral-stroke-input-active);
-        --fluent-sortable-list-item-drop-border-color: var(--accent-fill-rest);
-        --fluent-sortable-list-item-drop-color: var(--neutral-layer-1);
-        --fluent-sortable-list-item-padding: 0 calc(var(--design-unit) * 2px);
-    }
-
- -

How to use this in your own project

If you want to use the FluentSortableList component, you will need to include the script to your index.html/_Layout.cshtml/App.razor file. You can either download from the SortableJS website or use a CDN: diff --git a/src/Core/Components/SortableList/FluentSortableList.razor.cs b/src/Core/Components/SortableList/FluentSortableList.razor.cs index 5dd737c058..d0155524ec 100644 --- a/src/Core/Components/SortableList/FluentSortableList.razor.cs +++ b/src/Core/Components/SortableList/FluentSortableList.razor.cs @@ -86,17 +86,101 @@ public partial class FluentSortableList : FluentComponentBase public Func? ItemFilter { get; set; } ///

- /// Gets or sets wether ro ignore the HTML5 DnD behaviour and force the fallback to kick in + /// Gets or sets wether to ignore the HTML5 DnD behaviour and force the fallback to kick in /// [Parameter] public bool Fallback { get; set; } = false; + /// + /// Gets or sets the color of filtered list items. + /// + [Parameter] + public string? ListItemFilteredColor { get; set; } + + /// + /// Gets or sets the border width on the list. Must be a valid CSS measurement. + /// + [Parameter] + public string? ListBorderWidth { get; set; } + + /// + /// Gets or sets the color of the border on the list. + /// + [Parameter] + public string? ListBorderColor { get; set; } + + /// + /// Gets or sets the padding on the list. Must be a valid CSS measurement. + /// + [Parameter] + public string? ListPadding { get; set; } + + /// + /// Gets or sets the background color of the list items. + /// + [Parameter] + public string? ListItemBackgroundColor {get; set;} + + /// + /// Gets or sets the height of the list items. Must be a valid CSS measurement. + /// + [Parameter] + public string? ListItemHeight { get; set; } + + /// + /// Gets or sets the border width on the list items. Must be a valid CSS measurement. + /// + [Parameter] + public string? ListItemBorderWidth { get; set; } + + /// + /// Gets or sets the border color of the list items. + /// + [Parameter] + public string? ListItemBorderColor { get; set; } + + /// + /// Gets or sets the border color of the list items during repositioning. + /// + [Parameter] + public string? ListItemDropBorderColor { get; set; } + + /// + /// Gets or sets the background color of the list items during repositioning. + /// + [Parameter] + public string? ListItemDropColor { get; set; } + + /// + /// Gets or sets the padding on the list items. Must be a valid CSS measurement. + /// + [Parameter] + public string? ListItemPadding { get; set; } + + /// + /// Gets or sets the spacing between list items. Must be a valid CSS measurement. + /// + [Parameter] + public string? ListItemSpacing { get; set; } + protected string? ClassValue => new CssBuilder(Class) .AddClass("fluent-sortable-list") .Build(); protected string? StyleValue => new StyleBuilder(Style) - .Build(); + .AddStyle("--fluent-sortable-list-filtered", ListItemFilteredColor, !string.IsNullOrEmpty(ListItemFilteredColor)) + .AddStyle("--fluent-sortable-list-border-width", ListBorderWidth, !string.IsNullOrEmpty(ListBorderWidth)) + .AddStyle("--fluent-sortable-list-border-color", ListBorderColor, !string.IsNullOrEmpty(ListBorderColor)) + .AddStyle("--fluent-sortable-list-padding", ListPadding, !string.IsNullOrEmpty(ListPadding)) + .AddStyle("--fluent-sortable-list-background-color", ListItemBackgroundColor, !string.IsNullOrEmpty(ListItemBackgroundColor)) + .AddStyle("--fluent-sortable-list-item-height", ListItemHeight, !string.IsNullOrEmpty(ListItemHeight)) + .AddStyle("--fluent-sortable-list-item-border-width", ListItemBorderWidth, !string.IsNullOrEmpty(ListItemBorderWidth)) + .AddStyle("--fluent-sortable-list-item-border-color", ListItemBorderColor, !string.IsNullOrEmpty(ListItemBorderColor)) + .AddStyle("--fluent-sortable-list-item-drop-border-color", ListItemDropBorderColor, !string.IsNullOrEmpty(ListItemDropBorderColor)) + .AddStyle("--fluent-sortable-list-item-drop-color", ListItemDropColor, !string.IsNullOrEmpty(ListItemDropColor)) + .AddStyle("--fluent-sortable-list-item-padding", ListItemPadding, !string.IsNullOrEmpty(ListItemPadding)) + .AddStyle("--fluent-sortable-list-item-spacing", ListItemSpacing, !string.IsNullOrEmpty(ListItemSpacing)) + .Build(); private string Filter => Items.Any(GetItemFiltered) ? ".filtered" : string.Empty; diff --git a/src/Core/Components/SortableList/FluentSortableList.razor.css b/src/Core/Components/SortableList/FluentSortableList.razor.css index 51232916ce..6e74b5783f 100644 --- a/src/Core/Components/SortableList/FluentSortableList.razor.css +++ b/src/Core/Components/SortableList/FluentSortableList.razor.css @@ -16,6 +16,7 @@ --fluent-sortable-list-item-drop-border-color: var(--accent-fill-rest); --fluent-sortable-list-item-drop-color: var(--neutral-layer-1); --fluent-sortable-list-item-padding: 0 calc(var(--design-unit) * 2px); + --fluent-sortable-list-item-spacing: 2px; border: var(--fluent-sortable-list-border-width) solid var(--fluent-sortable-list-border-color); border-radius: calc(var(--control-corner-radius) * 1px); padding: var(--fluent-sortable-list-padding); @@ -58,7 +59,7 @@ -webkit-user-select: none; user-select: none; padding: var(--fluent-sortable-list-item-padding); - margin-bottom: 2px; + margin-bottom: var(--fluent-sortable-list-item-spacing); } .fluent-sortable-list ::deep .sortable-item:last-of-type {