-
-
Notifications
You must be signed in to change notification settings - Fork 1k
组件库 AntDesign
组件库在 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 互操作脚本是用 TS 编写,主要互操作脚本写在 components/core/JsInterop/interop.ts
中。由于互操作脚本不会很多,所以暂时先写在一个文件或这个目录下。
这个 TS 文件被导入到 components/main.ts
中,main.ts
会被 gulp 构建成 wwwroot/js/ant-design-blazor.js
。
同样每次修改完要重新生成项目才生效。
-
创建一个组件文件,以
{组件名}.razor
来命名,如Button.razor
。- 设置命名空间:
@namespace AntDesign
- 继承上面创建的基类:
@inherits AntDomComponentBase
- 编写一个html元素,并绑定属性
class="@ClassMapper.Class" style="@Style" @attributes="Attributes" Id="@Id"
- 设置命名空间:
-
创建一个组件基类,我们用 code-behind 的方法,以
{组件名}.razor.cs
来命名,如Button.razor.cs
。- 命名空间只需要
AntDesign
- 继承
AntDomComponentBase
- 命名空间只需要
-
一个组件的基础部分如下(以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 { } ...
-
属性命名规范
由于 Blazor 组件是通过Html元素的属性(attribute)来绑定组件属性的,为了使用者方便,组件中所有标记了
[Parameter]
的属性一般都用 camelCase 命名法,只有RenderFragment
类型的属性,因为是子组件,使用时是嵌套在组件内层的,所以与组件命名一致,使用 PascalCase 命名法,而没标记[Parameter]
的属性还是要按照C#原来的 PascalCase 命名法,而字段用下划线_
开头的 camelCase 命名法。 例如:[Parameter] public string type { get; set; } [Inject] private NavigationManager NavigationManger { get; set; }
其他开发时会遇到的问题和注意事项,请看另一篇文档。
- 在文档项目 AntDesign.Docs 的 Pages 目录新建一个组件同名页面,在里面写测试用的 demo,需要与 Ant Design 官网的demo一致。
- 运行 AntDesign.Docs.Server 项目,就可以单点调试了。