Skip to content

Commit 9cdb30d

Browse files
GlacierFoxvnbaaij
GlacierFox
and
vnbaaij
authored
[SortableList] Extend sortable list parameters (#3891)
* enhancement: Extend sortable list parameters * enhancement: Added documention to the new params --------- Co-authored-by: Vincent Baaij <vnbaaij@outlook.com>
1 parent 76e6e27 commit 9cdb30d

4 files changed

Lines changed: 89 additions & 24 deletions

File tree

‎examples/Demo/Shared/Pages/SortableList/Examples/SortableListFiltering.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
</FluentGridItem>
77

88
<FluentGridItem xs="12" sm="6">
9-
<FluentSortableList Id="filter2" ItemFilter="@(i => i.Id > 6)" Items="items2" OnUpdate="@SortListTwo" Context="item" Style="--fluent-sortable-list-filtered: var(--accent-base-color);">
9+
<FluentSortableList Id="filter2" ItemFilter="@(i => i.Id > 6)" Items="items2" OnUpdate="@SortListTwo" Context="item">
1010
<ItemTemplate>@item.Name</ItemTemplate>
1111
</FluentSortableList>
1212
</FluentGridItem>

‎examples/Demo/Shared/Pages/SortableList/SortableListPage.razor‎

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -9,26 +9,6 @@
99
<p>A <a href="https://sortablejs.github.io/Sortable/">SortableJS library</a> adaptation for Blazor Fluent UI. Allows for reordering elements within a list using drag and drop. Inspired by and based on <a href="https://devblogs.microsoft.com/dotnet/introducing-blazor-sortable/">Burke Holland's article and code</a>. Re-used with permission.</p>
1010
<p>The <code>FluentSortableList</code> is a generic component that takes a list of items and a <code>ItemTemplate</code> that defines how to render each item in the sortable list.</p>
1111

12-
<p>The following CSS variables have been predefined. These can be overruled by using the component's <code>Style</code> parameter. See the <a href="/SortableList#filtering">filtering</a> example for how to do this.</p>
13-
14-
<code>
15-
<pre>
16-
.fluent-sortable-list {
17-
--fluent-sortable-list-background-color: var(--neutral-layer-2);
18-
--fluent-sortable-list-item-height: calc(var(--design-unit) * 8px);
19-
--fluent-sortable-list-filtered: var(--warning);
20-
--fluent-sortable-list-border-width: calc(var(--stroke-width) * 1px);
21-
--fluent-sortable-list-border-color: var(--neutral-stroke-input-active);
22-
--fluent-sortable-list-padding: calc(var(--design-unit) * 1px);
23-
--fluent-sortable-list-item-border-width: calc(var(--stroke-width) * 1px);
24-
--fluent-sortable-list-item-border-color: var(--neutral-stroke-input-active);
25-
--fluent-sortable-list-item-drop-border-color: var(--accent-fill-rest);
26-
--fluent-sortable-list-item-drop-color: var(--neutral-layer-1);
27-
--fluent-sortable-list-item-padding: 0 calc(var(--design-unit) * 2px);
28-
}
29-
</pre>
30-
</code>
31-
3212
<h2 id="how-to-use-it-in-your-own-project">How to use this in your own project</h2>
3313
<p>
3414
If you want to use the <code>FluentSortableList</code> component, you will need to include the script to your <code>index.html</code>/<code>_Layout.cshtml</code>/<code>App.razor</code> file. You can either download from the <a href="https://sortablejs.github.io/Sortable/">SortableJS website</a> or use a CDN:

‎src/Core/Components/SortableList/FluentSortableList.razor.cs‎

Lines changed: 86 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,17 +86,101 @@ public partial class FluentSortableList<TItem> : FluentComponentBase
8686
public Func<TItem, bool>? ItemFilter { get; set; }
8787

8888
/// <summary>
89-
/// Gets or sets wether ro ignore the HTML5 DnD behaviour and force the fallback to kick in
89+
/// Gets or sets wether to ignore the HTML5 DnD behaviour and force the fallback to kick in
9090
/// </summary>
9191
[Parameter]
9292
public bool Fallback { get; set; } = false;
9393

94+
/// <summary>
95+
/// Gets or sets the color of filtered list items.
96+
/// </summary>
97+
[Parameter]
98+
public string? ListItemFilteredColor { get; set; }
99+
100+
/// <summary>
101+
/// Gets or sets the border width on the list. Must be a valid CSS measurement.
102+
/// </summary>
103+
[Parameter]
104+
public string? ListBorderWidth { get; set; }
105+
106+
/// <summary>
107+
/// Gets or sets the color of the border on the list.
108+
/// </summary>
109+
[Parameter]
110+
public string? ListBorderColor { get; set; }
111+
112+
/// <summary>
113+
/// Gets or sets the padding on the list. Must be a valid CSS measurement.
114+
/// </summary>
115+
[Parameter]
116+
public string? ListPadding { get; set; }
117+
118+
/// <summary>
119+
/// Gets or sets the background color of the list items.
120+
/// </summary>
121+
[Parameter]
122+
public string? ListItemBackgroundColor {get; set;}
123+
124+
/// <summary>
125+
/// Gets or sets the height of the list items. Must be a valid CSS measurement.
126+
/// </summary>
127+
[Parameter]
128+
public string? ListItemHeight { get; set; }
129+
130+
/// <summary>
131+
/// Gets or sets the border width on the list items. Must be a valid CSS measurement.
132+
/// </summary>
133+
[Parameter]
134+
public string? ListItemBorderWidth { get; set; }
135+
136+
/// <summary>
137+
/// Gets or sets the border color of the list items.
138+
/// </summary>
139+
[Parameter]
140+
public string? ListItemBorderColor { get; set; }
141+
142+
/// <summary>
143+
/// Gets or sets the border color of the list items during repositioning.
144+
/// </summary>
145+
[Parameter]
146+
public string? ListItemDropBorderColor { get; set; }
147+
148+
/// <summary>
149+
/// Gets or sets the background color of the list items during repositioning.
150+
/// </summary>
151+
[Parameter]
152+
public string? ListItemDropColor { get; set; }
153+
154+
/// <summary>
155+
/// Gets or sets the padding on the list items. Must be a valid CSS measurement.
156+
/// </summary>
157+
[Parameter]
158+
public string? ListItemPadding { get; set; }
159+
160+
/// <summary>
161+
/// Gets or sets the spacing between list items. Must be a valid CSS measurement.
162+
/// </summary>
163+
[Parameter]
164+
public string? ListItemSpacing { get; set; }
165+
94166
protected string? ClassValue => new CssBuilder(Class)
95167
.AddClass("fluent-sortable-list")
96168
.Build();
97169

98170
protected string? StyleValue => new StyleBuilder(Style)
99-
.Build();
171+
.AddStyle("--fluent-sortable-list-filtered", ListItemFilteredColor, !string.IsNullOrEmpty(ListItemFilteredColor))
172+
.AddStyle("--fluent-sortable-list-border-width", ListBorderWidth, !string.IsNullOrEmpty(ListBorderWidth))
173+
.AddStyle("--fluent-sortable-list-border-color", ListBorderColor, !string.IsNullOrEmpty(ListBorderColor))
174+
.AddStyle("--fluent-sortable-list-padding", ListPadding, !string.IsNullOrEmpty(ListPadding))
175+
.AddStyle("--fluent-sortable-list-background-color", ListItemBackgroundColor, !string.IsNullOrEmpty(ListItemBackgroundColor))
176+
.AddStyle("--fluent-sortable-list-item-height", ListItemHeight, !string.IsNullOrEmpty(ListItemHeight))
177+
.AddStyle("--fluent-sortable-list-item-border-width", ListItemBorderWidth, !string.IsNullOrEmpty(ListItemBorderWidth))
178+
.AddStyle("--fluent-sortable-list-item-border-color", ListItemBorderColor, !string.IsNullOrEmpty(ListItemBorderColor))
179+
.AddStyle("--fluent-sortable-list-item-drop-border-color", ListItemDropBorderColor, !string.IsNullOrEmpty(ListItemDropBorderColor))
180+
.AddStyle("--fluent-sortable-list-item-drop-color", ListItemDropColor, !string.IsNullOrEmpty(ListItemDropColor))
181+
.AddStyle("--fluent-sortable-list-item-padding", ListItemPadding, !string.IsNullOrEmpty(ListItemPadding))
182+
.AddStyle("--fluent-sortable-list-item-spacing", ListItemSpacing, !string.IsNullOrEmpty(ListItemSpacing))
183+
.Build();
100184

101185
private string Filter => Items.Any(GetItemFiltered) ? ".filtered" : string.Empty;
102186

‎src/Core/Components/SortableList/FluentSortableList.razor.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
--fluent-sortable-list-item-drop-border-color: var(--accent-fill-rest);
1717
--fluent-sortable-list-item-drop-color: var(--neutral-layer-1);
1818
--fluent-sortable-list-item-padding: 0 calc(var(--design-unit) * 2px);
19+
--fluent-sortable-list-item-spacing: 2px;
1920
border: var(--fluent-sortable-list-border-width) solid var(--fluent-sortable-list-border-color);
2021
border-radius: calc(var(--control-corner-radius) * 1px);
2122
padding: var(--fluent-sortable-list-padding);
@@ -58,7 +59,7 @@
5859
-webkit-user-select: none;
5960
user-select: none;
6061
padding: var(--fluent-sortable-list-item-padding);
61-
margin-bottom: 2px;
62+
margin-bottom: var(--fluent-sortable-list-item-spacing);
6263
}
6364

6465
.fluent-sortable-list ::deep .sortable-item:last-of-type {

0 commit comments

Comments
 (0)