Skip to content

组件库 AntDesign

Jump to bottom
James Yeung edited this page Aug 28, 2020 · 1 revision

样式同步与修改

组件库在 components 文件夹下，子目录为组件目录，另外 components/core 是底层库，components/style 是 Ant Design 的公共样式。

样式同步

components/{组件名}/style 目录中的 index.less 文件是组件样式，与 components/style 都是由定时任务从 ant-design 仓库同步最新版本，所以这里的文件不能修改。

样式修改

如果需要增加组件样式，可在 components/{组件名}/style目录中添加 patch.less 文件，在里面写增加的组件样式，并在 entry.less 组件中引入：

@import './patch.less';

entry.less 用于组合件原样式和新增样式时所用，最终在 components/components.less 文件导入所有组件的 entry.less，并在 components/ant-design-blazor.less 文件导入了基础样式和所有组件样式，被 gulp 构建成 wwwroot/css/ant-design-blazor.css 。

每次修改样式需要重新生成项目，生成项目时会调用 gulp。

JS 互操作脚本的编写

本项目中，JS 互操作脚本是用 TS 编写，主要互操作脚本写在 components/core/JsInterop/interop.ts 中。由于互操作脚本不会很多，所以暂时先写在一个文件或这个目录下。

这个 TS 文件被导入到 components/main.ts 中，main.ts 会被 gulp 构建成 wwwroot/js/ant-design-blazor.js。

同样每次修改完要重新生成项目才生效。

开发组件

  1. 创建一个组件文件，以 {组件名}.razor 来命名，如 Button.razor。

    • 设置命名空间：@namespace AntDesign
    • 继承上面创建的基类：@inherits AntDomComponentBase
    • 编写一个html元素，并绑定属性 class="@ClassMapper.Class" style="@Style" @attributes="Attributes" Id="@Id"

  2. 创建一个组件基类，我们用 code-behind 的方法，以 {组件名}.razor.cs来命名，如 Button.razor.cs。

    • 命名空间只需要 AntDesign
    • 继承 AntDomComponentBase

  3. 一个组件的基础部分如下（以Button为例）：

    // AntBlazor.razor

@namespace AntBlazor
@inherits AntButtonBase
    <button class="@ClassMapper.Class" style="@Style" @attributes="Attributes" Id="@Id" @onclick="OnClick"></button>
...

    // AntButtonBase.cs
namespace AntBlazor
{
   public class AntButtonBase : AntDomComponentBase
   {
   }
...

  4. 属性命名规范

    由于 Blazor 组件是通过Html元素的属性（attribute）来绑定组件属性的，为了使用者方便，组件中所有标记了 [Parameter] 的属性一般都用 camelCase 命名法，只有 RenderFragment 类型的属性，因为是子组件，使用时是嵌套在组件内层的，所以与组件命名一致，使用 PascalCase 命名法，而没标记 [Parameter] 的属性还是要按照C#原来的 PascalCase 命名法，而字段用下划线 _ 开头的 camelCase 命名法。 例如：

    [Parameter] public string type { get; set; }
[Inject] private NavigationManager NavigationManger { get; set; }

其他开发时会遇到的问题和注意事项，请看另一篇文档。

调试

  1. 在文档项目 AntDesign.Docs 的 Pages 目录新建一个组件同名页面，在里面写测试用的 demo，需要与 Ant Design 官网的demo一致。
  2. 运行 AntDesign.Docs.Server 项目，就可以单点调试了。
Clone this wiki locally