mirror of
https://gitee.com/ant-design-blazor/ant-design-blazor.git
synced 2024-12-01 19:48:17 +08:00
docs: fix demo name (#4174)
* docs: fix demo name * update the radio translate * add doc files back * add the markdown description back
This commit is contained in:
James Yeung
GitHub
parent
2506bbf1cd
commit
ba1e5e407a
@ -243,10 +243,11 @@ namespace AntDesign.Docs.Build.CLI.Command
|
||||
var seeAlso = await GetAllLanguagesSeeAlsoDocs(componentDocs);
|
||||
var faqs = GetAllLanguagesFaqDocs(componentName);
|
||||
var demos = GetAllLanguagesDemos(componentName);
|
||||
var docs = GetAllLanguagesComponentDocs(componentName);
|
||||
|
||||
// Build docs for multiple languages
|
||||
componentsDocsByLanguage[Constants.EnglishLanguage].Add(GenerateApiDocumentation.ForComponent(Constants.EnglishLanguage, docAttribute, title, componentSummary, pageUrl, apiDocs, seeAlso, faqs, demos));
|
||||
componentsDocsByLanguage[Constants.ChineseLanguage].Add(GenerateApiDocumentation.ForComponent(Constants.ChineseLanguage, docAttribute, title, componentSummary, pageUrl, apiDocs, seeAlso, faqs, demos));
|
||||
componentsDocsByLanguage[Constants.EnglishLanguage].Add(GenerateApiDocumentation.ForComponent(Constants.EnglishLanguage, docAttribute, title, docs, pageUrl, apiDocs, seeAlso, faqs, demos));
|
||||
componentsDocsByLanguage[Constants.ChineseLanguage].Add(GenerateApiDocumentation.ForComponent(Constants.ChineseLanguage, docAttribute, title, docs, pageUrl, apiDocs, seeAlso, faqs, demos));
|
||||
}
|
||||
|
||||
// recognize componetns by doc files
|
||||
@ -351,6 +352,19 @@ namespace AntDesign.Docs.Build.CLI.Command
|
||||
return null;
|
||||
}
|
||||
|
||||
private string GetComponentDocs(string componentName, string language)
|
||||
{
|
||||
var componentFile = new FileInfo(Path.Join(_demoDirectory, $"Components\\{componentName}\\doc\\index.{language}.md"));
|
||||
if (componentFile.Exists)
|
||||
{
|
||||
var faqFileContent = File.ReadAllText(componentFile.FullName);
|
||||
(Dictionary<string, string> Meta, string desc, string apiDoc) docData = DocParser.ParseDemoDoc(faqFileContent);
|
||||
return docData.desc;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
private string GetMemberXmlName(MemberInfo member)
|
||||
{
|
||||
switch (member.MemberType)
|
||||
@ -620,7 +634,7 @@ namespace AntDesign.Docs.Build.CLI.Command
|
||||
{
|
||||
DescriptionContent = descriptionContent,
|
||||
Code = File.ReadAllText(razorFile.FullName) ?? null,
|
||||
Name = demoType.Split('.').Last().Replace(".razor", ""),
|
||||
Name = descriptionFile.Name.Replace(".md", ""),
|
||||
Type = demoType
|
||||
};
|
||||
|
||||
@ -649,6 +663,17 @@ namespace AntDesign.Docs.Build.CLI.Command
|
||||
};
|
||||
}
|
||||
|
||||
private Dictionary<string, string> GetAllLanguagesComponentDocs(string componentName)
|
||||
{
|
||||
// Does not need translation - there should be one doc per language for these
|
||||
|
||||
return new Dictionary<string, string>
|
||||
{
|
||||
{ Constants.EnglishLanguage, GetComponentDocs(componentName, Constants.EnglishLanguage) },
|
||||
{ Constants.ChineseLanguage, GetComponentDocs(componentName, Constants.ChineseLanguage) }
|
||||
};
|
||||
}
|
||||
|
||||
/// <returns>{ seeAlsoName: { language: [docs] } }</returns>
|
||||
private async Task<IDictionary<string, IDictionary<string, IEnumerable<IApiDocumentation>>>> GetAllLanguagesSeeAlsoDocs(XmlNode componentDocs)
|
||||
{
|
||||
|
||||
@ -58,7 +58,7 @@ namespace AntDesign.Docs.Build.CLI.Documentations
|
||||
Iframe = x.DescriptionContent.Meta.Iframe,
|
||||
Code = x.Code,
|
||||
Description = x.DescriptionContent.Descriptions[language] ?? default,
|
||||
Name = x.Type.Split('.').Last().Replace(".razor", ""),
|
||||
Name = x.Name,
|
||||
Style = x.DescriptionContent.Style,
|
||||
Debug = x.DescriptionContent.Meta.Debug,
|
||||
Docs = x.DescriptionContent.Meta.Docs,
|
||||
|
||||
@ -2754,7 +2754,7 @@
|
||||
"Translated": "间隙位置，选项：top bottom left right"
|
||||
},
|
||||
"Display label content for the radio": {
|
||||
"Translated": "显示收音机的标签内容"
|
||||
"Translated": "显示 Radio 的标签内容"
|
||||
},
|
||||
"Selected value": {
|
||||
"Translated": "选定值"
|
||||
@ -2763,19 +2763,19 @@
|
||||
"Translated": "是否自动对焦"
|
||||
},
|
||||
"Set to <code>true</code> to style the radio as button group.": {
|
||||
"Translated": "设置为 <code>true</code> 将单选按钮设置为按钮组。"
|
||||
"Translated": "设置为 <code>true</code> 将 Radio 设置为按钮组。"
|
||||
},
|
||||
"Specifies whether the radio is selected": {
|
||||
"Translated": "指定无线电是否被选中"
|
||||
"Translated": "指定 Radio 是否被选中"
|
||||
},
|
||||
"Specify if the radio button is checked initially or not": {
|
||||
"Translated": "指定是否最初选中单选按钮"
|
||||
"Translated": "指定是否最初选中 Radio "
|
||||
},
|
||||
"Callback executed when the checked state changes": {
|
||||
"Translated": "checked 状态改变时执行的回调"
|
||||
},
|
||||
"Disable the radio buton": {
|
||||
"Translated": "禁用单选按钮"
|
||||
"Translated": "禁用 Radio "
|
||||
},
|
||||
"Radio elements for the group. Use either this or <code>AntDesign.RadioGroup`1.Options</code>": {
|
||||
"Translated": "该组的单选元素。使用这个或 <code>AntDesign.RadioGroup`1.Options</code>"
|
||||
@ -2787,13 +2787,13 @@
|
||||
"Translated": "组的按钮样式。"
|
||||
},
|
||||
"Input name for all the radios in the group": {
|
||||
"Translated": "输入组中所有无线电的名称"
|
||||
"Translated": "输入组中所有 Radio 的名称"
|
||||
},
|
||||
"The default selected value for the group": {
|
||||
"Translated": "组的默认选择值"
|
||||
},
|
||||
"Options to display a radio for in the group. Use either this or <code>AntDesign.RadioGroup`1.ChildContent</code>": {
|
||||
"Translated": "在组中显示无线电的选项。使用这个或 <code>AntDesign.RadioGroup`1.ChildContent</code>"
|
||||
"Translated": "在组中显示 Radio 的选项。使用这个或 <code>AntDesign.RadioGroup`1.ChildContent</code>"
|
||||
},
|
||||
"Whether to allow clear or not when clicking again": {
|
||||
"Translated": "再次点击时是否允许清除"
|
||||
@ -4473,7 +4473,7 @@
|
||||
"Translated": "设置表中显示的列内容"
|
||||
},
|
||||
"Type of selection column, checkbox or radio.": {
|
||||
"Translated": "选择列、复选框或单选按钮的类型。"
|
||||
"Translated": "选择列、复选框或 Radio 的类型。"
|
||||
},
|
||||
"Whether the selection column is disabled.": {
|
||||
"Translated": "选择列是否被禁用。"
|
||||
@ -4627,5 +4627,35 @@
|
||||
},
|
||||
"Get or set the list of files that have been uploaded": {
|
||||
"Translated": "获取或设置已上传的文件列表"
|
||||
},
|
||||
"Add focus to picker input": {
|
||||
"Translated": "将焦点添加到选取器输入"
|
||||
},
|
||||
"Remove focus from picker input": {
|
||||
"Translated": "从选取器输入中删除焦点"
|
||||
},
|
||||
"Will use both attributes and rules in the same time.": {
|
||||
"Translated": "将同时使用 attributes 和 rules。"
|
||||
},
|
||||
"The value of option.": {
|
||||
"Translated": "option 的值。"
|
||||
},
|
||||
"The content of option.": {
|
||||
"Translated": "选项的内容。"
|
||||
},
|
||||
"Whether to enable virtualization feature or not, only works for .NET 5 and higher": {
|
||||
"Translated": "是否启用虚拟化功能，仅适用于 .NET 5 及更高版本"
|
||||
},
|
||||
"Check all nodes": {
|
||||
"Translated": "检查所有节点"
|
||||
},
|
||||
"Uncheck all nodes": {
|
||||
"Translated": "取消选中所有节点"
|
||||
},
|
||||
"Current Node Level": {
|
||||
"Translated": "当前节点级别"
|
||||
},
|
||||
"Get the sibling nodes": {
|
||||
"Translated": "获取同级节点"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
---
|
||||
category: Components
|
||||
type: Navigation
|
||||
title: Affix
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg
|
||||
---
|
||||
|
||||
Wrap Affix around another component to make it stick the viewport.
|
||||
|
||||
## When To Use
|
||||
|
||||
- On longer web pages, its helpful for some content to stick to the viewport. This is common for menus and actions.
|
||||
- Please note that Affix should not cover other content on the page, especially when the size of the viewport is small.
|
||||
|
||||
|
||||
## API
|
||||
|
||||
|
||||
|
||||
| Property | Description | Type | Default Value |
|
||||
| --- | --- | --- | --- |
|
||||
| OffsetBottom | Offset from the bottom of the viewport (in pixels) | uint? | - |
|
||||
| OffsetTop | Offset from the top of the viewport (in pixels)| uint? | 0 |
|
||||
| TargetSelector | The CSS selector that specifies the scrollable area DOM node | string |- |
|
||||
| ChildContent | Additional Content | RenderFragment |- |
|
||||
| OnChange |Callback for when Affix state is changed| EventCallback<bool> | - |
|
||||
|
||||
Note: Children of `Affix` must not have the property `position: absolute`, but you can set `position: absolute` on `Affix` itself:
|
||||
@ -0,0 +1,33 @@
|
||||
---
|
||||
category: Components
|
||||
type: 导航
|
||||
title: Affix
|
||||
subtitle: 固钉
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg
|
||||
---
|
||||
|
||||
将页面元素钉在可视范围。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。
|
||||
- 页面可视范围过小时，慎用此功能以免遮挡页面内容。
|
||||
|
||||
|
||||
## API
|
||||
|
||||
时间轴
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------- | -------------------------------------------- | ------------- | --------- |
|
||||
| OffsetBottom | 距离窗口底部达到指定偏移量后触发 | uint? | - |
|
||||
| OffsetTop | 距离窗口顶部达到指定偏移量后触发| uint? | 0 |
|
||||
| TargetSelector | 设置 Affix 需要监听其滚动事件的元素，值为 CSS 选择器 | string |- |
|
||||
| ChildContent | 附加内容｜ RenderFragment | - |
|
||||
| OnChange | 固定状态改变时触发的回调函数| EventCallback<bool> | - |
|
||||
|
||||
注意：`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位：
|
||||
|
||||
|
||||
## FAQ
|
||||
`Affix` 使用 `target` 绑定容器时，元素会跑到容器外。
|
||||
@ -0,0 +1,32 @@
|
||||
---
|
||||
category: Components
|
||||
type: Feedback
|
||||
title: Alert
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg
|
||||
---
|
||||
|
||||
Alert component for feedback.
|
||||
|
||||
## When To Use
|
||||
|
||||
- When you need to show alert messages to users.
|
||||
- When you need a persistent static container which is closable by user actions.
|
||||
|
||||
## API
|
||||
|
||||
### Alert Props
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| AfterClose | Called when close animation is finished | EventCallback<MouseEventArgs> | - | |
|
||||
| Banner | Whether to show as banner | Banner | false | |
|
||||
| Closable | Whether Alert can be closed | bool | false | |
|
||||
| CloseText | Close text to show | string | - | |
|
||||
| Description | Additional content of Alert | string | - | |
|
||||
| Icon | Custom icon, effective when `ShowIcon` is `true` | RenderFragment | - | |
|
||||
| Message | Content of Alert | string | - | |
|
||||
| MessageTemplate | Template for message | RenderFragment | - | |
|
||||
| ShowIcon | Whether to show icon | bool | false | |
|
||||
| Type | Type of Alert styles, options: `success` \| `info` \| `warning` \| `error` | string | warning | |
|
||||
| OnClose | Callback when Alert is closed | EventCallback<MouseEventArgs> | - | |
|
||||
| ChildContent | Additional Content shown like description| RenderFragment | - | |
|
||||
@ -0,0 +1,33 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 警告提示
|
||||
type: 反馈
|
||||
title: Alert
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg
|
||||
---
|
||||
|
||||
警告提示，展现需要关注的信息。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 当某个页面需要向用户显示警告的信息时。
|
||||
- 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
|
||||
|
||||
## API
|
||||
|
||||
### Alert Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| AfterClose | 关闭动画结束后触发的回调函数 | EventCallback<MouseEventArgs> | - | |
|
||||
| Banner | 是否用作顶部公告 | Banner | false | |
|
||||
| Closable | 默认不显示关闭按钮 | bool | false | |
|
||||
| CloseText | 自定义关闭按钮 | string | - | |
|
||||
| Description | A自定义关闭按钮 | string | - | |
|
||||
| Icon | 自定义图标，`ShowIcon` 为 `true` 时有效 | RenderFragment | - | |
|
||||
| Message | 警告提示内容 | string | - | |
|
||||
| MessageTemplate | Message 的模板 | RenderFragment | - | |
|
||||
| ShowIcon | 是否显示辅助图标 | bool | false | |
|
||||
| Type | 指定警告提示的样式，有四种选择 `success` \| `info` \| `warning` \| `error` | string | warning | |
|
||||
| OnClose | 关闭时触发的回调函数 | EventCallback<MouseEventArgs> | - | |
|
||||
| ChildContent | 附加内容 | RenderFragment | - | |
|
||||
@ -0,0 +1,40 @@
|
||||
---
|
||||
category: Components
|
||||
type: Other
|
||||
cols: 2
|
||||
title: Anchor
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg
|
||||
---
|
||||
|
||||
Hyperlinks to scroll on one page.
|
||||
|
||||
## When To Use
|
||||
|
||||
For displaying anchor hyperlinks on page and jumping between them.
|
||||
|
||||
## API
|
||||
|
||||
### Anchor Props
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| Affix | Fixed mode of Anchor | boolean | true | |
|
||||
| Bounds | Bounding distance of anchor area | number | 5(px) | |
|
||||
| GetContainer | Scrolling container | () => HTMLElement | () => window | |
|
||||
| OffsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - | |
|
||||
| OffsetTop | Pixels to offset from top when calculating position of scroll | number | 0 | |
|
||||
| ShowInkInFixed | Whether show ink-balls in Fixed mode | boolean | false | |
|
||||
| OnClick | set the handler to handle `click` event | Function(e: Event, link: Object) | - | |
|
||||
| GetCurrentAnchor | Customize the anchor highlight | () => string | - | |
|
||||
| TargetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetOffset) | number | `offsetTop` | |
|
||||
| OnChange | Listening for anchor link change | (currentActiveLink: string) => void | | |
|
||||
| Key | used to refresh links list when the key changed | string | | |
|
||||
| ChildContent | Additional Content | RenderFragment | | |
|
||||
|
||||
### Link Props
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| -------- | ----------------------------------------- | ----------------- | ------- | ------- |
|
||||
| Href | target of hyperlink | string | | |
|
||||
| Title | content of hyperlink | string\|ReactNode | | |
|
||||
| Target | Specifies where to display the linked URL | string | | |
|
||||
@ -0,0 +1,41 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 锚点
|
||||
cols: 2
|
||||
type: 其他
|
||||
title: Anchor
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg
|
||||
---
|
||||
|
||||
用于跳转到页面指定位置。
|
||||
|
||||
## 何时使用
|
||||
|
||||
需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。
|
||||
|
||||
## API
|
||||
|
||||
### Anchor Props
|
||||
|
||||
| 成员 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| Affix | 固定模式 | boolean | true | |
|
||||
| Bounds | 锚点区域边界 | number | 5(px) | |
|
||||
| GetContainer | 指定滚动的容器 | () => HTMLElement | () => window | |
|
||||
| OffsetBottom | 距离窗口底部达到指定偏移量后触发 | number | | |
|
||||
| OffsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | |
|
||||
| ShowInkInFixed | 固定模式是否显示小圆点 | boolean | false | |
|
||||
| OnClick | `click` 事件的 handler | Function(e: Event, link: Object) | - | |
|
||||
| GetCurrentAnchor | 自定义高亮的锚点 | () => string | - | |
|
||||
| TargetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetOffset) | number | `offsetTop` | |
|
||||
| OnChange | 监听锚点链接改变 | (currentActiveLink: string) => void | | |
|
||||
| Key | 当key发生改变时刷新链接列表 | string | | |
|
||||
| ChildContent | 附加内容 | RenderFragment | | |
|
||||
|
||||
### Link Props
|
||||
|
||||
| 成员 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ------ | -------------------------------- | ----------------- | ------ | ---- |
|
||||
| Href | 锚点链接 | string | | |
|
||||
| Title | 文字内容 | string\|ReactNode | | |
|
||||
| Target | 该属性指定在何处显示链接的资源。 | string | | |
|
||||
@ -0,0 +1,53 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Entry
|
||||
title: AutoComplete
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
|
||||
---
|
||||
|
||||
Autocomplete function of input field.
|
||||
|
||||
## When To Use
|
||||
|
||||
When there is a need for autocomplete functionality.
|
||||
|
||||
## API
|
||||
|
||||
### AutoComplete
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| Backfill | backfill selected item the input when using keyboard | bool | false |
|
||||
| BoundaryAdjustMode | `Dropdown` adjustment strategy (when for example browser resize is happening) | TriggerBoundaryAdjustMode | TriggerBoundaryAdjustMode.InView |
|
||||
| Options | Data source for autocomplete | AutocompleteDataSource | - |
|
||||
| Disabled | Set disabled | bool | - |
|
||||
| Placeholder | Placeholder text | string | - |
|
||||
| DefaultActiveFirstOption | Whether active first option by default | boolean | true |
|
||||
| Width | Custom width, unit px | int | auto |
|
||||
| OverlayClassName | Class name of the dropdown root element | string | - |
|
||||
| OverlayStyle | Style of the dropdown root element | `object` | - |
|
||||
| CompareWith | Contrast, used to compare whether two objects are the same | (o1: object, o2: object) => bool | (o1: object, o2: object) => o1===o2 |
|
||||
| PopupContainerSelector | The selector of the container for dropdown element. | string | body |
|
||||
| Placeholder | The placeholder of input | string | |
|
||||
| AutoCompleteOptions | Data source for autocomplete | list<AutoCompleteOption> | |
|
||||
| OptionDataItems | Data source for Options binding | AutoCompleteDataItem | |
|
||||
| OnSelectionChange | callback when a option is selected | function（）=>AutoCompleteOption | |
|
||||
| OnActiveChange | callback when active change | function（）=>AutoCompleteOption | |
|
||||
| OnInput | callback function,when input change | function（）=>ChangeEventArgs | |
|
||||
| OnPanelVisibleChange | callback function when panel visible is changed | function（）=>bool | |
|
||||
| ChildContent | Additional Content | RenderFragment | |
|
||||
| OptionTemplate | option template | RenderFragment=>AutoCompleteDataItem | |
|
||||
| OptionFormat | Format options,customize the display format | `RenderFragment=>AutoCompleteDataItem | |
|
||||
| OverlayTemplate | All options template | RenderFragment | |
|
||||
| FilterExpression | Filter expression | function(option, value)=>AutoCompleteDataItem | |
|
||||
| AllowFilter | is filtering allow data | bool | true |
|
||||
| ShowPanel | where optioning, display panel | bool | false |
|
||||
|
||||
### AutoCompleteOption
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| Value | bind ngModel of the trigger element | object | - |
|
||||
| Label | display value of the trigger element | string | - |
|
||||
| Disabled | disabled option | boolean | false |
|
||||
|
||||
@ -0,0 +1,54 @@
|
||||
---
|
||||
category: Components
|
||||
type: 数据录入
|
||||
title: AutoComplete
|
||||
subtitle: 自动完成
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
|
||||
---
|
||||
|
||||
输入框自动完成功能。
|
||||
|
||||
## 何时使用
|
||||
|
||||
需要自动完成时。
|
||||
|
||||
## API
|
||||
|
||||
### AutoComplete
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| Backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false |
|
||||
| BoundaryAdjustMode | `Dropdown` adjustment strategy (when for example browser resize is happening) | TriggerBoundaryAdjustMode | TriggerBoundaryAdjustMode.InView |
|
||||
| Options | 自动完成的数据源 | AutocompleteDataSource | - |
|
||||
| Disabled | 是否禁用 | bool | - |
|
||||
| Placeholder | 占位符文本 | string | - |
|
||||
| DefaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true |
|
||||
| Width | 自定义宽度单位 px | number | auto |
|
||||
| OverlayClassName | 下拉根元素的类名称 | string | - |
|
||||
| OverlayStyle | 下拉根元素的样式 | object | - |
|
||||
| CompareWith | 对比，用于两个对象比较是否相同 | (o1: object, o2: object) => bool | (o1: object, o2: object) => o1===o2 |
|
||||
| PopupContainerSelector | 菜单渲染父节点的选择器。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 | string | 'body' |
|
||||
| Placeholder | 输入框提示 | string | |
|
||||
| AutoCompleteOptions | 列表对象集合 | list<AutoCompleteOption> | |
|
||||
| OptionDataItems | 绑定列表数据项格式的数据源 | AutoCompleteDataItem | |
|
||||
| OnSelectionChange | 选择项发生变化时，调用此函数 | function（）=>AutoCompleteOption | |
|
||||
| OnActiveChange | 当控件状态改变时，调用此函数 | function（）=>AutoCompleteOption | |
|
||||
| OnInput | 当控件输入时，调用此函数 | function（）=>ChangeEventArgs | |
|
||||
| OnPanelVisibleChange | 当面板显示状态是否改变 | function（）=>bool | |
|
||||
| ChildContent | 附加内容 | RenderFragment | |
|
||||
| OptionTemplate | 选项模板 | RenderFragment=>AutoCompleteDataItem | |
|
||||
| OptionFormat | 格式化选项，可以自定义显示格式 | RenderFragment=>AutoCompleteDataItem | |
|
||||
| OverlayTemplate | 所有选项模板 | RenderFragment | |
|
||||
| FilterExpression | 过滤表达式 | function(option, value)=>AutoCompleteDataItem | |
|
||||
| AllowFilter | 是否允许过滤 | bool | true |
|
||||
| ShowPanel | 是否操作时显示面板 | bool | false |
|
||||
|
||||
### AutoCompleteOption
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| Value | 绑定到触发元素 ngModel 的值 | object | - |
|
||||
| Label | 填入触发元素显示的值 | string | - |
|
||||
| Disabled | 禁用选项 | boolean | false |
|
||||
|
||||
@ -0,0 +1,32 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Display
|
||||
title: Avatar
|
||||
cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
|
||||
---
|
||||
|
||||
Avatars can be used to represent people or objects. It supports images, `Icon`s, or letters.
|
||||
|
||||
## API
|
||||
|
||||
### Avatar Props
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| Alt | This attribute defines the alternative text describing the image | string | - | |
|
||||
| Icon | Custom icon type for an icon avatar | string | - | |
|
||||
| OnError | Handler when img load error | EventCallback<ErrorEventArgs> | - | |
|
||||
| Shape | The shape of avatar | string | - | |
|
||||
| Size | The size of the avatar `default` \| `small` \| `large` | string | `default` | |
|
||||
| Src | The address of the image for an image avatar | string | - | |
|
||||
| SrcSet | A list of sources to use for different screen resolutions | string | - | |
|
||||
|
||||
> Tip: You can set `Icon` or `ChildContent` as the fallback for image load error, with the priority of `Icon` > `ChildContent`
|
||||
|
||||
### AvatarGroup Props
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| MaxCount | Max avatars to show | int | - | |
|
||||
| MaxPopoverPlacement | The placement of excess avatar Popover | `top` \| `bottom` | `top` | |
|
||||
| MaxStyle | The style of excess avatar style | string | - | |
|
||||
@ -0,0 +1,33 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 头像
|
||||
type: 数据展示
|
||||
title: Avatar
|
||||
cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
|
||||
---
|
||||
|
||||
用来代表用户或事物，支持图片、图标或字符展示。
|
||||
|
||||
## API
|
||||
|
||||
### Avatar Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| Alt | 图像无法显示时的替代文本 | string | - | |
|
||||
| Icon | 设置头像的自定义图标 | string | - | |
|
||||
| OnError | 图片加载失败的事件 | EventCallback<ErrorEventArgs> | - | |
|
||||
| Shape | 指定头像的形状 | string | - | |
|
||||
| Size | 设置头像的大小 `default` \| `small` \| `large` | string | `default` | |
|
||||
| Src | 图片类头像的资源地址或者图片元素 | string | - | |
|
||||
| SrcSet |设置图片类头像响应式资源地址 | string | - | |
|
||||
|
||||
> Tip：你可以设置 `Icon` 或 `ChildContent` 作为图片加载失败的默认 fallback 行为，优先级为 `Icon` > `ChildContent`
|
||||
|
||||
### AvatarGroup Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| MaxCount | 显示的最大头像个数 | int | - | |
|
||||
| MaxPopoverPlacement | 多余头像气泡弹出位置 | `top` \| `bottom` | `top` | |
|
||||
| MaxStyle | 多余头像样式 | string | - | |
|
||||
@ -0,0 +1,26 @@
|
||||
---
|
||||
category: Components
|
||||
type: Other
|
||||
title: BackTop
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/tJZ5jbTwX/BackTop.svg
|
||||
---
|
||||
|
||||
`BackTop` makes it easy to go back to the top of the page.
|
||||
|
||||
## When To Use
|
||||
|
||||
- When the page content is very long.
|
||||
- When you need to go back to the top very frequently in order to view the contents.
|
||||
|
||||
|
||||
## API
|
||||
|
||||
BackTop
|
||||
|
||||
| Property | Description | Type | Default Value |
|
||||
| --- | --- | --- | --- |
|
||||
| TargetSelector | specifies the scrollable area dom selector | string | - |
|
||||
| VisibilityHeight | the `BackTop` button will not show until the scroll height reaches this value| int |- |
|
||||
| OnClick | a callback function, which can be executed when you click the button | function |- |
|
||||
| ChildContent | Custom Content | `RenderFragment` | - |
|
||||
| Visible | Display the button | bool | - |
|
||||
@ -0,0 +1,28 @@
|
||||
---
|
||||
category: Components
|
||||
type: 其他
|
||||
title: BackTop
|
||||
subtitle: 回到顶部
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/tJZ5jbTwX/BackTop.svg
|
||||
---
|
||||
|
||||
返回页面顶部的操作按钮。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 当页面内容区域比较长时；
|
||||
- 当用户需要频繁返回顶部查看相关内容时。
|
||||
|
||||
|
||||
## API
|
||||
|
||||
BackTop
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------- | -------------------------------------------- | ------------- | --------- |
|
||||
| TargetSelector | 设置需要监听其滚动事件的元素，值为DOM的Selector | string | - |
|
||||
| VisibilityHeight | 滚动高度达到此参数值才出现 `BackTop`| int |- |
|
||||
| OnClick | 点击按钮的回调函数 | function |- |
|
||||
| Icon | 图标名称 | string |- |
|
||||
| ChildContent | 自定义外观 | `RenderFragment` |- |
|
||||
| Visible | 显示按钮 | bool |- |
|
||||
@ -0,0 +1,39 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Display
|
||||
title: Badge
|
||||
cover: https://gw.alipayobjects.com/zos/antfincdn/6%26GF9WHwvY/Badge.svg
|
||||
---
|
||||
|
||||
Small numerical value or status descriptor for UI elements.
|
||||
|
||||
## When To Use
|
||||
|
||||
Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count.
|
||||
|
||||
## API
|
||||
|
||||
### Badge
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| Color | Customize Badge status dot color. Usage of this parameter will make the badge a status dot. | string | - | |
|
||||
| Count | Number to show in badge | int | | |
|
||||
| CountTemplate | Template to show in place of Count| RenderFragment | | |
|
||||
| Dot | Whether to display a red dot instead of `count` | boolean | `false` | |
|
||||
| Offset | Set offset of the badge dot, like`[x, y]` | `[number, number]` | - | |
|
||||
| OverflowCount | Max count to show | number | 99 | |
|
||||
| ShowZero | Whether to show badge when `count` is zero | boolean | `false` | |
|
||||
| Status | Set Badge dot to a status color. Usage of this parameter will make the badge a status dot. | `success` \| `processing` \| `default` \| `error` \| `warning` | `''` | |
|
||||
| Size | If `count` is set, `size` sets the size of badge | `default` \| `small` | - | |
|
||||
| Text | The display text next to the status dot | string | `''` | |
|
||||
| Title | Text to show when hovering over the badge | string | `count` | |
|
||||
|
||||
|
||||
### Badge.Ribbon
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| Color | Customize Ribbon color | string | - | |
|
||||
| Placement | The placement of the Ribbon | `start` \| `end` | `end` | |
|
||||
| Text | Content inside the Ribbon | String or RenderFragment | - | |
|
||||
@ -0,0 +1,39 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 徽标数
|
||||
type: 数据展示
|
||||
title: Badge
|
||||
cover: https://gw.alipayobjects.com/zos/antfincdn/6%26GF9WHwvY/Badge.svg
|
||||
---
|
||||
|
||||
图标右上角的圆形徽标数字。
|
||||
|
||||
## 何时使用
|
||||
|
||||
一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。
|
||||
|
||||
## API
|
||||
|
||||
### Badge
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| Color | 自定义徽章状态点颜色。使用此参数将使徽章成为状态点。 | string | - | |
|
||||
| Count | 徽章中显示的编号 | int | | |
|
||||
| CountTemplate | 代替计数显示的模板 | RenderFragment | | |
|
||||
| Dot | 不展示数字，只有一个小红点 | boolean | false | |
|
||||
| Offset | 设置状态点的位置偏移，格式为 `[x, y]` | `[number, number]` | - | |
|
||||
| OverflowCount | 展示封顶的数字值 | number | 99 | |
|
||||
| ShowZero | 当数值为 0 时，是否展示 Badge | boolean | false | |
|
||||
| Status | 将徽章点设置为状态颜色。使用此参数将使徽章成为状态点。 | `success` \| `processing` \| `default` \| `error` \| `warning` | '' | |
|
||||
| Size | 在设置了 `count` 的前提下有效，设置小圆点的大小 | `default` \| `small` | - | |
|
||||
| Text | 状态点旁边的显示文本 | string | '' | |
|
||||
| Title | 设置鼠标放在状态点上时显示的文字 | string | `count` | |
|
||||
|
||||
### Badge.Ribbon
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| Color | 自定义缎带的颜色 | string | - | |
|
||||
| Placement | 缎带的位置 | `start` \| `end` | `end` | |
|
||||
| Text | 缎带中填入的内容 | ReactNode | - | |
|
||||
@ -0,0 +1,37 @@
|
||||
---
|
||||
category: Components
|
||||
type: Navigation
|
||||
title: Breadcrumb
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg
|
||||
---
|
||||
|
||||
A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy.
|
||||
|
||||
## When To Use
|
||||
|
||||
- When the system has more than two layers in a hierarchy.
|
||||
- When you need to inform the user of where they are.
|
||||
- When the user may need to navigate back to a higher level.
|
||||
|
||||
|
||||
## API
|
||||
|
||||
|
||||
Breadcrumb
|
||||
|
||||
| Property | Description | Type | Default Value |
|
||||
| --- | --- | --- | --- |
|
||||
| AutoGenerate | Auto generate navigation from Menu data | bool | - |
|
||||
| ChildContent | Custom item renderer | int | - |
|
||||
| Separator | Custom separator | RenderFragment | - |
|
||||
|
||||
|
||||
BreadcrumbItem
|
||||
|
||||
| Property | Description | Type | Default Value |
|
||||
| --- | --- | --- | --- |
|
||||
| Href | Target of hyperlink | string | - |
|
||||
| Overlay | The dropdown menu | RenderFragment |- |
|
||||
| OnClick | Set the handler to handle click event | EventCallback<MouseEventArgs> |- |
|
||||
| ChildContent | Title template | RenderFragment | - |
|
||||
|
||||
@ -0,0 +1,38 @@
|
||||
---
|
||||
category: Components
|
||||
type: 导航
|
||||
title: Breadcrumb
|
||||
subtitle: 面包屑
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg
|
||||
---
|
||||
|
||||
显示当前页面在系统层级结构中的位置，并能向上返回。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 当系统拥有超过两级以上的层级结构时；
|
||||
- 当需要告知用户『你在哪里』时；
|
||||
- 当需要向上导航的功能时。
|
||||
|
||||
|
||||
## API
|
||||
|
||||
Breakcrumb
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------- | -------------------------------------------- | ------------- | --------- |
|
||||
| AutoGenerate | 自动通过路由匹配菜单数据生成路径 | bool | - |
|
||||
| ChildContent | 子内容 | RenderFragment | - |
|
||||
| Separator |分隔符自定义| string | - |
|
||||
|
||||
|
||||
BreadcrumbItem
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------- | -------------------------------------------- | ------------- | --------- |
|
||||
| Href | 链接的目的地 | int | - |
|
||||
| Overlay | 下拉菜单的内容 | RenderFragment |- |
|
||||
| OnClick | 单击事件 | EventCallback<MouseEventArgs> |- |
|
||||
| ChildContent | 标题模板内容 | RenderFragment | - |
|
||||
|
||||
|
||||
@ -0,0 +1,57 @@
|
||||
---
|
||||
category: Components
|
||||
type: General
|
||||
title: Button
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
|
||||
---
|
||||
|
||||
To trigger an operation.
|
||||
|
||||
## When To Use
|
||||
|
||||
A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.
|
||||
|
||||
In Ant Design we provide 4 types of button.
|
||||
|
||||
- Primary button: indicate the main action, one primary button at most in one section.
|
||||
- Default button: indicate a series of actions without priority.
|
||||
- Dashed button: used for adding action commonly.
|
||||
- Link button: used for external links.
|
||||
|
||||
And 4 other properties additionally.
|
||||
|
||||
- `danger`: used for actions of risk, like deletion or authorization.
|
||||
- `ghost`: used in situations with complex background, home pages usually.
|
||||
- `disabled`: when actions is not available.
|
||||
- `loading`: add loading spinner in button, avoiding multiple submits too.
|
||||
|
||||
## API
|
||||
|
||||
|
||||
|
||||
| Property | Description | Type | Default Value | Version
|
||||
| --- | --- | --- | --- |
|
||||
| AriaLabel | Sets the aria-label attribute | string | null |
|
||||
| Block | Option to fit button width to its parent width | bool | false |
|
||||
| ChildContent | Content of the button. | RenderFragment | - |
|
||||
| Danger | Set the danger status of button | bool | false |
|
||||
| Disabled | Whether the `Button` is disabled. | bool | false |
|
||||
| Ghost | Make background transparent and invert text and border colors | bool | false |
|
||||
| HtmlType | Set the original html `type` of `button`, see: [MDN]('https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type') | string | `button` |
|
||||
| Icon | Set the icon component of button | string | - |
|
||||
| Loading | Set the loading status of button | bool | false |
|
||||
| OnClick | Callback when `Button` is clicked | Action | - |
|
||||
| OnClickStopPropagation | Do not propagate events when button is clicked. | bool | false |
|
||||
| Search | Adds class `ant-input-search-button` to the button. | bool | false |
|
||||
| Shape | Can set button shape: `circle` | `round` or `null` (default, which is rectangle). | string | null |
|
||||
| Size | Set the size of `Button`. | AntSizeLDSType | `AntSizeLDSType.Default` |
|
||||
| Type | Type of the button. | ButtonType | `ButtonType.Default` |
|
||||
| NoSpanWrap | Remove `<span>` from button content, if you want to provide rich content | bool | false |
|
||||
|
||||
|
||||
### DownloadButton
|
||||
|
||||
| Property | Description | Type | Default Value | Version
|
||||
| --- | --- | --- | --- |
|
||||
| Url | The download url of a file | string | null |
|
||||
| FileName | name of the file | string | |
|
||||
@ -0,0 +1,58 @@
|
||||
---
|
||||
category: Components
|
||||
type: 通用
|
||||
title: Button
|
||||
subtitle: 按钮
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
|
||||
---
|
||||
|
||||
按钮用于开始一个即时操作。
|
||||
|
||||
## 何时使用
|
||||
|
||||
标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
|
||||
|
||||
在 Ant Design 中，我们有四种按钮。
|
||||
|
||||
- 主按钮：用于主行动点，一个操作区域只能有一个主按钮。
|
||||
- 默认按钮：用于没有主次之分的一组行动点。
|
||||
- 虚线按钮：常用于添加操作。
|
||||
- 链接按钮：用于次要或外链的行动点。
|
||||
|
||||
以及四种状态属性与上面配合使用。
|
||||
|
||||
- 危险：删除/移动/修改权限等危险操作，一般需要二次确认。
|
||||
- 幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。
|
||||
- 禁用：行动点不可用的时候，一般需要文案解释。
|
||||
- 加载中：用于异步操作等待反馈的时候，也可以避免多次提交。
|
||||
|
||||
## API
|
||||
|
||||
|
||||
|
||||
| Property | Description | Type | Default Value | Version
|
||||
| --- | --- | --- | --- |
|
||||
| AriaLabel | Sets the aria-label attribute | string | null |
|
||||
| Block | 将按钮宽度调整为其父宽度的选项 | bool | false |
|
||||
| ChildContent | Content of the button. | RenderFragment | - |
|
||||
| Danger | 设置危险按钮 | bool | false |
|
||||
| Disabled | 按钮失效状态 | bool | false |
|
||||
| Ghost | 幽灵属性，使按钮背景透明 | bool | false |
|
||||
| HtmlType | 设置 button 原生的 type 值，可选值请参考 [HTML 标准]('https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type') | string | `button` |
|
||||
| Icon | 设置按钮的图标组件 | string | - |
|
||||
| Loading | 设置按钮载入状态 | bool | false |
|
||||
| OnClick | Callback when `Button` is clicked | Action | - |
|
||||
| OnClickStopPropagation | Do not propagate events when button is clicked. | bool | false |
|
||||
| Search | Adds class `ant-input-search-button` to the button. | bool | false |
|
||||
| Shape | Can set button shape: `circle` | `round` or `null` (default, which is rectangle). | string | null |
|
||||
| Size | 设置按钮大小 | AntSizeLDSType | `AntSizeLDSType.Default` |
|
||||
| Type | 设置按钮类型 | ButtonType | `ButtonType.Default` |
|
||||
| NoSpanWrap | Remove `<span>` from button content, if you want to provide rich content | bool | false |
|
||||
|
||||
|
||||
### DownloadButton
|
||||
|
||||
| Property | Description | Type | Default Value | Version
|
||||
| --- | --- | --- | --- |
|
||||
| Url | 文件下载地址 | string | null |
|
||||
| FileName | 指定文件名 | string | false |
|
||||
@ -0,0 +1,51 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Display
|
||||
cols: 1
|
||||
title: Calendar
|
||||
cover: https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg
|
||||
---
|
||||
|
||||
Container for displaying data in calendar form.
|
||||
|
||||
## When To Use
|
||||
|
||||
When data is in the form of dates, such as schedules, timetables, prices calendar, lunar calendar. This component also supports Year/Month switch.
|
||||
|
||||
## API
|
||||
|
||||
**Note:** Part of the Calendar's locale is read from `value`. So, please set the locale of `moment` correctly.
|
||||
|
||||
```jsx
|
||||
// The default locale is en-US, if you want to use other locale, just set locale in entry file globally.
|
||||
// import moment from 'moment';
|
||||
// import 'moment/locale/zh-cn';
|
||||
// moment.locale('zh-cn');
|
||||
|
||||
<Calendar
|
||||
dateCellRender={dateCellRender}
|
||||
monthCellRender={monthCellRender}
|
||||
onPanelChange={onPanelChange}
|
||||
onSelect={onSelect}
|
||||
/>
|
||||
```
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| dateCellRender | Customize the display of the date cell, the returned content will be appended to the cell | Func(DateTime) => RenderFragment | - | |
|
||||
| dateFullCellRender | Customize the display of the date cell, the returned content will override the cell | Func(DateTime) => RenderFragment | - | |
|
||||
| defaultValue | The date selected by default | DateTime | default date | |
|
||||
| disabledDate | Function that specifies the dates that cannot be selected | (DateTime) => boolean | - | |
|
||||
| fullscreen | Whether to display in full-screen | boolean | `true` | |
|
||||
| locale(TODO) | The calendar's locale | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | |
|
||||
| mode | The display mode of the calendar | `DatePickerType.Month` \| `DatePickerType.Year` | DatePickerType.Month | |
|
||||
| monthCellRender | Customize the display of the month cell, the returned content will be appended to the cell | Func(DateTime) => RenderFragment | - | |
|
||||
| monthFullCellRender | Customize the display of the month cell, the returned content will override the cell | Func(DateTime) => RenderFragment | - | |
|
||||
| validRange | to set valid range | [DateTime, DateTime] | - | |
|
||||
| value | The current selected date | DateTime | current date | |
|
||||
| onPanelChange | Callback for when panel changes | Func(DateTime date, string mode) | - | |
|
||||
| onSelect | Callback for when a date is selected | Func(DateTime） | - | |
|
||||
| onChange | Callback for when date changes | Func(DateTime | - | |
|
||||
| headerRender | render custom header in panel | Func(CalendarHeaderRenderArgs) | - | |
|
||||
| Locale | Set custom localization. | `DatePickerLocale` | Locale for current Culture | |
|
||||
| CultureInfo | Set's the `CultureInfo` used for generate localized headers, formatting and parsing. | `CultureInfo` | CultureInfo.DefaultThreadCurrentUICulture | |
|
||||
@ -0,0 +1,50 @@
|
||||
---
|
||||
category: Components
|
||||
type: 数据展示
|
||||
subtitle: 日历
|
||||
cols: 1
|
||||
title: Calendar
|
||||
cover: https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg
|
||||
---
|
||||
|
||||
按照日历形式展示数据的容器。
|
||||
|
||||
## 何时使用
|
||||
|
||||
当数据是日期或按照日期划分时，例如日程、课表、价格日历等，农历等。目前支持年/月切换。
|
||||
|
||||
## API
|
||||
|
||||
**注意：**Calendar 部分 locale 是从 value 中读取，所以请先正确设置 moment 的 locale。
|
||||
|
||||
```jsx
|
||||
// 默认语言为 en-US，所以如果需要使用其他语言，推荐在入口文件全局设置 locale
|
||||
// import moment from 'moment';
|
||||
// import 'moment/locale/zh-cn';
|
||||
// moment.locale('zh-cn');
|
||||
|
||||
<Calendar
|
||||
dateCellRender={dateCellRender}
|
||||
monthCellRender={monthCellRender}
|
||||
onPanelChange={onPanelChange}
|
||||
onSelect={onSelect}
|
||||
/>
|
||||
```
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| dateCellRender | 自定义渲染日期单元格，返回内容会被追加到单元格 | Func(DateTime) => RenderFragment | 无 | |
|
||||
| dateFullCellRender | 自定义渲染日期单元格，返回内容覆盖单元格 | Func(DateTime) => RenderFragment | 无 | |
|
||||
| defaultValue | 默认展示的日期 | DateTime | 默认日期 | |
|
||||
| disabledDate | 不可选择的日期 | (DateTime) => boolean | 无 | |
|
||||
| fullscreen | 是否全屏显示 | boolean | true | |
|
||||
| locale(TODO) | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | |
|
||||
| mode | 初始模式，`DatePickerType.Month/DatePickerType.Year` | DatePickerType | DatePickerType.Month | |
|
||||
| monthCellRender | 自定义渲染月单元格，返回内容会被追加到单元格 | Func(DateTime) => RenderFragment | 无 | |
|
||||
| monthFullCellRender | 自定义渲染月单元格，返回内容覆盖单元格 | Func(DateTime) => RenderFragment | 无 | |
|
||||
| validRange | 设置可以显示的日期 | [DateTime, DateTime] | 无 | |
|
||||
| value | 展示日期 | DateTime | 当前日期 | |
|
||||
| onPanelChange | 日期面板变化回调 | Func(DateTime date, string mode) | 无 | |
|
||||
| onSelect | 点击选择日期回调 | Func(DateTime） | 无 | |
|
||||
| onChange | 日期变化回调 | Func(DateTime） | 无 | |
|
||||
| headerRender | 自定义头部内容 | Func(CalendarHeaderRenderArgs) | 无 | |
|
||||
52
site/AntDesign.Docs/Demos/Components/Card/doc/index.en-US.md
Normal file
52
site/AntDesign.Docs/Demos/Components/Card/doc/index.en-US.md
Normal file
@ -0,0 +1,52 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Display
|
||||
title: Card
|
||||
cols: 1
|
||||
cover: https://gw.alipayobjects.com/zos/antfincdn/NqXt8DJhky/Card.svg
|
||||
---
|
||||
|
||||
Simple rectangular container.
|
||||
|
||||
## When To Use
|
||||
|
||||
- A card can be used to display content related to a single subject. The content can consist of multiple elements of varying types and sizes.
|
||||
|
||||
|
||||
## API
|
||||
|
||||
|
||||
Card
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ---------------- | -------------------------------------------- | ------------- | --------- |
|
||||
| Actions |The action list, shows at the bottom of the Card. | Array(RenderFragment) |- |
|
||||
| ActionTemplate | The template placeholder for CardAction | RenderFragment | -
|
||||
| Body |Body area on card | RenderFragment |- |
|
||||
| Extra |Content to render in the top-right corner of the card | RenderFragment |- |
|
||||
| Bordered |Toggles rendering of the border around the card | boolean |- |
|
||||
| BodyStyle |Inline style to apply to the card content | Css Properties |- |
|
||||
| CardAction | A component for actions, and it should be put in ActionTemplate | CardAction | -
|
||||
| Cover |Card cover | RenderFragment |- |
|
||||
| Loading |Shows a loading indicator while the contents of the card are being fetched | boolean |- |
|
||||
| Size | Size of card | RenderFragment |- |
|
||||
| Title | Card title | String or RenderFragement |- |
|
||||
| Type |Card style type, can be set to inner or not set | string |- |
|
||||
|
||||
Card.Grid
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ---------------- | -------------------------------------------- | ------------- | --------- |
|
||||
| ChildContent | Child container | RenderFragment |- |
|
||||
| Hoverable | Lift up when hovering card grid | boolean |- |
|
||||
| Style | style object of container | CSS Properties |- |
|
||||
|
||||
Card.Meta
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ---------------- | -------------------------------------------- | ------------- | --------- |
|
||||
| Avatar | avatar or icon | RenderFragment |- |
|
||||
| ChildContent | Child container | RenderFragment |- |
|
||||
| Description | description content | boolean |- |
|
||||
| Style | style object of container| CSS Properties |- |
|
||||
| Title | title content | String or RenderFragement |- |
|
||||
54
site/AntDesign.Docs/Demos/Components/Card/doc/index.zh-CN.md
Normal file
54
site/AntDesign.Docs/Demos/Components/Card/doc/index.zh-CN.md
Normal file
@ -0,0 +1,54 @@
|
||||
---
|
||||
category: Components
|
||||
type: 数据展示
|
||||
title: Card
|
||||
subtitle: 卡片
|
||||
cols: 1
|
||||
cover: https://gw.alipayobjects.com/zos/antfincdn/NqXt8DJhky/Card.svg
|
||||
---
|
||||
|
||||
通用卡片容器.
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。
|
||||
|
||||
|
||||
## API
|
||||
|
||||
Card
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------- | -------------------------------------------- | ------------- | --------- |
|
||||
| Actions |卡片操作组，位置在卡片底部 | Array(RenderFragment) |- |
|
||||
| ActionTemplate | 用于放置 CardAction 的模板 | RenderFragment | -
|
||||
| Body |卡片主要区域 | RenderFragment |- |
|
||||
| Extra |卡片右上角的操作区域 | RenderFragment |- |
|
||||
| Bordered |是否有边框 | boolean |- |
|
||||
| BodyStyle |内容区域自定义样式 | Css Properties |- |
|
||||
| CardAction | 一个单独的 卡片操作 组件，需要放在 ActionTemplate 内 | CardAction | -
|
||||
| Cover |卡片封面 | RenderFragment |- |
|
||||
| Loading |当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean |- |
|
||||
| size |card 的尺寸 | RenderFragment |- |
|
||||
| Title |卡片标题 | String or RenderFragement |- |
|
||||
| Type |卡片类型，可设置为 inner 或 不设置 | string |- |
|
||||
|
||||
Card.Grid
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------- | -------------------------------------------- | ------------- | --------- |
|
||||
| ChildContent |子容器 | RenderFragment |- |
|
||||
| Hoverable | 鼠标移过时可浮起 | boolean |- |
|
||||
| Style | 定义网格容器类名的样式 | CSS Properties |- |
|
||||
|
||||
Card.Meta
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------- | -------------------------------------------- | ------------- | --------- |
|
||||
| Avatar | 头像和图标 | RenderFragment |- |
|
||||
| ChildContent | 子容器 | RenderFragment |- |
|
||||
| Description | 描述内容 | boolean |- |
|
||||
| Style | 定义容器类名的样式 | CSS Properties |- |
|
||||
| Title | 标题内容 | String or RenderFragement |- |
|
||||
|
||||
|
||||
@ -0,0 +1,29 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Display
|
||||
title: Carousel
|
||||
cover: https://gw.alipayobjects.com/zos/antfincdn/%24C9tmj978R/Carousel.svg
|
||||
---
|
||||
|
||||
A carousel component. Scales with its container.
|
||||
|
||||
## When To Use
|
||||
|
||||
- When there is a group of content on the same level.
|
||||
- When there is insufficient content space, it can be used to save space in the form of a revolving door.
|
||||
- Commonly used for a group of pictures/cards.
|
||||
|
||||
|
||||
## API
|
||||
|
||||
| Property | Description | Type | Default Value |
|
||||
| --- | --- | --- | --- |
|
||||
| AfterChange | (ToDo)Callback function called after the current index changes | function(current) | - |
|
||||
| ChildContent | ChildContent | RenderFragment | - |
|
||||
| Autoplay | Whether to scroll automatically | TimeSpan |
|
||||
| BeforeChange | (ToDo)Callback function called before the current index changes | function(from, to) |- |
|
||||
| DotPosition |The position of the dots, which can be one of `top` `bottom` `left` `right` | string | - |
|
||||
| Dots | Whether to show the dots at the bottom of the gallery | bool | - |
|
||||
| DotsClass | The class name of the dots | string | - |
|
||||
| Easing | (ToDo)Transition interpolation function name | string | - |
|
||||
| Effect | Transition effect `scrollx` or `fade` | string | - |
|
||||
@ -0,0 +1,32 @@
|
||||
---
|
||||
category: Components
|
||||
type: 数据展示
|
||||
title: Carousel
|
||||
subtitle: 走马灯
|
||||
cover: https://gw.alipayobjects.com/zos/antfincdn/%24C9tmj978R/Carousel.svg
|
||||
---
|
||||
|
||||
旋转木马，一组轮播的区域。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 当有一组平级的内容。
|
||||
- 当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
|
||||
- 常用于一组图片或卡片轮播。
|
||||
|
||||
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------- | -------------------------------------------- | ------------- | --------- |
|
||||
| AfterChange | (ToDo)切换面板的回调 | function(current) | - |
|
||||
| ChildContent | 子内容 | RenderFragment | - |
|
||||
| Autoplay | 是否自动切换 | TimeSpan |
|
||||
| BeforeChange | (ToDo)切换面板的回调 | function(from, to) |- |
|
||||
| DotPosition | 面板指示点位置，可选 `top` `bottom` `left` `right` | string | - |
|
||||
| Dots | 是否显示面板指示点 | bool | - |
|
||||
| DotsClass | 面板指示点样式类名 | string | - |
|
||||
| Easing | (ToDo)动画效果 | string | - |
|
||||
| Effect | 动画效果函数，可取 scrollx, fade | string | - |
|
||||
|
||||
@ -0,0 +1,44 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Entry
|
||||
title: Cascader
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg
|
||||
---
|
||||
|
||||
Cascade selection box.
|
||||
|
||||
## When To Use
|
||||
|
||||
- When you need to select from a set of associated data set. Such as province/city/district, company level, things classification.
|
||||
- When selecting from a large data set, with multi-stage classification separated for easy selection.
|
||||
- Chooses cascade items in one float layer for better user experience.
|
||||
|
||||
|
||||
## API
|
||||
|
||||
Cascader
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------------------- | ---------------------------------------------------- | --------------------- | --------- |
|
||||
| AllowClear | whether allow clear | bool | true |
|
||||
| BoundaryAdjustMode | `Dropdown` adjustment strategy (when for example browser resize is happening) | TriggerBoundaryAdjustMode | TriggerBoundaryAdjustMode.InView |
|
||||
| ChangeOnSelect | change value on each selection if set to true, see above demo for details | bool | false |
|
||||
| Style | additional css class | string | - |
|
||||
| DefaultValue | initial selected value | string | - |
|
||||
| ExpandTrigger | expand current item when click or hover, one of 'click' 'hover' | string | 'click' |
|
||||
| Options | data options of cascade | IList<AntCheckbox> | - |
|
||||
| Placeholder | input placeholder | string | 'Please Select' |
|
||||
| Placement | Use preset popup align config from builtinPlacements. | `BottomLeft` \| `BottomRight` \| `TopLeft` \| `TopRight` | - |
|
||||
| Size | input size, one of 'large','middle' 'small' | string | 无 |
|
||||
| OnChange | callback when finishing cascader select (List<CascaderNode>, string, string) => void | - | - |
|
||||
|
||||
|
||||
CascaderNode
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------- | ------------------------ | -------------- | --------- |
|
||||
| Label | Label | string | - |
|
||||
| Value | Value | string | - |
|
||||
| Disabled | Disabled | bool | false |
|
||||
| HasChildren | HasChildren | bool | - |
|
||||
| Children | Children | AntCheckbox[] | - |
|
||||
@ -0,0 +1,45 @@
|
||||
---
|
||||
category: Components
|
||||
type: 数据录入
|
||||
title: Cascader
|
||||
subtitle: 级联选择
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg
|
||||
---
|
||||
|
||||
级联选择框。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
|
||||
- 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。
|
||||
- 比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。
|
||||
|
||||
|
||||
## API
|
||||
|
||||
Cascader
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------------------- | ---------------------------------------------------- | --------------------- | --------- |
|
||||
| AllowClear | 是否支持清除 | bool | true |
|
||||
| BoundaryAdjustMode | 边界自动调整的模式，默认在可视范围调整 | TriggerBoundaryAdjustMode | TriggerBoundaryAdjustMode.InView |
|
||||
| ChangeOnSelect | 当此项为 true 时，点选每级菜单选项值都会发生变化 | bool | false |
|
||||
| Style | 自定义类名 | string | - |
|
||||
| DefaultValue | 默认的选中项 | string | - |
|
||||
| ExpandTrigger | 次级菜单的展开方式，可选 'click' 和 'hover' | string | 'click' |
|
||||
| Options | 可选项数据源 | IList<AntCheckbox> | - |
|
||||
| Placeholder | 输入框占位文本 | string | '请选择' |
|
||||
| Placement | 浮层预设位置 | `BottomLeft` \| `BottomRight` \| `TopLeft` \| `TopRight` | - |
|
||||
| Size | 输入框大小，可选 'large','middle' 'small' | string | 无 |
|
||||
| OnChange | 选择完成后的回调 (List<CascaderNode>, string, string) => void | - | - |
|
||||
|
||||
|
||||
CascaderNode
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------- | ------------------------ | -------------- | --------- |
|
||||
| Label | 节点名称 | string | - |
|
||||
| Value | 节点值 | string | - |
|
||||
| Disabled | 节点是否禁用 | bool | false |
|
||||
| HasChildren | 是否存在子节点(只读) | bool | - |
|
||||
| Children | 子节点 | AntCheckbox[] | - |
|
||||
@ -0,0 +1,40 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Entry
|
||||
title: Checkbox
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/8nbVbHEm_/CheckBox.svg
|
||||
---
|
||||
|
||||
Checkbox component.
|
||||
|
||||
## When To Use
|
||||
|
||||
- Used for selecting multiple values from several options.
|
||||
- If you use only one checkbox, it is the same as using Switch to toggle between two states.
|
||||
The difference is that Switch will trigger the state change directly, but Checkbox just marks the state as changed and this needs to be submitted.
|
||||
|
||||
|
||||
## API
|
||||
|
||||
Checkbox
|
||||
|
||||
| Property | Description | Type | Default Value |
|
||||
| --- | --- | --- | --- |
|
||||
| AutoFocus | get focus when component mounted | boolean | false |
|
||||
| Checked | Specifies whether the checkbox is selected. | boolean |false|
|
||||
| Disabled | Disable checkbox | boolean |false |
|
||||
| Indeterminate |indeterminate checked state of checkbox | boolean | false |
|
||||
| OnChange |The callback function that is triggered when the state changes| function(e)|- |
|
||||
|
||||
Checkbox Group
|
||||
|
||||
| Property | Description | Type | Default Value |
|
||||
| --- | --- | --- | --- |
|
||||
| CheckboxItems | Check box items | IList<AntCheckbox> | - |
|
||||
| Disable | Disable all checkbox | boolean | false |
|
||||
| MixedMode | Applies only when bot `Options` and `ChildContent` is used. Allows to select which section (`Options` or `ChildContent`) will be rendered first. | (enum)CheckboxGroupMixedMode |ChildContentFirst |
|
||||
| Options |Specifies options | CheckboxOption[] |- |
|
||||
| Value | List of selected value | IList<string> | Array.Empty<string>() |
|
||||
| ValueChanged |The callback function that is triggered when the state changes| function(checkValue)|- |
|
||||
|
||||
|
||||
@ -0,0 +1,37 @@
|
||||
---
|
||||
category: Components
|
||||
type: 数据录入
|
||||
title: Checkbox
|
||||
subtitle: 多选框
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/8nbVbHEm_/CheckBox.svg
|
||||
---
|
||||
|
||||
多选框。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 在一组可选项中进行多项选择时；
|
||||
- 单独使用可以表示两种状态之间的切换，和 switch 类似。区别在于切换 switch 会直接触发状态改变，而 checkbox 一般用于状态标记，需要和提交操作配合。
|
||||
|
||||
|
||||
## API
|
||||
Checkbox
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------- | -------------------------------------------- | ------------- | --------- |
|
||||
| AutoFocus | 自动获取焦点 | boolean | false |
|
||||
| Checked | 指定当前是否选中 | boolean |false|
|
||||
| Disabled | 失效状态 | boolean |false |
|
||||
| Indeterminate |设置 indeterminate 状态，只负责样式控制 | boolean | false |
|
||||
| OnChange |变化时回调函数| function(e)|- |
|
||||
|
||||
Checkbox Group
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------- | -------------------------------------------- | ------------- | --------- |
|
||||
| CheckboxItems | 自动获取焦点 | IList<AntCheckbox> | - |
|
||||
| Disable | 整组失效 | boolean | false |
|
||||
| MixedMode | 混合模式。用于当 `Options` 和 `ChildContent` 同时设置选项时，选择渲染的顺序。 | (enum)CheckboxGroupMixedMode |ChildContentFirst |
|
||||
| Options |指定可选项 | CheckboxOption[] |- |
|
||||
| Value |选中组的值列表 | IList<string> | Array.Empty<string>() |
|
||||
| ValueChanged |变化时回调函数| function(e)|- |
|
||||
@ -0,0 +1,44 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Display
|
||||
title: Collapse
|
||||
cols: 1
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
|
||||
---
|
||||
|
||||
A content area which can be collapsed and expanded.
|
||||
|
||||
## When To Use
|
||||
|
||||
- Can be used to group or hide complex regions to keep the page clean.
|
||||
- `Accordion` is a special kind of `Collapse`, which allows only one panel to be expanded at a time.
|
||||
|
||||
## API
|
||||
|
||||
### Collapse
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------------------- | ------------------------ | ------------------- | ------- |
|
||||
| `Accordion` | Accordion mode | `boolean` | `false` |
|
||||
| `Bordered` | Set border style | `boolean` | `true` |
|
||||
| `ExpandIconPosition` | Set expand icon position | `'left' \| 'right'` | `left` |
|
||||
| `Animation` | Whether enable the animation | `boolean` | `false` |
|
||||
|
||||
### Panel
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------------- | ------------------------------------------- | -------------------------- | ------- |
|
||||
| `Disabled` | If `true`, panel cannot be opened or closed | `boolean` | `false` |
|
||||
| `Header` | Title of the panel | `string \| RenderFragment` | - |
|
||||
| `ExpandedIcon` | Customize an icon for toggle | `string \| RenderFragment` | - |
|
||||
| `Extra` | Extra element in the corner | `string \| RenderFragment` | - |
|
||||
| `ShowArrow` | Display arrow or not | `boolean` | `true` |
|
||||
| `Active` | Active status of panel, double binding | `boolean` | - |
|
||||
| `ActiveChange` | Callback function of the active status | `EventCallback<boolean>` | - |
|
||||
|
||||
### Methods
|
||||
|
||||
| Name | Description |
|
||||
| ------- | ------------ |
|
||||
| Activate(string[] activeKeys) | Activate the panels by their keys |
|
||||
| Deactivate(string[] inactiveKeys) | Deactivate the panels by their keys |
|
||||
@ -0,0 +1,45 @@
|
||||
---
|
||||
category: Components
|
||||
type: 数据展示
|
||||
title: Collapse
|
||||
subtitle: 折叠面板
|
||||
cols: 1
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
|
||||
---
|
||||
|
||||
可以折叠/展开的内容区域。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 对复杂区域进行分组和隐藏，保持页面的整洁。
|
||||
- `手风琴` 是一种特殊的折叠面板，只允许单个内容区域展开。
|
||||
|
||||
## API
|
||||
|
||||
### Collapse
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------------- | --------------------- | ------------------- | ------- |
|
||||
| `Accordion` | 是否每次只打开一个tab | `boolean` | `false` |
|
||||
| `Bordered` | 是否有边框 | `boolean` | `true` |
|
||||
| `ExpandIconPosition` | 设置图标位置 | `'left' \| 'right'` | `left` |
|
||||
| `Animation` | 是否开启动画 | `boolean` | `false` |
|
||||
|
||||
### Panel
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------------- | ------------------------------------------ | -------------------------- | ------- |
|
||||
| `Disabled` | 禁用后的面板展开与否将无法通过用户交互改变 | `boolean` | `false` |
|
||||
| `Header` | 面板头内容 | `string \| RenderFragment` | - |
|
||||
| `ExpandedIcon` | 自定义切换图标 | `string \| RenderFragment` | - |
|
||||
| `Extra` | 自定义渲染每个面板右上角的内容 | `string \| RenderFragment` | - |
|
||||
| `ShowArrow` | 是否展示箭头 | `boolean` | `true` |
|
||||
| `Active` | 面板是否展开，可双向绑定 | `boolean` | - |
|
||||
| `ActiveChange` | 面板展开回调 | `EventCallback<boolean>` | - |
|
||||
|
||||
### 方法
|
||||
|
||||
| 名称 | 说明 |
|
||||
| ------- | ------------ |
|
||||
| Activate(string[] activeKeys) | 展开指定 key 对应的 Panel |
|
||||
| Deactivate(string[] inactiveKeys) | 关闭指定 key 对应的 Panel |
|
||||
@ -0,0 +1,29 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Display
|
||||
title: Comment
|
||||
cols: 1
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/ILhxpGzBO/Comment.svg
|
||||
---
|
||||
|
||||
A comment displays user feedback and discussion to website content.
|
||||
|
||||
## When To Use
|
||||
|
||||
Comments can be used to enable discussions on an entity such as a page, blog post, issue or other.
|
||||
|
||||
## API
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| Actions | List of action items rendered below the comment content | IEnumerable<RenderFragment> | - | |
|
||||
| Author | The element to display as the comment author | string | - | |
|
||||
| AuthorTemplate | The element to display as the comment author | RenderFragment | - | |
|
||||
| Avatar | The element to display as the comment avatar - generally ant src | string | - | |
|
||||
| AvatarTemplate | The element to display as the comment avatar - generally an antd `Avatar` or img | RenderFragment | - | |
|
||||
| ChildContent | Nested comments should be provided as children of the Comment | ReactNode | - | |
|
||||
| Content | The main content of the comment | string | - | |
|
||||
| ContentTemplate | The main content of the comment | string | - | RenderFragment |
|
||||
| Datetime | A datetime element containing the time to be displayed | string | - | |
|
||||
| DatetimeTemplate | A datetime element containing the time to be displayed | RenderFragment | - | |
|
||||
| Placement | The placement of the avatar. | `left` \| `right` | `left` | 0.18.0 |
|
||||
@ -0,0 +1,30 @@
|
||||
---
|
||||
category: Components
|
||||
type: 数据展示
|
||||
title: Comment
|
||||
subtitle: 评论
|
||||
cols: 1
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/ILhxpGzBO/Comment.svg
|
||||
---
|
||||
|
||||
对网站内容的反馈、评价和讨论。
|
||||
|
||||
## 何时使用
|
||||
|
||||
评论组件可用于对事物的讨论，例如页面、博客文章、问题等等。
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| Actions | 在评论内容下面呈现的操作项列表 | IEnumerable<RenderFragment> | - | |
|
||||
| Author | 要显示为注释作者的元素 | string | - | |
|
||||
| AuthorTemplate | 要显示为注释作者的模板 | RenderFragment | - | |
|
||||
| Avatar | 要显示为评论头像的元素 - 通常是 antd `Avatar` 或者 src | string | - | |
|
||||
| AvatarTemplate | 要显示为评论头像的模板 - 通常是 antd `Avatar` 或者 src | RenderFragment | - | |
|
||||
| ChildContent | 嵌套注释应作为注释的子项提供 | RenderFragment | - | |
|
||||
| Content | 评论的主要内容 | string | - | |
|
||||
| ContentTemplate | 评论的主要内容模板 | RenderFragment | - | |
|
||||
| Datetime | 展示时间描述 | string | - | |
|
||||
| DatetimeTemplate | 展示时间描述模板 | RenderFragment | - | |
|
||||
| Placement | 头像的位置. | `left` \| `right` | `left` | 0.18.0 |
|
||||
@ -0,0 +1,167 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Entry
|
||||
title: DatePicker
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/RT_USzA48/DatePicker.svg
|
||||
---
|
||||
|
||||
To select or input a date.
|
||||
|
||||
## When To Use
|
||||
|
||||
By clicking the input box, you can select a date from a popup calendar.
|
||||
|
||||
## API
|
||||
|
||||
There are six kinds of picker:
|
||||
|
||||
- DatePicker
|
||||
- MonthPicker
|
||||
- RangePicker
|
||||
- WeekPicker
|
||||
- YearPicker
|
||||
- QuarterPicker
|
||||
|
||||
There are four types of values supported:
|
||||
|
||||
- DateTime
|
||||
- DateTimeOffset
|
||||
- DateOnly
|
||||
- TimeOnly
|
||||
|
||||
### Common API
|
||||
|
||||
The following APIs are shared by DatePicker, YearPicker, MonthPicker, RangePicker, WeekPicker.
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| allowClear（TODO） | Whether to show clear button | boolean | true | |
|
||||
| ChangeOnClose | Saving the input value after blur (when the mouse clicked outside the input) | boolean | false | |
|
||||
| autoFocus | get focus when component mounted | boolean | false | |
|
||||
| BoundaryAdjustMode | `Dropdown` adjustment strategy (when for example browser resize is happening) | TriggerBoundaryAdjustMode | TriggerBoundaryAdjustMode.InView |
|
||||
| className | picker className | string | '' | |
|
||||
| dateRender | custom rendering function for date cells | function(currentDate: moment, today: moment) => React.ReactNode | - | |
|
||||
| disabled | determine whether the DatePicker is disabled | boolean | false | |
|
||||
| disabledDate | specify the date that cannot be selected | (currentDate: moment) => boolean | - | |
|
||||
| dropdownClassName | to customize the className of the popup calendar | string | - | |
|
||||
| getPopupContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - | |
|
||||
| locale | Localization configuration. Note: do not change the order of days in the ShortWeekDays array. The wrong order will result in the incorrect day headers. | object | [default](https://github.com/ant-design-blazor/ant-design-blazor/blob/master/components/locales/en-US.json) | |
|
||||
| mode（TODO） | picker panel mode（[Cannot select year or month anymore?](/docs/react/faq#When-set-mode-to-DatePicker/RangePicker,-cannot-select-year-or-month-anymore?) | `time` \| `date` \| `month` \| `year` \| `decade` | - | |
|
||||
| open | open state of picker | boolean | - | |
|
||||
| picker | Set picker type | `date` \| `week` \| `month` \| `quarter` (4.1.0) \| `year` | `date` | |
|
||||
| placeholder | placeholder of date input | string\|RangePicker\[] | - | |
|
||||
| Placement | The position where the selection box pops up | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft | |
|
||||
| popupStyle | to customize the style of the popup calendar | CSSProperties | {} | |
|
||||
| size | determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | `large` \| `middle` \| `small` | - | |
|
||||
| bordered | whether has border style | Boolean | true | |
|
||||
| SuffixIcon | The custom suffix icon | RenderFragment | - | |
|
||||
| style | to customize the style of the input box | CSSProperties | {} | |
|
||||
| onOpenChange | a callback function, can be executed whether the popup calendar is popped up or closed | function(open) | - | |
|
||||
| onPanelChange | callback when picker panel mode is changed | function(value, mode) | - | |
|
||||
| OnClearClick | callback when clear button is clicked | Action | - | |
|
||||
| inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false | |
|
||||
| mask | input value by mask | string | - | |
|
||||
|
||||
### Common Methods
|
||||
|
||||
| Name | Description | Version |
|
||||
| ------- | ------------ | ------- |
|
||||
| blur() | remove focus | |
|
||||
| focus() | get focus | |
|
||||
|
||||
### DatePicker
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultValue | to set default date, if start time or end time is null or undefined, the date range will be an open interval | [moment](http://momentjs.com/) | - | |
|
||||
| defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - | |
|
||||
| disabledTime | to specify the time that cannot be selected | function(date) | - | |
|
||||
| format | to set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting. | string \| string[] | "YYYY-MM-DD" | |
|
||||
| renderExtraFooter | render extra footer in panel | (mode) => React.ReactNode | - | |
|
||||
| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/components/time-picker/#API) | |
|
||||
| showTime.defaultValue（TODO） | to set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() | |
|
||||
| showToday | whether to show "Today" button | boolean | true | |
|
||||
| value | to set date | [moment](http://momentjs.com/) | - | |
|
||||
| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |
|
||||
| onOk | callback when click ok button | function() | - | |
|
||||
| onPanelChange | Callback function for panel changing | function(value, mode) | - | |
|
||||
| Locale | Set custom localization. | `DatePickerLocale` | Locale for current Culture | |
|
||||
| CultureInfo | Set's the `CultureInfo` used for generate localized headers, formatting and parsing. | `CultureInfo` | CultureInfo.DefaultThreadCurrentUICulture | |
|
||||
|
||||
### YearPicker
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultValue | to set default date | [moment](http://momentjs.com/) | - | |
|
||||
| defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - | |
|
||||
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY" | |
|
||||
| renderExtraFooter | render extra footer in panel | () => React.ReactNode | - | |
|
||||
| value | to set date | [moment](http://momentjs.com/) | - | |
|
||||
| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |
|
||||
|
||||
### QuarterPicker
|
||||
|
||||
Added in `4.1.0`.
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultValue | to set default date | [moment](http://momentjs.com/) | - | |
|
||||
| defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - | |
|
||||
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-\QQ" | |
|
||||
| renderExtraFooter | render extra footer in panel | () => React.ReactNode | - | |
|
||||
| value | to set date | [moment](http://momentjs.com/) | - | |
|
||||
| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |
|
||||
|
||||
### MonthPicker
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultValue | to set default date | [moment](http://momentjs.com/) | - | |
|
||||
| defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - | |
|
||||
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-MM" | |
|
||||
| monthCellRender | Custom month cell content render method | function(date, locale): ReactNode | - | |
|
||||
| renderExtraFooter | render extra footer in panel | () => React.ReactNode | - | |
|
||||
| value | to set date | [moment](http://momentjs.com/) | - | |
|
||||
| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |
|
||||
|
||||
### WeekPicker
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultValue | to set default date | [moment](http://momentjs.com/) | - | |
|
||||
| defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - | |
|
||||
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-wo" | |
|
||||
| value | to set date | [moment](http://momentjs.com/) | - | |
|
||||
| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |
|
||||
| renderExtraFooter | render extra footer in panel | (mode) => React.ReactNode | - | |
|
||||
|
||||
### RangePicker
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| allowEmpty（TODO） | Allow start or end input leave empty | \[boolean, boolean] | \[false, false] | |
|
||||
| defaultValue | to set default date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | |
|
||||
| defaultPickerValue | to set default picker date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)\] | - | |
|
||||
| disabled | disable start or end | `[boolean, boolean]` | - | |
|
||||
| disabledTime | to specify the time that cannot be selected | function(dates: \[moment, moment], partial: `'start'|'end'`) | - | |
|
||||
| format | to set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting. | string \| string[] | "YYYY-MM-DD HH:mm:ss" | |
|
||||
| ranges（TODO） | preseted ranges for quick selection | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | - | |
|
||||
| renderExtraFooter | render extra footer in panel | () => React.ReactNode | - | |
|
||||
| separator（TODO） | set separator between inputs | string | '~' | |
|
||||
| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/components/time-picker/#API) | |
|
||||
| showTime.defaultValue | to set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | \[moment(), moment()] | |
|
||||
| value | to set date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | |
|
||||
| onCalendarChange（TODO） | a callback function, can be executed when the start time or the end time of the range is changing | function(dates: \[moment, moment], dateStrings: \[string, string]) | - | |
|
||||
| onChange | a callback function, can be executed when the selected time is changing | function(dates: \[moment, moment], dateStrings: \[string, string]) | - | |
|
||||
|
||||
<style>
|
||||
.code-box-demo .ant-picker {
|
||||
margin: 0 8px 12px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
## FAQ
|
||||
|
||||
- [When set mode to DatePicker/RangePicker, cannot select year or month anymore?](/docs/react/faq#When-set-mode-to-DatePicker/RangePicker,-cannot-select-year-or-month-anymore?)
|
||||
|
||||
- [How to use DatePicker with customize date library like dayjs](/docs/react/replace-moment#DatePicker)
|
||||
@ -0,0 +1,170 @@
|
||||
---
|
||||
category: Components
|
||||
type: 数据录入
|
||||
title: DatePicker
|
||||
subtitle: 日期选择框
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/RT_USzA48/DatePicker.svg
|
||||
---
|
||||
|
||||
输入或选择日期的控件。
|
||||
|
||||
## 何时使用
|
||||
|
||||
当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。
|
||||
|
||||
## API
|
||||
|
||||
日期类组件包括以下六种形式。
|
||||
|
||||
- DatePicker
|
||||
- MonthPicker
|
||||
- RangePicker
|
||||
- WeekPicker
|
||||
- YearPicker
|
||||
- QuarterPicker
|
||||
|
||||
目前已经支持 4 种类型的值:
|
||||
|
||||
- DateTime
|
||||
- DateTimeOffset
|
||||
- DateOnly
|
||||
- TimeOnly
|
||||
|
||||
### 国际化配置
|
||||
|
||||
使用 System.Globalization.CultureInfo 属性为 DatePicker 配置国际化选项。暂时只提供 en-US 和 zh-CN 两种内置方案。
|
||||
|
||||
### 共同的 API
|
||||
|
||||
以下 API 为 DatePicker、YearPicker、MonthPicker、RangePicker, WeekPicker 共享的 API。
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| allowClear（TODO） | 是否显示清除按钮 | boolean | true | |
|
||||
| ChangeOnClose | 关闭时绑定输入值，为 false 时需要按回车键 | boolean | false | |
|
||||
| autoFocus | 自动获取焦点 | boolean | false | |
|
||||
| BoundaryAdjustMode | `Dropdown` adjustment strategy (when for example browser resize is happening) | TriggerBoundaryAdjustMode | TriggerBoundaryAdjustMode.InView |
|
||||
| className | 选择器 className | string | '' | |
|
||||
| dateRender | 自定义日期单元格的内容 | function(currentDate: moment, today: moment) => React.ReactNode | - | |
|
||||
| disabled | 禁用 | boolean | false | |
|
||||
| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无 | |
|
||||
| dropdownClassName | 额外的弹出日历 className | string | - | |
|
||||
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 | |
|
||||
| locale（TODO） | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | |
|
||||
| mode（TODO） | 日期面板的状态（[设置后无法选择年份/月份？](/docs/react/faq#当我指定了-DatePicker/RangePicker-的-mode-属性后，点击后无法选择年份/月份？)） | `time` \| `date` \| `month` \| `year` \| `decade` | - | |
|
||||
| open | 控制弹层是否展开 | boolean | - | |
|
||||
| picker | 设置选择器类型 | `date` \| `week` \| `month` \| `quarter` (4.1.0) \| `year` | `date` | |
|
||||
| placeholder | 输入框提示文字 | string\|RangePicker\[] | - | |
|
||||
| placement | 选择框弹出的位置 | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft | |
|
||||
| popupStyle | 额外的弹出日历样式 | CSSProperties | {} | |
|
||||
| size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | `large` \| `middle` \| `small` | 无 | |
|
||||
| bordered | 是否有边框 | Boolean | true | |
|
||||
| SuffixIcon | 自定义的选择框后缀图标 | RenderFragment | - | |
|
||||
| style | 自定义输入框样式 | CSSProperties | {} | |
|
||||
| onOpenChange | 弹出日历和关闭日历的回调 | function(open) | 无 | |
|
||||
| onPanelChange | 日历面板切换的回调 | function(value, mode) | - | |
|
||||
| OnClearClick | 清除按钮点击时的回调 | Action | - | |
|
||||
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |
|
||||
| Mask | 指定输入格式，可使输入自动识别为时间值 | string | - | |
|
||||
|
||||
### 共同的方法
|
||||
|
||||
| 名称 | 描述 | 版本 |
|
||||
| ------- | -------- | ---- |
|
||||
| blur() | 移除焦点 | |
|
||||
| focus() | 获取焦点 | |
|
||||
|
||||
### DatePicker
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultValue | 默认日期，如果开始时间或结束时间为 `null` 或者 `undefined`，日期范围将是一个开区间 | [moment](http://momentjs.com/) | 无 | |
|
||||
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | 无 | |
|
||||
| disabledTime | 不可选择的时间 | function(date) | 无 | |
|
||||
| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [moment.js](http://momentjs.com/) | string \| string[] | "YYYY-MM-DD" | |
|
||||
| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | |
|
||||
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) | |
|
||||
| showTime.defaultValue（TODO） | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() | |
|
||||
| showToday | 是否展示“今天”按钮 | boolean | true | |
|
||||
| value | 日期 | [moment](http://momentjs.com/) | 无 | |
|
||||
| onChange | 时间发生变化的回调 | function(date: moment, dateString: string) | 无 | |
|
||||
| onOk | 点击确定按钮的回调 | function() | - | |
|
||||
| onPanelChange | 日期面板变化时的回调 | function(value, mode) | - | |
|
||||
|
||||
### YearPicker
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | 无 | |
|
||||
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | 无 | |
|
||||
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY" | |
|
||||
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
||||
| value | 日期 | [moment](http://momentjs.com/) | 无 | |
|
||||
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - | |
|
||||
|
||||
### QuarterPicker
|
||||
|
||||
`4.1.0` 新增。
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | 无 | |
|
||||
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | 无 | |
|
||||
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-\QQ" | |
|
||||
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
||||
| value | 日期 | [moment](http://momentjs.com/) | 无 | |
|
||||
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - | |
|
||||
|
||||
### MonthPicker
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | 无 | |
|
||||
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | 无 | |
|
||||
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM" | |
|
||||
| monthCellRender | 自定义的月份内容渲染方法 | function(date, locale): ReactNode | - | |
|
||||
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
||||
| value | 日期 | [moment](http://momentjs.com/) | 无 | |
|
||||
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - | |
|
||||
|
||||
### WeekPicker
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | |
|
||||
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | 无 | |
|
||||
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-wo" | |
|
||||
| value | 日期 | [moment](http://momentjs.com/) | - | |
|
||||
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - | |
|
||||
| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | |
|
||||
|
||||
### RangePicker
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| allowEmpty（TODO） | 允许起始项部分为空 | \[boolean, boolean] | \[false, false] | |
|
||||
| defaultValue | 默认日期 | [moment](http://momentjs.com/)\[] | 无 | |
|
||||
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/)\[] | 无 | |
|
||||
| disabled | 禁用起始项 | `[boolean, boolean]` | 无 | |
|
||||
| disabledTime | 不可选择的时间 | function(dates: \[moment, moment\], partial: `'start'|'end'`) | 无 | |
|
||||
| format | 展示的日期格式 | string | "YYYY-MM-DD HH:mm:ss" | |
|
||||
| ranges（TODO） | 预设时间范围快捷选择 | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | 无 | |
|
||||
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
||||
| separator（TODO） | 设置分隔符 | string | '~' | |
|
||||
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) | |
|
||||
| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | \[moment(), moment()] | |
|
||||
| value | 日期 | [moment](http://momentjs.com/)\[] | 无 | |
|
||||
| onCalendarChange（TODO） | 待选日期发生变化的回调 | function(dates: \[moment, moment\], dateStrings: \[string, string\]) | 无 | |
|
||||
| onChange | 日期范围发生变化的回调 | function(dates: \[moment, moment\], dateStrings: \[string, string\]) | 无 | |
|
||||
|
||||
<style>
|
||||
.code-box-demo .ant-picker {
|
||||
margin: 0 8px 12px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
## FAQ
|
||||
|
||||
- [当我指定了 DatePicker/RangePicker 的 mode 属性后，点击后无法选择年份/月份？](/docs/react/faq#当我指定了-DatePicker/RangePicker-的-mode-属性后，点击后无法选择年份/月份？)
|
||||
|
||||
- [如何在 DatePicker 中使用自定义日期库（如 dayjs ）](/docs/react/replace-moment#DatePicker)
|
||||
@ -0,0 +1,13 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Display
|
||||
title: Descriptions
|
||||
cols: 1
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/MjtG9_FOI/Descriptions.svg
|
||||
---
|
||||
|
||||
Display multiple read-only fields in groups.
|
||||
|
||||
## When To Use
|
||||
|
||||
Commonly displayed on the details page.
|
||||
@ -0,0 +1,14 @@
|
||||
---
|
||||
category: Components
|
||||
type: 数据展示
|
||||
title: Descriptions
|
||||
subtitle: 描述列表
|
||||
cols: 1
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/MjtG9_FOI/Descriptions.svg
|
||||
---
|
||||
|
||||
成组显示多个只读字段。
|
||||
|
||||
## 何时使用
|
||||
|
||||
常见于详情页的信息展示。
|
||||
@ -0,0 +1,27 @@
|
||||
---
|
||||
category: Components
|
||||
type: Layout
|
||||
title: Divider
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/5swjECahe/Divider.svg
|
||||
---
|
||||
|
||||
A divider line separates different content.
|
||||
|
||||
## When To Use
|
||||
|
||||
- Divide sections of article.
|
||||
- Divide inline text and links such as the operation column of table.
|
||||
|
||||
|
||||
## API
|
||||
|
||||
|
||||
|
||||
| Property | Description | Type | Default Value |
|
||||
| --- | --- | --- | --- |
|
||||
| Dashed | whether line is dashed| boolean |false|
|
||||
| Orientation | position of title inside divider `left`, `right`, `center` | string |- |
|
||||
| Style |style object of container| CSS properties | - |
|
||||
| Type |direction type of divider| string | - |
|
||||
| Plain |divider text show as plain style| boolean | - |
|
||||
|
||||
@ -0,0 +1,27 @@
|
||||
---
|
||||
category: Components
|
||||
type: 布局
|
||||
title: Divider
|
||||
subtitle: 分割线
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/5swjECahe/Divider.svg
|
||||
---
|
||||
|
||||
区隔内容的分割线。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 对不同章节的文本段落进行分割。
|
||||
- 对行内文字/链接进行分割，例如表格的操作列。
|
||||
|
||||
|
||||
## API
|
||||
|
||||
时间轴
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------- | -------------------------------------------- | ------------- | --------- |
|
||||
| Dashed | 是否虚线| boolean |false|
|
||||
| Orientation | 分割线标题的位置 `left`, `right`, `center` | string |- |
|
||||
| Style | 分割线样式对象| CSS properties | - |
|
||||
| Type | 水平还是垂直类型 `horizontal` or `vertical`| string | - |
|
||||
| Plain | 文字是否显示为普通正文样式| boolean | - |
|
||||
@ -0,0 +1,86 @@
|
||||
---
|
||||
category: Components
|
||||
type: Feedback
|
||||
title: Drawer
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/7z8NJQhFb/Drawer.svg
|
||||
---
|
||||
|
||||
A panel which slides in from the edge of the screen.
|
||||
|
||||
## When To Use
|
||||
|
||||
A Drawer is a panel that is typically overlaid on top of a page and slides in from the side.
|
||||
It contains a set of information or actions.
|
||||
Since the user can interact with the Drawer without leaving the current page,
|
||||
tasks can be achieved more efficiently within thesame context.
|
||||
|
||||
- Use a Form to create or edit a set of information.
|
||||
- Processing subtasks. When subtasks are too heavy for a Popover and we still want to keep the subtasks in the context of the main task,
|
||||
Drawer comes very handy.
|
||||
- When the same Form is needed in multiple places.
|
||||
|
||||
## API
|
||||
|
||||
### Drawer
|
||||
|
||||
| Property | Description | Type | Default Value |
|
||||
| ------------- | ---------------------------------------------------------------------------------------------- | -------------- | ------------- |
|
||||
| Title | the title for drawer | string or slot | - |
|
||||
| BodyStyle | Style of the drawer content part | object | - |
|
||||
| HeaderStyle | Style of the header content part | object | - |
|
||||
| Closable | Whether a close (x) button is visible on top right of the Drawer dialog or not. | boolean | true |
|
||||
| ChildContent | Subcomponent | RenderFragment | - |
|
||||
| Content | Content for Drawer. When given with ChildContent this is shown above ChildContent. | OneOf<RenderFragment, string> | - |
|
||||
| MaskClosable | Clicking on the mask (area outside the Drawer) will close the Drawer or not. | boolean | true |
|
||||
| Mask | Whether to show mask or not. When true the area around the Drawer will darken when Visible. | boolean | true |
|
||||
| Placement | The placement of the Drawer, option could be `left` , `top`,`right`,`bottom` | string | `right` |
|
||||
| Width | Width of the Drawer. Only used when placement is 'left' or 'right'. | int | 256 |
|
||||
| Height | Height of the Drawer. Only used when Placement is 'top' or 'bottom' | int | 256 |
|
||||
| ZIndex | The z-index of the Drawer. | int | 1000 |
|
||||
| OffsetX | The the X coordinate offset(px). Only used when placement is `'left'` or `'right'`. | int | 0 |
|
||||
| OffsetY | The the Y coordinate offset(px). Only used when placement is `'top'` or `'bottom'`. | int | 0 |
|
||||
| Visible | Whether the Drawer dialog is visible or not. | boolean | - |
|
||||
| Keyboard | Whether support press esc to close. **Not currently implemented** | boolean | true |
|
||||
| Handler | Content that renders as a sibling to the content of the Drawer | RenderFragment | - |
|
||||
| OnClose | Specify a callback that will be called when a user clicks mask, close button or Cancel button. | EventCallback | - |
|
||||
| OnOpen | Specify a callback that will be called after drawer rendered | Func<Task> | - |
|
||||
| MaskStyle | Style for Drawer's mask element. | string | - |
|
||||
| BodyStyle | Style of the drawer content part | string | - |
|
||||
| WrapClassName | The class name of the container of the Drawer dialog. | string | - |
|
||||
|
||||
### DrawerService
|
||||
|
||||
| Property | Description | Type | Return Value |
|
||||
| ----------- | ------------------------- | ------------------------------- | -------------- |
|
||||
| CreateAsync | create and open an Drawer | `DrawerConfig` | `DrawerRef` |
|
||||
| CreateAsync | create and open an Drawer | `DrawerConfig` , TContentParams | `DrawerRef<R>` |
|
||||
|
||||
### DrawerOptions
|
||||
|
||||
| Property | Description | Type | Default Value |
|
||||
| ----------------- | ------------------------------------------------------------------------------- | ---------------------------------------- | ------------- |
|
||||
| Content | The drawer body content. | `OneOf<RenderFragment, string>` | - |
|
||||
| ContentParams | The component inputs the param / The Template context. | `D` | - |
|
||||
| Closable | Whether a close (x) button is visible on top right of the Drawer dialog or not. | `boolean` | `true` |
|
||||
| MaskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | `boolean` | `true` |
|
||||
| Mask | Whether to show mask or not. | `boolean` | `true` |
|
||||
| CloseOnNavigation | Whether to close the drawer when the navigation history changes | `boolean` | `true` |
|
||||
| Keyboard | Whether to support keyboard esc off | `boolean` | `true` |
|
||||
| MaskStyle | Style for Drawer's mask element. | `string` | `{}` |
|
||||
| BodyStyle | Body style for Drawer body element. Such as height, padding etc. | `string` | `{}` |
|
||||
| HeaderStyle | Header style for Drawer header element. Such as height, padding etc. | `string` | `{}` |
|
||||
| Title | The title for Drawer. | `OneOf<RenderFragment, string>` | - |
|
||||
| Width | Width of the Drawer dialog. | `int` | `256` |
|
||||
| Height | Height of the Drawer dialog, only when placement is `'top'` or `'bottom'`. | `int` | `256` |
|
||||
| WrapClassName | The class name of the container of the Drawer dialog. | `string` | - |
|
||||
| ZIndex | The `z-index` of the Drawer. | `int` | `1000` |
|
||||
| Placement | The placement of the Drawer. | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` |
|
||||
| OffsetX | The the X coordinate offset(px), only when placement is `'left'` or `'right'`. | `int` | `0` |
|
||||
| OffsetY | The the Y coordinate offset(px), only when placement is `'top'` or `'bottom'`. | `int` | `0` |
|
||||
|
||||
### DrawerRef
|
||||
|
||||
| Property | Description | Type |
|
||||
| ---------- | ----------------- | ---- |
|
||||
| CloseAsync | close the drawer. | |
|
||||
| OpenAsync | open the drawer. | |
|
||||
@ -0,0 +1,81 @@
|
||||
---
|
||||
category: Components
|
||||
type: 反馈
|
||||
title: Drawer
|
||||
subtitle: 抽屉
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/7z8NJQhFb/Drawer.svg
|
||||
---
|
||||
|
||||
屏幕边缘滑出的浮层面板。
|
||||
|
||||
## 何时使用
|
||||
|
||||
抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到到原任务。
|
||||
|
||||
- 当需要一个附加的面板来控制父窗体内容，这个面板在需要时呼出。比如，控制界面展示样式，往界面中添加内容。
|
||||
- 当需要在当前任务流中插入临时任务，创建或预览附加内容。比如展示协议条款，创建子对象。
|
||||
|
||||
## API
|
||||
|
||||
### Drawer
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------- | ------------------------------------------------------- | -------------- | ------- |
|
||||
| Title | 抽屉的标题 | OneOf<RenderFragment, 字符串> | - |
|
||||
| Closable | 在抽屉对话框的右上角是否可见关闭 (x) 按钮。| 布尔值 | 真实 |
|
||||
| ChildContent | 子组件 | 渲染片段 | - |
|
||||
| Content | 抽屉的内容。当与 ChildContent 一起给出时，这显示在 ChildContent 上方。| OneOf<RenderFragment, 字符串> | - |
|
||||
| MaskClosable | 单击遮罩（抽屉外区域）将关闭或关闭抽屉。| 布尔值 | 真实 |
|
||||
| Mask | 是否显示面具。当为真时，抽屉周围的区域在可见时会变暗。| 布尔值 | 真实 |
|
||||
| Placement | 抽屉的位置，选项可以是`left`，`top`，`right`，`bottom` | 字符串 | `正确` |
|
||||
| Width | 抽屉的宽度。仅在放置为“左”或“右”时使用。| 整数 | 256 |
|
||||
| Height | 抽屉高度。仅在 Placement 为“top”或“bottom”时使用 | 整数 | 256 |
|
||||
| ZIndex | 抽屉的 z-index。| 整数 | 1000 |
|
||||
| OffsetX | X 坐标偏移量(px)。仅在放置为“左”或“右”时使用。| 整数 | 0 |
|
||||
| OffsetY | Y 坐标偏移量(px)。仅在放置为“顶部”或“底部”时使用。| 整数 | 0 |
|
||||
| Visible | 抽屉对话框是否可见。| 布尔值 | - |
|
||||
| Keyboard | 是否支持按esc关闭。**目前未实施** | 布尔值 | 真实 |
|
||||
| Handler | 呈现为抽屉内容的兄弟的内容 | 渲染片段 | - |
|
||||
| OnClose | 指定当用户单击掩码、关闭按钮或取消按钮时将调用的回调。| 事件回调 | - |
|
||||
| OnOpen | 指定将在抽屉呈现后调用的回调 | 函数<任务> | - |
|
||||
| MaskStyle | 抽屉遮罩元素的样式。| 字符串 | - |
|
||||
| HeaderStyle | 可用于设置 Drawer 标题部分的样式 | string | - |
|
||||
| BodyStyle | 抽屉内容部分的样式| 字符串 | - |
|
||||
| WrapClassName | Drawer 对话框的容器的类名。| 字符串 | - |
|
||||
|
||||
### DrawerService
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回 |
|
||||
| ----------- | --------------------- | ------------------------------- | -------------- |
|
||||
| CreateAsync | 创建并打开一个 Drawer | `DrawerConfig` | `DrawerRef` |
|
||||
| CreateAsync | 创建并打开一个 Drawer | `DrawerConfig` , TContentParams | `DrawerRef<R>` |
|
||||
|
||||
### DrawerOptions
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ----------------- | ------------------------------------------------------- | ---------------------------------------- | --------- |
|
||||
| Content | Drawer body 的内容 | `OneOf<RenderFragment, string>` | - |
|
||||
| ContentParams | 内容组件的输入参数 / Template 的 context | `D` | - |
|
||||
| Closable | 是否显示右上角的关闭按钮 | `boolean` | `true` |
|
||||
| MaskClosable | 点击蒙层是否允许关闭 | `boolean` | `true` |
|
||||
| Mask | 是否展示遮罩 | `boolean` | `true` |
|
||||
| CloseOnNavigation | 导航历史变化时是否关闭抽屉组件 | `boolean` | `true` |
|
||||
| Keyboard | 是否支持键盘 esc 关闭 | `boolean` | `true` |
|
||||
| MaskStyle | 遮罩样式 | `string` | `{}` |
|
||||
| BodyStyle | Drawer body 样式 | `string` | `{}` |
|
||||
| HeaderStyle | 可用于设置 Drawer 标题部分的样式 | `string` | - |
|
||||
| Title | 标题 | `OneOf<RenderFragment, string>` | - |
|
||||
| Width | 宽度 | `int` | `256` |
|
||||
| Height | 高度, 只在方向为 `'top'`或`'bottom'` 时生效 | `int` | `256` |
|
||||
| WrapClassName | 对话框外层容器的类名 | `string` | - |
|
||||
| ZIndex | 设置 Drawer 的 `z-index` | `int` | `1000` |
|
||||
| Placement | 抽屉的方向 | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` |
|
||||
| OffsetX | X 轴方向的偏移量，只在方向为 `'left'`或`'right'` 时生效 | `int` | `0` |
|
||||
| OffsetY | Y 轴方向的偏移量，只在方向为 `'top'`或`'bottom'` 时生效 | `int` | `0` |
|
||||
|
||||
### DrawerRef
|
||||
|
||||
| 名称 | 说明 | 类型 |
|
||||
| ---------- | ----------- | ---- |
|
||||
| CloseAsync | 关闭 Drawer | |
|
||||
| OpenAsync | 打开 Drawer | |
|
||||
@ -0,0 +1,71 @@
|
||||
---
|
||||
category: Components
|
||||
type: Navigation
|
||||
title: Dropdown
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
|
||||
---
|
||||
|
||||
A dropdown list.
|
||||
|
||||
## When To Use
|
||||
|
||||
When there are more than a few options to choose from, you can wrap them in a `Dropdown`. By hovering or clicking on the trigger, a dropdown menu will appear, which allows you to choose an option and execute the relevant action.
|
||||
|
||||
## Two types
|
||||
|
||||
There are 2 rendering approaches for `Dropdown`:
|
||||
1. Wraps child element (content of the `Dropdown`) with a `<div>` (default approach).
|
||||
2. Child element is not wrapped with anything. This approach requires usage of `<Unbound>` tag inside `<Dropdown>` and depending on the child element type (please refer to the first example):
|
||||
- html tag: has to have its `@ref` set to `@context.Current`
|
||||
- `Ant Design Blazor` component: has to have its `RefBack` attribute set to `@context`.
|
||||
|
||||
## API
|
||||
|
||||
### Common API
|
||||
|
||||
| Property | Description | Type | Default Value | Version
|
||||
| --- | --- | --- | --- |
|
||||
| Arrow | Whether the dropdown arrow should be visible | boolean | false | |
|
||||
| ArrowPointAtCenter | Whether the dropdown arrow should be visible and point at center | boolean | false | |
|
||||
| BoundaryAdjustMode | `Dropdown` adjustment strategy (when for example browser resize is happening) | TriggerBoundaryAdjustMode | TriggerBoundaryAdjustMode.InView |
|
||||
| ChildContent | `Dropdown` trigger (link, button, etc) | RenderFragment | - |
|
||||
| Class | Specifies one or more class names for an DOM element. | string | - |
|
||||
| ComplexAutoCloseAndVisible | Both auto-off and Visible control close | bool | false |
|
||||
| Disabled | Whether the `Dropdown` is disabled. | bool | false |
|
||||
| Id | (not used in Unbound) Id of the wrapping div. | string | - |
|
||||
| InlineFlexMode | (not used in Unbound) Sets wrapping div style to `display: inline-flex;`. | bool | false |
|
||||
| IsButton | Behave like a button. For `DropdownButton` is always `true`. | bool | false |
|
||||
| OnClick | Callback when `Dropdown` is clicked | Action | - |
|
||||
| OnMaskClick | Callback - equivalent of OnMouseUp event on the `Dropdown` trigger. | Action | - |
|
||||
| OnMouseEnter | Callback when mouse enters `Dropdown` boundaries. | Action | - |
|
||||
| OnMouseLeave | Callback when mouse leaves `Dropdown` boundaries. | Action | - |
|
||||
| OnOverlayHidding | Callback when overlay is hiding. | Action<bool> | - |
|
||||
| OnVisibleChange | Callback when overlay visibility is changing. | Action<bool> | - |
|
||||
| Overlay | Overlay content (what will be rendered after `Dropdown` is triggered, the dropdown menu). | RenderFragment | - |
|
||||
| OverlayClassName | The class name of the dropdown root element | string | - |
|
||||
| OverlayEnterCls | Css class added to overlay when overlay is shown. | string | - |
|
||||
| OverlayHiddenCls | Css class added to overlay when overlay is hidden. | string | - |
|
||||
| OverlayLeaveCls | Css class added to overlay when overlay is hiding. | string | - |
|
||||
| OverlayStyle | The style of the dropdown root element. | string | - |
|
||||
| Placement | The position of the `Dropdown` overlay relative to the target, which can be one of `Top` `Left` `Right` `Bottom` `TopLeft` `TopRight` `BottomLeft` `BottomRight` `LeftTop` `LeftBottom` `RightTop` `RightBottom` | PlacementType | `PlacementType.BottomLeft` | |
|
||||
| PlacementCls | Override default placement class which is based on `Placement` parameter. | string | - |
|
||||
| PopupContainerSelector | Define what is going to be the container of the overlay. Example use case: when overlay has to be contained in a scrollable area. | string | "body" |
|
||||
| Style | (not used in Unbound) Style of the wrapping div. | string | - |
|
||||
| Trigger | `Dropdown` trigger mode. Could be multiple by passing an array | TriggerType[] | `TriggerType.Hover` | |
|
||||
| TriggerReference | Manually set reference to element triggering `Dropdown`. | ElementReference | - | |
|
||||
| Unbound | ChildElement with `ElementReference` set to avoid wrapping div. | RenderFragment<ForwardRef> | - |
|
||||
| Visible | Whether the `Dropdown` menu is currently visible. | bool | false |
|
||||
|
||||
### DropdownButton
|
||||
| Property | Description | Type | Default Value | Version
|
||||
| --- | --- | --- | --- |
|
||||
| Block | Option to fit button width to its parent width | bool | false | 0.9
|
||||
| ButtonsRender |Fully customizable button. | Func<RenderFragment, RenderFragment, RenderFragment> | - |
|
||||
| ButtonsClass | Allows to set each button's css class either to the same string or separately. | OneOf<string, (string LeftButton, string RightButton)> | - | 0.9
|
||||
| ButtonsStyle | Allows to set each button's style either to the same string or separately. | OneOf<string, (string LeftButton, string RightButton)> | - | 0.9
|
||||
| Danger | Set the danger status of button | bool | false | 0.9
|
||||
| Ghost | Make background transparent and invert text and border colors | bool | false | 0.9
|
||||
| Icon | Icon (appears on the right) | string | `ellipsis` |
|
||||
| Loading | Show loading indicator. You have to write the loading logic on your own. | bool | false | 0.9
|
||||
| Size | Size of the button, the same as [`Button`](en-US/components/button) | AntSizeLDSType | `AntSizeLDSType.Default` |
|
||||
| Type | Type of the button, the same as [`Button`](en-US/components/button). Left and right button type can be set independently. | OneOf<string, (string LeftButton, string RightButton)> | `ButtonType.Default` | 0.9
|
||||
@ -0,0 +1,72 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 下拉菜单
|
||||
type: 导航
|
||||
title: Dropdown
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
|
||||
---
|
||||
|
||||
向下弹出的列表。
|
||||
|
||||
## 何时使用
|
||||
|
||||
当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。
|
||||
|
||||
## Two types
|
||||
|
||||
There are 2 rendering approaches for `Dropdown`:
|
||||
1. Wraps child element (content of the `Dropdown`) with a `<div>` (default approach).
|
||||
2. Child element is not wrapped with anything. This approach requires usage of `<Unbound>` tag inside `<Dropdown>` and depending on the child element type (please refer to the first example):
|
||||
- html tag: has to have its `@ref` set to `@context.Current`
|
||||
- `Ant Design Blazor` component: has to have its `RefBack` attribute set to `@context`.
|
||||
|
||||
## API
|
||||
|
||||
### Common API
|
||||
|
||||
| Property | Description | Type | Default Value | Version
|
||||
| --- | --- | --- | --- |
|
||||
| Arrow | 下拉框箭头是否显示 | boolean | false | |
|
||||
| ArrowPointAtCenter | 下拉框箭头是否显示并且居中 | boolean | false | |
|
||||
| BoundaryAdjustMode | `Dropdown` adjustment strategy (when for example browser resize is happening) | TriggerBoundaryAdjustMode | TriggerBoundaryAdjustMode.InView |
|
||||
| ChildContent | `Dropdown` trigger (link, button, etc) | RenderFragment | - |
|
||||
| Class | Specifies one or more class names for an DOM element. | string | - |
|
||||
| ComplexAutoCloseAndVisible | 自动关闭功能和Visible参数同时生效 | bool | false |
|
||||
| Disabled | 菜单是否禁用 | bool | false |
|
||||
| Id | (not used in Unbound) Id of the wrapping div. | string | - |
|
||||
| InlineFlexMode | (not used in Unbound) Sets wrapping div style to `display: inline-flex;`. | bool | false |
|
||||
| IsButton | Behave like a button. For `DropdownButton` is always `true`. | bool | false |
|
||||
| OnClick | Callback when `Dropdown` is clicked | Action | - |
|
||||
| OnMaskClick | Callback - equivalent of OnMouseUp event on the `Dropdown` trigger. | Action | - |
|
||||
| OnMouseEnter | Callback when mouse enters `Dropdown` boundaries. | Action | - |
|
||||
| OnMouseLeave | Callback when mouse leaves `Dropdown` boundaries. | Action | - |
|
||||
| OnOverlayHidding | Callback when overlay is hiding. | Action<bool> | - |
|
||||
| OnVisibleChange | Callback when overlay visibility is changing. | Action<bool> | - |
|
||||
| Overlay | Overlay content (what will be rendered after `Dropdown` is triggered, the dropdown menu). | RenderFragment | - |
|
||||
| OverlayClassName | 下拉根元素的类名称 | string | - |
|
||||
| OverlayEnterCls | Css class added to overlay when overlay is shown. | string | - |
|
||||
| OverlayHiddenCls | Css class added to overlay when overlay is hidden. | string | - |
|
||||
| OverlayLeaveCls | Css class added to overlay when overlay is hiding. | string | - |
|
||||
| OverlayStyle | 下拉根元素的样式 | string | - |
|
||||
| Placement | The position of the `Dropdown` overlay relative to the target, which can be one of `Top` `Left` `Right` `Bottom` `TopLeft` `TopRight` `BottomLeft` `BottomRight` `LeftTop` `LeftBottom` `RightTop` `RightBottom` | PlacementType | `PlacementType.BottomLeft` | |
|
||||
| PlacementCls | Override default placement class which is based on `Placement` parameter. | string | - |
|
||||
| PopupContainerSelector | Define what is going to be the container of the overlay. Example use case: when overlay has to be contained in a scrollable area. | string | "body" |
|
||||
| Style | (not used in Unbound) Style of the wrapping div. | string | - |
|
||||
| Trigger | `Dropdown` trigger mode. Could be multiple by passing an array | TriggerType[] | `TriggerType.Hover` | |
|
||||
| TriggerReference | Manually set reference to element triggering `Dropdown`. | ElementReference | - | |
|
||||
| Unbound | ChildElement with `ElementReference` set to avoid wrapping div. | RenderFragment<ForwardRef> | - |
|
||||
| Visible | 菜单是否显示 | bool | false |
|
||||
|
||||
### DropdownButton
|
||||
| Property | Description | Type | Default Value | Version
|
||||
| --- | --- | --- | --- |
|
||||
| Block | 将按钮宽度调整为其父宽度的选项 | bool | false | 0.9
|
||||
| ButtonsRender | 自定义左右两个按钮 | Func<RenderFragment, RenderFragment, RenderFragment> | - |
|
||||
| ButtonsClass | Allows to set each button's css class either to the same string or separately. | OneOf<string, (string LeftButton, string RightButton)> | - | 0.9
|
||||
| ButtonsStyle | Allows to set each button's style either to the same string or separately. | OneOf<string, (string LeftButton, string RightButton)> | - | 0.9
|
||||
| Danger | 设置危险按钮 | bool | false | 0.9
|
||||
| Ghost | 幽灵属性，使按钮背景透明 | bool | false | 0.9
|
||||
| Icon | 右侧的 icon | string | `ellipsis` |
|
||||
| Loading | 设置按钮载入状态 | bool | false | 0.9
|
||||
| Size | 按钮大小，和 [`Button`](zh-CN/components/button) 一致 | AntSizeLDSType | `AntSizeLDSType.Default` |
|
||||
| Type | Type of the button, the same as [`Button`](en-US/components/button). Left and right button type can be set independently. | OneOf<string, (string LeftButton, string RightButton)> | `ButtonType.Default` | 0.9
|
||||
@ -0,0 +1,15 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Display
|
||||
title: Empty
|
||||
cols: 1
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/MNbKfLBVb/Empty.svg
|
||||
---
|
||||
|
||||
Empty state placeholder.
|
||||
|
||||
## When To Use
|
||||
|
||||
- When there is no data provided, display for friendly tips.
|
||||
- User tutorial to create something in fresh new situation.
|
||||
|
||||
@ -0,0 +1,15 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 空状态
|
||||
type: 数据展示
|
||||
title: Empty
|
||||
cols: 1
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/MNbKfLBVb/Empty.svg
|
||||
---
|
||||
|
||||
空状态时的展示占位图。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 当目前没有数据时，用于显式的用户提示。
|
||||
- 初始化场景时的引导创建流程。
|
||||
37
site/AntDesign.Docs/Demos/Components/Flex/doc/index.en-US.md
Normal file
37
site/AntDesign.Docs/Demos/Components/Flex/doc/index.en-US.md
Normal file
@ -0,0 +1,37 @@
|
||||
---
|
||||
category: Components
|
||||
type: Layout
|
||||
title: Flex
|
||||
cols: 1
|
||||
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*SMzgSJZE_AwAAAAAAAAAAAAADrJ8AQ/original
|
||||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAAAAAAAAAAAADrJ8AQ/original
|
||||
tag: New
|
||||
---
|
||||
|
||||
Flex. Available since `0.17.0`.
|
||||
|
||||
## When To Use
|
||||
|
||||
- Good for setting spacing between elements.
|
||||
- Suitable for setting various horizontal and vertical alignments.
|
||||
|
||||
### Difference with Space component
|
||||
|
||||
- Space is used to set the spacing between inline elements. It will add a wrapper element for each child element for inline alignment. Suitable for equidistant arrangement of multiple child elements in rows and columns.
|
||||
- Flex is used to set the layout of block-level elements. It does not add a wrapper element. Suitable for layout of child elements in vertical or horizontal direction, and provides more flexibility and control.
|
||||
|
||||
|
||||
## API
|
||||
|
||||
> This component is available since `0.17.0`. The default behavior of Flex in horizontal mode is to align upward, In vertical mode, aligns the stretch, You can adjust this via properties.
|
||||
|
||||
| Property | Description | type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| vertical | Is direction of the flex vertical, use `flex-direction: column` | boolean | `false` | |
|
||||
| wrap | Set whether the element is displayed in a single line or in multiple lines | reference [flex-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) | nowrap | |
|
||||
| justify | Sets the alignment of elements in the direction of the main axis | reference [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) | normal | |
|
||||
| align | Sets the alignment of elements in the direction of the cross axis | reference [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) | normal | |
|
||||
| flex | flex CSS shorthand properties | reference [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) | normal | |
|
||||
| gap | Sets the gap between grids | `small` \| `middle` \| `large` \| string \| number | - | |
|
||||
| component | custom element type | React.ComponentType | `div` | |
|
||||
|
||||
40
site/AntDesign.Docs/Demos/Components/Flex/doc/index.zh-CN.md
Normal file
40
site/AntDesign.Docs/Demos/Components/Flex/doc/index.zh-CN.md
Normal file
@ -0,0 +1,40 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 弹性布局
|
||||
type: 布局
|
||||
title: Flex
|
||||
cols: 1
|
||||
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*SMzgSJZE_AwAAAAAAAAAAAAADrJ8AQ/original
|
||||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAAAAAAAAAAAADrJ8AQ/original
|
||||
tag: New
|
||||
---
|
||||
|
||||
弹性布局。自 `0.17.0` 版本开始提供该组件。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 适合设置元素之间的间距。
|
||||
- 适合设置各种水平、垂直对齐方式。
|
||||
|
||||
### 与 Space 组件的区别
|
||||
|
||||
- Space 为内联元素提供间距，其本身会为每一个子元素添加包裹元素用于内联对齐。适用于行、列中多个子元素的等距排列。
|
||||
- Flex 为块级元素提供间距，其本身不会添加包裹元素。适用于垂直或水平方向上的子元素布局，并提供了更多的灵活性和控制能力。
|
||||
|
||||
## 代码演示
|
||||
|
||||
|
||||
## API
|
||||
|
||||
> 自 `0.17.0` 版本开始提供该组件。Flex 组件默认行为在水平模式下，为向上对齐，在垂直模式下，为拉伸对齐，你可以通过属性进行调整。
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| vertical | flex 主轴的方向是否垂直，使用 `flex-direction: column` | boolean | `false` |
|
||||
| wrap | 设置元素单行显示还是多行显示 | 参考 [flex-wrap](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-wrap) | nowrap | |
|
||||
| justify | 设置元素在主轴方向上的对齐方式 | 参考 [justify-content](https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content) | normal | |
|
||||
| align | 设置元素在交叉轴方向上的对齐方式 | 参考 [align-items](https://developer.mozilla.org/zh-CN/docs/Web/CSS/align-items) | normal | |
|
||||
| flex | flex CSS 简写属性 | 参考 [flex](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex) | normal | |
|
||||
| gap | 设置网格之间的间隙 | `small` \| `middle` \| `large` \| string \| number | - | |
|
||||
| component | 自定义元素类型 | React.ComponentType | `div` | |
|
||||
|
||||
196
site/AntDesign.Docs/Demos/Components/Form/doc/index.en-US.md
Normal file
196
site/AntDesign.Docs/Demos/Components/Form/doc/index.en-US.md
Normal file
@ -0,0 +1,196 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Entry
|
||||
cols: 1
|
||||
title: Form
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
|
||||
---
|
||||
|
||||
High performance Form component with data scope management. Including data collection, verification, and styles.
|
||||
|
||||
## When to use
|
||||
|
||||
- When you need to create an instance or collect information.
|
||||
- When you need to validate fields in certain rules.
|
||||
|
||||
## API
|
||||
### Form
|
||||
| Name | Description | Type | Default Value |
|
||||
| --- | --- | --- | --- |
|
||||
| Autocomplete| Whether input elements can by default have their values automatically completed by the browser. | string | on \| off | off |
|
||||
| Layout | Form Layout | [FormLayout](https://github.com/ant-design-blazor/ant-design-blazor/blob/master/components/form/types/FormLayout.cs) | FormLayout.Horizontal |
|
||||
| LabelCol | label label layout, same as \<Col\> component, set span offset value | [ColLayoutParam](https://github.com/ant-design-blazor/ant-design-blazor/blob/master/components/form/ColLayoutParam.cs) |-|
|
||||
| LabelColSpan | Same as LabelCol.Span | int |-|
|
||||
| LabelColOffset | Same as LabelCol.Offset | int |-|
|
||||
| WrapperCol | When you need to set the layout style for the input control, use this attribute. The usage is the same as labelCol | [ColLayoutParam](https://github.com/ant-design-blazor/ant-design-blazor/blob/master/components/form/ColLayoutParam.cs) |-|
|
||||
| WrapperColSpan | Same as WrapperCol.Span | int |-|
|
||||
| WrapperColOffset | Same as WrapperCol.Offset | int |-|
|
||||
| Size | Set the size of the field component (antd component only) | small \| middle \| large | middle |
|
||||
| Name | The name of the form, which will be used as the prefix of the form field id. In static render mode, also as `FromName` parameter of [EditForm](https://github.com/dotnet/aspnetcore/blob/main/src/Components/Web/src/Forms/EditForm.cs#L96), specifying the Form Handler. | string |-|
|
||||
| Method | Http method used to submit form | string | get |
|
||||
| Model | Generic Object of Operation | T |-|
|
||||
| Loading | Is the form loading | bool | false |
|
||||
| Locale | Localization object | FormLocale | - |
|
||||
| OnFinish | Submit Event | EventCallback\<EditContext\> |-|
|
||||
| OnFinishFailed | Submission failure (verification failure) callback event | EventCallback\<EditContext\> |-|
|
||||
| ValidateOnChange | Whether to verify when changing | bool | false |
|
||||
| RequiredMark | Change how required/optional field labels are displayed on the form. | FormRequiredMark | FormRequiredMark.Required |
|
||||
|
||||
### FormItem
|
||||
| Name | Description | Type | Default Value |
|
||||
| --- | --- | --- | --- |
|
||||
| Label | **label** Label text | string | Display or DisplayName characteristics of the input component |
|
||||
| LabelTemplate | **label** Template | RenderFragment |-|
|
||||
| LabelCol | **label** label layout, same as \<Col\> component, set span offset value | [ColLayoutParam](https://github.com/ant-design-blazor/ant-design-blazor/blob/master/components/form/ColLayoutParam.cs) |-|
|
||||
| LabelAlign | **label** Label text alignment | left \| right | left |
|
||||
| LabelColSpan | Same as LabelCol.Span | int |-|
|
||||
| LabelColOffset | Same as LabelCol.Offset | int |-|
|
||||
| WrapperCol | When you need to set the layout style for the input control, use this attribute, the usage is the same as labelCol | [ColLayoutParam](https://github.com/ant-design-blazor/ant-design-blazor/blob/master/components/form/ColLayoutParam.cs) |-|
|
||||
| WrapperColSpan | Same as WrapperCol.Span | int |-|
|
||||
| WrapperColOffset | Same as WrapperCol.Offset | int |-|
|
||||
| NoStyle | No style when true, it is used as a pure field control | bool | false |
|
||||
| Required | Whether it is required or not, true will generate * sign after label | bool | Required feature of input binding attribute |
|
||||
| LabelStyle | **Label** Label Style | string |-|
|
||||
| Rules | Validation rules, set the validation logic of the field | [FormValidationRule[]](https://github.com/ant-design-blazor/ant-design-blazor/blob/master/components/form/Validate/Rule/FormValidationRule.cs) |-|
|
||||
| HasFeedback | Used in conjunction with the **validateStatus** property to display the verification status icon. It is recommended to use it only with the Input component | bool | false |
|
||||
| ValidateStatus | Validation status, if not set, it will be automatically generated according to validation rules | [FormValidateStatus](https://github.com/ant-design-blazor/ant-design-blazor/blob/master/components/form/FormValidateStatus.cs) | FormValidateStatus.Default |
|
||||
| Help | Prompt information | string | Automatically generated according to verification rules |
|
||||
|
||||
|
||||
### Rules
|
||||
Rules supports a config FormValidationRule[]
|
||||
|
||||
| Name | Description | Type |
|
||||
| --- | --- | --- |
|
||||
| DefaultField | Validate rule for all array elements. (FormItem not support now) | [FormValidationRule](en-US/components/form#Rule) |
|
||||
| OneOf | Whether the value is one of specified values. | object\[] |
|
||||
| Enum | The type of enum value, validte the value is one of the enum values | object\[] |
|
||||
| Fields | Validate rule for child elements, valid when `type` is `Array` or `Object`(FormItem not support now) | Dictionary<object, [FormValidationRule](en-US/components/form#Rule)> |
|
||||
| Len | Length of String, Number, Array | decimal |
|
||||
| Max | max length of `String`, `Number`, `Array` | decimal |
|
||||
| Message | Error message. Will auto generate by ValidateMessages(see below) if not provided | string |
|
||||
| Min | min length of `String`, `Number`, `Array` | decimal |
|
||||
| Pattern | Regex pattern | string |
|
||||
| Required | Required field | bool |
|
||||
| Transform | Transform value to the rule before validation | Func<object,object> |
|
||||
| Type | Normally `String` \|`Number` \|`Boolean` \|`Url` \| `Email`. | RuleFieldType |
|
||||
| ValidateTrigger | TODO | string \| string\[] |
|
||||
| Validator |Customize validation rule. Accept ValidationResult as return see [example](en-US/components/form#components-form-demo-dynamic-rule) | Func<FormValidationContext,ValidationResult> |
|
||||
|
||||
|
||||
### FormValidateErrorMessages
|
||||
|
||||
For the Form component's multiple validation Settings, such as the DataAnnotations, Rules, and Requireed parameter, the error message template is obtained by default from the globalization file built into the component library. The following customizations are also supported:
|
||||
|
||||
1. The default value of the globalized language of the component can be modified by the Locale property of the Form
|
||||
2. Implement the validation configuration using the DataAnnotations feature on the model, supporting the customization of ErrorMessage or ErrorMessageResourceName for modifying the feature.
|
||||
3. The validation configuration is implemented using the FormItem setting Rules, which are customized via the Message attribute in the FormValidationRule.
|
||||
4. Pass an error prompt template to a child component through the Form property in the ConfigProvider.
|
||||
|
||||
|
||||
Example of custom message templates for DataAnnotations:
|
||||
|
||||
```csharp
|
||||
public class Model
|
||||
{
|
||||
[MaxLength(12,ErrorMessage ="A maximum of 12 characters can be entered")]
|
||||
[DisplayName("User Name")]
|
||||
public string Username { get; set; }
|
||||
|
||||
[Required(ErrorMessageResourceName = nameof(Resources.App.PasswordValidation), ErrorMessageResourceType = typeof(Resources.App))]
|
||||
[Display(Name = nameof(Resources.App.Password), ResourceType = typeof(Resources.App))]
|
||||
[MaxLength(16)]
|
||||
public string Password { get; set; }
|
||||
}
|
||||
```
|
||||
|
||||
Example of modifying Locale:
|
||||
|
||||
```csharp
|
||||
@using AntDesign.Form.Locale
|
||||
|
||||
<Form Locale="locale" />;
|
||||
|
||||
@code
|
||||
{
|
||||
FormLocale locale = LocaleProvider.CurrentLocale.Form;
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
locale.DefaultValidateMessages.Required = "❌ {0} is required.";
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Example of setting the ConfigProvider:
|
||||
|
||||
```csharp
|
||||
//in App.Razor
|
||||
var validateMessages = new FormValidateErrorMessages {
|
||||
Required = "'{0}' is Required!",
|
||||
// ...
|
||||
};
|
||||
|
||||
var formConfig = new FormConfig {
|
||||
ValidateMessages = validateMessages
|
||||
}
|
||||
|
||||
<ConfigProvider Form="formConfig">
|
||||
<Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
|
||||
<Found Context="routeData">
|
||||
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
|
||||
</Found>
|
||||
<NotFound>
|
||||
<LayoutView Layout="@typeof(MainLayout)">
|
||||
<p>Sorry, there's nothing at this address.</p>
|
||||
</LayoutView>
|
||||
</NotFound>
|
||||
</Router>
|
||||
</ConfigProvider>;
|
||||
```
|
||||
|
||||
### GenerateFormItem
|
||||
FormItem can be automatically generated by the 'TItem' type. currently supports automatic generation for string, DateTime, number, and enum type members, Support automatic generation of nested types.
|
||||
> **Notice:** This feature is in iteration, and incompatible changes may occur in subsequent releases.
|
||||
|
||||
| Name | Description | Type | Default Value |
|
||||
| --- |---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------|------|
|
||||
| ValidateRules | A generic delegate with one parameters, where the first parameter is of type PropertyInfo, and the return value is of type FormValidationRule[]?. | Func<PropertyInfo, FormValidationRule[]?> | null |
|
||||
| Definitions | A generic delegate with two parameters, where the first parameter is of type PropertyInfo, the second parameter is of type TItem, and the return value is of type RenderFragment. | Func<PropertyInfo, TItem, RenderFragment>? | null |
|
||||
| NotGenerate | A generic delegate with two parameters, where the first parameter is of type PropertyInfo, the second parameter is of type TItem, and the return value is of type bool. If the delegate returns true, automatic generation will be skipped. | Func<PropertyInfo, TItem, bool>? | null |
|
||||
| SubformStyle | Nested form style, default to Collapse style, optional Block style.. | string | Collapse |
|
||||
|
||||
### Reference
|
||||
|
||||
IForm
|
||||
|
||||
| Name | Description |
|
||||
| ------------------------------------------------------------ | --------------------------------------- |
|
||||
| EditContext | Get the current EditContext from the Form. |
|
||||
| IsModified | Whether the form has been modified. |
|
||||
| Model | The data object that the form is bound to. |
|
||||
| Name | The name of the form. |
|
||||
| Reset() | Reset the values and validation messages of all fields. |
|
||||
| SetValidationMessages(string field, string[] errorMessages) | Set validation messages for a specific field. |
|
||||
| Submit() | Trigger `OnFinish` while all fields are valid, otherwise, trigger `OnFinishFailed`. |
|
||||
| Validate() | Validate all fields. |
|
||||
|
||||
|
||||
<style>
|
||||
.code-box-demo .ant-form:not(.ant-form-inline):not(.ant-form-vertical) {
|
||||
max-width: 600px;
|
||||
}
|
||||
.markdown.api-container table td:nth-of-type(4) {
|
||||
white-space: nowrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.site-form-item-icon {
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
[data-theme="dark"] .site-form-item-icon {
|
||||
color: rgba(255,255,255,.3);
|
||||
}
|
||||
</style>
|
||||
196
site/AntDesign.Docs/Demos/Components/Form/doc/index.zh-CN.md
Normal file
196
site/AntDesign.Docs/Demos/Components/Form/doc/index.zh-CN.md
Normal file
@ -0,0 +1,196 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 表单
|
||||
type: 数据录入
|
||||
cols: 1
|
||||
title: Form
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
|
||||
---
|
||||
|
||||
高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 用于创建一个实体或收集信息。
|
||||
- 需要对输入的数据类型进行校验时。
|
||||
|
||||
## API
|
||||
### Form
|
||||
| 名称 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| Autocomplete | 默认情况下，浏览器是否可以自动完成输入元素的值 | string | on \| off | off |
|
||||
| Layout | 表单布局 | [FormLayout](https://github.com/ant-design-blazor/ant-design-blazor/blob/master/components/form/types/FormLayout.cs) | FormLayout.Horizontal |
|
||||
| LabelCol | label 标签布局，同 \<Col\> 组件，设置 span offset 值 | [ColLayoutParam](https://github.com/ant-design-blazor/ant-design-blazor/blob/master/components/form/ColLayoutParam.cs) | - |
|
||||
| LabelColSpan | 等同于LabelCol.Span | int | - |
|
||||
| LabelColOffset | 等同于LabelCol.Offset | int | - |
|
||||
| WrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [ColLayoutParam](https://github.com/ant-design-blazor/ant-design-blazor/blob/master/components/form/ColLayoutParam.cs) | - |
|
||||
| WrapperColSpan | 等同于WrapperCol.Span | int | - |
|
||||
| WrapperColOffset | 等同于WrapperCol.Offset | int | - |
|
||||
| Size | 设置字段组件的尺寸（仅限 antd 组件）| small \| middle \| large | middle |
|
||||
| Name | 表单名称，会作为表单字段 id 前缀使用。在静态渲染模式中，还作为 [EditForm](https://github.com/dotnet/aspnetcore/blob/main/src/Components/Web/src/Forms/EditForm.cs#L96) 的 `FromName` 属性，指定 Form Handler。 | string | - |
|
||||
| Model | 操作的泛型对象 | T | - |
|
||||
| Method | 提交表单的 Http 方法 | string | get |
|
||||
| Loading | 表单是否处于加载中 | bool | false |
|
||||
| Locale | 语言设置 | FormLocale | - |
|
||||
| OnFinish | 提交事件 | EventCallback\<EditContext\> | - |
|
||||
| OnFinishFailed | 提交失败(校验失败)回调事件 | EventCallback\<EditContext\> | - |
|
||||
| ValidateOnChange | 是否在更改时校验 | bool | false |
|
||||
| RequiredMark | 更改必填/可选字段标签在表单上的显示方式。 | FormRequiredMark | FormRequiredMark.Required |
|
||||
|
||||
|
||||
### FormItem
|
||||
| 名称 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| Label | **label** 标签的文本 | string | input组件的Display或者DisplayName特性 |
|
||||
| LabelTemplate | **label**模板 | RenderFragment | - |
|
||||
| LabelCol | **label** 标签布局，同 \<Col\> 组件，设置 span offset 值 | [ColLayoutParam](https://github.com/ant-design-blazor/ant-design-blazor/blob/master/components/form/ColLayoutParam.cs) | - |
|
||||
| LabelAlign | **label** 标签文本对齐方式 | left \| right | left |
|
||||
| LabelColSpan | 同LabelCol.Span | int | - |
|
||||
| LabelColOffset | 同LabelCol.Offset | int | - |
|
||||
| WrapperCol |需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [ColLayoutParam](https://github.com/ant-design-blazor/ant-design-blazor/blob/master/components/form/ColLayoutParam.cs) | - |
|
||||
| WrapperColSpan | 同WrapperCol.Span | int | - |
|
||||
| WrapperColOffset | 同WrapperCol.Offset | int | - |
|
||||
| NoStyle | 为 true 时不带样式，作为纯字段控件使用 | bool | false |
|
||||
| Required | 是否为必填项,true会在label后面生成 * 号 | bool | input绑定属性的Required特性 |
|
||||
| LabelStyle | **Label**标签的Style | string | - |
|
||||
| Rules | 校验规则,设置字段的校验逻辑 | [FormValidationRule[]](https://github.com/ant-design-blazor/ant-design-blazor/blob/master/components/form/Validate/Rule/FormValidationRule.cs) | - |
|
||||
| HasFeedback | 配合 **validateStatus** 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | bool | false |
|
||||
| ValidateStatus | 校验状态，如不设置，则会根据校验规则自动生成 | [FormValidateStatus](https://github.com/ant-design-blazor/ant-design-blazor/blob/master/components/form/FormValidateStatus.cs) | FormValidateStatus.Default |
|
||||
| Help | 提示信息 | string | 根据校验规则自动生成 |
|
||||
|
||||
### Rules
|
||||
|
||||
Rules 支持接收 FormValidationRule[] 进行配置
|
||||
|
||||
| 名称 | 说明 | 类型 |
|
||||
| --- | --- | --- |
|
||||
| DefaultField | 仅在 `Type` 为 `Array` 类型时有效，用于指定数组元素的校验规则（FormItem暂不支持） | [FormValidationRule](zh-CN/components/form#Rules) |
|
||||
| OneOf | 验证值是否包含在指定的多个值中的一个 | object\[] |
|
||||
| Enum | 与 OneOf 一样，验证值是否包含在指定枚举类型的多个枚举值中的一个 | Type |
|
||||
| Fields | 仅在 `Type` 为 `Array` 或 `Object` 类型时有效，用于指定子元素的校验规则（FormItem暂不支持） | Dictionary<object, [FormValidationRule](zh-CN/components/form#Rules)> |
|
||||
| Len | 绑定值类型是 string 时为字符串长度；数值类型时为确定数字； Array 类型时为数组长度 | decimal |
|
||||
| Max | 绑定值类型是 String 时为字符串最大长度；数值类型时为最大值；Array 类型时为数组最大长度 | decimal |
|
||||
| Message | 错误信息，不设置时会通过 ValidateMessages(查看下方)自动生成 | string |
|
||||
| Min | 绑定值类型是 String 时为字符串最小长度；数值类型类型时为最小值；Array 类型时为数组最小长度 | decimal |
|
||||
| Pattern | 正则表达式匹配 | string |
|
||||
| Required | 是否为必选字段 | bool |
|
||||
| Transform | 将字段值转换成目标值后进行校验 | Func<object,object> |
|
||||
| Type | 验证值类型，常见有 `String` \|`Number` \|`Boolean` \|`Url` \| `Email`。 | RuleFieldType |
|
||||
| ValidateTrigger | TODO | string \| string\[] |
|
||||
| Validator | 自定义校验，接收 ValidationResult 作为返回值。[示例](zh-CN/components/form#components-form-demo-dynamic-rule)参考 | Func<FormValidationContext,ValidationResult> |
|
||||
|
||||
### FormValidateErrorMessages
|
||||
|
||||
对于 Form 组件多种验证设置，如 DataAnnotations、Rules、Requireed 属性，默认都会从组件库内置的全球化文件中获取错误提示模板。也支持以下方式自定义：
|
||||
|
||||
1. 可通过 Form 的 Locale 属性修改该组件的全球化语言的默认值。
|
||||
2. 利用模型上 DataAnnotations 特性实现验证配置的，支持修改特性的 ErrorMessage 或 ErrorMessageResourceName 来自定义。
|
||||
3. 利用在 FormItem 设置 Rules 实现验证配置的，通过 FormValidationRule 中的 Message 属性来自定义。
|
||||
4. 通过 ConfigProvider 中的 Form 属性来给子组件传递错误提示模板。
|
||||
|
||||
DataAnnotations 自定义消息模板示例：
|
||||
|
||||
```csharp
|
||||
public class Model
|
||||
{
|
||||
[MaxLength(12,ErrorMessage ="最多只能输入12字符")]
|
||||
[DisplayName("User Name")]
|
||||
public string Username { get; set; }
|
||||
|
||||
[Required(ErrorMessageResourceName = nameof(Resources.App.PasswordValidation), ErrorMessageResourceType = typeof(Resources.App))]
|
||||
[Display(Name = nameof(Resources.App.Password), ResourceType = typeof(Resources.App))]
|
||||
[MaxLength(16)]
|
||||
public string Password { get; set; }
|
||||
}
|
||||
```
|
||||
|
||||
修改 Locale 示例：
|
||||
|
||||
```csharp
|
||||
@using AntDesign.Form.Locale
|
||||
|
||||
<Form Locale="locale" />;
|
||||
|
||||
@code
|
||||
{
|
||||
FormLocale locale = LocaleProvider.CurrentLocale.Form;
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
locale.DefaultValidateMessages.Required = "❌ {0} is required.";
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
设置 ConfigProvider 示例：
|
||||
```csharp
|
||||
//in App.Razor
|
||||
var validateMessages = new FormValidateErrorMessages {
|
||||
Required = "'{0}' is Required!",
|
||||
// ...
|
||||
};
|
||||
|
||||
var formConfig = new FormConfig {
|
||||
ValidateMessages = validateMessages
|
||||
}
|
||||
|
||||
<ConfigProvider Form="formConfig">
|
||||
<Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
|
||||
<Found Context="routeData">
|
||||
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
|
||||
</Found>
|
||||
<NotFound>
|
||||
<LayoutView Layout="@typeof(MainLayout)">
|
||||
<p>Sorry, there's nothing at this address.</p>
|
||||
</LayoutView>
|
||||
</NotFound>
|
||||
</Router>
|
||||
</ConfigProvider>;
|
||||
```
|
||||
|
||||
### GenerateFormItem
|
||||
可通过 `TItem` 类型自动生成表单元素。当前支持string、DateTime、number、enum类型成员自动生成，支持嵌套类型自动生成。
|
||||
> **注意:** 此功能正在迭代中，后续本版可能会存在不兼容的变更。
|
||||
|
||||
| 名称 | 说明 | 类型 | 默认值 |
|
||||
| --- |-------------------------------------------------------------------|-------------------------------------------|--|
|
||||
| ValidateRules | 一个单参数范型委托，第一个参数是熟悉PropertyInfo，返回值为FormValidationRule[]? | Func<PropertyInfo, FormValidationRule[]?> | null |
|
||||
| Definitions | 一个两参数范型委托，第一个参数是熟悉PropertyInfo，第二个参数是TItem, 返回值为RenderFragment | Func<PropertyInfo, TItem, RenderFragment>? | null |
|
||||
| NotGenerate | 一个两参数范型委托，第一个参数是熟悉PropertyInfo，第二个参数是TItem, 返回值为bool，返回true则不自动生成 | Func<PropertyInfo, TItem, bool>? | null |
|
||||
| SubformStyle | 嵌套表单风格，默认为Collapse风格，可选Block风格 | string | Collapse |
|
||||
|
||||
|
||||
### 引用实例
|
||||
|
||||
IForm
|
||||
|
||||
| Name | Description |
|
||||
| ----------------------------------------------------------- | --------------------------------------- |
|
||||
| EditContext | 获取 Form 当前的 EditContext |
|
||||
| IsModified | 表单值是否被修改过 |
|
||||
| Model | Form 绑定的数据对象 |
|
||||
| Name | 表单名称 |
|
||||
| Reset() | 重置表单值和验证信息 |
|
||||
| SetValidationMessages(string field, string[] errorMessages) | 给指定的字段设置验证信息 |
|
||||
| Submit() | 当验证通过会触发 OnFinish，验证不通过则触发 OnFinishFailed |
|
||||
| Validate() | 验证所有字段 |
|
||||
|
||||
|
||||
<style>
|
||||
.code-box-demo .ant-form:not(.ant-form-inline):not(.ant-form-vertical) {
|
||||
max-width: 600px;
|
||||
}
|
||||
.markdown.api-container table td:nth-of-type(4) {
|
||||
white-space: nowrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.site-form-item-icon {
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
[data-theme="dark"] .site-form-item-icon {
|
||||
color: rgba(255,255,255,.3);
|
||||
}
|
||||
</style>
|
||||
61
site/AntDesign.Docs/Demos/Components/Grid/doc/index.en-US.md
Normal file
61
site/AntDesign.Docs/Demos/Components/Grid/doc/index.en-US.md
Normal file
@ -0,0 +1,61 @@
|
||||
---
|
||||
category: Components
|
||||
type: Layout
|
||||
title: Grid
|
||||
cols: 1
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg
|
||||
---
|
||||
|
||||
24 Grids System。
|
||||
|
||||
|
||||
## Design concept#
|
||||
|
||||
In most business situations, Ant Design needs to solve a lot of information storage problems within the design area, so based on 12 Grids System, we divided the design area into 24 sections.
|
||||
|
||||
We name the divided area 'box'. We suggest four boxes for horizontal arrangement at most, one at least. Boxes are proportional to the entire screen as shown in the picture above. To ensure a high level of visual comfort, we customize the typography inside of the box based on the box unit.
|
||||
|
||||
|
||||
## Outline
|
||||
|
||||
In the grid system, we define the frame outside the information area based on row and column, to ensure that every area can have stable arrangement.
|
||||
|
||||
Following is a brief look at how it works:
|
||||
|
||||
- Establish a set of column in the horizontal space defined by row (abbreviated col)
|
||||
- Your content elements should be placed directly in the col, and only col should be placed directly in row
|
||||
- The column grid system is a value of 1-24 to represent its range spans. For example, three columns of equal width can be created by <Col span={8} />.
|
||||
- If the sum of col spans in a row are more than 24, then the overflowing col as a whole will start a new line arrangement.
|
||||
|
||||
Our grid systems base on Flex layout to allow the elements within the parent to be aligned horizontally - left, center, right, wide arrangement, and decentralized arrangement. The Grid system also supports vertical alignment - top aligned, vertically centered, bottom-aligned. You can also define the order of elements by using order.
|
||||
|
||||
Layout uses a 24 grid layout to define the width of each "box", but does not rigidly adhere to the grid layout.
|
||||
|
||||
## API
|
||||
|
||||
GridRow
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ---------------- | -------------------------------------------- | ------------- | --------- |
|
||||
| align | the vertical alignment of the flex layout:：`top` `middle` `bottom` | string | top |
|
||||
| gutter | spacing between grids, could be a number or a object like { xs: 8, sm: 16, md: 24}. or you can use array to make horizontal and vertical spacing work at the same time `[horizontal, vertical]` (supported after 1.5.0) | number, object, array | 0 |
|
||||
| justify | horizontal arrangement of the flex layout:`start` `end` `center` `space-around` `space-between` | string | start |
|
||||
| type | layout mode, optional `flex`， browser support | string | - |
|
||||
|
||||
GridCol
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ---------------- | -------------------------------------------- | ------------- | --------- |
|
||||
| offset | the number of cells to offset Col from the left | int | 0 |
|
||||
| order | raster order, used in flex layout mode | int | 0 |
|
||||
| pull | the number of cells that raster is moved to the left | int | 0 |
|
||||
| push | the number of cells that raster is moved to the right | int | 0 |
|
||||
| span | raster number of cells to occupy, 0 corresponds to `display: none` | string | - |
|
||||
| xs | `<576px` and also default setting, could be a span value or an object containing above props | int | - |
|
||||
| sm | `≥576px` could be a span value or an object containing above props | int | - |
|
||||
| md | `≥768px` could be a span value or an object containing above props| int | - |
|
||||
| lg | `≥992px` could be a span value or an object containing above props | int | - |
|
||||
| xl | `≥1200px` could be a span value or an object containing above props | int | - |
|
||||
| xxl | `≥1600px` could be a span value or an object containing above props | int | - |
|
||||
|
||||
The breakpoints of responsive grid follow BootStrap 4 media queries rules(not including `occasionally` part).
|
||||
59
site/AntDesign.Docs/Demos/Components/Grid/doc/index.zh-CN.md
Normal file
59
site/AntDesign.Docs/Demos/Components/Grid/doc/index.zh-CN.md
Normal file
@ -0,0 +1,59 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 栅格
|
||||
type: 布局
|
||||
title: Grid
|
||||
cols: 1
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg
|
||||
---
|
||||
|
||||
24 栅格系统。
|
||||
|
||||
|
||||
## 设计理念
|
||||
在多数业务情况下，Ant Design 需要在设计区域内解决大量信息收纳的问题，因此在 12 栅格系统的基础上，我们将整个设计建议区域按照 24 等分的原则进行划分。
|
||||
|
||||
划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个，最少一个。『盒子』在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。
|
||||
|
||||
|
||||
## 概述
|
||||
|
||||
布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：
|
||||
- 通过 row 在水平方向建立一组 column（简写 col）
|
||||
- 你的内容应当放置于 col 内，并且，只有 col 可以作为 row 的直接元素
|
||||
- 栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用 <Col span={8} /> 来创建
|
||||
- 如果一个 row 中的 col 总和超过 24，那么多余的 col 会作为一个整体另起一行排列
|
||||
我们的栅格化系统基于 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。
|
||||
|
||||
布局是基于 24 栅格来定义每一个『盒子』的宽度，但不拘泥于栅格。
|
||||
|
||||
## API
|
||||
|
||||
GridRow
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------- | -------------------------------------------- | ------------- | --------- |
|
||||
| align | flex 布局下的垂直对齐方式：`top` `middle` `bottom` | string | top |
|
||||
| gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 [水平间距, 垂直间距]（1.5.0 后支持）。 | number, object, array | 0 |
|
||||
| justify | flex 布局下的水平排列方式：`start` `end` `center` `space-around` `space-between` | string | start |
|
||||
| type | 布局模式，可选 `flex`，现代浏览器 下有效 | string | - |
|
||||
|
||||
GridCol
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------- | -------------------------------------------- | ------------- | --------- |
|
||||
| offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | int | 0 |
|
||||
| order | 栅格顺序，`flex` 布局模式下有效 | int | 0 |
|
||||
| pull | 栅格向左移动格数 | int | 0 |
|
||||
| push | 栅格向右移动格数效 | int | 0 |
|
||||
| span | 栅格占位格数，为 0 时相当于 `display: none` | string | - |
|
||||
| xs | `<576px` 响应式栅格，可为栅格数或一个包含其他属性的对象效 | int | - |
|
||||
| sm | `≥576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | int | - |
|
||||
| md | `≥768px` 响应式栅格，可为栅格数或一个包含其他属性的对象| int | - |
|
||||
| lg | `≥992px` 响应式栅格，可为栅格数或一个包含其他属性的对象效 | int | - |
|
||||
| xl | `≥1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | int | - |
|
||||
| xxl | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | int | - |
|
||||
|
||||
响应式栅格的断点扩展自 BootStrap 4 的规则（不包含链接里 `occasionally` 的部分)。
|
||||
|
||||
|
||||
25
site/AntDesign.Docs/Demos/Components/Icon/doc/index.en-US.md
Normal file
25
site/AntDesign.Docs/Demos/Components/Icon/doc/index.en-US.md
Normal file
@ -0,0 +1,25 @@
|
||||
---
|
||||
category: Components
|
||||
type: General
|
||||
title: Icon
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/rrwbSt3FQ/Icon.svg
|
||||
---
|
||||
|
||||
Semantic vector graphics. Before use icons。
|
||||
|
||||
## List of icons
|
||||
|
||||
|
||||
|
||||
## API
|
||||
|
||||
| Property | Description | Type | Default Value |
|
||||
| --- | --- | --- | --- |
|
||||
| Alt | Alternative text for the icon | string | - |
|
||||
| AvoidPrerendering | Avoid showing black icons during pre-rendering | bool | false |
|
||||
| Class | class Name of Icon |string | - |
|
||||
| Style | Style properties of icon, like fontSize and color| Css propertities |
|
||||
| Spin | Rotate icon with animation | boolean |- |
|
||||
| Rotate |Rotate by n degrees (not working in IE9)| int | - |
|
||||
| TwoToneColor |Only supports the two-tone icon. Specify the primary color.| string | - |
|
||||
| Component |The component used for the root node.| | - |
|
||||
31
site/AntDesign.Docs/Demos/Components/Icon/doc/index.zh-CN.md
Normal file
31
site/AntDesign.Docs/Demos/Components/Icon/doc/index.zh-CN.md
Normal file
@ -0,0 +1,31 @@
|
||||
---
|
||||
category: Components
|
||||
type: 通用
|
||||
title: Icon
|
||||
subtitle: 图标
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/rrwbSt3FQ/Icon.svg
|
||||
---
|
||||
|
||||
语义化的矢量图形。
|
||||
|
||||
## 设计师专属
|
||||
|
||||
安装 Kitchen Sketch 插件 💎，就可以一键拖拽使用 Ant Design 和 Iconfont 的海量图标，还可以关联自有项目。
|
||||
|
||||
## 图标列表
|
||||
|
||||
|
||||
|
||||
## API
|
||||
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------- | -------------------------------------------- | ------------- | --------- |
|
||||
| Alt | 备用文本 | string | - |
|
||||
| AvoidPrerendering | 避免在预渲染时显示黑色图标 | bool | false |
|
||||
| ClassName | 设置图标的样式名 |string | - |
|
||||
| Style | 设置图标的样式，例如 fontSize 和 color| Css propertities |
|
||||
| Spin | 是否有旋转动画 | boolean |- |
|
||||
| Rotate |图标旋转角度（IE9 无效）| int | - |
|
||||
| TwoToneColor |仅适用双色图标。设置双色图标的主要颜色| string | - |
|
||||
| Component |控制如何渲染图标，通常是一个渲染根标签为 <svg> 的 React 组件| | - |
|
||||
@ -0,0 +1,38 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Display
|
||||
title: Image
|
||||
cols: 2
|
||||
cover: https://gw.alipayobjects.com/zos/antfincdn/D1dXz9PZqa/image.svg
|
||||
---
|
||||
|
||||
Previewable image.
|
||||
|
||||
## When To Use
|
||||
|
||||
- When you need to display pictures.
|
||||
- Display when loading a large image or fault tolerant handling when loading fail.
|
||||
|
||||
## API
|
||||
|
||||
### Image
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| Alt | Image description | string | - | 0.6.0 |
|
||||
| Fallback | Load failure fault-tolerant src | string | - | 0.6.0 |
|
||||
| Height | Image height | string | - | 0.6.0 |
|
||||
| Locale | Locale Object | ImageLocale | - |- |
|
||||
| Placeholder | Load placeholder | RenderFragment | - | 0.6.0 |
|
||||
| Preview | Whether to enable the preview function | boolean | true | 0.6.0 |
|
||||
| PreviewSrc | path of the preview image before loading is complete | string | the same as `Src` | 0.6.0 |
|
||||
| PreviewVisible | Whether to open the preview image when clicking the preview button | true | 0.10.0 |
|
||||
| Src | Image path | string | - | 0.6.0 |
|
||||
| Width | Image width | string | - | 0.6.0 |
|
||||
| OnClick | Triggered when the image is clicked | EventCallback<MouseEventArgs> | 0.10.0 |
|
||||
|
||||
### ImagePreviewGroup
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| PreviewVisible | Whether to open the preview image. Two-way binding. | bool | true | 0.10.0 |
|
||||
@ -0,0 +1,40 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 图片
|
||||
type: 数据展示
|
||||
title: Image
|
||||
cols: 2
|
||||
cover: https://gw.alipayobjects.com/zos/antfincdn/D1dXz9PZqa/image.svg
|
||||
---
|
||||
|
||||
可预览的图片。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 需要展示图片时使用。
|
||||
- 加载大图时显示 loading 或加载失败时容错处理。
|
||||
|
||||
## API
|
||||
|
||||
### Image
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| Alt | 图像描述 | string | - | 0.6.0 |
|
||||
| Fallback | 加载失败时容错图片的地址 | string | - | 0.6.0 |
|
||||
| Height | 图像高度 | string | - | 4.6.0 |
|
||||
| Locale | 语言对象 | ImageLocale | - |- |
|
||||
| Placeholder | 加载占位 | RenderFragment | - | 0.6.0 |
|
||||
| Preview | 设置是否启用预览功能 | bool | true | 0.6.0 |
|
||||
| PreviewSrc | 加载完成前预览图的地址 | string | 与 `Src` 一样 | 0.6.0 |
|
||||
| PreviewVisible | 设置是否在点击预览按钮时打开预览框。 | true | 0.10.0 |
|
||||
| Src | 图片地址 | string | - | 0.6.0 |
|
||||
| Width | 图像宽度 | string | - | 0.6.0 |
|
||||
| OnClick | 在点击图片时触发 | EventCallback<MouseEventArgs> | 0.10.0 |
|
||||
|
||||
|
||||
### ImagePreviewGroup
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| PreviewVisible | 是否打开预览图片。支持双向绑定。 | bool | true | 0.10.0 |
|
||||
@ -0,0 +1,96 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Entry
|
||||
title: Input
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/xS9YEJhfe/Input.svg
|
||||
---
|
||||
|
||||
A basic widget for getting the user input is a text field. Keyboard and mouse can be used for providing or changing data.
|
||||
|
||||
## When To Use
|
||||
|
||||
- A user input in a form field is needed.
|
||||
- A search input is required.
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### Common API
|
||||
|
||||
| Property | Description | Type | Default Value |
|
||||
| --- | --- | --- | --- |
|
||||
| AddOnBefore | The label text displayed before (on the left side of) the input field. | RenderFragment | - |
|
||||
| AddOnAfter | The label text displayed after (on the right side of) the input field. | RenderFragment |
|
||||
| AllowClear | Allow to remove input content with clear icon | boolean | false |
|
||||
| AllowComplete | Controls the autocomplete attribute of the input HTML element. | boolean | true |
|
||||
| AutoFocus | Focus on input element. | boolean | false
|
||||
| Bordered | Whether has border style | boolean | true
|
||||
| BindOnInput | Whether to bind on input | boolean | false |
|
||||
| CultureInfo | What Culture will be used when converting string to value and value to string. Useful for InputNumber component. | CultureInfo | CultureInfo.CurrentCulture |
|
||||
| DebounceMilliseconds | Delays the processing of the KeyUp event until the user has stopped typing for a predetermined amount of time. The setting will enable 'BindOnInput'. | int | 250 |
|
||||
| DefaultValue | The initial input content | TValue | - |
|
||||
| Disabled | Whether the input is disabled. | boolean | false |
|
||||
| InputElementSuffixClass |Css class that will be added to input element class as the last class entry. | string | - | 0.9
|
||||
| MaxLength | Max length. -1 means unlimited. | int | -1
|
||||
| OnBlur | Callback when input looses focus | Action<FocusEventArgs> | - |
|
||||
| OnChange |Callback when the content changes | Action<TValue> | - |
|
||||
| OnFocus |Callback when input receives focus | Action<FocusEventArgs> | - |
|
||||
| OnInput |Callback when value is inputed | Action<ChangeEventArgs> | - |
|
||||
| OnkeyDown |Callback when a key is pressed | Action<KeyboardEventArgs> | - |
|
||||
| OnkeyUp |Callback when a key is released | Action<KeyboardEventArgs> | - |
|
||||
| OnMouseUp |Callback when a mouse button is released | Action<MouseEventArgs> | - |
|
||||
| OnPressEnter |The callback function that is triggered when Enter key is pressed. | Action<KeyboardEventArgs> | - |
|
||||
| Placeholder | Provide prompt information that describes the expected value of the input field | string | - |
|
||||
| Prefix | The prefix icon for the Input. | RenderFragment | - |
|
||||
| ReadOnly | When present, it specifies that an input field is read-only. | boolean | false | 0.9
|
||||
| Size |The size of the input box. Note: in the context of a form, the `large` size is used. Available: `large` `default` `small` | string | - |
|
||||
| StopPropagation Controls onclick & blur event propagation. | boolean | false | 0.10.0
|
||||
| Style | Set CSS style. When using, be aware that some styles can be set only by `WrapperStyle` | string | - | |
|
||||
| Suffix | The suffix icon for the Input. | RenderFragment | - |
|
||||
| Type |The type of input, see: MDN(use `Input.TextArea` instead of type=`textarea`) | string | - |
|
||||
| Width | The width of the input box. | string | - |
|
||||
| WrapperStyle | Set CSS style of wrapper. Is used when component has visible: `Prefix`/`Suffix` or has parameter set `AllowClear` or for components: `Password` & `Search`. In these cases, html `<span>` elements is used to wrap the html `<input>` element. `WrapperStyle` is used on the `<span>` element. | string | - | |
|
||||
|
||||
### Common Methods
|
||||
| Name | Description | Parameters | Version |
|
||||
| --- | --- | --- | --- |
|
||||
| Blur() |Remove focus. | - | 0.9 |
|
||||
| Focus() |Focus behavior for input component with optional behaviors. | (FocusBehavior: {enum: FocusAtLast, FocusAtFirst, FocusAndSelectAll, FocusAndClear }, bool: preventScroll ) | 0.9 |
|
||||
|
||||
### TextArea
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| AutoSize | Will adjust (grow or shrink) the `TextArea` according to content. Can work in connection with `MaxRows` & `MinRows`. Sets `resize` attribute of the `textarea` HTML element to: `none`. | boolean | false |
|
||||
| Bordered | Whether has border style | boolean | true
|
||||
| DefaultToEmptyString | When `false`, value will be set to `null` when content is empty or whitespace. When `true`, value will be set to empty string. | boolean | false |
|
||||
| MinRows | `TextArea` will allow shrinking, but it will stop when visible rows = `MinRows` (will not shrink further). Using this property will autoset `AutoSize = true`. | int | 1 |
|
||||
| MaxRows | `TextArea` will allow growing, but it will stop when visible rows = `MaxRows` (will not grow further). Using this property will autoset `AutoSize = true`. | int | uint.MaxValue |
|
||||
| Rows | Sets the height of the TextArea expressed in number of rows. | uint | 3 |
|
||||
| ShowCount | Whether show text count. Requires `MaxLength` attribute to be present | boolean | false | 0.9
|
||||
| OnResize | Callback when the size changes | Action<OnResizeEventArgs> | - |
|
||||
|
||||
### Search
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| ClassicSearchIcon | Search input is rendered with suffix search icon, not as a button. Will be ignored when EnterButton is not false. | boolean | false | 0.9
|
||||
| EnterButton | Whether to show an enter button after input. This property conflicts with the `AddonAfter` property | boolean / string | false |
|
||||
| Loading | Search box with loading. | boolean | false |
|
||||
| OnSearch | Search input is rendered with suffix search icon, not as a button. Will be ignored when EnterButton is not false. | Action<string> | - |
|
||||
|
||||
### InputGroup
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| ChildContent | Content wrapped by InputGroup. | RenderFragment | - |
|
||||
| Compact | Whether use compact style | boolean | false |
|
||||
| Size | The size of `InputGroup` specifies the size of the included `Input` fields. Available: `large` `default` `small` | InputSize / string | InputSize.Default |
|
||||
|
||||
### InputPassword
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| IconRender | Custom toggle button. | RenderFragment | - | 0.9
|
||||
| ShowPassowrd | Whether to show password | bool | false | 0.9
|
||||
| VisibilityToggle | Whether show toggle button | bool | true |
|
||||
@ -0,0 +1,97 @@
|
||||
---
|
||||
category: Components
|
||||
type: 数据录入
|
||||
title: Input
|
||||
subtitle: 输入框
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/xS9YEJhfe/Input.svg
|
||||
---
|
||||
|
||||
通过鼠标或键盘输入内容，是最基础的表单域的包装。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 需要用户输入表单域内容时。
|
||||
- 提供组合型输入框，带搜索的输入框，还可以进行大小选择。
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### Common API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------- | -------------------------------------------- | ------------- | --------- |
|
||||
| AddOnBefore | 带标签的 input，设置前置标签 | RenderFragment | - |
|
||||
| AddOnAfter | 带标签的 input，设置后置标签 | RenderFragment |
|
||||
| AllowClear |可以点击清除图标删除内容 | boolean | false |
|
||||
| AllowComplete | 控制 Input HTML 元素的自动完成属性. | boolean | true |
|
||||
| AutoFocus | 自动聚焦. | boolean | false
|
||||
| Bordered | 是否有边框 | boolean | true
|
||||
| BindOnInput | 是否输入时绑定 | boolean | false |
|
||||
| CultureInfo | 文本格式化时区域本地化选项 | CultureInfo | CultureInfo.CurrentCulture |
|
||||
| DebounceMilliseconds | 延迟 KeyUp 事件的处理，直到用户停止输入一段预定的时间，设置后会开启 `BindOnInput` | int | 250 |
|
||||
| DefaultValue |输入框默认内容 | TValue | - |
|
||||
| Disabled |是否禁用状态，默认为 false | boolean | false |
|
||||
| InputElementSuffixClass |作为最后一个Css Class 添加到Input的类目中. | string | - | 0.9
|
||||
| MaxLength |最大长度,-1 表示无限制 | int | -1
|
||||
| OnBlur | 输入框失去焦点时的回调 | Action<FocusEventArgs> | - |
|
||||
| OnChange |输入框内容变化时的回调 | Action<TValue> | - |
|
||||
| OnFocus |输入框获得焦点时的回调 | Action<FocusEventArgs> | - |
|
||||
| OnInput |输入框正在输入时的回调 | Action<ChangeEventArgs> | - |
|
||||
| OnkeyDown |键盘按键于输入框中按下的回调 | Action<KeyboardEventArgs> | - |
|
||||
| OnkeyUp |键盘按键于输入框中抬起时的回调 | Action<KeyboardEventArgs> | - |
|
||||
| OnMouseUp |鼠标抬起的回调 | Action<MouseEventArgs> | - |
|
||||
| OnPressEnter | 按下回车的回调 | Action<KeyboardEventArgs> | - |
|
||||
| Placeholder|提供可描述输入字段预期值的提示信息(hint) | string | - |
|
||||
| Prefix | 带有前缀图标的 input | RenderFragment | - |
|
||||
| ReadOnly | 输入框是否为只读. | boolean | false | 0.9
|
||||
| Size |抽屉元素之间的子组件 `default`, `large`, `small` | string | - |
|
||||
| StopPropagation | 终止OnClick和Blur事件的进一步传播. | boolean | false |
|
||||
| Style | 设置 Input 的 CSS 样式 | string | - | |
|
||||
| Suffix | 带有后缀图标的 input | RenderFragment | - |
|
||||
| Type |声明 input 类型，同原生 input 标签的 type 属性，见：MDN(请直接使用 TextArea 代替 type="textarea")。 | string | - |
|
||||
| Width | 输入框宽度 | string | - |
|
||||
| WrapperStyle | 设置外部 `<span>` 元素的样式。当使用了 `Prefix` 、 `Suffix`、 `AllowClear` 属性或者是 `Password` 或 `Search` 组件时，需要用 `WrapperStyle` 来设置整个组件的样式。 | string | - | |
|
||||
|
||||
### Common Methods
|
||||
| Name | Description | Parameters | Version |
|
||||
| --- | --- | --- | --- |
|
||||
| Blur() |移除焦点 | - | 0.9 |
|
||||
| Focus() |具有可选行为的Input组件的焦点行为 | (FocusBehavior: {enum: FocusAtLast, FocusAtFirst, FocusAndSelectAll, FocusAndClear }, bool: preventScroll ) | 0.9 |
|
||||
|
||||
### TextArea
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| AutoSize | 将根据内容调整（扩大或缩小）“TextArea”。 可以与 `MaxRows` 和 `MinRows` 结合使用。 将 `textarea` 组件的 `resize` 属性设置为：`none`. | boolean | false |
|
||||
| Bordered | 是否有边框 | boolean | true
|
||||
| DefaultToEmptyString |设置为`false`时，当内容为空或空白时，值将被设置为`null`,当为 `true` 时，值将被设置为空字符串(string.Empty). | boolean | false |
|
||||
| MinRows |`TextArea` 将允许用户拖动缩小，直到可见行等于 `MinRows` 。 使用此属性将自动设置“AutoSize = true”。 | int | 1 |
|
||||
| MaxRows |`TextArea` 将允许用户拖动放大,直到可见行等于 `MaxRows` 。 使用此属性将自动设置“AutoSize = true”。 | int | uint.MaxValue |
|
||||
| Rows | 设置行数以表示TextArea 的高度。 | uint | 3 |
|
||||
| ShowCount | 是否显示文本计数。 需要设置'MaxLength'属性 | boolean | false | 0.9
|
||||
| OnResize | 大小改变时回调 | Action<OnResizeEventArgs> | - |
|
||||
|
||||
### Search
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| ClassicSearchIcon | 搜索输入使用不使用按钮而使用后缀搜索图标呈现。 当 EnterButton 不为 false 时将被忽略。 | boolean | false | 0.9
|
||||
| EnterButton | 是否有确认按钮，可设为按钮文字。该属性会与 addonAfter 冲突。 | boolean / string | false |
|
||||
| Loading | 搜索 loading | boolean | false |
|
||||
| OnSearch | 点击搜索图标、清除图标，或按下回车键时的回调 | Action<string> | - |
|
||||
|
||||
### InputGroup
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| ChildContent | InputGroup 包装的内容(子元素) | RenderFragment | - |
|
||||
| Compact | 是否使用紧凑模式 | boolean | false |
|
||||
| Size | `InputGroup` 中所有的 `Input` 的大小，可选 `large` `default` `small` | InputSize / string | InputSize.Default |
|
||||
|
||||
### InputPassword
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| IconRender | 自定义切换按钮 | RenderFragment | - | 0.9
|
||||
| ShowPassowrd | 是否显示密码 | bool | false | 0.9
|
||||
| VisibilityToggle | 是否显示切换按钮 | bool | true |
|
||||
@ -0,0 +1,39 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Entry
|
||||
title: InputNumber
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg
|
||||
---
|
||||
|
||||
Enter a number within certain range with the mouse or keyboard.
|
||||
|
||||
## When To Use
|
||||
|
||||
- When a numeric value needs to be provided.
|
||||
|
||||
|
||||
## Types of Supports
|
||||
|
||||
`sbyte`, `byte`, `short`, `ushort`, `int`, `uint`, `long`, `ulong`, `float`, `double`, `decimal`
|
||||
|
||||
Nullable types of the above types are also supported. For example, `ushort?`, `int?`, etc.
|
||||
|
||||
## API
|
||||
|
||||
| Property | Description | Type | Default Value |
|
||||
| --- | --- | --- | --- |
|
||||
| AutoFocus |get focus when component mounted | boolean | - |
|
||||
| CultureInfo | What Culture will be used when converting string to value and value to string | CultureInfo | CultureInfo.CurrentCulture |
|
||||
| DefaultValue |initial value | number |
|
||||
| Disabled | disable the input | boolean |- |
|
||||
| Formatter | Specifies the format func of the value presented | Func<double,string> | - |
|
||||
| Format | Specifies the format pattern of the value presented | string | - |
|
||||
| Max | max value | number | - |
|
||||
| Min | min value | number | - |
|
||||
| Parser | Specifies the value extracted from formatter | function(string, double) |
|
||||
| Size | height of input box | `large` ,`middle`,`small` | - |
|
||||
| Step | The number to which the current value is increased or decreased. It can be an integer or decimal. | double | - |
|
||||
| Value | current value | string | - |
|
||||
| ValueChanged |The callback triggered when the value is changed. | function(double) | - |
|
||||
| MaxLength | The max length of the input.| int | - |
|
||||
| Width | The width of the input. | string | - |
|
||||
@ -0,0 +1,40 @@
|
||||
---
|
||||
category: Components
|
||||
type: 数据录入
|
||||
title: InputNumber
|
||||
subtitle: 数字输入框
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg
|
||||
---
|
||||
|
||||
通过鼠标或键盘，输入范围内的数值。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 当需要获取标准数值时。
|
||||
|
||||
## 支持类型
|
||||
|
||||
`sbyte`, `byte`, `short`, `ushort`, `int`, `uint`, `long`, `ulong`, `float`, `double`, `decimal`
|
||||
|
||||
也支持以上类型的Nullable类型，比如`ushort?`, `int?`等
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------- | -------------------------------------------- | ------------- | --------- |
|
||||
| AutoFocus | 自动获取焦点 | boolean | - |
|
||||
| CultureInfo | 设置数值与字符串互相转换时使用的语言 | CultureInfo | CultureInfo.CurrentCulture |
|
||||
| DefaultValue | 初始值 | number |
|
||||
| Disabled |禁用 | boolean |- |
|
||||
| Formatter | 指定输入框展示值的格式 | Func<double,string> | - |
|
||||
| Format | 指定输入框展示值的格式，值为 C# 格式字符串 | string | - |
|
||||
| Max | 最大值 | number | - |
|
||||
| Min | 最小值 | number | - |
|
||||
| Parser | 指定从 `formatter` 里转换回数字的方式，和 `formatter` 搭配使用 | function(string, double) |
|
||||
| Size | 输入框大小 | `large` ,`middle`,`small` | - |
|
||||
| Step | 每次改变步数，可以为小数 | double | - |
|
||||
| Value |当前值 | string | - |
|
||||
| ValueChanged |输入框内容变化时的回调 | function(double) | - |
|
||||
| MaxLength | 输入框最大长度 | int | - |
|
||||
| Width | 输入框宽度 | int | - |
|
||||
|
||||
128
site/AntDesign.Docs/Demos/Components/Layout/doc/index.en-US.md
Normal file
128
site/AntDesign.Docs/Demos/Components/Layout/doc/index.en-US.md
Normal file
@ -0,0 +1,128 @@
|
||||
---
|
||||
category: Components
|
||||
type: Layout
|
||||
cols: 1
|
||||
title: Layout
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/hzEndUVEx/Layout.svg
|
||||
---
|
||||
|
||||
Handling the overall layout of a page.
|
||||
|
||||
## Specification
|
||||
|
||||
### Size
|
||||
|
||||
The first level navigation is left aligned near a logo, and the secondary menu is right aligned.
|
||||
|
||||
- Top Navigation: the height of the first level navigation `64px`, the second level navigation `48px`.
|
||||
- Top Navigation (for landing pages): the height of the first level navigation `80px`, the second level navigation `56px`.
|
||||
- Calculation formula of a top navigation: `48+8n`.
|
||||
- Calculation formula of an aside navigation: `200+8n`.
|
||||
|
||||
### Interaction rules
|
||||
|
||||
- The first level navigation and the last level navigation should be distinguishable by visualization;
|
||||
- The current item should have the highest priority of visualization;
|
||||
- When the current navigation item is collapsed, the style of the current navigation item is applied to its parent level;
|
||||
- The left side navigation bar has support for both the accordion and expanding styles; you can choose the one that fits your case the best.
|
||||
|
||||
## Visualization rules
|
||||
|
||||
Style of a navigation should conform to its level.
|
||||
|
||||
- **Emphasis by colorblock**
|
||||
|
||||
When background color is a deep color, you can use this pattern for the parent level navigation item of the current page.
|
||||
|
||||
- **The highlight match stick**
|
||||
|
||||
When background color is a light color, you can use this pattern for the current page navigation item; we recommend using it for the last item of the navigation path.
|
||||
|
||||
- **Highlighted font**
|
||||
|
||||
From the visualization aspect, a highlighted font is stronger than colorblock; this pattern is often used for the parent level of the current item.
|
||||
|
||||
- **Enlarge the size of the font**
|
||||
|
||||
`12px`, `14px` is a standard font size of navigations, `14px` is used for the first and the second level of the navigation. You can choose an appropriate font size regarding the level of your navigation.
|
||||
|
||||
## Component Overview
|
||||
|
||||
- `Layout`: The layout wrapper, in which `Header` `Sider` `Content` `Footer` or `Layout` itself can be nested, and can be placed in any parent container.
|
||||
- `Header`: The top layout with the default style, in which any element can be nested, and must be placed in `Layout`.
|
||||
- `Sider`: The sidebar with default style and basic functions, in which any element can be nested, and must be placed in `Layout`.
|
||||
- `Content`: The content layout with the default style, in which any element can be nested, and must be placed in `Layout`.
|
||||
- `Footer`: The bottom layout with the default style, in which any element can be nested, and must be placed in `Layout`.
|
||||
|
||||
> Based on `flex layout`, please pay attention to the [compatibility](http://caniuse.com/#search=flex).
|
||||
|
||||
**If you need to add in-app tabs, use it with the [ReuseTabs](/experimental/reusetabs) component.**
|
||||
|
||||
## API
|
||||
|
||||
```jsx
|
||||
<Layout>
|
||||
<Header>header</Header>
|
||||
<Layout>
|
||||
<Sider>left sidebar</Sider>
|
||||
<Content>main content</Content>
|
||||
<Sider>right sidebar</Sider>
|
||||
</Layout>
|
||||
<Footer>footer</Footer>
|
||||
</Layout>
|
||||
```
|
||||
|
||||
### Layout
|
||||
|
||||
The wrapper.
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| className | container className | string | - |
|
||||
| hasSider | whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering | boolean | - |
|
||||
| style | to customize the styles | object | - |
|
||||
|
||||
> APIs of `Layout.Header` `Layout.Footer` `Layout.Content` are the same as that of `Layout`.
|
||||
|
||||
### Layout.Sider
|
||||
|
||||
The sidebar.
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| breakpoint | [breakpoints](/components/grid#Col) of the responsive layout | `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` } | - |
|
||||
| className | container className | string | - |
|
||||
| collapsed | to set the current status | boolean | - |
|
||||
| collapsedWidth | width of the collapsed sidebar, by setting to `0` a special trigger will appear | number | 80 |
|
||||
| collapsible | whether can be collapsed | boolean | false |
|
||||
| defaultCollapsed | to set the initial status | boolean | false |
|
||||
| reverseArrow | reverse direction of arrow, for a sider that expands from the right | boolean | false |
|
||||
| style | to customize the styles | object | - |
|
||||
| theme | color theme of the sidebar | `light` \| `dark` | `dark` |
|
||||
| trigger | specify the customized trigger, set to null to hide the trigger | string\|ReactNode | - |
|
||||
| width | width of the sidebar | number\|string | 200 |
|
||||
| onCollapse | the callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} | - |
|
||||
| onBreakpoint | the callback function, executed when [breakpoints](/components/grid#API) changed | (broken) => {} | - |
|
||||
| zeroWidthTriggerStyle | to customize the styles of the special trigger that appears when `collapsedWidth` is 0 | object | - |
|
||||
|
||||
#### breakpoint width
|
||||
|
||||
```js
|
||||
{
|
||||
xs: '480px',
|
||||
sm: '576px',
|
||||
md: '768px',
|
||||
lg: '992px',
|
||||
xl: '1200px',
|
||||
xxl: '1600px',
|
||||
}
|
||||
```
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-layout-background {
|
||||
background: #141414;
|
||||
}
|
||||
[data-theme="dark"] .site-layout-header-background {
|
||||
background: #1f1f1f;
|
||||
}
|
||||
</style>
|
||||
129
site/AntDesign.Docs/Demos/Components/Layout/doc/index.zh-CN.md
Normal file
129
site/AntDesign.Docs/Demos/Components/Layout/doc/index.zh-CN.md
Normal file
@ -0,0 +1,129 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 布局
|
||||
type: 布局
|
||||
cols: 1
|
||||
title: Layout
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/hzEndUVEx/Layout.svg
|
||||
---
|
||||
|
||||
协助进行页面级整体布局。
|
||||
|
||||
## 设计规则
|
||||
|
||||
### 尺寸
|
||||
|
||||
一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。
|
||||
|
||||
- 顶部导航（大部分系统）：一级导航高度 `64px`，二级导航 `48px`。
|
||||
- 顶部导航（展示类页面）：一级导航高度 `80px`，二级导航 `56px`。
|
||||
- 顶部导航高度的范围计算公式为：`48+8n`。
|
||||
- 侧边导航宽度的范围计算公式：`200+8n`。
|
||||
|
||||
### 交互
|
||||
|
||||
- 一级导航和末级的导航需要在可视化的层面被强调出来；
|
||||
- 当前项应该在呈现上优先级最高；
|
||||
- 当导航收起的时候，当前项的样式自动赋予给它的上一个层级；
|
||||
- 左侧导航栏的收放交互同时支持手风琴和全展开的样式，根据业务的要求进行适当的选择。
|
||||
|
||||
### 视觉
|
||||
|
||||
导航样式上需要根据信息层级合理的选择样式：
|
||||
|
||||
- **大色块强调**
|
||||
|
||||
建议用于底色为深色系时，当前页面父级的导航项。
|
||||
|
||||
- **高亮火柴棍**
|
||||
|
||||
当导航栏底色为浅色系时使用，可用于当前页面对应导航项，建议尽量在导航路径的最终项使用。
|
||||
|
||||
- **字体高亮变色**
|
||||
|
||||
从可视化层面，字体高亮的视觉强化力度低于大色块，通常在当前项的上一级使用。
|
||||
|
||||
- **字体放大**
|
||||
|
||||
`12px`、`14px` 是导航的标准字号，14 号字体用在一、二级导航中。字号可以考虑导航项的等级做相应选择。
|
||||
|
||||
## 组件概述
|
||||
|
||||
- `Layout`：布局容器，其下可嵌套 `Header` `Sider` `Content` `Footer` 或 `Layout` 本身，可以放在任何父容器中。
|
||||
- `Header`：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。
|
||||
- `Sider`：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 `Layout` 中。
|
||||
- `Content`：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。
|
||||
- `Footer`：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。
|
||||
|
||||
> 注意：采用 flex 布局实现，请注意[浏览器兼容性](http://caniuse.com/#search=flex)问题。
|
||||
|
||||
**如果需要添加应用内的标签页，请搭配 [ReuseTabs](/experimental/reusetabs) 组件使用。**
|
||||
|
||||
## API
|
||||
|
||||
```jsx
|
||||
<Layout>
|
||||
<Header>header</Header>
|
||||
<Layout>
|
||||
<Sider>left sidebar</Sider>
|
||||
<Content>main content</Content>
|
||||
<Sider>right sidebar</Sider>
|
||||
</Layout>
|
||||
<Footer>footer</Footer>
|
||||
</Layout>
|
||||
```
|
||||
|
||||
### Layout
|
||||
|
||||
布局容器。
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| className | 容器 className | string | - |
|
||||
| hasSider | 表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动 | boolean | - |
|
||||
| style | 指定样式 | object | - |
|
||||
|
||||
> `Layout.Header` `Layout.Footer` `Layout.Content` API 与 `Layout` 相同
|
||||
|
||||
### Layout.Sider
|
||||
|
||||
侧边栏。
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| breakpoint | 触发响应式布局的[断点](/components/grid-cn/#Col) | `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` | - |
|
||||
| className | 容器 className | string | - |
|
||||
| collapsed | 当前收起状态 | boolean | - |
|
||||
| collapsedWidth | 收缩宽度，设置为 0 会出现特殊 trigger | number | 80 |
|
||||
| collapsible | 是否可收起 | boolean | false |
|
||||
| defaultCollapsed | 是否默认收起 | boolean | false |
|
||||
| reverseArrow | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 | boolean | false |
|
||||
| style | 指定样式 | object | - |
|
||||
| theme | 主题颜色 | `light` \| `dark` | `dark` |
|
||||
| trigger | 自定义 trigger，设置为 null 时隐藏 trigger | string\|ReactNode | - |
|
||||
| width | 宽度 | number\|string | 200 |
|
||||
| onCollapse | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} | - |
|
||||
| onBreakpoint | 触发响应式布局[断点](/components/grid#API)时的回调 | (broken) => {} | - |
|
||||
| zeroWidthTriggerStyle | 指定当 `collapsedWidth` 为 0 时出现的特殊 trigger 的样式 | object | - |
|
||||
|
||||
#### breakpoint width
|
||||
|
||||
```js
|
||||
{
|
||||
xs: '480px',
|
||||
sm: '576px',
|
||||
md: '768px',
|
||||
lg: '992px',
|
||||
xl: '1200px',
|
||||
xxl: '1600px',
|
||||
}
|
||||
```
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-layout-background {
|
||||
background: #141414;
|
||||
}
|
||||
[data-theme="dark"] .site-layout-header-background {
|
||||
background: #1f1f1f;
|
||||
}
|
||||
</style>
|
||||
73
site/AntDesign.Docs/Demos/Components/List/doc/index.en-US.md
Normal file
73
site/AntDesign.Docs/Demos/Components/List/doc/index.en-US.md
Normal file
@ -0,0 +1,73 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Display
|
||||
title: List
|
||||
cols: 1
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg
|
||||
---
|
||||
|
||||
Simple List.
|
||||
|
||||
## When To Use
|
||||
|
||||
A list can be used to display content related to a single subject. The content can consist of multiple elements of varying type and size.
|
||||
|
||||
## API
|
||||
|
||||
### List
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| bordered | Toggles rendering of the border around the list | boolean | false | |
|
||||
| footer | List footer renderer | string\|ReactNode | - | |
|
||||
| grid | The grid type of list. You can set grid to something like {gutter: 16, column: 4} | [object](#List-grid-props) | - | |
|
||||
| header | List header renderer | string\|ReactNode | - | |
|
||||
| itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - | |
|
||||
| rowKey | Item's unique key, could be a string or function that returns a string | string\|Function(record):string | `key` | |
|
||||
| loading | Shows a loading indicator while the contents of the list are being fetched | boolean\|[SpinProps](/components/spin/#API) ([more](https://github.com/ant-design/ant-design/issues/8659)) | false | |
|
||||
| loadMore | Shows a load more content | string\|ReactNode | - | |
|
||||
| locale | i18n text including empty text | object | emptyText: 'No Data' <br> | |
|
||||
| pagination | Pagination [config](/components/pagination/), hide it by setting it to false | boolean \| object | false | |
|
||||
| size | Size of list | `default` \| `large` \| `small` | `default` | |
|
||||
| split | Toggles rendering of the split under the list item | boolean | true | |
|
||||
| dataSource | dataSource array for list | any[] | - | |
|
||||
| renderItem | customize list item when using `dataSource` | `item => ReactNode` | - | |
|
||||
| OnItemClick | onclick callback of list items | `item => void` | - | |
|
||||
|
||||
### pagination
|
||||
|
||||
Properties for pagination.
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ------------------------------------ | --------------------------- | -------- |
|
||||
| position | specify the position of `Pagination` | `top` \| `bottom` \| `both` | `bottom` |
|
||||
|
||||
More about pagination, please check [`Pagination`](/components/pagination/).
|
||||
|
||||
### List grid props
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| -------- | ------------------------ | ------ | ------- | ------- |
|
||||
| column | column of grid | number | - | |
|
||||
| gutter | spacing between grid | number | 0 | |
|
||||
| xs | `<576px` column of grid | number | - | |
|
||||
| sm | `≥576px` column of grid | number | - | |
|
||||
| md | `≥768px` column of grid | number | - | |
|
||||
| lg | `≥992px` column of grid | number | - | |
|
||||
| xl | `≥1200px` column of grid | number | - | |
|
||||
| xxl | `≥1600px` column of grid | number | - | |
|
||||
|
||||
### List.Item
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| actions | The actions content of list item. If `itemLayout` is `vertical`, shows the content on bottom, otherwise shows content on the far right. | Array<ReactNode> | - | |
|
||||
| extra | The extra content of list item. If `itemLayout` is `vertical`, shows the content on right, otherwise shows content on the far right. | string\|ReactNode | - | |
|
||||
|
||||
### List.Item.Meta
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| ----------- | ---------------------------- | ----------------- | ------- | ------- |
|
||||
| avatar | The avatar of list item | ReactNode | - | |
|
||||
| description | The description of list item | string\|ReactNode | - | |
|
||||
| title | The title of list item | string\|ReactNode | - | |
|
||||
73
site/AntDesign.Docs/Demos/Components/List/doc/index.zh-CN.md
Normal file
73
site/AntDesign.Docs/Demos/Components/List/doc/index.zh-CN.md
Normal file
@ -0,0 +1,73 @@
|
||||
---
|
||||
category: Components
|
||||
type: 数据展示
|
||||
title: List
|
||||
subtitle: 列表
|
||||
cols: 1
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg
|
||||
---
|
||||
|
||||
通用列表。
|
||||
|
||||
## 何时使用
|
||||
|
||||
最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。
|
||||
|
||||
## API
|
||||
|
||||
### List
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| bordered | 是否展示边框 | boolean | false | |
|
||||
| footer | 列表底部 | string\|ReactNode | - | |
|
||||
| grid | 列表栅格配置 | [object](#List-grid-props) | - | |
|
||||
| header | 列表头部 | string\|ReactNode | - | |
|
||||
| itemLayout | 设置 `List.Item` 布局, 设置成 `vertical` 则竖直样式显示, 默认横排 | string | - | |
|
||||
| loading | 当卡片内容还在加载中时，可以用 `loading` 展示一个占位 | boolean\|[object](/components/spin/#API) ([更多](https://github.com/ant-design/ant-design/issues/8659)) | false | |
|
||||
| loadMore | 加载更多 | string\|ReactNode | - | |
|
||||
| locale | 默认文案设置，目前包括空数据文案 | object | emptyText: '暂无数据' | |
|
||||
| pagination | 对应的 `pagination` 配置, 设置 `false` 不显示 | boolean\|object | false | |
|
||||
| size | list 的尺寸 | `default` \| `large` \| `small` | `default` | |
|
||||
| split | 是否展示分割线 | boolean | true | |
|
||||
| dataSource | 列表数据源 | any[] | - | |
|
||||
| renderItem | 当使用 dataSource 时，可以用 `renderItem` 自定义渲染列表项 | `item => ReactNode` | - | |
|
||||
| OnItemClick | 列表项点击事件 | `item => void` | - | |
|
||||
|
||||
### pagination
|
||||
|
||||
分页的配置项。
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------- | ------------------ | --------------------------- | -------- |
|
||||
| position | 指定分页显示的位置 | `top` \| `bottom` \| `both` | `bottom` |
|
||||
|
||||
更多配置项，请查看 [`Pagination`](/components/pagination/)。
|
||||
|
||||
### List grid props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ------ | -------------------- | ------ | ------ | ---- |
|
||||
| column | 列数 | number | - | |
|
||||
| gutter | 栅格间隔 | number | 0 | |
|
||||
| xs | `<576px` 展示的列数 | number | - | |
|
||||
| sm | `≥576px` 展示的列数 | number | - | |
|
||||
| md | `≥768px` 展示的列数 | number | - | |
|
||||
| lg | `≥992px` 展示的列数 | number | - | |
|
||||
| xl | `≥1200px` 展示的列数 | number | - | |
|
||||
| xxl | `≥1600px` 展示的列数 | number | - | |
|
||||
|
||||
### List.Item
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| actions | 列表操作组，根据 `itemLayout` 的不同, 位置在卡片底部或者最右侧 | Array<ReactNode> | - | |
|
||||
| extra | 额外内容, 通常用在 `itemLayout` 为 `vertical` 的情况下, 展示右侧内容; `horizontal` 展示在列表元素最右侧 | string\|ReactNode | - | |
|
||||
|
||||
### List.Item.Meta
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ----------- | ------------------ | ----------------- | ------ | ---- |
|
||||
| avatar | 列表元素的图标 | ReactNode | - | |
|
||||
| description | 列表元素的描述内容 | string\|ReactNode | - | |
|
||||
| title | 列表元素的标题 | string\|ReactNode | - | |
|
||||
@ -0,0 +1,49 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Entry
|
||||
title: Mentions
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/jPE-itMFM/Mentions.svg
|
||||
---
|
||||
|
||||
Mention component.
|
||||
|
||||
## When To Use
|
||||
|
||||
When need to mention someone or something.
|
||||
|
||||
## API
|
||||
|
||||
|
||||
### Mention
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| autoFocus | Auto get focus when component mounted | boolean | `false` |
|
||||
| defaultValue | Default value | string | |
|
||||
| filterOption | Customize filter option logic | false \| (input: string, option: OptionProps) => boolean | |
|
||||
| notFoundContent | Set mentions content when not match | ReactNode | 'Not Found' |
|
||||
| placement | Set popup placement | `top` \| `bottom` | `bottom` |
|
||||
| prefix | Set trigger prefix keyword | string \| string[] | '@' |
|
||||
| split | Set split string before and after selected mention | string | ' ' |
|
||||
| validateSearch | Customize trigger search logic | (text: string, props: MentionsProps) => void | |
|
||||
| value | Set value of mentions | string | |
|
||||
| onChange | Trigger when value changed | (text: string) => void | |
|
||||
| onSelect | Trigger when user select the option | (option: OptionProps, prefix: string) => void | |
|
||||
| onSearch | Trigger when prefix hit | (text: string, prefix: string) => void | |
|
||||
| onFocus | Trigger when mentions get focus | () => void | |
|
||||
| onBlur | Trigger when mentions lose focus | () => void | |
|
||||
| getPopupContainer | Set the mount HTML node for suggestions | () => HTMLElement | |
|
||||
|
||||
### Mention methods
|
||||
|
||||
| Name | Description |
|
||||
| ------- | ------------ |
|
||||
| blur() | remove focus |
|
||||
| focus() | get focus |
|
||||
|
||||
### Option
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| children | suggestion content | ReactNode | |
|
||||
| value | value of suggestion, the value will insert into input filed while selected | string | '' |
|
||||
@ -0,0 +1,50 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 提及
|
||||
type: 数据录入
|
||||
title: Mentions
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/jPE-itMFM/Mentions.svg
|
||||
---
|
||||
|
||||
提及组件。
|
||||
|
||||
## 何时使用
|
||||
|
||||
用于在输入中提及某人或某事，常用于发布、聊天或评论功能。
|
||||
|
||||
## API
|
||||
|
||||
|
||||
### Mentions
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| autoFocus | 自动获得焦点 | boolean | `false` |
|
||||
| defaultValue | 默认值 | string | |
|
||||
| filterOption | 自定义过滤逻辑 | false \| (input: string, option: OptionProps) => boolean | |
|
||||
| notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | 'Not Found' |
|
||||
| placement | 弹出层展示位置 | `top` \| `bottom` | `bottom` |
|
||||
| prefix | 设置触发关键字 | string \| string[] | '@' |
|
||||
| split | 设置选中项前后分隔符 | string | ' ' |
|
||||
| validateSearch | 自定义触发验证逻辑 | (text: string, props: MentionsProps) => void | |
|
||||
| value | 设置值 | string | |
|
||||
| onChange | 值改变时触发 | (text: string) => void | |
|
||||
| onSelect | 选择选项时触发 | (option: OptionProps, prefix: string) => void | |
|
||||
| onSearch | 搜索时触发 | (text: string, prefix: string) => void | |
|
||||
| onFocus | 获得焦点时触发 | () => void | |
|
||||
| onBlur | 失去焦点时触发 | () => void | |
|
||||
| getPopupContainer | 指定建议框挂载的 HTML 节点 | () => HTMLElement | |
|
||||
|
||||
### Mentions 方法
|
||||
|
||||
| 名称 | 描述 |
|
||||
| ------- | -------- |
|
||||
| blur() | 移除焦点 |
|
||||
| focus() | 获取焦点 |
|
||||
|
||||
### Option
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------- | -------------- | --------- | ------ |
|
||||
| children | 选项内容 | ReactNode | |
|
||||
| value | 选择时填充的值 | string | '' |
|
||||
92
site/AntDesign.Docs/Demos/Components/Menu/doc/index.en-US.md
Normal file
92
site/AntDesign.Docs/Demos/Components/Menu/doc/index.en-US.md
Normal file
@ -0,0 +1,92 @@
|
||||
---
|
||||
category: Components
|
||||
cols: 1
|
||||
type: Navigation
|
||||
title: Menu
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
|
||||
---
|
||||
|
||||
A versatile menu for navigation.
|
||||
|
||||
## When To Use
|
||||
|
||||
Navigation is an important part of any website, as a good navigation setup allows users to move around the site quickly and efficiently. Ant Design offers top and side navigation options. Top navigation provides all the categories and functions of the website. Side navigation provides the multi-level structure of the website.
|
||||
|
||||
More layouts with navigation: [Layout](/components/layout).
|
||||
|
||||
## API
|
||||
|
||||
```html
|
||||
<Menu>
|
||||
<MenuItem>Menu</MenuItem>
|
||||
<SubMenu Title="SubMenu">
|
||||
<MenuItem>SubMenuItem</MenuItem>
|
||||
</SubMenu>
|
||||
</Menu>
|
||||
```
|
||||
|
||||
### Menu
|
||||
|
||||
| Param | Description | Type | Default value | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| Accordion | SubMenu accordion mode | boolean | false |
|
||||
| DefaultOpenKeys | Array with the keys of default opened sub menus | string\[] | | |
|
||||
| DefaultSelectedKeys | Array with the keys of default selected menu items | string\[] | | |
|
||||
| ForceSubMenuRender | Render submenu into DOM before it becomes visible | boolean | false | (Not implemented) |
|
||||
| InlineCollapsed | Specifies the collapsed status when menu is inline mode | boolean | - | |
|
||||
| InlineIndent | Indent (in pixels) of inline menu items on each level | number | 24 | (Not implemented) |
|
||||
| Mode | Type of menu | `MenuMode.Vertical` \| `MenuMode.Horizontal` \| `MenuMode.Inline` | `MenuMode.Vertical` | |
|
||||
| Multiple | Allows selection of multiple items | boolean | false | (Not implemented) |
|
||||
| OpenKeys | Array with the keys of currently opened sub-menus | string\[] | | |
|
||||
| OnDeselect | Called when a menu item is deselected (multiple mode only) | function({ item, key, keyPath, selectedKeys, domEvent }) | - | (Not implemented) |
|
||||
| OnOpenChange | Called when sub-menus are opened or closed | function(openKeys: string\[]) | noop | (Not implemented) |
|
||||
| OnSelect | Called when a menu item is selected | function({ item, key, keyPath, selectedKeys, domEvent }) | none | (Not implemented) |
|
||||
| OverflowedIndicator | Customized icon when menu is collapsed | RenderFragment | - | (Not implemented) |
|
||||
| Selectable | Allows selecting menu items. When it is `false` the menu item is not selected after `OnClick`. | boolean | true | |
|
||||
| SelectedKeys | Array with the keys of currently selected menu items | string\[] | | |
|
||||
| Style | Style of the root node | string | | |
|
||||
| SubMenuCloseDelay | Delay time to hide submenu when mouse leaves (in seconds) | number | 0.1 | (Not implemented) |
|
||||
| SubMenuOpenDelay | Delay time to show submenu when mouse enters, (in seconds) | number | 0 | (Not implemented) |
|
||||
| Theme | Color theme of the menu | `light` \| `dark` | `light` | |
|
||||
| TriggerSubMenuAction | Which action can trigger submenu open/close | `hover` \| `click` | `hover` | |
|
||||
|
||||
### MenuItem
|
||||
|
||||
| Param | Description | Type | Default value | Version |
|
||||
| -------- | ------------------------------------ | ------- | ------------- | ------- |
|
||||
| ChildContent | Set display title for collapsed item | string | | |
|
||||
| Disabled | Whether menu item is disabled | boolean | false | |
|
||||
| Key | Unique ID of the menu item | string | | |
|
||||
| OnClick | Called when a menu item is clicked | EventCallback<MouseEventArgs> | - | |
|
||||
| RouterLink | Href route | string | - | |
|
||||
| RouterMatch | Modifies the URL matching behavior for a NavLink | NavLinkMatch | - | |
|
||||
| Style | Additional CSS style | string | - | |
|
||||
| Title | Title of the menu item | string | | |
|
||||
| Icon | The icon of the menu item | string | - | |
|
||||
| IconTemplate | Custom icon template, when `Icon` and `IconTemplate` are set at the same time, `IconTemplate` is preferred| RenderFragment | - | |
|
||||
|
||||
### SubMenu
|
||||
|
||||
| Param | Description | Type | Default value | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| ChildContent | Sub-menus or sub-menu items | RenderFragment | | |
|
||||
| Disabled | Whether sub-menu is disabled | boolean | false | |
|
||||
| IsOpen | Open state of the SubMenu | bool | false | |
|
||||
| Key | Unique ID of the sub-menu | string | | |
|
||||
| OnTitleClick | Callback executed when the sub-menu title is clicked | EventCallback<MouseEventArgs> | | |
|
||||
| PopupClassName | Sub-menu class name | string | | Not implemented) |
|
||||
| Title | Title of the sub-menu | string | | |
|
||||
| TitleTemplate | Title of the sub-menu | RenderFragment | - | |
|
||||
|
||||
### MenuItemGroup
|
||||
|
||||
| Param | Description | Type | Default value | Version |
|
||||
| -------- | ------------------ | ----------------- | ------------- | ------- |
|
||||
| ChildContent | sub-menu items | RenderFragment | | |
|
||||
| Style | Additional CSS style | string | - | |
|
||||
| Title | Title of the group | string | | |
|
||||
| TitleTemplate | Title of the group | RenderFragment | - | |
|
||||
|
||||
### Menu.Divider
|
||||
|
||||
Divider line in between menu items, only used in vertical popup Menu or Dropdown Menu.
|
||||
95
site/AntDesign.Docs/Demos/Components/Menu/doc/index.zh-CN.md
Normal file
95
site/AntDesign.Docs/Demos/Components/Menu/doc/index.zh-CN.md
Normal file
@ -0,0 +1,95 @@
|
||||
---
|
||||
category: Components
|
||||
cols: 1
|
||||
type: 导航
|
||||
title: Menu
|
||||
subtitle: 导航菜单
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
|
||||
---
|
||||
|
||||
为页面和功能提供导航的菜单列表。
|
||||
|
||||
## 何时使用
|
||||
|
||||
导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。
|
||||
|
||||
更多布局和导航的使用可以参考：[通用布局](/components/layout)。
|
||||
|
||||
## API
|
||||
|
||||
```html
|
||||
<Menu>
|
||||
<Menu.Item>菜单项</Menu.Item>
|
||||
<SubMenu Title="子菜单">
|
||||
<Menu.Item>子菜单项</Menu.Item>
|
||||
</SubMenu>
|
||||
</Menu>
|
||||
```
|
||||
|
||||
### Menu
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| Accordion | SubMenu 手风琴模式 | boolean | false |
|
||||
| DefaultOpenKeys | 初始展开的 SubMenu 菜单项 key 数组 | string\[] | | |
|
||||
| DefaultSelectedKeys | 初始选中的菜单项 key 数组 | string\[] | | |
|
||||
| ForceSubMenuRender | 在子菜单展示之前就渲染进 DOM | boolean | false | |
|
||||
| InlineCollapsed | inline 时菜单是否收起状态 | boolean | - | |
|
||||
| InlineIndent | inline 模式的菜单缩进宽度 | number | 24 | |
|
||||
| Mode | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | `vertical` \| `horizontal` \| `inline` | `vertical` | |
|
||||
| Multiple | 是否允许多选 | boolean | false | |
|
||||
| OpenKeys | 当前展开的 SubMenu 菜单项 key 数组 | string\[] | | |
|
||||
| Selectable | 是否允许选中,当等于 `false` 时，会在触发 `OnClick` 之后不被选中 | boolean | true | |
|
||||
| SelectedKeys | 当前选中的菜单项 key 数组 | string\[] | | |
|
||||
| Style | 根节点样式 | object | | |
|
||||
| SubMenuCloseDelay | 用户鼠标离开子菜单后关闭延时，单位：秒 | number | 0.1 | |
|
||||
| SubMenuOpenDelay | 用户鼠标进入子菜单后开启延时，单位：秒 | number | 0 | |
|
||||
| Theme | 主题颜色 | `light` \| `dark` | `light` | |
|
||||
| TriggerSubMenuAction | SubMenu 展开/关闭的触发行为 | `hover` \| `click` | `hover` | |
|
||||
| OnClick | 点击 MenuItem 调用此函数 | function({ item, key, keyPath, domEvent }) | - | |
|
||||
| OnDeselect | 取消选中时调用，仅在 multiple 生效 | function({ item, key, keyPath, selectedKeys, domEvent }) | - | |
|
||||
| OnOpenChange | SubMenu 展开/关闭的回调 | function(openKeys: string\[]) | noop | |
|
||||
| OnSelect | 被选中时调用 | function({ item, key, keyPath, selectedKeys, domEvent }) | 无 | |
|
||||
| OverflowedIndicator | 自定义 Menu 折叠时的图标 | ReactNode | - | |
|
||||
|
||||
> More options in [rc-menu](https://github.com/react-component/menu#api)
|
||||
|
||||
### MenuItem
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| -------- | ------------------------ | ------- | ------ | ---- |
|
||||
| Disabled | 是否禁用 | boolean | false | |
|
||||
| Key | item 的唯一标志 | string | | |
|
||||
| OnClick | 当鼠标点击菜单项时触发 | EventCallback<MouseEventArgs> | - | |
|
||||
| RouterLink | 路由链接，当需要让菜单自动匹配路由进行高亮时使用 | string | - | |
|
||||
| RouterMatch | 修改自 `NavLink`,用于选择匹配模式 | NavLinkMatch | - | |
|
||||
| Style | 额外的 CSS 样式 | string | - | |
|
||||
| Title | 设置收缩时展示的悬浮标题 | string | | |
|
||||
| Icon | 图标的类型| string | - | |
|
||||
| IconTemplate | 自定义Icon模板，当`Icon`和`IconTemplate`同时设置时，优先使用`IconTemplate`| RenderFragment | - | |
|
||||
|
||||
### SubMenu
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| -------------- | -------------- | --------------------------- | ------ | ---- |
|
||||
| ChildContent | 放置子菜单的菜单项列表 | RenderFragment | | |
|
||||
| Disabled | 是否禁用 | boolean | false | |
|
||||
| IsOpen | 表示展开状态 | bool | false | |
|
||||
| Key | 唯一标志 | string | | |
|
||||
| OnTitleClick | 当标题被点击时触发的回调 | EventCallback<MouseEventArgs> | | |
|
||||
| PopupClassName | 子菜单样式 | string | | |
|
||||
| Title | 子菜单标题 | string | | |
|
||||
| TitleTemplate | 子菜单标题模板 | RenderFragment | | |
|
||||
|
||||
### MenuItemGroup
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| -------- | ------------ | ----------------- | ------ | ---- |
|
||||
| ChildContent | 分组的菜单项 | MenuItem\[] | | |
|
||||
| Style | 额外的 CSS 样式 | string | - | |
|
||||
| Title | 分组标题 | string\|ReactNode | | |
|
||||
| TitleTemplate | 分组标题模板 | RenderFragment | | |
|
||||
|
||||
### Menu.Divider
|
||||
|
||||
菜单项分割线，只用在弹出菜单内。
|
||||
@ -0,0 +1,86 @@
|
||||
---
|
||||
category: Components
|
||||
type: Feedback
|
||||
title: Message
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/hAkKTIW0K/Message.svg
|
||||
---
|
||||
|
||||
Display global messages as feedback in response to user operations.
|
||||
|
||||
## When To Use
|
||||
|
||||
- To provide feedback such as success, warning, error etc.
|
||||
- A message is displayed at top and center and will be dismissed automatically, as a non-interrupting light-weighted prompt.
|
||||
|
||||
## API
|
||||
|
||||
> Please confirm that the `<AntContainer />` component has been added to `App.Razor`.
|
||||
|
||||
This components provides some methods, with usage and arguments as following:
|
||||
|
||||
- `IMessageService.Success(content, [duration], onClose)`
|
||||
- `IMessageService.Error(content, [duration], onClose)`
|
||||
- `IMessageService.Info(content, [duration], onClose)`
|
||||
- `IMessageService.Warning(content, [duration], onClose)`
|
||||
- `IMessageService.Warn(content, [duration], onClose)` // alias of warning
|
||||
- `IMessageService.Loading(content, [duration], onClose)`
|
||||
|
||||
| Argument | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| content | content of the message | string\|ReactNode\|config | - |
|
||||
| duration | time(seconds) before auto-dismiss, don't dismiss if set to 0 or null | double? | 3 |
|
||||
| onClose | Specify a function that will be called when the message is closed | Action | - |
|
||||
|
||||
`afterClose` can be called in thenable interface:
|
||||
|
||||
- `IMessageService.[level](content, [duration]).ContinueWith(afterClose)`
|
||||
- `IMessageService.[level](content, [duration], onClose).ContinueWith(afterClose)`
|
||||
|
||||
where `level` refers a method of `IMessageService`. The result of `ContinueWith` method will be a Task.
|
||||
|
||||
Supports passing parameters wrapped in an object:
|
||||
|
||||
- `IMessageService.Open(config:MessageConfig)`
|
||||
- `IMessageService.Success(config:MessageConfig)`
|
||||
- `IMessageService.Error(config:MessageConfig)`
|
||||
- `IMessageService.Info(config:MessageConfig)`
|
||||
- `IMessageService.Warning(config:MessageConfig)`
|
||||
- `IMessageService.Warn(config:MessageConfig)` // alias of warning
|
||||
- `IMessageService.Loading(config:MessageConfig)`
|
||||
|
||||
The properties of config are as follows:
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| Content | content of the message | string\|RenderFragment | - |
|
||||
| Duration | time(seconds) before auto-dismiss, don't dismiss if set to 0 or null | double? | 3 |
|
||||
| OnClose | Specify a function that will be called when the message is closed | event Action | - |
|
||||
| Icon | Customized Icon | RenderFragment | - |
|
||||
| Key | The unique identifier of the Message | string | - |
|
||||
|
||||
### Global static methods
|
||||
|
||||
Methods for global configuration and destruction are also provided:
|
||||
|
||||
- `IMessageService.Config(options:MessageGlobalConfig)`
|
||||
- `IMessageService.Destroy()`
|
||||
|
||||
#### message.config
|
||||
|
||||
```c#
|
||||
@inject IMessageService MessageService;
|
||||
|
||||
MessageService.Config(new MessageGlobalConfig{
|
||||
Top: 100,
|
||||
Duration: 2,
|
||||
MaxCount: 3,
|
||||
Rtl: true,
|
||||
});
|
||||
```
|
||||
|
||||
| Argument | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| Duration | time before auto-dismiss, in seconds | double | 3 |
|
||||
| MaxCount | max message show, drop oldest if exceed limit | int | - |
|
||||
| Top | distance from top | double | 24 |
|
||||
| Rtl | whether to enable RTL mode | bool | `false` |
|
||||
@ -0,0 +1,87 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 全局提示
|
||||
type: 反馈
|
||||
title: Message
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/hAkKTIW0K/Message.svg
|
||||
---
|
||||
|
||||
全局展示操作反馈信息。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 可提供成功、警告和错误等反馈信息。
|
||||
- 顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。
|
||||
|
||||
## API
|
||||
|
||||
> 请确认已经在 `App.Razor` 中添加了 `<AntContainer />` 组件。
|
||||
|
||||
该组件提供了一些方法，用法和参数如下：
|
||||
|
||||
- `IMessageService.Success(content, [duration], onClose)`
|
||||
- `IMessageService.Error(content, [duration], onClose)`
|
||||
- `IMessageService.Info(content, [duration], onClose)`
|
||||
- `IMessageService.Warning(content, [duration], onClose)`
|
||||
- `IMessageService.Warn(content, [duration], onClose)` // alias of warning
|
||||
- `IMessageService.Loading(content, [duration], onClose)`
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------- | --------------------------------------------- | ------------------------- | ------ |
|
||||
| content | 提示内容 | string\|RenderFragment\|MessageConfig | - |
|
||||
| duration | 自动关闭的延时，单位秒。设为 0 或者 null 时不自动关闭。 | double? | 3 |
|
||||
| onClose | 关闭时触发的回调函数 | Action | - |
|
||||
|
||||
组件同时提供 ContinueWith 接口。
|
||||
|
||||
- `IMessageService.[level](content, [duration]).ContinueWith(afterClose)`
|
||||
- `IMessageService.[level](content, [duration], onClose).ContinueWith(afterClose)`
|
||||
|
||||
其中 `[level]` 是组件已经提供的方法。 `ContinueWith` 接口的返回值为Task。
|
||||
|
||||
也可以对象的形式传递参数：
|
||||
|
||||
- `IMessageService.Open(config:MessageConfig)`
|
||||
- `IMessageService.Success(config:MessageConfig)`
|
||||
- `IMessageService.Error(config:MessageConfig)`
|
||||
- `IMessageService.Info(config:MessageConfig)`
|
||||
- `IMessageService.Warning(config:MessageConfig)`
|
||||
- `IMessageService.Warn(config:MessageConfig)` // alias of warning
|
||||
- `IMessageService.Loading(config:MessageConfig)`
|
||||
|
||||
`config` 对象属性如下：
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------- | --------------------------------------------- | -------------- | ------ |
|
||||
| Content | 提示内容 | string\|RenderFragment | - |
|
||||
| Duration | 自动关闭的延时，单位秒。设为 0 或者 null 时不自动关闭。 | double? | 3 |
|
||||
| OnClose | 关闭时触发的回调函数 | event Action | - |
|
||||
| Icon | 自定义图标 | RenderFragment | - |
|
||||
| Key | 当前提示的唯一标志 | string | - |
|
||||
|
||||
### 全局方法
|
||||
|
||||
还提供了全局配置和全局销毁方法：
|
||||
|
||||
- `IMessageService.Config(options:MessageGlobalConfig)`
|
||||
- `IMessageService.Destroy()`
|
||||
|
||||
#### IMessageService.Config
|
||||
|
||||
```c#
|
||||
@inject IMessageService MessageService;
|
||||
|
||||
MessageService.Config(new MessageGlobalConfig{
|
||||
Top: 100,
|
||||
Duration: 2,
|
||||
MaxCount: 3,
|
||||
Rtl: true,
|
||||
});
|
||||
```
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| Duration | 默认自动关闭延时，单位秒 | double | 3 |
|
||||
| MaxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | int | 0 |
|
||||
| Top | 消息距离顶部的位置 | double | 24 |
|
||||
| Rtl | 是否开启 RTL 模式 | bool | `false` |
|
||||
139
site/AntDesign.Docs/Demos/Components/Modal/doc/index.en-US.md
Normal file
139
site/AntDesign.Docs/Demos/Components/Modal/doc/index.en-US.md
Normal file
@ -0,0 +1,139 @@
|
||||
---
|
||||
type: Feedback
|
||||
category: Components
|
||||
title: Modal
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg
|
||||
---
|
||||
|
||||
Modal dialogs.
|
||||
|
||||
## When To Use
|
||||
|
||||
When requiring users to interact with the application, but without jumping to a new page and interrupting the user's workflow, you can use `Modal` to create a new floating layer over the current page to get user feedback or display information. Additionally, if you need show a simple confirmation dialog, you can use `ModalService.Confirm()`, and so on.
|
||||
|
||||
## API
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ----------------- | ------------------------------------------------------------ | ----------------------------- | ------------- |
|
||||
| AfterClose | Specify a function that will be called when modal is closed completely. | EventCallback | - |
|
||||
| BodyStyle | Body style for modal body element. Such as height, padding etc. | string | - |
|
||||
| CancelText | Text of the Cancel button | string\|RenderFragment | Cancel |
|
||||
| Centered | Centered Modal | bool | false |
|
||||
| Closable | Whether a close (x) button is visible on top right of the modal dialog or not | bool | true |
|
||||
| CloseIcon | custom close icon | RenderFragment | - |
|
||||
| ConfirmLoading | Whether to apply loading visual effect for OK button or not | bool | false |
|
||||
| DestroyOnClose | Whether to unmount child components on onClose | bool | false |
|
||||
| Header | Header content, set as Header="null" when you don't need default header | RenderFragment | - |
|
||||
| Footer | Footer content, set as Footer="null" when you don't need default buttons | string\|RenderFragment | confirm and cancel buttons |
|
||||
| ForceRender | Force render Modal | bool | false |
|
||||
| GetContainer | Return the mount node for Modal | ElementReference? | document.body |
|
||||
| Keyboard | Whether support press esc to close | bool | true |
|
||||
| Mask | Whether show mask or not. | bool | true |
|
||||
| MaskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | bool | true |
|
||||
| MaskStyle | Style for modal's mask element. | string | - |
|
||||
| OkText | Text of the OK button | string\|RenderFragment | OK |
|
||||
| OkType | Button type of the OK button | string | primary |
|
||||
| OkButtonProps | The ok button props | ButtonProps | - |
|
||||
| CancelButtonProps | The cancel button props | ButtonProps | - |
|
||||
| Style | Style of floating layer, typically used at least for adjusting the position. | string | - |
|
||||
| Title | The modal dialog's title, If the TitleTemplate is not null, the TitleTemplate takes precedence | string | null |
|
||||
| TitleTemplate | The modal dialog's title | RenderFragment | null |
|
||||
| Visible | Whether the modal dialog is visible or not | bool | - |
|
||||
| Width | Width of the modal dialog | string\|double | 520 |
|
||||
| WrapClassName | The class name of the container of the modal dialog | string | - |
|
||||
| ZIndex | The z-index of the Modal | int | 1000 |
|
||||
| OnCancel | Specify a function that will be called when a user clicks mask, close button on top right or Cancel button | EventCallback<MouseEventArgs> | - |
|
||||
| OnOk | Specify a function that will be called when a user clicks the OK button | EventCallback<MouseEventArgs> | - |
|
||||
| Draggable | Is it allowed to drag Modal through its Header（if true, at least one of Title and TitleTemplate must have a value） | bool | false |
|
||||
| DragInViewport | If Draggable is true, and is it only allowed drag Modal in the viewport | bool | true |
|
||||
| MaxBodyHeight | Modal content max height | string? | null |
|
||||
| Maximizable | Whether to display the maximize button | bool | false |
|
||||
| MaximizeBtnIcon | The icon of the maximize button when the modal is in normal state | RenderFragment | fullscreen |
|
||||
| RestoreBtnIcon | The icon of the maximize button when the modal is in maximized state | RenderFragment | fullscreen-exit |
|
||||
| DefaultMaximized | Modal is maximized at initialization | bool | false |
|
||||
| Resizable | Can Modal be resized | bool | false |
|
||||
|
||||
#### Note
|
||||
|
||||
> The state of Modal will be preserved at it's component lifecycle by default, if you wish to open it with a brand new state everytime, set `DestroyOnClose` on it.
|
||||
|
||||
### ModalService.method()
|
||||
|
||||
There are some ways to display the information based on the content's nature:
|
||||
|
||||
1. For Confirm dialog
|
||||
|
||||
- `ModalService.Info`
|
||||
- `ModalService.Success`
|
||||
- `ModalService.Error`
|
||||
- `ModalService.Warning`
|
||||
- `ModalService.Confirm`
|
||||
- `ModalService.CreateAsync`
|
||||
- `ModalService.ConfirmAsync`
|
||||
- `ModalService.InfoAsync`
|
||||
- `ModalService.SuccessAsync`
|
||||
- `ModalService.ErrorAsync`
|
||||
- `ModalService.WarningAsync`
|
||||
- `ModalService.UpdateConfirmAsync`
|
||||
- `ModalService.DestroyConfirmAsync`
|
||||
- `ModalService.DestroyAllConfirmAsync`
|
||||
- `ModalService.CreateConfirmAsync`
|
||||
|
||||
2. For Modal dialog
|
||||
|
||||
- `ModalService.CreateModalAsync`
|
||||
|
||||
|
||||
> Please confirm that the `<AntContainer />` component has been added to `App.Razor`.
|
||||
> `ConfirmAsync`、`InfoAsync`、`SuccessAsync`、`ErrorAsync`、`WarningAsync` will return Task<bool>，it can be used to determine whether the button the user clicks is an OK button (true) or a cancel button (false)
|
||||
|
||||
### ConfirmService
|
||||
|
||||
`IConfirmService.Show` to show a simple Confirm dialog like MessageBox of Windows, it's different from ModalService. ModalService can only create OK-Cancel Confirm dialog and return ConfirmRef or OK button is clicked, but ConfirmService return ConfirmResult.
|
||||
|
||||
|
||||
#### ConfirmOptions
|
||||
|
||||
| CancelText | Text of the Cancel button, equivalent to Button2Props.ChildContent | string\|RenderFragment | Cancel |
|
||||
| ----------------- | ------------------------------------------------------------ | ------------------------------ | ------- |
|
||||
| Centered | Centered Modal | bool | false |
|
||||
| ClassName | className of container | string | - |
|
||||
| Content | Content | string\|RenderFragment | - |
|
||||
| Icon | custom icon | RenderFragment | - |
|
||||
| Keyboard | Whether support press esc to close | bool | true |
|
||||
| Mask | Whether show mask or not. | bool | true |
|
||||
| MaskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | bool | false |
|
||||
| OkText | Text of the OK button, equivalent to Button1Props.ChildContent | string | OK |
|
||||
| OkType | Button type of the OK button, equivalent to Button1Props.Type | string | primary |
|
||||
| OkButtonProps | The ok button props , equivalent to Button1Props | ButtonProps | - |
|
||||
| CancelButtonProps | The cancel button props, equivalent to Button2Props | ButtonProps | - |
|
||||
| Title | The modal dialog's title, If the TitleTemplate is not null, the TitleTemplate takes precedence | string | null |
|
||||
| TitleTemplate | The modal dialog's title | RenderFragment | null |
|
||||
| Width | Width of the modal dialog | string\|double | 416 |
|
||||
| ZIndex | The z-index of the Modal | int | 1000 |
|
||||
| OnCancel | Specify a function that will be called when the user clicks the Cancel button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed. **It's only trigger in Confirm created by ModalService mode** | EventCallback<MouseEventArgs>? | null |
|
||||
| OnOk | Specify a function that will be called when the user clicks the OK button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed. **It's only trigger in Confirm created by ModalService mode** | EventCallback<MouseEventArgs>? | null |
|
||||
| Button1Props | the props of the leftmost button in LTR layout | ButtonProps | Type = ButtonType.Primary, ChildContent is in the same order as ConfirmButtons |
|
||||
| Button2Props | the props of the second button on the left is in the LTR layout | ButtonProps | ChildContent is in the same order as ConfirmButtons|
|
||||
| Button3Props | the props of the rightmost button in LTR layout | ButtonProps | ChildContent is in the same order as ConfirmButtons |
|
||||
|
||||
All the `ModalService.Method`s will return a reference, and then we can update and close the modal dialog by the reference.
|
||||
|
||||
``` c#
|
||||
ConfirmOptions config = new ConfirmOptions();
|
||||
var modelRef = await ModalService.Info(config);
|
||||
|
||||
modelRef.UpdateConfirmAsync();
|
||||
|
||||
ModalService.DestroyConfirmAsync(modelRef);
|
||||
```
|
||||
|
||||
- `ModalService.DestroyAllConfirmAsync`
|
||||
|
||||
`ModalService.DestroyAllConfirmAsync()` could destroy all confirmation modal dialogs(ModalService.Info/ModalService.Success/ModalService.Error/ModalService.Warning/ModalService.Confirm). Usually, you can use it in router change event to destroy confirm modal dialog automatically without use modal reference to close( it's too complex to use for all modal dialogs)
|
||||
|
||||
## FAQ
|
||||
|
||||
### Why does the custom component inherited from `FeedbackComponent<>` not execute the `Dispose` method when a Modal created by `ModalService.CreateModalAsync<>` is closed?
|
||||
|
||||
Modal will not be removed from DOM by default after closing, so the `Dispose` method of custom component will not be executed. You can change this default behavior by setting `modalOptions.DestroyOnClose=true`.
|
||||
142
site/AntDesign.Docs/Demos/Components/Modal/doc/index.zh-CN.md
Normal file
142
site/AntDesign.Docs/Demos/Components/Modal/doc/index.zh-CN.md
Normal file
@ -0,0 +1,142 @@
|
||||
---
|
||||
type: 反馈
|
||||
category: Components
|
||||
subtitle: 对话框
|
||||
title: Modal
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg
|
||||
---
|
||||
|
||||
模态对话框。
|
||||
|
||||
## 何时使用
|
||||
|
||||
需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 `Modal` 在当前页面正中打开一个浮层，承载相应的操作。
|
||||
|
||||
另外当需要一个简洁的确认框询问用户时，可以使用 `ModalService.Confirm()` 等语法糖方法。
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| AfterClose | Modal 关闭后的回调 | EventCallback | - |
|
||||
| BodyStyle | Modal body 样式 | string | - |
|
||||
| CancelText | 取消按钮文字 | string\|RenderFragment | Cancel |
|
||||
| Centered | 垂直居中展示 Modal | bool | `false` |
|
||||
| Closable | 是否显示右上角的关闭按钮 | bool | true |
|
||||
| CloseIcon | 自定义关闭图标 | RenderFragment | - |
|
||||
| ConfirmLoading | 确定按钮 loading | bool | false |
|
||||
| DestroyOnClose | 关闭时销毁 Modal 里的子元素 | bool | false |
|
||||
| Header | 头部内容，当不需要头部时，可以设置为`null` | RenderFragment | - |
|
||||
| Footer | 底部内容，当不需要默认底部按钮时，可以设为 `null` | string\|RenderFragment | 确定取消按钮 |
|
||||
| ForceRender | 强制渲染 Modal | bool | false |
|
||||
| GetContainer | 指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom | ElementReference? | document.body |
|
||||
| Keyboard | 是否支持键盘 esc 关闭 | bool | true |
|
||||
| Mask | 是否展示遮罩 | bool | true |
|
||||
| MaskClosable | 点击蒙层是否允许关闭 | bool | true |
|
||||
| MaskStyle | 遮罩样式 | string | {} |
|
||||
| OkText | 确认按钮文字 | string\|RenderFragment | OK |
|
||||
| OkType | 确认按钮类型 | string | primary |
|
||||
| OkButtonProps | ok 按钮 props | ButtonProps | - |
|
||||
| CancelButtonProps | cancel 按钮 props | ButtonProps | - |
|
||||
| Style | 可用于设置浮层的样式，调整浮层位置等 | string | - |
|
||||
| Title | 标题，如果 TitleTemplate 不为null，则优先显示 TitleTemplate | string | null |
|
||||
| TitleTemplate | 标题 | RenderFragment | null |
|
||||
| Visible | 对话框是否可见 | bool | - |
|
||||
| Width | 宽度 | string\|number | 520 |
|
||||
| WrapClassName | 对话框外层容器的类名 | string | - |
|
||||
| ZIndex | 设置 Modal 的 `z-index` | int | 1000 |
|
||||
| OnCancel | 点击遮罩层或右上角叉或取消按钮的回调 | EventCallback<MouseEventArgs> | - |
|
||||
| OnOk | 点击确定回调 | EventCallback<MouseEventArgs> | - |
|
||||
| Draggable | 是否允许通过 Modal的 Header 拖动 Modal（如果为true，Title 和 TitleTemplate 至少有一个必须有值） | bool | false |
|
||||
| DragInViewport | 如果 Draggable 为 true，是否仅在视窗内拖动Modal | bool | true |
|
||||
| MaxBodyHeight | Modal 内容的最大高度 | string? | null |
|
||||
| Maximizable | 是否显示最大化按钮 | bool | false |
|
||||
| MaximizeBtnIcon | Modal在正常状态下的最大化按钮icon | RenderFragment | fullscreen |
|
||||
| RestoreBtnIcon | Modal在最大化状态下的还原按钮icon | RenderFragment | fullscreen-exit |
|
||||
| DefaultMaximized | Modal 在初始化时即为最大化状态 | bool | false |
|
||||
| Resizable | 是否可以对 Modal 进行大小调整 | bool | false |
|
||||
|
||||
|
||||
#### 注意
|
||||
|
||||
> `<Modal />` 默认关闭后状态不会自动清空, 如果希望每次打开都是新内容，请设置 `DestroyOnClose`。
|
||||
|
||||
### ModalService
|
||||
|
||||
1. 用于创建 Confirm dialog
|
||||
|
||||
- `ModalService.Info`
|
||||
- `ModalService.Success`
|
||||
- `ModalService.Error`
|
||||
- `ModalService.Warning`
|
||||
- `ModalService.Confirm`
|
||||
- `ModalService.CreateAsync`
|
||||
- `ModalService.ConfirmAsync`
|
||||
- `ModalService.InfoAsync`
|
||||
- `ModalService.SuccessAsync`
|
||||
- `ModalService.ErrorAsync`
|
||||
- `ModalService.WarningAsync`
|
||||
- `ModalService.UpdateConfirmAsync`
|
||||
- `ModalService.DestroyConfirmAsync`
|
||||
- `ModalService.DestroyAllConfirmAsync`
|
||||
- `ModalService.CreateConfirmAsync`
|
||||
|
||||
2. 用于创建 Modal dialog
|
||||
|
||||
- `ModalService.CreateModalAsync`
|
||||
|
||||
|
||||
> 请确认已经在 `App.Razor` 中添加了 `<AntContainer />` 组件。
|
||||
> `ConfirmAsync`、`InfoAsync`、`SuccessAsync`、`ErrorAsync`、`WarningAsync` 返回值为Task<bool>，可用于判断用户点击的按钮是 OK按钮(true) 还是 Cancel按钮(false)。
|
||||
|
||||
### ConfirmService
|
||||
|
||||
`IConfirmService.Show` 用于弹出类似于在WinForm中使用 MessageBox 方式弹出的对话框。这和 ModalService 不同的是，ModalService 只可以创建 具有 OK-Cancel 按钮的对话框并返回 ConfirmRef 对象或者是否OK按钮被点击，而 ConfirmService 总是返回 ConfirmResult ，以指示哪个按钮被点击。
|
||||
|
||||
|
||||
#### ConfirmOptions
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| AutoFocusButton | 指定自动获得焦点的按钮 | ConfirmAutoFocusButton | `ConfirmAutoFocusButton.Ok` |
|
||||
| CancelText | 取消按钮文字，等价于 Button2Props.ChildContent | string | Cancel |
|
||||
| Centered | 垂直居中展示 Modal | bool | `false` |
|
||||
| ClassName | 容器(.ant-modal)类名 | string | - |
|
||||
| Content | 内容 | string\|RenderFragment | - |
|
||||
| Icon | 自定义图标 | RenderFragment | - |
|
||||
| MaskClosable | 点击蒙层是否允许关闭 | bool | `false` |
|
||||
| OkText | 确认按钮文字，等价于 Button1Props.ChildContent | string\|RenderFragment | 确定 |
|
||||
| OkType | 确认按钮类型，等价于 Button1Props.Type | string | primary |
|
||||
| OkButtonProps | ok 按钮 props，与 Button1Props 等价 | ButtonProps | - |
|
||||
| CancelButtonProps | cancel 按钮 props，与 Button2Props 等价 | ButtonProps | - |
|
||||
| Title | 标题，如果 TitleTemplate 不为null，则优先显示 TitleTemplate | string | null |
|
||||
| TitleTemplate | 标题 | RenderFragment | null |
|
||||
| Width | 宽度 | string\|double | 416 |
|
||||
| ZIndex | 设置 Modal 的 `z-index` | int | 1000 |
|
||||
| OnCancel | 取消回调，参数为关闭函数，仅会在通过 ModalService 创建的 Confirm 触发 | EventCallback<MouseEventArgs>? | null |
|
||||
| OnOk | 点击确定回调，参数为关闭函数，仅会在通过 ModalService 创建的 Confirm 触发 | EventCallback<MouseEventArgs>? | null |
|
||||
| Button1Props | 在LTR模式中最左侧按钮的属性 | ButtonProps | Type = ButtonType.Primary, ChildContent 与 ConfirmButtons 顺序相同 |
|
||||
| Button2Props | 在LTR模式中左边第二个按钮的属性 | ButtonProps | ChildContent 与 ConfirmButtons 顺序相同|
|
||||
| Button3Props | 在LTR模式中左边第三个按钮的属性 | ButtonProps | ChildContent 与 ConfirmButtons 顺序相同 |
|
||||
|
||||
以上函数调用后，会返回一个引用，可以通过该引用更新和关闭弹窗。
|
||||
|
||||
``` c#
|
||||
ConfirmOptions config = new ConfirmOptions();
|
||||
var modelRef = await ModalService.Info(config);
|
||||
|
||||
modelRef.UpdateConfirmAsync();
|
||||
|
||||
ModalService.DestroyConfirmAsync(modelRef);
|
||||
```
|
||||
|
||||
- `ModalService.DestroyAllConfirmAsync`
|
||||
|
||||
使用 `ModalService.DestroyAllConfirmAsync()` 可以销毁弹出的确认窗（即上述的 ModalService.Info、ModalService.Success、ModalService.Error、ModalService.Warning、ModalService.Confirm）。通常用于路由监听当中，处理路由前进、后退不能销毁确认对话框的问题，而不用各处去使用实例的返回值进行关闭（ModalService.DestroyConfirmAsync(config) 适用于主动关闭，而不是路由这样被动关闭）
|
||||
|
||||
|
||||
## FAQ
|
||||
|
||||
### 为什么通过`ModalService.CreateModalAsync<>`创建的Modal，在关闭后，继承自`FeedbackComponent<>`的自定义组件不会执行`Dispose`方法？
|
||||
|
||||
Modal在关闭后默认不会从DOM中移除，因此自定义组件的`Dispose`方法不会被执行。可以通过设置`modalOptions.DestroyOnClose=true`来改变此默认行为。
|
||||
@ -0,0 +1,80 @@
|
||||
---
|
||||
category: Components
|
||||
type: Feedback
|
||||
title: Notification
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/Jxm5nw61w/Notification.svg
|
||||
---
|
||||
|
||||
Display a notification message globally.
|
||||
|
||||
## When To Use
|
||||
|
||||
To display a notification message at any of the four corners of the viewport. Typically it can be used in the following cases:
|
||||
|
||||
- A notification with complex content.
|
||||
- A notification providing a feedback based on the user interaction. Or it may show some details about upcoming steps the user may have to follow.
|
||||
- A notification that is pushed by the application.
|
||||
|
||||
## API
|
||||
|
||||
> Please confirm that the `<AntContainer />` component has been added to `App.Razor`.
|
||||
|
||||
- `INotificationService.Open(config:NotificationConfig)`
|
||||
- `INotificationService.Info(config:NotificationConfig)`
|
||||
- `INotificationService.Success(config:NotificationConfig)`
|
||||
- `INotificationService.Warning(config:NotificationConfig)`
|
||||
- `INotificationService.Warn(config:NotificationConfig)`
|
||||
- `INotificationService.Error(config:NotificationConfig)`
|
||||
- `INotificationService.Close(key:string)`
|
||||
- `INotificationService.Destroy()`
|
||||
- `INotificationService.CreateAsync()`
|
||||
- `INotificationService.UpdateAsync(key:string, description:OneOf<string, RenderFragment>, message:OneOf<string, RenderFragment>? = null)`
|
||||
|
||||
The properties of config are as follows:
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ----------- | ------------------------------------------------------------ | ------------------------- | ----------------------------------- |
|
||||
| Btn | Customized close button | RenderFragment | null |
|
||||
| ClassName | Customized CSS class | string | null |
|
||||
| CloseIcon | custom close icon | RenderFragment | null |
|
||||
| Description | The content of notification box (required) | string\|RenderFragment | - |
|
||||
| Duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | double? | 4.5 |
|
||||
| Icon | Customized icon | RenderFragment | null |
|
||||
| Key | The unique identifier of the Notification | string | Guid.NewGuid().ToString() |
|
||||
| Message | The title of notification box (required) | string\|RenderFragment | - |
|
||||
| OnClose | Trigger when notification closed | event Action | null |
|
||||
| OnClick | Specify a function that will be called when the notification is clicked | event Action | null |
|
||||
| Placement | Position of Notification, can be one of `NotificationPlacement.TopLeft` `NotificationPlacement.TopRight` `NotificationPlacement.BottomLeft` `NotificationPlacement.BottomRight` | NotificationPlacement? | `NotificationPlacement.TopRight` |
|
||||
| Style | Customized inline style | string | null |
|
||||
|
||||
`INotificationService` also provides a global `Config()` method that can be used for specifying the default options. Once this method is used, all the notification boxes will take into account these globally defined options when displaying.
|
||||
|
||||
`INotificationService.Config(config:NotificationGlobalConfig)`
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| :-------- | :----------------------------------------------------------- | :------------------------- | :-------------------------------- |
|
||||
| Bottom | Distance from the bottom of the viewport, when `placement` is `NotificationPlacement.BottomLeft` or `NotificationPlacement.BottomRight` (unit: pixels). | double? | 24 |
|
||||
| Top | Distance from the top of the viewport, when `placement` is `NotificationPlacement.TopLeft` or `NotificationPlacement.TopRight` (unit: pixels). | double? | 24 |
|
||||
| CloseIcon | custom close icon | RenderFragment | - |
|
||||
| Duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | double? | 4.5 |
|
||||
| Placement | Position of Notification, can be one of `NotificationPlacement.TopLeft` `NotificationPlacement.TopRight` `NotificationPlacement.BottomLeft` `NotificationPlacement.BottomRight` | NotificationPlacement? | NotificationPlacement.TopRight |
|
||||
| Rtl | whether to enable RTL mode | bool | `false` |
|
||||
|
||||
## NotificationRef
|
||||
|
||||
## Properties
|
||||
|
||||
| Name | Description |
|
||||
| ------ | ------------------------------------ |
|
||||
| Config | get only 'Notificationconfig' object |
|
||||
|
||||
## Methods
|
||||
|
||||
| Name | Description |
|
||||
| ------------------------------------------------------------ | ------------------------------------------------------------ |
|
||||
| OpenAsync() | open the notification box |
|
||||
| UpdateConfigAsync() | After modifying the `Config` property, update the notification box |
|
||||
| UpdateConfigAsync(OneOf<string, RenderFragment>) | update the notification box's `Description` |
|
||||
| UpdateConfigAsync(OneOf<string, RenderFragment>, OneOf<string, RenderFragment>) | update the notification box's `Message` and `Description` |
|
||||
| CloseAsync() | close the notification box |
|
||||
|
||||
@ -0,0 +1,81 @@
|
||||
---
|
||||
category: Components
|
||||
type: 反馈
|
||||
subtitle: 通知提醒框
|
||||
title: Notification
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/Jxm5nw61w/Notification.svg
|
||||
---
|
||||
|
||||
全局展示通知提醒信息。
|
||||
|
||||
## 何时使用
|
||||
|
||||
在系统四个角显示通知提醒信息。经常用于以下情况：
|
||||
|
||||
- 较为复杂的通知内容。
|
||||
- 带有交互的通知，给出用户下一步的行动点。
|
||||
- 系统主动推送。
|
||||
|
||||
## API
|
||||
|
||||
> 请确认已经在 `App.Razor` 中添加了 `<AntContainer />` 组件。
|
||||
|
||||
- `INotificationService.Open(config:NotificationConfig)`
|
||||
- `INotificationService.Info(config:NotificationConfig)`
|
||||
- `INotificationService.Success(config:NotificationConfig)`
|
||||
- `INotificationService.Warning(config:NotificationConfig)`
|
||||
- `INotificationService.Warn(config:NotificationConfig)`
|
||||
- `INotificationService.Error(config:NotificationConfig)`
|
||||
- `INotificationService.Close(key:string)`
|
||||
- `INotificationService.Destroy()`
|
||||
- `INotificationService.CreateAsync()`
|
||||
- `INotificationService.UpdateAsync(key:string, description:OneOf<string, RenderFragment>, message:OneOf<string, RenderFragment>? = null)`
|
||||
|
||||
config 参数如下：
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ----------- | ------------------------------------------------------------ | ------------------------- | ----------------------------------- |
|
||||
| Btn | 自定义关闭按钮 | RenderFragment | null |
|
||||
| ClassName | 自定义 CSS class | string | null |
|
||||
| CloseIcon | 自定义关闭图标 | RenderFragment | null |
|
||||
| Description | 通知提醒内容，必选 | string\|RenderFragment | - |
|
||||
| Duration | 默认 4.5 秒后自动关闭，配置为 null 或者 0 则不自动关闭 | double? | 4.5 |
|
||||
| Icon | 自定义图标 | RenderFragment | null |
|
||||
| Key | 当前通知唯一标志 | string | Guid.NewGuid().ToString() |
|
||||
| Message | 通知提醒标题，必选 | string\|RenderFragment | - |
|
||||
| OnClose | 当通知关闭时触发的事件 | event Action | null |
|
||||
| OnClick | 点击通知时触发的事件 | event Action | null |
|
||||
| Placement | 弹出位置，可选 `NotificationPlacement.TopLeft` `NotificationPlacement.TopRight` `NotificationPlacement.BottomLeft` `NotificationPlacement.BottomRight` | NotificationPlacement? | `NotificationPlacement.TopRight` |
|
||||
| Style | 自定义内联样式 | string | null |
|
||||
|
||||
还提供了一个全局配置方法，在调用前提前配置，全局一次生效。
|
||||
|
||||
`INotificationService.Config(config:NotificationGlobalConfig)`
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| :-------- | :----------------------------------------------------------- | :------------------------- | :-------------------------------- |
|
||||
| Bottom | 消息从底部弹出时，距离底部的位置，单位像素。 | double? | 24 |
|
||||
| Top | 消息从顶部弹出时，距离顶部的位置，单位像素。 | double? | 24 |
|
||||
| CloseIcon | 自定义关闭图标 | RenderFragment | - |
|
||||
| Duration | 默认自动关闭延时，单位秒。 | double? | 4.5 |
|
||||
| Placement | 弹出位置，可选 `NotificationPlacement.TopLeft` `NotificationPlacement.TopRight` `NotificationPlacement.BottomLeft` `NotificationPlacement.BottomRight` | NotificationPlacement? | NotificationPlacement.TopRight |
|
||||
| Rtl | 是否开启 RTL 模式 | bool | `false` |
|
||||
|
||||
## NotificationRef
|
||||
|
||||
### 属性
|
||||
|
||||
| 名称 | 说明 |
|
||||
| ------ | ------------------------------ |
|
||||
| Config | 只读 `NotificationConfig` 对象 |
|
||||
|
||||
### 方法
|
||||
|
||||
| 名称 | 说明 |
|
||||
| ------------------------------------------------------------ | ------------------------------------ |
|
||||
| OpenAsync() | 打开一个通知框 |
|
||||
| UpdateConfigAsync() | 修改Config属性后，更新通知框 |
|
||||
| UpdateConfigAsync(OneOf<string, RenderFragment>) | 更新通知框的`Description` |
|
||||
| UpdateConfigAsync(OneOf<string, RenderFragment>, OneOf<string, RenderFragment>) | 更新通知框的`Message`和`Description` |
|
||||
| CloseAsync() | 关闭通知框 |
|
||||
|
||||
@ -0,0 +1,8 @@
|
||||
---
|
||||
category: Components
|
||||
type: Overview
|
||||
title: Overview
|
||||
---
|
||||
|
||||
`Ant Design Blazor` provides plenty of UI components to enrich your web applications, and we will improve components experience consistently. We also recommend some great Third-Party Libraries additionally.
|
||||
|
||||
@ -0,0 +1,8 @@
|
||||
---
|
||||
category: Components
|
||||
type: 组件总览
|
||||
title: Overview
|
||||
subtitle: 组件总览
|
||||
---
|
||||
|
||||
`Ant Design Blazor` 为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践。除了官方组件，我们也提供了社区精选组件作为必要的补充。
|
||||
@ -0,0 +1,36 @@
|
||||
---
|
||||
category: Components
|
||||
type: Navigation
|
||||
title: PageHeader
|
||||
cols: 1
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/6bKE0Cq0R/PageHeader.svg
|
||||
---
|
||||
|
||||
A header with common actions and design elements built in.
|
||||
|
||||
## When To Use
|
||||
|
||||
PageHeader can be used to highlight the page topic, display important information about the page, and carry the action items related to the current page (including page-level operations, inter-page navigation, etc.) It can also be used as inter-page navigation.
|
||||
|
||||
## API
|
||||
|
||||
### PageHeader
|
||||
| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `Ghost` | Make background transparent | `boolean` | `true` | - |
|
||||
| `Title` | Title string | `string \| RenderFragment` | - | - |
|
||||
| `Subtitle` | subTitle string | `string \| RenderFragment` | - | - |
|
||||
| `BackIcon` | Custom back icon | `bool \| string \| RenderFragment` | - | - |
|
||||
| `OnBack` | Back icon click event | `EventCallback` | default Call history.back| - |
|
||||
|
||||
### Page Header 组成部分
|
||||
| 元素 | 说明 |
|
||||
| ----- | ----------- | ---- | ------------- |
|
||||
| `PageHeaderTitle` | Title section |
|
||||
| `PageHeaderSubtitle` | Subtitle section，`Subtitle` has high priority |
|
||||
| `PageHeaderContent` | Content section |
|
||||
| `PageHeaderFooter` | Footer section |
|
||||
| `PageHeaderTags` | Tags container after the title |
|
||||
| `PageHeaderExtra` | Operating area, at the end of the line of the title line |
|
||||
| `PageHeaderBreadcrumb` | Breadcrumb section |
|
||||
| `PageHeaderAvatar` | Avatar section |
|
||||
@ -0,0 +1,37 @@
|
||||
---
|
||||
category: Components
|
||||
type: 导航
|
||||
title: PageHeader
|
||||
subtitle: 页头
|
||||
cols: 1
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/6bKE0Cq0R/PageHeader.svg
|
||||
---
|
||||
|
||||
页头位于页容器中，页容器顶部，起到了内容概览和引导页级操作的作用。包括由面包屑、标题、页面内容简介、页面级操作等、页面级导航组成。
|
||||
|
||||
## 何时使用
|
||||
|
||||
当需要使用户快速理解当前页是什么以及方便用户使用页面功能时使用，通常也可被用作页面间导航。
|
||||
|
||||
## API
|
||||
|
||||
### PageHeader
|
||||
| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| `Ghost` | 使背景色透明 | `boolean` | `true` | - |
|
||||
| `Title` | title 文字 | `string \| RenderFragment` | - | - |
|
||||
| `Subtitle` | subTitle 文字 | `string \| RenderFragment` | - | - |
|
||||
| `BackIcon` | 自定义 back icon | `bool? \| string \| RenderFragment` | - | - |
|
||||
| `OnBack` | 返回按钮的点击事件 | `EventCallback` | 未订阅该事件时默认调用 history.back| - |
|
||||
|
||||
### Page Header 组成部分
|
||||
| 元素 | 说明 |
|
||||
| ----- | ----------- | ---- | ------------- |
|
||||
| `PageHeaderTitle` | title 部分，`Title` 优先级更高 |
|
||||
| `PageHeaderSubtitle` | subtitle 部分，`Subtitle` 优先级更高 |
|
||||
| `PageHeaderContent` | 内容部分 |
|
||||
| `PageHeaderFooter` | 底部部分 |
|
||||
| `PageHeaderTags` | title 旁的 tag 列表容器 |
|
||||
| `PageHeaderExtra` | title 的行尾操作区部分 |
|
||||
| `PageHeaderBreadcrumb` | 面包屑部分 |
|
||||
| `PageHeaderAvatar` | 头像部分 |
|
||||
@ -0,0 +1,41 @@
|
||||
---
|
||||
category: Components
|
||||
type: Navigation
|
||||
title: Pagination
|
||||
cols: 1
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/1vqv2bj68/Pagination.svg
|
||||
---
|
||||
|
||||
A long list can be divided into several pages using `Pagination`, and only one page will be loaded at a time.
|
||||
|
||||
## When To Use
|
||||
|
||||
- When it will take a long time to load/render all items.
|
||||
- If you want to browse the data by navigating through pages.
|
||||
|
||||
## API
|
||||
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| Current | Current page number | int | - | |
|
||||
| DefaultCurrent | Default initial page number | int | 1 | |
|
||||
| DefaultPageSize | Default number of data items per page | int | 10 | |
|
||||
| Disabled | Disable pagination | bool | - | |
|
||||
| HideOnSinglePage | Whether to hide pager on single page | bool | false | |
|
||||
| ItemRender | To customize item's innerHTML | RenderFragment(PaginationItemRenderContext) | - | |
|
||||
| PageSize | Number of data items per page | int | - | |
|
||||
| PageSizeOptions | Specify the sizeChanger options | int\[] | \{10, 20, 50, 100} | |
|
||||
| ShowLessItems | Show less page items | bool | false | |
|
||||
| ShowQuickJumper | Determine whether you can jump to pages directly | bool | false | |
|
||||
| GoButton | Quick jumper confirm button, this is for react version `ShowQuickJumper: { goButton: ReactNode }` | RenderFragment? | null | |
|
||||
| ShowSizeChanger | Determine whether to show `PageSize` select, it will be `true` when `Total >= TotalBoundaryShowSizeChanger` | boolean | - | |
|
||||
| ShowTitle | Show page item's title | bool | true | |
|
||||
| ShowTotal | To display the total number and range | Func<PaginationTotalContext, string>, RenderFragment<PaginationTotalContext> | - | |
|
||||
| Simple | Whether to use simple mode | bool | - | |
|
||||
| Size | Specify the size of `Pagination`, can be set to `small`. | "default" \| "small". | "" | |
|
||||
| Responsive | (Not implemented) If `Size` is not specified, `Pagination` would resize according to the width of the window | bool | - | |
|
||||
| Total | Total number of data items | int | 0 | |
|
||||
| OnChange | Called when the page number is changed, and it takes the resulting page number and pageSize as its arguments | Function(PaginationEventArgs) | null | |
|
||||
| OnShowSizeChange | Called when `PageSize` is changed | Function(PaginationEventArgs) | null | |
|
||||
| TotalBoundaryShowSizeChanger | When `Total` larger than it, `ShowSizeChanger` will be true | int | 50 | |
|
||||
@ -0,0 +1,42 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 分页
|
||||
type: 导航
|
||||
title: Pagination
|
||||
cols: 1
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/1vqv2bj68/Pagination.svg
|
||||
---
|
||||
|
||||
采用分页的形式分隔长列表，每次只加载一个页面。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 当加载/渲染所有数据将花费很多时间时；
|
||||
- 可切换页码浏览数据。
|
||||
|
||||
## API
|
||||
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| Current | 当前页数 | int | - | |
|
||||
| DefaultCurrent | 默认的当前页数 | int | 1 | |
|
||||
| DefaultPageSize | 默认的每页条数 | int | 10 | |
|
||||
| Disabled | 禁用分页 | bool | - | |
|
||||
| HideOnSinglePage | 只有一页时是否隐藏分页器 | bool | false | |
|
||||
| ItemRender | 用于自定义页码的结构，可用于优化 SEO | RenderFragment(PaginationItemRenderContext) | - | |
|
||||
| PageSize | 每页条数 | int | - | |
|
||||
| PageSizeOptions | 指定每页可以显示多少条 | string\[] | \['10', '20', '50', '100'] | |
|
||||
| ShowLessItems | 是否显示较少页面内容 | bool | false | |
|
||||
| ShowQuickJumper | 是否可以快速跳转至某页 | bool | false | |
|
||||
| GoButton | 快速跳转按钮,对应原版 ShowQuickJumper: { goButton: ReactNode } | RenderFragment? | null | |
|
||||
| ShowSizeChanger | 是否展示 `PageSize` 切换器，当 `Total` 大于 `TotalBoundaryShowSizeChanger` 时默认为 `true` | bool | - | |
|
||||
| ShowTitle | 是否显示原生 tooltip 页码提示 | bool | true | |
|
||||
| ShowTotal | 用于显示数据总量和当前数据顺序 | Func<PaginationTotalContext, string>, RenderFragment<PaginationTotalContext> | - | |
|
||||
| Simple | 当添加该属性时，显示为简单分页 | bool | - | |
|
||||
| Size | 当为「small」时，是小尺寸分页 | "default" \| "small" | "" | |
|
||||
| Responsive | (未实现)当 size 未指定时，根据屏幕宽度自动调整尺寸 | bool | - | |
|
||||
| Total | 数据总数 | int | 0 | |
|
||||
| OnChange | 页码改变的回调，参数是改变后的页码及每页条数 | Function(PaginationEventArgs) | null | |
|
||||
| OnShowSizeChange | PageSize 变化的回调 | Function(PaginationEventArgs) | null | |
|
||||
| TotalBoundaryShowSizeChanger | 当 `Total` 大于该值, ShowSizeChanger 默认为 `true` | int | 50 | |
|
||||
@ -0,0 +1,43 @@
|
||||
---
|
||||
category: Components
|
||||
type: Feedback
|
||||
title: Popconfirm
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/fjMCD9xRq/Popconfirm.svg
|
||||
---
|
||||
|
||||
A simple and compact confirmation dialog of an action.
|
||||
|
||||
## When To Use
|
||||
|
||||
A simple and compact dialog used for asking for user confirmation.
|
||||
|
||||
The difference with the `confirm` modal dialog is that it's more lightweight than the static popped full-screen confirm modal.
|
||||
|
||||
## Two types
|
||||
|
||||
There are 2 rendering approaches for `Popconfirm`:
|
||||
1. Wraps child element (content of the `Popconfirm`) with a `<div>` (default approach).
|
||||
2. Child element is not wrapped with anything. This approach requires usage of `<Unbound>` tag inside `<Popconfirm>` and depending on the child element type (please refer to the first example):
|
||||
- html tag: has to have its `@ref` set to `@context.Current`
|
||||
- `Ant Design Blazor` component: has to have its `RefBack` attribute set to `@context`.
|
||||
|
||||
## API
|
||||
|
||||
| Param | Description | Type | Default value |
|
||||
| --- | --- | --- | --- |
|
||||
| cancelText | text of the Cancel button | string | `Cancel` |
|
||||
| okText | text of the Confirm button | string | `OK` |
|
||||
| okType | Button `type` of the Confirm button | string | `primary` |
|
||||
| okButtonProps | The ok button props | [ButtonProps](/components/button/#API) | - |
|
||||
| cancelButtonProps | The cancel button props | [ButtonProps](/components/button/#API) | - |
|
||||
| title | title of the confirmation box | string\|ReactNode\|() => ReactNode | - |
|
||||
| onCancel | callback of cancel | function(e) | - |
|
||||
| onConfirm | callback of confirmation | function(e) | - |
|
||||
| icon | customize icon of confirmation | ReactNode | `<ExclamationCircle />` |
|
||||
| disabled | is show popconfirm when click its childrenNode | boolean | false |
|
||||
|
||||
Consult [Tooltip's documentation](/components/tooltip/#API) to find more APIs.
|
||||
|
||||
## Note
|
||||
|
||||
Please ensure that the child node of `Popconfirm` accepts `onMouseEnter`, `onMouseLeave`, `onFocus`, `onClick` events.
|
||||
@ -0,0 +1,36 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 气泡确认框
|
||||
type: 反馈
|
||||
title: Popconfirm
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/fjMCD9xRq/Popconfirm.svg
|
||||
---
|
||||
|
||||
点击元素，弹出气泡式的确认框。
|
||||
|
||||
## 何时使用
|
||||
|
||||
目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。
|
||||
|
||||
和 `confirm` 弹出的全屏居中模态对话框相比，交互形式更轻量。
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| cancelText | 取消按钮文字 | string | 取消 |
|
||||
| okText | 确认按钮文字 | string | 确定 |
|
||||
| okType | 确认按钮类型 | string | `primary` |
|
||||
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#API) | - |
|
||||
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button/#API) | - |
|
||||
| title | 确认框的描述 | string\|ReactNode\|() => ReactNode | - |
|
||||
| onCancel | 点击取消的回调 | function(e) | - |
|
||||
| onConfirm | 点击确认的回调 | function(e) | - |
|
||||
| icon | 自定义弹出气泡 Icon 图标 | ReactNode | `<ExclamationCircle />` |
|
||||
| disabled | 点击 Popconfirm 子元素是否弹出气泡确认框 | boolean | false |
|
||||
|
||||
更多属性请参考 [Tooltip](/components/tooltip/#API)。
|
||||
|
||||
## 注意
|
||||
|
||||
请确保 `Popconfirm` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
|
||||
@ -0,0 +1,35 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Display
|
||||
title: Popover
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/1PNL1p_cO/Popover.svg
|
||||
---
|
||||
|
||||
The floating card popped by clicking or hovering.
|
||||
|
||||
## When To Use
|
||||
|
||||
A simple popup menu to provide extra information or operations.
|
||||
|
||||
Comparing with `Tooltip`, besides information `Popover` card can also provide action elements like links and buttons.
|
||||
|
||||
## Two types
|
||||
|
||||
There are 2 rendering approaches for `Popover`:
|
||||
1. Wraps child element (content of the `Popover`) with a `<div>` (default approach).
|
||||
2. Child element is not wrapped with anything. This approach requires usage of `<Unbound>` tag inside `<Popover>` and depending on the child element type (please refer to the first example):
|
||||
- html tag: has to have its `@ref` set to `@context.Current`
|
||||
- `Ant Design Blazor` component: has to have its `RefBack` attribute set to `@context`.
|
||||
|
||||
## API
|
||||
|
||||
| Param | Description | Type | Default value | Version |
|
||||
| ------- | ------------------- | ---------------------------------- | ------------- | ------- |
|
||||
| content | Content of the card | string\|ReactNode\|() => ReactNode | - | |
|
||||
| title | Title of the card | string\|ReactNode\|() => ReactNode | - | |
|
||||
|
||||
Consult [Tooltip's documentation](/components/tooltip/#API) to find more APIs.
|
||||
|
||||
## Note
|
||||
|
||||
Please ensure that the child node of `Popover` accepts `onMouseEnter`, `onMouseLeave`, `onFocus`, `onClick` events.
|
||||
@ -0,0 +1,28 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 气泡卡片
|
||||
type: 数据展示
|
||||
title: Popover
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/1PNL1p_cO/Popover.svg
|
||||
---
|
||||
|
||||
点击/鼠标移入元素，弹出气泡式的卡片浮层。
|
||||
|
||||
## 何时使用
|
||||
|
||||
当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。
|
||||
|
||||
和 `Tooltip` 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ------- | -------- | ---------------------------------- | ------ | ---- |
|
||||
| content | 卡片内容 | string\|ReactNode\|() => ReactNode | - | |
|
||||
| title | 卡片标题 | string\|ReactNode\|() => ReactNode | - | |
|
||||
|
||||
更多属性请参考 [Tooltip](/components/tooltip/#API)。
|
||||
|
||||
## 注意
|
||||
|
||||
请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
|
||||
@ -0,0 +1,56 @@
|
||||
---
|
||||
category: Components
|
||||
type: Feedback
|
||||
title: Progress
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/xqsDu4ZyR/Progress.svg
|
||||
---
|
||||
|
||||
Display the current progress of an operation flow.
|
||||
|
||||
## When To Use
|
||||
|
||||
If it will take a long time to complete an operation, you can use `Progress` to show the current progress and status.
|
||||
|
||||
- When an operation will interrupt the current interface, or it needs to run in the background for more than 2 seconds.
|
||||
- When you need to display the completion percentage of an operation.
|
||||
|
||||
## API
|
||||
|
||||
Properties that shared by all types.
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| type | to set the type, options: `line` `circle` `dashboard` | string | `line` |
|
||||
| format | template function of the content | function(percent, successPercent) | `percent => percent + '%'` |
|
||||
| percent | to set the completion percentage | number | 0 |
|
||||
| showInfo | whether to display the progress value and the status icon | boolean | true |
|
||||
| status | to set the status of the Progress, options: `success` `exception` `normal` `active`(line only) | string | - |
|
||||
| strokeLinecap | to set the style of the progress linecap | `round` \| `square` | `round` |
|
||||
| strokeColor | color of progress bar | string | - |
|
||||
| successPercent | segmented success percent | number | 0 |
|
||||
| trailColor | color of unfilled part as hex string. | string | - |
|
||||
|
||||
### `type="line"`
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| strokeWidth | to set the width of the progress bar, unit: `px` | number | 10 |
|
||||
| strokeColor | color of progress bar, render `linear-gradient` when passing an object | string \| { from: string; to: string; direction: string } | - |
|
||||
| steps | the total step count | number | - |
|
||||
|
||||
### `type="circle"`
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| width | to set the canvas width of the circular progress, unit: `px` | number | 132 |
|
||||
| strokeWidth | to set the width of the circular progress, unit: percentage of the canvas width | number | 6 |
|
||||
| strokeColor | color of circular progress, render `linear-gradient` when passing an object | string \| object | - |
|
||||
|
||||
### `type="dashboard"`
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| width | to set the canvas width of the dashboard progress, unit: `px` | number | 132 |
|
||||
| strokeWidth | to set the width of the dashboard progress, unit: percentage of the canvas width | number | 6 |
|
||||
| gapDegree | the gap degree of half circle, 0 ~ 360 | number | 0 |
|
||||
| gapPosition | the gap position, options: `top` `bottom` `left` `right` | string | `top` |
|
||||
@ -0,0 +1,57 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 进度条
|
||||
type: 反馈
|
||||
title: Progress
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/xqsDu4ZyR/Progress.svg
|
||||
---
|
||||
|
||||
展示操作的当前进度。
|
||||
|
||||
## 何时使用
|
||||
|
||||
在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。
|
||||
|
||||
- 当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过 2 秒时；
|
||||
- 当需要显示一个操作完成的百分比时。
|
||||
|
||||
## API
|
||||
|
||||
各类型共用的属性。
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| type | 类型，可选 `line` `circle` `dashboard` | string | `line` |
|
||||
| format | 内容的模板函数 | function(percent, successPercent) | `percent => percent + '%'` |
|
||||
| percent | 百分比 | number | 0 |
|
||||
| showInfo | 是否显示进度数值或状态图标 | boolean | true |
|
||||
| status | 状态，可选：`success` `exception` `normal` `active`(仅限 line) | string | - |
|
||||
| strokeLinecap | - | `round` \| `square` | `round` |
|
||||
| strokeColor | 进度条的色彩 | string | - |
|
||||
| successPercent | 已完成的分段百分比 | number | 0 |
|
||||
| trailColor | 未完成的分段的颜色 | string | - |
|
||||
|
||||
### `type="line"`
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| strokeWidth | 进度条线的宽度，单位 px | number | 10 |
|
||||
| strokeColor | 进度条的色彩，传入 object 时为渐变 | string \| { from: string; to: string; direction: string } | - |
|
||||
| steps | 进度条总共步数 | number | - |
|
||||
|
||||
### `type="circle"`
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| ----------- | ------------------------------------------------ | ---------------- | ------ |
|
||||
| width | 圆形进度条画布宽度，单位 px | number | 132 |
|
||||
| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
|
||||
| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \| object | - |
|
||||
|
||||
### `type="dashboard"`
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| width | 仪表盘进度条画布宽度，单位 px | number | 132 |
|
||||
| strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
|
||||
| gapDegree | 仪表盘进度条缺口角度，可取值 0 ~ 360 | number | 0 |
|
||||
| gapPosition | 仪表盘进度条缺口位置 | `top` \| `bottom` \| `left` \| `right` | `top` |
|
||||
@ -0,0 +1,39 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Entry
|
||||
title: Radio
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/8cYb5seNB/Radio.svg
|
||||
---
|
||||
|
||||
Radio
|
||||
|
||||
## When To Use
|
||||
|
||||
-Used to select a single state from multiple options.
|
||||
-The difference from Select is that Radio is visible to the user and can facilitate the comparison of choice, which means there shouldn't be too many of them.
|
||||
|
||||
|
||||
|
||||
## API
|
||||
|
||||
Radio/Radio.Button
|
||||
|
||||
| Property | Description | Type | Default Value |
|
||||
| --- | --- | --- | --- |
|
||||
| AutoFocus | get focus when component mounted | boolean | - |
|
||||
| Checked | Specifies whether the radio is selected. | boolean |
|
||||
| DefaultChecked | Specifies the initial state: whether or not the radio is selected. | boolean |- |
|
||||
| Disabled | Disable radio | string | - |
|
||||
| RadioButton | Set to TRUE to style the radio as button group. | bool | false |
|
||||
| Value | According to value for comparison, to determine whether the selected | string | - |
|
||||
|
||||
RadioGroup
|
||||
|
||||
| Property | Description | Type | Default Value |
|
||||
| --- | --- | --- | --- |
|
||||
| ButtonStyle | style type of radio button | `outline`,`solid` |- |
|
||||
| Disabled |Disable all radio buttons | string | - |
|
||||
| Value | Used for setting the currently selected value. | string | - |
|
||||
| Name | The name property of all input[type="radio"] children | boolean |- |
|
||||
| Size | size for radio button style | string | - |
|
||||
| onChange | The callback function that is triggered when the state changes. | function(e) | - |
|
||||
@ -0,0 +1,39 @@
|
||||
---
|
||||
category: Components
|
||||
type: 数据录入
|
||||
title: Radio
|
||||
subtitle: 单选框
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/8cYb5seNB/Radio.svg
|
||||
---
|
||||
|
||||
单选框。
|
||||
|
||||
## 何时使用
|
||||
|
||||
-用于在多个备选项中选中单个状态。
|
||||
-和 `Select` 的区别是，`Radio` 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。
|
||||
|
||||
|
||||
|
||||
## API
|
||||
Radio/Radio.Button
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------- | -------------------------------------------- | ------------- | --------- |
|
||||
| AutoFocus | 自动获取焦点 | boolean | - |
|
||||
| Checked | 指定当前是否选中 | boolean |
|
||||
| DefaultChecked | 初始是否选中 | boolean |- |
|
||||
| Disabled | 禁用 Radio | string | - |
|
||||
| RadioButton | 设置为 TRUE 以将radio风格设置为按钮组 | bool | false |
|
||||
| Value | 根据 value 进行比较，判断是否选中 | string | - |
|
||||
|
||||
RadioGroup
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------- | -------------------------------------------- | ------------- | --------- |
|
||||
| ButtonStyle | RadioButton 的风格样式，目前有描边和填色两种风格 | `outline`,`solid` |- |
|
||||
| Disabled |禁选所有子单选器 | string | - |
|
||||
| Value | 用于设置当前选中的值 | string | - |
|
||||
| Name | RadioGroup 下所有 input[type="radio"] 的 name 属性 | string |- |
|
||||
| Size | 大小，只对按钮样式生效 | string | - |
|
||||
| onChange | 选项变化时的回调函数 | function(e) | - |
|
||||
41
site/AntDesign.Docs/Demos/Components/Rate/doc/index.en-US.md
Normal file
41
site/AntDesign.Docs/Demos/Components/Rate/doc/index.en-US.md
Normal file
@ -0,0 +1,41 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Entry
|
||||
title: Rate
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/R5uiIWmxe/Rate.svg
|
||||
---
|
||||
|
||||
Rate component.
|
||||
|
||||
## When To Use
|
||||
|
||||
- Show evaluation.
|
||||
- A quick rating operation on something.
|
||||
|
||||
## API
|
||||
|
||||
| Property | Description | type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| allowClear | whether to allow clear when click again | boolean | true |
|
||||
| allowHalf | whether to allow semi selection | boolean | false |
|
||||
| autoFocus | get focus when component mounted | boolean | false |
|
||||
| character | custom character of rate | ReactNode | [<StarFilled /\>](/components/icon/) |
|
||||
| className | custom class name of rate | string | |
|
||||
| count | star count | number | 5 |
|
||||
| defaultValue | default value | number | 0 |
|
||||
| disabled | read only, unable to interact | boolean | false |
|
||||
| style | custom style object of rate | CSSProperties | |
|
||||
| tooltips | Customize tooltip by each character | string\[] | |
|
||||
| value | current value | number | |
|
||||
| onBlur | callback when component lose focus | Function() | |
|
||||
| onChange | callback when select value | Function(value: number) | |
|
||||
| onFocus | callback when component get focus | Function() | |
|
||||
| onHoverChange | callback when hover item | Function(value: number) | |
|
||||
| onKeyDown | callback when keydown on component | Function(event) | |
|
||||
|
||||
## Methods
|
||||
|
||||
| Name | Description |
|
||||
| ------- | ------------ |
|
||||
| blur() | remove focus |
|
||||
| focus() | get focus |
|
||||
42
site/AntDesign.Docs/Demos/Components/Rate/doc/index.zh-CN.md
Normal file
42
site/AntDesign.Docs/Demos/Components/Rate/doc/index.zh-CN.md
Normal file
@ -0,0 +1,42 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 评分
|
||||
type: 数据录入
|
||||
title: Rate
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/R5uiIWmxe/Rate.svg
|
||||
---
|
||||
|
||||
评分组件。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 对评价进行展示。
|
||||
- 对事物进行快速的评级操作。
|
||||
|
||||
## API
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| AllowClear | 是否允许再次点击后清除 | boolean | true |
|
||||
| AllowHalf | 是否允许半选 | boolean | false |
|
||||
| AutoFocus | 自动获取焦点 | boolean | false |
|
||||
| Character | 自定义字符 | ReactNode | [<StarFilled /\>](/components/icon-cn/) |
|
||||
| ClassName | 自定义样式类名 | string | |
|
||||
| Count | star 总数 | int | 5 |
|
||||
| DefaultValue | 默认值 | int | 0 |
|
||||
| Disabled | 只读，无法进行交互 | boolean | false |
|
||||
| Style | 自定义样式对象 | CSSProperties | |
|
||||
| Tooltips | 自定义每项的提示信息 | string\[] | |
|
||||
| Value | 当前数，受控值 | number | |
|
||||
| OnBlur | 失去焦点时的回调 | Function() | |
|
||||
| OnChange | 选择时的回调 | Function(value: number) | |
|
||||
| OnFocus | 获取焦点时的回调 | Function() | |
|
||||
| OnHoverChange | 鼠标经过时数值变化的回调 | Function(value: number) | |
|
||||
| OnKeyDown | 按键回调 | Function(event) | |
|
||||
|
||||
## 方法
|
||||
|
||||
| 名称 | 描述 |
|
||||
| ------- | -------- |
|
||||
| blur() | 移除焦点 |
|
||||
| focus() | 获取焦点 |
|
||||
@ -0,0 +1,23 @@
|
||||
---
|
||||
type: Feedback
|
||||
category: Components
|
||||
title: Result
|
||||
cols: 1
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/9nepwjaLa/Result.svg
|
||||
---
|
||||
|
||||
Used to feed back the results of a series of operational tasks.
|
||||
|
||||
## When To Use
|
||||
|
||||
Use when important operations need to inform the user to process the results and the feedback is more complicated.
|
||||
|
||||
## API
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| Title | title string | string\|RenderFragment | - |
|
||||
| SubTitle | subTitle string | string\|RenderFragment | - |
|
||||
| Status | result status,decide icons and colors | `success` \| `error` \| `info` \| `warning` \| `404` \| `403` \| `500` | `info` |
|
||||
| Icon | custom back icon | string (`{type}-{theme}`) | - |
|
||||
| Extra | operating area | RenderFragment | - |
|
||||
@ -0,0 +1,24 @@
|
||||
---
|
||||
type: 反馈
|
||||
category: Components
|
||||
title: Result
|
||||
cols: 1
|
||||
subtitle: 结果
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/9nepwjaLa/Result.svg
|
||||
---
|
||||
|
||||
用于反馈一系列操作任务的处理结果。
|
||||
|
||||
## 何时使用
|
||||
|
||||
当有重要操作需告知用户处理结果，且反馈内容较为复杂时使用。
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| Title | title 文字 | string\|RenderFragment | - |
|
||||
| SubTitle | subTitle 文字 | string\|RenderFragment | - |
|
||||
| Status | 结果的状态,决定图标和颜色 | `success` \| `error` \| `info` \| `warning` \| `404` \| `403` \| `500` | `info` |
|
||||
| Icon | 自定义 icon | string (`{type}-{theme}`) | - |
|
||||
| Extra | 操作区 | RenderFragment | - |
|
||||
@ -0,0 +1,29 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Display
|
||||
title: Segmented
|
||||
cover: https://gw.alipayobjects.com/zos/bmw-prod/a3ff040f-24ba-43e0-92e9-c845df1612ad.svg
|
||||
---
|
||||
|
||||
Segmented Controls. This component is available since `v0.12.0`.
|
||||
|
||||
## When To Use
|
||||
|
||||
- When displaying multiple options and user can select a single option;
|
||||
- When switching the selected option, the content of the associated area changes.
|
||||
|
||||
## API
|
||||
|
||||
> This component is available since `v0.12.0`
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| Block | Option to fit width to its parent\'s width | boolean | false | |
|
||||
| DefaultValue | Default selected value | TValue | | |
|
||||
| Disabled | Disable all segments | boolean | false | |
|
||||
| Labels | Use a string array as both label and value | string[] | | |
|
||||
| OnChange | The callback function that is triggered when the state changes | EventCallback<TValue> | | |
|
||||
| Options | Set children optional | SegmentedOption[] | [] | |
|
||||
| Size | The size of the Segmented. | `large` \| `middle` \| `small` | - | |
|
||||
| Value | Currently selected value | TValue | | |
|
||||
|
||||
@ -0,0 +1,31 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 分段控制器
|
||||
type: 数据展示
|
||||
title: Segmented
|
||||
cover: https://gw.alipayobjects.com/zos/bmw-prod/a3ff040f-24ba-43e0-92e9-c845df1612ad.svg
|
||||
---
|
||||
|
||||
分段控制器。自 `v0.12.0` 版本开始提供该组件。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 用于展示多个选项并允许用户选择其中单个选项；
|
||||
- 当切换选中选项时，关联区域的内容会发生变化。
|
||||
|
||||
## API
|
||||
|
||||
> 自 `v0.12.0` 版本开始提供该组件。
|
||||
|
||||
### Segmented
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| Block | 将宽度调整为父元素宽度的选项 | boolean | false | |
|
||||
| DefaultValue | 默认选中的值 | TValue | | |
|
||||
| Disabled | 是否禁用 | boolean | false | |
|
||||
| Labels | 使用字符串同时作为 label 和 Value | string[] | | |
|
||||
| OnChange | 选项变化时的回调函数 | EventCallback<TValue> | | |
|
||||
| Options | 数据化配置选项内容 | TValue[] | [] | |
|
||||
| Size | 控件尺寸 | `large` \| `middle` \| `small` | - | |
|
||||
| Value | 当前选中的值 | TValue | | |
|
||||
@ -0,0 +1,99 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Entry
|
||||
title: Select
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
|
||||
---
|
||||
|
||||
Select component to select value from options.
|
||||
|
||||
## When To Use
|
||||
|
||||
- A dropdown menu for displaying choices - an elegant alternative to the native `<Select>` element.
|
||||
- Utilizing [Radio](/components/radio/) is recommended when there are fewer total options (less than 5).
|
||||
|
||||
## API
|
||||
|
||||
|
||||
### Select props
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| AccessKey | The [accesskey](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey) global attribute. | string | |
|
||||
| AllowClear | Show clear button. Has no effect if Value type default is also in the list of options, unless used with `ValueOnClear`. | bool | false | |
|
||||
| AutoClearSearchValue | Whether the current search will be cleared on selecting an item. | bool | true | |
|
||||
| AutoFocus | get focus when component mounted | boolean | false |
|
||||
| Bordered | Toggle the border style. | bool | true | |
|
||||
| BoundaryAdjustMode | `Dropdown` adjustment strategy (when for example browser resize is happening) | TriggerBoundaryAdjustMode | TriggerBoundaryAdjustMode.InView |
|
||||
| CustomTagLabelToValue | Converts custom tag (a string) to TItemValue type. | Func<string, TItemValue> | (label) => <br/> (TItemValue)TypeDescriptor<br/> .GetConverter(typeof(TItemValue))<br/> .ConvertFromInvariantString(label) | |
|
||||
| DataSource | The datasource for this component. | IEnumerable<TItem> | - | |
|
||||
| DataSourceEqualityComparer | EqualityComparer that will be used during DataSource change detection. If no comparer set, default comparer will be used that is going to compare only equiality of label & value properties. | IEqualityComparer<TItem> | - | |
|
||||
| DefaultActiveFirstOption | Activates the first item that is not deactivated. | bool | false | |
|
||||
| DefaultValue | When `Mode = default` - The value is used during initialization and when pressing the Reset button within Forms. | TItemValue | - | |
|
||||
| DefaultValues | When `Mode = multiple` \| `tags` - The values are used during initialization and when pressing the Reset button within Forms. | IEnumerable<TItemValues> | - | |
|
||||
| Disabled | Whether the Select component is disabled. | bool | false | |
|
||||
| DisabledName | The name of the property to be used as a disabled indicator. | string | | |
|
||||
| DisabledPredicate | Specifies predicate for disabled options | - | - |
|
||||
| DropdownMatchSelectWidth | Will match drowdown width: <br/>- for boolean: `true` - with widest item in the dropdown list <br/> - for string: with value (e.g.: `256px`). | OneOf<bool, string> | true | |
|
||||
| DropdownMaxWidth | Will not allow dropdown width to grow above stated in here value (eg. "768px"). | string | "auto" | |
|
||||
| DropdownRender | Customize dropdown content. | Renderfragment | - | |
|
||||
| SearchDebounceMilliseconds | Delays the processing of the search input event until the user has stopped typing for a predetermined amount of time | int | 250 |
|
||||
| EnableSearch | Indicates whether the search function is active or not. Always `true` for mode `tags`. | bool | false | |
|
||||
| FilterExpression | Customize the logic to filter when searching. | Func<SelectOptionItem<TItemValue, TItem>, string, bool> | (item, searchValue) => item.Label.Contains(searchValue, StringComparison.InvariantCultureIgnoreCase) | |
|
||||
| GroupName | The name of the property to be used as a group indicator. If the value is set, the entries are displayed in groups. Use additional `SortByGroup` and `SortByLabel`. | string | - | |
|
||||
| HideSelected | Hides the selected items when they are selected. | bool | false | |
|
||||
| IgnoreItemChanges | Is used to increase the speed. If you expect changes to the label name, group name or disabled indicator, disable this property. | bool | true | |
|
||||
| ItemTemplate | Is used to customize the item style. | RenderFragment<TItem> | | |
|
||||
| LabelInValue | Whether to embed label in value, turn the format of value from `TItemValue` to string (JSON) e.g. { "value": `TItemValue`, "label": "`Label value`" } | bool | false | |
|
||||
| LabelName | The name of the property to be used for the label. | string | | |
|
||||
| LabelTemplate | Is used to customize the label style. | RenderFragment<TItem> | | |
|
||||
| LabelProperty | Specifies the label property in the option object. | Func<TItem, string> | - |
|
||||
| Loading | Show loading indicator. You have to write the loading logic on your own. | bool | false | |
|
||||
| ListboxStyle | custom listbox styles | string | display: flex; flex-direction: column; | |
|
||||
| MaxTagCount | Max tag count to show. responsive will cost render performance. | int | `ResponsiveTag.Responsive` | - | |
|
||||
| MaxTagPlaceholder | Placeholder for hidden tags. If used with `ResponsiveTag.Responsive`, implement your own handling logic. | RenderFragment<IEnumerable<TItem>>> | - | |
|
||||
| MaxTagTextLength | Max tag text length (number of characters) to show. | int | - | |
|
||||
| Mode | Set mode of Select - `default` \| `multiple` \| `tags` | string | default | |
|
||||
| NotFoundContent | Specify content to show when no result matches. | RenderFragment | `Not Found` | |
|
||||
| OnBlur | Called when blur. | Action | - | |
|
||||
| OnClearSelected | Called when the user clears the selection. | Action | - | |
|
||||
| OnCreateCustomTag | Called when custom tag is created. | Action | - | |
|
||||
| OnDataSourceChanged | Called when the datasource changes. | Action | - | |
|
||||
| OnDropdownVisibleChange | Called when the dropdown visibility changes. | Action | - | |
|
||||
| OnFocus | Called when focus. | Action | - | |
|
||||
| OnMouseEnter | Called when mouse enter. | Action | - | |
|
||||
| OnMouseLeave | Called when mouse leave. | Action | - | |
|
||||
| OnSearch | Callback function that is fired when input changed. | Action<string> | - | |
|
||||
| OnSelectedItemChanged | Called when the selected item changes. | Action<TItem> | - | |
|
||||
| OnSelectedItemsChanged | Called when the selected items changes. | Action<IEnumerable<TItem>> | - | |
|
||||
| Open | Controlled open state of dropdown. | bool | false | |
|
||||
| Placeholder | Placeholder of select. | string | - | |
|
||||
| PopupContainerMaxHeight | The maximum height of the popup container. | string | `256px` | |
|
||||
| PopupContainerSelector | Use this to fix overlay problems e.g. #area | string | body | |
|
||||
| PrefixIcon | The custom prefix icon. For mode `multiple` and `tags` visible only when no data selected. | RenderFragment | - | |
|
||||
| SelectOptions | Used for rendering select options manually. | RenderFragment | - | |
|
||||
| ShowArrowIcon | Whether to show the drop-down arrow | bool | true | |
|
||||
| ShowSearchIcon | Whether show search input in single mode. | bool | true | |
|
||||
| Size | The size of the component. `small` \| `default` \| `large` | string | default | |
|
||||
| SortByGroup | Sort items by group name. `None` \| `Ascending` \| `Descending` | SortDirection | SortDirection.None | |
|
||||
| SortByLabel | Sort items by label value. `None` \| `Ascending` \| `Descending` | SortDirection | SortDirection.None | |
|
||||
| Style | Set CSS style. | string | `width: 100%` | |
|
||||
| SuffixIcon | The custom suffix icon. | RenderFragment | - | |
|
||||
| TokenSeparators | Define what characters will be treated as token separators for newly created tags. Useful when creating new tags using only keyboard. | char[] | - | |
|
||||
| Value | Get or set the selected value. | TItemValue | - | |
|
||||
| Values | Get or set the selected values. | IEnumerable<TItemValues> | - | |
|
||||
| ValueChanged | Used for the two-way binding. | EventCallback<TItemValue> | - | |
|
||||
| ValuesChanged | Used for the two-way binding. | EventCallback<IEnumerable<TItemValue>> | - | |
|
||||
| ValueName | The name of the property to be used for the value. | string | - | |
|
||||
| ValueOnClear | When Clear button is pressed, Value will be set to whatever is set in ValueOnClear. | TItemValue | - | 0.11 |
|
||||
| ValueProperty | Specifies the value property in the option object. | Func<TItem, TItemValue> | - |
|
||||
|
||||
### SelectOption props
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| Class | The additional class to option | string | - | |
|
||||
| Disabled | Disable this option | Boolean | false | |
|
||||
| Label | Label of Select after selecting this Option | string | - | |
|
||||
| Value | Value of Select after selecting this Option | TItemValue | - | |
|
||||
| Item | Item of the option | TItem | - | |
|
||||
@ -0,0 +1,99 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 选择器
|
||||
type: 数据录入
|
||||
title: Select
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
|
||||
---
|
||||
|
||||
下拉选择器。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
|
||||
- 当选项少时（少于 5 项），建议直接将选项平铺，使用 [Radio](/components/radio/) 是更好的选择。
|
||||
|
||||
## API
|
||||
|
||||
|
||||
### Select props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| AccessKey | 指定 [accesskey](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey) 全局属性。 | string | |
|
||||
| AllowClear | 支持清除. Has no effect if Value type default is also in the list of options, unless used with `ValueOnClear`. | bool | false | |
|
||||
| AutoClearSearchValue | 是否在选中项后清空搜索框 | bool | true | |
|
||||
| Bordered | 是否有边框 | bool | true | |
|
||||
| BoundaryAdjustMode | `Dropdown` 调整策略（例如当浏览器调整大小时） | TriggerBoundaryAdjustMode | TriggerBoundaryAdjustMode.InView |
|
||||
| CustomTagLabelToValue | 将自定义标签（字符串）转换为 TItemValue 类型 | Func<string, TItemValue> | (label) => <br/> (TItemValue)TypeDescriptor<br/> .GetConverter(typeof(TItemValue))<br/> .ConvertFromInvariantString(label) | |
|
||||
| DataSource | 此组件的数据源 | IEnumerable<TItem> | - | |
|
||||
| DataSourceEqualityComparer | 将在 DataSource 更改检测期间使用的 EqualityComparer。 如果没有设置比较器，将使用默认比较器，它将仅比较标签和值属性的相等性. | IEqualityComparer<TItem> | - | |
|
||||
| DefaultActiveFirstOption | 是否默认高亮第一个选项 | bool | false | |
|
||||
| DefaultValue | 当 `Mode = default` - 该值在初始化期间和在 Forms 中按下 Reset 按钮时使用. | TItemValue | - | |
|
||||
| DefaultValues | 当`Mode = multiple` \| `tags` - 在初始化期间和在表单中按下重置按钮时使用这些值. | IEnumerable<TItemValues> | - | |
|
||||
| Disabled | 是否禁用 | bool | false | |
|
||||
| DisabledName | 用作禁用指示器的属性名称. | string | | |
|
||||
| DisabledPredicate | 指定禁用选项的判断条件 | - | - |
|
||||
| DropdownMatchSelectWidth | 将匹配下拉宽度： <br/>- for boolean: `true` - 下拉列表中最宽的项目 <br/> - for string: with value (e.g.: `256px`). | OneOf<bool, string> | true | |
|
||||
| DropdownMaxWidth | 不允许下拉菜单的宽度超过此处的值（例如“768px”）. | string | "auto" | |
|
||||
| DropdownRender | 自定义下拉框内容 | Renderfragment | - | |
|
||||
| SearchDebounceMilliseconds |推迟对搜索输入事件的处理，直到用户停止输入一个预定的时间。 | int | 250 |
|
||||
| EnableSearch | 指示搜索功能是否处于活动状态。 对于Mode = `tags` 始终为 `true`。 | bool | false | |
|
||||
| FilterExpression | 自定义搜索时过滤的逻辑。 | Func<SelectOptionItem<TItemValue, TItem>, string, bool> | (item, searchValue) => item.Label.Contains(searchValue, StringComparison.InvariantCultureIgnoreCase) | |
|
||||
| GroupName | 用作组指示符的属性的名称。 如果设置了该值，则条目将按组显示。 使用额外的 `SortByGroup` 和 `SortByLabel`. | string | - | |
|
||||
| HideSelected | 是否隐藏选中项. | bool | false | |
|
||||
| IgnoreItemChanges |用于提高速度。 如果希望更改标签名称、组名称或禁用指示器，请禁用此属性。 | bool | true | |
|
||||
| ItemTemplate | 用于自定义Item样式. | RenderFragment<TItem> | | |
|
||||
| LabelInValue | 是否在 value 中嵌入标签，将 value 的格式从 `TItemValue` 转换为 string (JSON) e.g. { "value": `TItemValue`, "label": "`标签值`" } | bool | false | |
|
||||
| LabelName | 用于标签的属性名称. | string | | |
|
||||
| LabelTemplate | 用于自定义标签样式. | RenderFragment<TItem> | | |
|
||||
| LabelProperty | 指定 option 对象的 label属性 | `Func<TItem, string>` | - |
|
||||
| Loading | 显示加载指示器。 必须编写加载逻辑. | bool | false | |
|
||||
| ListboxStyle | 自定义下拉列表样式 | string | display: flex; flex-direction: column; | |
|
||||
| MaxTagCount | 最多显示多少个 tag，响应式模式会对性能产生损耗 | int | `ResponsiveTag.Responsive` | - | |
|
||||
| MaxTagPlaceholder | 隐藏 tag 时显示的内容.如果与 ResponsiveTag.Responsive 一起使用，请实现处理逻辑。 | RenderFragment<IEnumerable<TItem>>> | - | |
|
||||
| MaxTagTextLength | 最大显示的 tag 文本长度. | int | - | |
|
||||
| Mode | 设置 Select 的模式为多选或标签 - `default` \| `multiple` \| `tags` | string | default | |
|
||||
| NotFoundContent | 当下拉列表为空时显示的内容 | RenderFragment | `Not Found` | |
|
||||
| OnBlur | 失去焦点时回调 | Action | - | |
|
||||
| OnClearSelected | 当用户清除选择时调用. | Action | - | |
|
||||
| OnCreateCustomTag | 创建自定义标签时调用. | Action | - | |
|
||||
| OnDataSourceChanged | 数据源更改时调用. | Action | - | |
|
||||
| OnDropdownVisibleChange | 展开下拉菜单的回调 | Action | - | |
|
||||
| OnFocus | 获得焦点时回调 | Action | - | |
|
||||
| OnMouseEnter | 鼠标移入时回调 | Action | - | |
|
||||
| OnMouseLeave | 鼠标移出时回调 | Action | - | |
|
||||
| OnSearch | 文本框值变化时回调 | Action<string> | - | |
|
||||
| OnSelectedItemChanged | 当所选Item更改时调用. | Action<TItem> | - | |
|
||||
| OnSelectedItemsChanged | 当所选Items(多选)更改时调用. | Action<IEnumerable<TItem>> | - | |
|
||||
| Open | 下拉菜单的打开状态. | bool | false | |
|
||||
| Placeholder | 选择框默认文本 | string | - | |
|
||||
| PopupContainerMaxHeight | 弹出容器的最大高度. | string | `256px` | |
|
||||
| PopupContainerSelector | 使用它来修复覆盖问题，例如 #area | string | body | |
|
||||
| PrefixIcon | 自定义前缀图标。 对于模式 `multiple` 和 `tags` 仅在未选择数据时可见. | RenderFragment | - | |
|
||||
| SelectOptions | 用于手动渲染选择Option. | RenderFragment | - | |
|
||||
| ShowArrowIcon | 是否显示下拉小箭头 | bool | true | |
|
||||
| ShowSearchIcon | 使单选模式可搜索 | bool | true | |
|
||||
| Size | 组件大小,可选: `small` \| `default` \| `large` | string | default | |
|
||||
| SortByGroup | 按组名排序项目. `None` \| `Ascending` \| `Descending` | SortDirection | SortDirection.None | |
|
||||
| SortByLabel | 按标签名对项目进行排序. `None` \| `Ascending` \| `Descending` | SortDirection | SortDirection.None | |
|
||||
| Style | 设置样式. | string | `width: 100%` | |
|
||||
| SuffixIcon | 自定义的选择框后缀图标 | RenderFragment | - | |
|
||||
| TokenSeparators | 定义哪些字符将被视为新创建标签的标记分隔符, 仅使用键盘创建新标签时很有用. | char[] | - | |
|
||||
| Value |获取或设置选定的值。 | TItemValue | - | |
|
||||
| Values | 获取或设置选定的值(多选). | IEnumerable<TItemValues> | - | |
|
||||
| ValueChanged | 用于双向绑定. | EventCallback<TItemValue> | - | |
|
||||
| ValuesChanged | 用于双向绑定(多选). | EventCallback<IEnumerable<TItemValue>> | - | |
|
||||
| ValueName | 用于值的属性的名称. | string | - | |
|
||||
| ValueOnClear | 按下清除按钮时，值将设置为 ValueOnClear 中设置的值. | TItemValue | - | 0.11 |
|
||||
| ValueProperty | 指定 option 对象的 value 属性. | `Func<TItem, TItemValue>` | - |
|
||||
|
||||
### SelectOption props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| Class | Option 类名 | string | - | |
|
||||
| Disabled | 是否禁用 | Boolean | false | |
|
||||
| Label | 选择此选项后选择的标签内容 | string | - | |
|
||||
| Value | 选择此选项后的 Select 值 | TItemValue | - | |
|
||||
| Item | option 对象 | TItem | - | |
|
||||
@ -0,0 +1,57 @@
|
||||
---
|
||||
category: Components
|
||||
type: Feedback
|
||||
title: Skeleton
|
||||
cols: 1
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/KpcciCJgv/Skeleton.svg
|
||||
---
|
||||
|
||||
Provide a placeholder while you wait for content to load, or to visualise content that doesn't exist yet.
|
||||
|
||||
## When To Use
|
||||
|
||||
- When resource need long time loading, like low network speed.
|
||||
- The component contains much information, such as List or Card.
|
||||
- Only works when loading data for the first time.
|
||||
- Could be replaced by Spin in any situation, but can provide a better user experience.
|
||||
|
||||
## API
|
||||
|
||||
### Skeleton
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| ---------------- | -------------------------------------------------------------------------- | ---------------------------------------- | ------- |
|
||||
| `Active` | Show animation effect | `boolean` | `false` |
|
||||
| `Avatar` | Show avatar placeholder | `boolean` | `false` |
|
||||
| `AvatarSize` | Set the size of avatar | `int \| 'large' \| 'small' \| 'default'` | - |
|
||||
| `AvatarShape` | Set the shape of avatar | `'circle' \| 'square'` | - |
|
||||
| `Loading` | Display the skeleton when `true` | `boolean` | - |
|
||||
| `Paragraph` | Show paragraph placeholder | `boolean` | `true` |
|
||||
| `ParagraphRows` | Set the row count of paragraph | `int` | - |
|
||||
| `ParagraphWidth` | Set the width of paragraph. When width is an Array, it can set the width of each row. Otherwise only set the last row width | `int \| string \| Array<int \| string>` | - |
|
||||
| `Title` | Show title placeholder | `boolean` | `true` |
|
||||
| `TitleWidth` | Set the width of title | `int \| string` | - |
|
||||
|
||||
|
||||
### SkeletonElement Type="button"
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| -------- | ---------------- | ---------------------------------- | ----------- |
|
||||
| `Active` | Show animation effect | `boolean` | `false` |
|
||||
| `Size` | Set the size | `'large' \| 'small' \| 'default'` | `'default'` |
|
||||
| `Shape` | Set the shape | `'circle' \| 'round' \| 'default'` | `'default'` |
|
||||
|
||||
### SkeletonElement Type="avatar"
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| -------- | ---------------- | ---------------------------------------- | ----------- |
|
||||
| `Active` | Show animation effect | `boolean` | `false` |
|
||||
| `Size` | Set the size | `int \| 'large' \| 'small' \| 'default'` | `'default'` |
|
||||
| `Shape` | Set the shape | `'circle' \| 'square'` | `'square'` |
|
||||
|
||||
### SkeletonElement Type="input"
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| -------- | ---------------- | --------------------------------- | ----------- |
|
||||
| `Active` | Show animation effect | `boolean` | `false` |
|
||||
| `Size` | Set the size | `'large' \| 'small' \| 'default'` | `'default'` |
|
||||
@ -0,0 +1,58 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 骨架屏
|
||||
type: 反馈
|
||||
title: Skeleton
|
||||
cols: 1
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/KpcciCJgv/Skeleton.svg
|
||||
---
|
||||
|
||||
在需要等待加载内容的位置提供一个占位图形组合。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 网络较慢，需要长时间等待加载处理的情况下。
|
||||
- 图文信息内容较多的列表/卡片中。
|
||||
- 只适合用在第一次加载数据的场景。
|
||||
- 可以被 Spin 完全代替，但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验
|
||||
|
||||
## API
|
||||
|
||||
### Skeleton
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| ---------------- | -------------------------------------------------------------------------- | ---------------------------------------- | ------- |
|
||||
| `Active` | 是否展示动画效果 | `boolean` | `false` |
|
||||
| `Avatar` | 是否显示头像占位图 | `boolean` | `false` |
|
||||
| `AvatarSize` | 设置头像占位图的大小 | `int \| 'large' \| 'small' \| 'default'` | - |
|
||||
| `AvatarShape` | 指定头像的形状 | `'circle' \| 'square'` | - |
|
||||
| `Loading` | 为 `true` 时，显示占位图。反之则直接展示子组件 | `boolean` | - |
|
||||
| `Paragraph` | 是否显示段落占位图 | `boolean` | `true` |
|
||||
| `ParagraphRows` | 设置段落占位图的行数 | `int` | - |
|
||||
| `ParagraphWidth` | 设置标题占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | `int \| string \| Array<int \| string>` | - |
|
||||
| `Title` | 是否显示标题占位图 | `boolean` | `true` |
|
||||
| `TitleWidth` | 设置标题占位图的宽度 | `int \| string` | - |
|
||||
|
||||
|
||||
### SkeletonElement Type="button"
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| -------- | ---------------- | ---------------------------------- | ----------- |
|
||||
| `Active` | 是否展示动画效果 | `boolean` | `false` |
|
||||
| `Size` | 大小 | `'large' \| 'small' \| 'default'` | `'default'` |
|
||||
| `Shape` | 形状 | `'circle' \| 'round' \| 'default'` | `'default'` |
|
||||
|
||||
### SkeletonElement Type="avatar"
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| -------- | ---------------- | ---------------------------------------- | ----------- |
|
||||
| `Active` | 是否展示动画效果 | `boolean` | `false` |
|
||||
| `Size` | 大小 | `int \| 'large' \| 'small' \| 'default'` | `'default'` |
|
||||
| `Shape` | 形状 | `'circle' \| 'square'` | `'square'` |
|
||||
|
||||
### SkeletonElement Type="input"
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| -------- | ---------------- | --------------------------------- | ----------- |
|
||||
| `Active` | 是否展示动画效果 | `boolean` | `false` |
|
||||
| `Size` | 大小 | `'large' \| 'small' \| 'default'` | `'default'` |
|
||||
@ -0,0 +1,38 @@
|
||||
---
|
||||
category: Components
|
||||
type: Data Entry
|
||||
title: Slider
|
||||
cover: https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg
|
||||
---
|
||||
|
||||
A Slider component for displaying current value and intervals in range.
|
||||
|
||||
## When To Use
|
||||
|
||||
- To input a value in a range.
|
||||
|
||||
|
||||
|
||||
## API
|
||||
|
||||
| Property | Description | Type | Default Value |
|
||||
| --- | --- | --- | --- |
|
||||
| DefaultValue | The default value of slider. When range is false, use number, otherwise, use [number, number] | number |
|
||||
| Disabled | If true, the slider will not be interactable. | boolean |- |
|
||||
| Dots | Whether the thumb can drag over tick only. | boolean | - |
|
||||
| Included | Make effect when marks not null, true means containment and false means coordinative | boolean | - |
|
||||
| Marks | Tick mark of Slider, type of key must be number, and must in closed interval [min, max], each mark can declare its own style. | object |
|
||||
| Max | The maximum value the slider can slide to | number | - |
|
||||
| Min |The minimum value the slider can slide to. | number | - |
|
||||
| Range |dual thumb mode | boolean | - |
|
||||
| Reverse | reverse the component | boolean | - |
|
||||
| Step | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When marks no null, step can be null. | number | - |
|
||||
| Value | The value of slider. When range is false, use number, otherwise, use [number, number] | number | - |
|
||||
| Vertical | If true, the slider will be vertical. | boolean | - |
|
||||
| OnAfterChange |Fire when onmouseup is fired. | function(e) | - |
|
||||
| OnChange |Callback function that is fired when the user changes the slider's value. | function(e) | - |
|
||||
| HasTooltip |Will not render `Tooltip` if set to false | boolean | true |
|
||||
| TipFormatter |Slider will pass its value to `TipFormatter`, and display its value in `Tooltip`. | Func<double, string> | (d) => d.ToString() |
|
||||
| TooltipPlacement | Set `Tooltip` display position. Ref [`Tooltip`](/components/tooltip). | PlacementType | `PlacementType.Top` for horizontal slider & `PlacementType.Right` for vertical slider|
|
||||
| TooltipVisible |If true, `Tooltip` will show always, or it will not show anyway, even if dragging or hovering. | boolean | false |
|
||||
| GetTooltipPopupContainer |The DOM container of the Tooltip, the default behavior is to create a div element in body. | Rendfragment | - |
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user