BlazorSortable 开源项目使用教程

BlazorSortable 开源项目使用教程

BlazorSortableA sortable list component for Blazor项目地址:https://gitcode.com/gh_mirrors/bl/BlazorSortable

1. 项目的目录结构及介绍

BlazorSortable/
├── src/
│   ├── BlazorSortable.Components/
│   │   ├── Components/
│   │   │   ├── SortableList.razor
│   │   │   ├── SortableItem.razor
│   │   ├── Services/
│   │   │   ├── SortableService.cs
│   │   ├── wwwroot/
│   │   │   ├── js/
│   │   │   │   ├── sortable.min.js
│   │   ├── BlazorSortable.Components.csproj
│   ├── BlazorSortable.Demo/
│   │   ├── Pages/
│   │   │   ├── Index.razor
│   │   ├── Shared/
│   │   │   ├── MainLayout.razor
│   │   ├── wwwroot/
│   │   │   ├── css/
│   │   │   │   ├── site.css
│   │   ├── BlazorSortable.Demo.csproj
├── .gitignore
├── README.md
├── LICENSE

目录结构介绍

• src/BlazorSortable.Components/: 包含组件的核心实现。
  • Components/: 包含 SortableList 和 SortableItem 组件。
  • Services/: 包含 SortableService 服务。
  • wwwroot/js/: 包含 SortableJS 的 JavaScript 文件。
• src/BlazorSortable.Demo/: 包含示例项目的实现。
  • Pages/: 包含示例页面的实现。
  • Shared/: 包含共享布局文件。
  • wwwroot/css/: 包含样式文件。

2. 项目的启动文件介绍

启动文件

• src/BlazorSortable.Demo/Pages/Index.razor: 这是示例项目的主页面，展示了如何使用 BlazorSortable 组件。

启动文件介绍

在 Index.razor 文件中，你可以看到如何初始化和使用 SortableList 和 SortableItem 组件。以下是一个简单的示例：

@page "/"

<h3>Blazor Sortable Demo</h3>

<SortableList>
    <SortableItem>Item 1</SortableItem>
    <SortableItem>Item 2</SortableItem>
    <SortableItem>Item 3</SortableItem>
</SortableList>

3. 项目的配置文件介绍

配置文件

• src/BlazorSortable.Components/BlazorSortable.Components.csproj: 这是组件项目的配置文件。
• src/BlazorSortable.Demo/BlazorSortable.Demo.csproj: 这是示例项目的配置文件。

配置文件介绍

在 BlazorSortable.Components.csproj 文件中，你可以看到组件项目的依赖和配置：

<Project Sdk="Microsoft.NET.Sdk.Razor">

  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="6.0.0" />
  </ItemGroup>

</Project>

在 BlazorSortable.Demo.csproj 文件中，你可以看到示例项目的依赖和配置：

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  <ItemGroup>
    <ProjectReference Include="..\BlazorSortable.Components\BlazorSortable.Components.csproj" />
  </ItemGroup>

</Project>

通过这些配置文件，你可以了解项目的依赖关系和目标框架。

---

以上是 BlazorSortable 开

BlazorSortableA sortable list component for Blazor项目地址:https://gitcode.com/gh_mirrors/bl/BlazorSortable