* remove scss dependency
* corrected styles * new syled page
This commit is contained in:
parent
3b276d059b
commit
58b6dd2ad6
9 changed files with 61 additions and 72 deletions
|
@ -7,7 +7,6 @@
|
|||
</PropertyGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<PackageReference Include="LibSassBuilder" Version="2.0.1" />
|
||||
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.2" />
|
||||
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.2" PrivateAssets="all" />
|
||||
</ItemGroup>
|
||||
|
@ -15,12 +14,5 @@
|
|||
<ItemGroup>
|
||||
<ProjectReference Include="..\BlazorReorderList\BlazorReorderList.csproj" />
|
||||
</ItemGroup>
|
||||
|
||||
<PropertyGroup>
|
||||
<LibSassOutputStyle>compressed</LibSassOutputStyle>
|
||||
<LibSassOutputStyle Condition="'$(Configuration)' == 'Debug'">expanded</LibSassOutputStyle>
|
||||
<LibSassOutputLevel>verbose</LibSassOutputLevel>
|
||||
<LibSassMessageLevel>High</LibSassMessageLevel>
|
||||
</PropertyGroup>
|
||||
|
||||
</Project>
|
||||
|
|
|
@ -1,29 +0,0 @@
|
|||
@page "/counter"
|
||||
|
||||
@inject IJSRuntime JS
|
||||
|
||||
<div @ref="_element" style="width: 200px; height: 200px; background-color: blue;"></div>
|
||||
|
||||
@foreach(var c in click)
|
||||
{
|
||||
<p>@c</p>
|
||||
}
|
||||
|
||||
|
||||
@code {
|
||||
ElementReference _element;
|
||||
List<string> click = new();
|
||||
|
||||
[JSInvokable]
|
||||
public void OnClick(IJSObjectReference jsReference)
|
||||
{
|
||||
click.Add("click");
|
||||
}
|
||||
|
||||
protected override void OnAfterRender(bool firstRender)
|
||||
{
|
||||
base.OnAfterRender(firstRender);
|
||||
|
||||
JS.InvokeVoidAsync("interop.AddEventListener", _element, "click", DotNetObjectReference.Create(this), nameof(OnClick));
|
||||
}
|
||||
}
|
28
BlazorReorderExample/Pages/Styled.razor
Normal file
28
BlazorReorderExample/Pages/Styled.razor
Normal file
|
@ -0,0 +1,28 @@
|
|||
@page "/styled"
|
||||
|
||||
<PageTitle>Blazor Reorder Example</PageTitle>
|
||||
|
||||
<h1>Hello, sorted world!</h1>
|
||||
|
||||
Welcome to your new reorderer list.
|
||||
|
||||
<div class="card">
|
||||
<Reorder Items="list" TItem="ListItem">
|
||||
<div class="mb-2 mx-2">
|
||||
<h5>@context.title</h5>
|
||||
<p>@context.details <a href="@context.url">Go</a></p>
|
||||
</div>
|
||||
</Reorder>
|
||||
</div>
|
||||
|
||||
@code
|
||||
{
|
||||
public List<ListItem> list = 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!!!")
|
||||
};
|
||||
}
|
23
BlazorReorderExample/Pages/Styled.razor.css
Normal file
23
BlazorReorderExample/Pages/Styled.razor.css
Normal file
|
@ -0,0 +1,23 @@
|
|||
::deep .item {
|
||||
cursor: move;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
::deep .item:hover {
|
||||
background: #4cff00;
|
||||
}
|
||||
|
||||
::deep .active {
|
||||
background: #b200ff;
|
||||
}
|
||||
|
||||
::deep .dragging {
|
||||
box-shadow: 0 4px 20px #ffd800AA;
|
||||
opacity: 0.8;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
::deep .dragging:hover {
|
||||
background: #ffd800;
|
||||
}
|
|
@ -15,8 +15,8 @@
|
|||
</NavLink>
|
||||
</div>
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="counter">
|
||||
<span class="oi oi-plus" aria-hidden="true"></span> Counter
|
||||
<NavLink class="nav-link" href="styled">
|
||||
<span class="oi oi-plus" aria-hidden="true"></span> Styled
|
||||
</NavLink>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<Project Sdk="Microsoft.NET.Sdk.Razor">
|
||||
<Project Sdk="Microsoft.NET.Sdk.Razor">
|
||||
|
||||
<PropertyGroup>
|
||||
<TargetFramework>net6.0</TargetFramework>
|
||||
|
@ -15,11 +15,4 @@
|
|||
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="6.0.2" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
<None Update="Reorder.razor.scss">
|
||||
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
|
||||
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
|
||||
</None>
|
||||
</ItemGroup>
|
||||
|
||||
</Project>
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
@if(ghost != null)
|
||||
{
|
||||
<div class="item dragging"
|
||||
<div class="dragging item"
|
||||
style="width: @(elemWidth)px; left: @(elemPosition.x)px; top: @(elemPosition.y)px; transform: translateX(@(ghostTrans.x)px) translateY(@(ghostTrans.y)px )">
|
||||
@ChildContent(ghost)
|
||||
</div>
|
||||
|
@ -68,9 +68,9 @@
|
|||
}
|
||||
}
|
||||
|
||||
public async Task<bool> onPress(MouseEventArgs m, TItem item, int index)
|
||||
public async Task onPress(MouseEventArgs m, TItem item, int index)
|
||||
{
|
||||
if (itemElem == null) return true;
|
||||
if (itemElem == null) return;
|
||||
shouldRender = false; // Because the method triggers re-render, the click propagation is canceled, if you have a link/or any click event inside it's going to stop working
|
||||
ghost = item;
|
||||
ghostElem = itemElem[index];
|
||||
|
@ -78,8 +78,6 @@
|
|||
elemWidth = await js.getWidth(ghostElem);
|
||||
elemPosition = await js.getPosition(ghostElem);
|
||||
elemClickPosition = await js.getPoint(m);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
[JSInvokable]
|
||||
|
|
|
@ -12,9 +12,12 @@
|
|||
}
|
||||
|
||||
.dragging {
|
||||
background: #e0ffff;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
||||
opacity: 0.8;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.dragging:hover {
|
||||
background: #e0ffff;
|
||||
}
|
|
@ -1,19 +0,0 @@
|
|||
|
||||
.item {
|
||||
cursor: move;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
background: #ffffe0;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
background: #ccc;
|
||||
}
|
||||
.dragging {
|
||||
background: #e0ffff;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
||||
opacity: 0.8;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
}
|
Loading…
Reference in a new issue