@agentscope-ai/design 1.0.9 → 1.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (140) hide show
  1. package/lib/antd/styles/alert.style.js +1 -1
  2. package/lib/antd/styles/breadcrumb.style.js +1 -1
  3. package/lib/antd/styles/button.style.js +1 -1
  4. package/lib/antd/styles/dropdown.style.js +1 -1
  5. package/lib/antd/styles/floatButton.style.js +1 -1
  6. package/lib/antd/styles/index.style.js +1 -1
  7. package/lib/antd/styles/inputNumber.style.js +1 -1
  8. package/lib/antd/styles/message.style.js +1 -1
  9. package/lib/antd/styles/notification.style.js +1 -1
  10. package/lib/antd/styles/popover.style.js +1 -1
  11. package/lib/antd/styles/radio.style.js +1 -1
  12. package/lib/antd/styles/segment.style.js +1 -1
  13. package/lib/antd/styles/select.style.js +1 -1
  14. package/lib/antd/styles/slider.style.js +1 -1
  15. package/lib/antd/styles/table.style.js +1 -1
  16. package/lib/antd/styles/tooltip.style.js +1 -1
  17. package/lib/antd/themes/bailianTheme.json +1 -1
  18. package/lib/antd/themes/generateThemeByToken.js +7 -1
  19. package/lib/components/commonComponents/AlertDialog/index.style.js +1 -1
  20. package/lib/components/commonComponents/Anchor/index.style.js +1 -1
  21. package/lib/components/commonComponents/Avatar/index.style.js +1 -1
  22. package/lib/components/commonComponents/Breadcrumb/index.style.js +1 -1
  23. package/lib/components/commonComponents/Button/index.d.ts +1 -1
  24. package/lib/components/commonComponents/Button/index.js +7 -7
  25. package/lib/components/commonComponents/Card/index.style.js +1 -1
  26. package/lib/components/commonComponents/Checkbox/index.style.js +1 -1
  27. package/lib/components/commonComponents/CodeBlock/index.js +2 -1
  28. package/lib/components/commonComponents/CodeBlock/index.style.js +1 -1
  29. package/lib/components/commonComponents/Collapse/index.style.js +1 -1
  30. package/lib/components/commonComponents/CollapsePanel/index.style.js +1 -1
  31. package/lib/components/commonComponents/ConfigProvider/index.js +10 -7
  32. package/lib/components/commonComponents/DatePicker/index.style.js +1 -1
  33. package/lib/components/commonComponents/Descriptions/index.style.js +1 -1
  34. package/lib/components/commonComponents/Drawer/index.style.js +1 -1
  35. package/lib/components/commonComponents/Dropdown/index.style.js +1 -1
  36. package/lib/components/commonComponents/EllipsisTip/index.style.js +1 -1
  37. package/lib/components/commonComponents/Empty/index.style.js +1 -1
  38. package/lib/components/commonComponents/FileIcon/index.style.js +1 -1
  39. package/lib/components/commonComponents/Form/index.style.js +1 -1
  40. package/lib/components/commonComponents/HelpIcon/index.style.js +1 -1
  41. package/lib/components/commonComponents/IconButton/index.style.js +1 -1
  42. package/lib/components/commonComponents/IconFont/index.style.js +1 -1
  43. package/lib/components/commonComponents/Image/index.style.js +1 -1
  44. package/lib/components/commonComponents/Input/index.style.js +1 -1
  45. package/lib/components/commonComponents/Modal/index.js +0 -1
  46. package/lib/components/commonComponents/Modal/index.style.js +1 -1
  47. package/lib/components/commonComponents/Pagination/index.js +75 -20
  48. package/lib/components/commonComponents/Pagination/index.style.js +1 -1
  49. package/lib/components/commonComponents/PromptsEditor/demo/basic.js +5 -4
  50. package/lib/components/commonComponents/PromptsEditor/index.d.ts +8 -2
  51. package/lib/components/commonComponents/PromptsEditor/index.js +16 -10
  52. package/lib/components/commonComponents/RadioButton/index.style.js +1 -1
  53. package/lib/components/commonComponents/Result/index.style.js +1 -1
  54. package/lib/components/commonComponents/SlateEditor/elements/index.style.js +1 -1
  55. package/lib/components/commonComponents/SlateEditor/index.style.js +1 -1
  56. package/lib/components/commonComponents/Slider/Input/index.js +6 -4
  57. package/lib/components/commonComponents/Slider/Input/index.style.js +2 -2
  58. package/lib/components/commonComponents/Slider/index.style.js +1 -1
  59. package/lib/components/commonComponents/SliderSelector/index.style.js +1 -1
  60. package/lib/components/commonComponents/Spinner/index.style.js +1 -1
  61. package/lib/components/commonComponents/Statistic/index.style.js +1 -1
  62. package/lib/components/commonComponents/Steps/index.style.js +1 -1
  63. package/lib/components/commonComponents/Switch/index.js +3 -3
  64. package/lib/components/commonComponents/Switch/index.style.js +1 -1
  65. package/lib/components/commonComponents/Table/demo/demo1.js +1 -9
  66. package/lib/components/commonComponents/Table/demo/demo2.js +1 -9
  67. package/lib/components/commonComponents/Table/demo/demo3.js +1 -9
  68. package/lib/components/commonComponents/Table/demo/demo4.js +1 -9
  69. package/lib/components/commonComponents/Table/index.d.ts +1 -1
  70. package/lib/components/commonComponents/Table/index.js +1 -1
  71. package/lib/components/commonComponents/Table/index.style.js +18 -2
  72. package/lib/components/commonComponents/Tabs/index.js +3 -1
  73. package/lib/components/commonComponents/Tabs/index.style.js +1 -1
  74. package/lib/components/commonComponents/Tag/index.style.js +1 -1
  75. package/lib/components/commonComponents/TimePicker/index.style.js +1 -1
  76. package/lib/components/commonComponents/Tooltip/index.style.js +1 -1
  77. package/lib/components/commonComponents/Upload/index.style.js +1 -1
  78. package/lib/components/commonComponents/Video/Control.d.ts +19 -0
  79. package/lib/components/commonComponents/Video/Control.js +104 -0
  80. package/lib/components/commonComponents/Video/demo/demo1.d.ts +2 -0
  81. package/lib/components/commonComponents/Video/demo/demo1.js +12 -0
  82. package/lib/components/commonComponents/Video/index.d.ts +18 -0
  83. package/lib/components/commonComponents/Video/index.js +222 -0
  84. package/lib/components/commonComponents/Video/index.style.d.ts +1 -0
  85. package/lib/components/commonComponents/Video/index.style.js +40 -0
  86. package/lib/i18n/strings/en-US.json +3 -1
  87. package/lib/i18n/strings/zh-CN.json +3 -1
  88. package/lib/index.d.ts +2 -1
  89. package/lib/index.js +1 -0
  90. package/lib/libs/createStyle/index.d.ts +7 -1
  91. package/lib/libs/createStyle/index.js +24 -72
  92. package/lib/libs/generateCssVars/index.js +1 -1
  93. package/package.json +12 -12
  94. package/lib/libs/newCreateStyle/index.d.ts +0 -7
  95. package/lib/libs/newCreateStyle/index.js +0 -26
  96. package/llms/all.llms.txt +0 -4235
  97. package/llms/components/commonComponents/Alert/index.zh-CN.llms.txt +0 -74
  98. package/llms/components/commonComponents/Anchor/index.zh-CN.llms.txt +0 -71
  99. package/llms/components/commonComponents/Avatar/index.zh-CN.llms.txt +0 -61
  100. package/llms/components/commonComponents/Breadcrumb/index.zh-CN.llms.txt +0 -89
  101. package/llms/components/commonComponents/Button/index.zh-CN.llms.txt +0 -99
  102. package/llms/components/commonComponents/Card/index.zh-CN.llms.txt +0 -79
  103. package/llms/components/commonComponents/Checkbox/index.zh-CN.llms.txt +0 -88
  104. package/llms/components/commonComponents/CodeBlock/index.zh-CN.llms.txt +0 -34
  105. package/llms/components/commonComponents/Collapse/index.zh-CN.llms.txt +0 -76
  106. package/llms/components/commonComponents/CollapsePanel/index.zh-CN.llms.txt +0 -75
  107. package/llms/components/commonComponents/DatePicker/index.zh-CN.llms.txt +0 -227
  108. package/llms/components/commonComponents/Descriptions/index.zh-CN.llms.txt +0 -60
  109. package/llms/components/commonComponents/Drawer/index.zh-CN.llms.txt +0 -87
  110. package/llms/components/commonComponents/Dropdown/index.zh-CN.llms.txt +0 -87
  111. package/llms/components/commonComponents/Empty/index.zh-CN.llms.txt +0 -100
  112. package/llms/components/commonComponents/FloatButton/index.zh-CN.llms.txt +0 -70
  113. package/llms/components/commonComponents/Form/index.zh-CN.llms.txt +0 -383
  114. package/llms/components/commonComponents/IconButton/index.zh-CN.llms.txt +0 -68
  115. package/llms/components/commonComponents/Image/index.zh-CN.llms.txt +0 -118
  116. package/llms/components/commonComponents/Input/index.zh-CN.llms.txt +0 -168
  117. package/llms/components/commonComponents/InputNumber/index.zh-CN.llms.txt +0 -66
  118. package/llms/components/commonComponents/Message/index.zh-CN.llms.txt +0 -114
  119. package/llms/components/commonComponents/Modal/index.zh-CN.llms.txt +0 -154
  120. package/llms/components/commonComponents/Notification/index.zh-CN.llms.txt +0 -118
  121. package/llms/components/commonComponents/Pagination/index.zh-CN.llms.txt +0 -62
  122. package/llms/components/commonComponents/Popover/index.zh-CN.llms.txt +0 -56
  123. package/llms/components/commonComponents/Progress/index.zh-CN.llms.txt +0 -64
  124. package/llms/components/commonComponents/Radio/index.zh-CN.llms.txt +0 -75
  125. package/llms/components/commonComponents/RadioButton/index.zh-CN.llms.txt +0 -94
  126. package/llms/components/commonComponents/Result/index.zh-CN.llms.txt +0 -63
  127. package/llms/components/commonComponents/Select/index.zh-CN.llms.txt +0 -120
  128. package/llms/components/commonComponents/Skeleton/index.zh-CN.llms.txt +0 -71
  129. package/llms/components/commonComponents/Slider/index.zh-CN.llms.txt +0 -83
  130. package/llms/components/commonComponents/Spinner/index.zh-CN.llms.txt +0 -38
  131. package/llms/components/commonComponents/Statistic/index.zh-CN.llms.txt +0 -77
  132. package/llms/components/commonComponents/Steps/index.zh-CN.llms.txt +0 -82
  133. package/llms/components/commonComponents/Switch/index.zh-CN.llms.txt +0 -58
  134. package/llms/components/commonComponents/Table/index.zh-CN.llms.txt +0 -228
  135. package/llms/components/commonComponents/Tabs/index.zh-CN.llms.txt +0 -95
  136. package/llms/components/commonComponents/Tag/index.zh-CN.llms.txt +0 -57
  137. package/llms/components/commonComponents/TimePicker/index.zh-CN.llms.txt +0 -104
  138. package/llms/components/commonComponents/Tooltip/index.zh-CN.llms.txt +0 -63
  139. package/llms/components/commonComponents/Upload/index.zh-CN.llms.txt +0 -105
  140. package/llms/index.llms.txt +0 -45
@@ -1,70 +0,0 @@
1
-
2
-
3
- <DemoTitle title="FloatButton" desc="用于网站上的全局功能;无论浏览到何处都可以看见的按钮。"></DemoTitle>
4
-
5
-
6
-
7
-
8
-
9
- 示例
10
-
11
- <Install>
12
- import { FloatButton } from 'antd';
13
- </Install>
14
-
15
- #### 悬浮按钮示例
16
-
17
- 以下是此组件的示例和变体
18
-
19
-
20
-
21
-
22
-
23
- 以主题色为背景的悬浮按钮
24
-
25
- 本组件完全兼容 antd 同名组件,详情可访问 [antd float-button](https://ant.design/components/float-button-cn) 查看更多 API
26
-
27
-
28
- ## antd API
29
-
30
- 通用属性参考:[通用属性](/docs/react/common-props)
31
-
32
- 自 `antd@5.0.0` 版本开始提供该组件。
33
-
34
- ### 共同的 API
35
-
36
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
37
- |--------|--------|--------|--------|--------|
38
- | icon | 自定义图标 | ReactNode | - | |
39
- | description | 文字及其它内容 | ReactNode | - | |
40
- | tooltip | 气泡卡片的内容 | ReactNode | | - | TooltipProps: 5.25.0 |
41
- | type | 设置按钮类型 | default | default | |
42
- | shape | 设置按钮形状 | circle | circle | |
43
- | onClick | 点击按钮时的回调 | (event) => void | - | |
44
- | href | 点击跳转的地址,指定此属性 button 的行为和 a 链接一致 | string | - | |
45
- | target | 相当于 a 标签的 target 属性,href 存在时生效 | string | - | |
46
- | htmlType | 设置 | submit | button | 5.21.0 |
47
- | badge | 带徽标数字的悬浮按钮(不支持 | | - | 5.4.0 |
48
-
49
-
50
- ### FloatButton.Group
51
-
52
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
53
- |--------|--------|--------|--------|--------|
54
- | shape | 设置包含的 FloatButton 按钮形状 | circle | circle | |
55
- | trigger | 触发方式(有触发方式为菜单模式) | click | - | |
56
- | open | 受控展开,需配合 trigger 一起使用 | boolean | - | |
57
- | closeIcon | 自定义关闭按钮 | React.ReactNode | <CloseOutlined /> | |
58
- | placement | 自定义菜单弹出位置 | top | top | 5.21.0 |
59
- | onOpenChange | 展开收起时的回调,需配合 trigger 一起使用 | (open: boolean) => void | - | |
60
- | onClick | 点击按钮时的回调(仅在菜单模式中有效) | (event) => void | - | 5.3.0 |
61
-
62
-
63
- ### FloatButton.BackTop
64
-
65
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
66
- |--------|--------|--------|--------|--------|
67
- | duration | 回到顶部所需时间(ms) | number | 450 | |
68
- | target | 设置需要监听其滚动事件的元素 | () => HTMLElement | () => window | |
69
- | visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 | |
70
- | onClick | 点击按钮的回调函数 | () => void | - | |
@@ -1,383 +0,0 @@
1
-
2
-
3
- <DemoTitle title="Form" desc="高性能表单控件,自带数据域管理。包含数据录入、校验以及对应样式。"></DemoTitle>
4
-
5
-
6
-
7
-
8
-
9
- 示例
10
-
11
- <Install>Form</Install>
12
-
13
- #### 标签页示例
14
-
15
- 以下是此组件的示例和变体
16
-
17
-
18
-
19
-
20
-
21
- 横向排布
22
-
23
- 本组件完全兼容 antd 同名组件,详情可访问 [antd form](https://ant.design/components/form-cn) 查看更多 API
24
-
25
-
26
- ## antd API
27
-
28
- 通用属性参考:[通用属性](/docs/react/common-props)
29
-
30
- ### Form
31
-
32
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
33
- |--------|--------|--------|--------|--------|
34
- | colon | 配置 Form.Item 的 | boolean | true | |
35
- | disabled | 设置表单组件禁用,仅对 antd 组件有效 | boolean | false | 4.21.0 |
36
- | component | 设置 Form 渲染元素,为 | ComponentType | false | form | |
37
- | fields | 通过状态管理(如 redux)控制表单字段,如非强需求不推荐使用。查看 | | - | |
38
- | form | 经 | | - | |
39
- | feedbackIcons | 当 | | - | 5.9.0 |
40
- | initialValues | 表单默认值,只有初始化以及重置时生效 | object | - | |
41
- | labelAlign | label 标签的文本对齐方式 | left | right | |
42
- | labelWrap | label 标签的文本换行方式 | boolean | false | 4.18.0 |
43
- | labelCol | label 标签布局,同 | | - | |
44
- | layout | 表单布局 | horizontal | horizontal | |
45
- | name | 表单名称,会作为表单字段 | string | - | |
46
- | preserve | 当字段被删除时保留字段值。你可以通过 | boolean | true | 4.4.0 |
47
- | requiredMark | 必选样式,可以切换为必选或者可选展示样式。此为 Form 配置,Form.Item 无法单独配置 | boolean | | true | renderProps |
48
- | scrollToFirstError | 提交失败自动滚动到第一个错误字段 | boolean | | false | focus: 5.24.0 |
49
- | size | 设置字段组件的尺寸(仅限 antd 组件) | small | - | |
50
- | validateMessages | 验证提示模板,说明 | | - | |
51
- | validateTrigger | 统一设置字段触发验证的时机 | string | string[] | onChange | 4.3.0 |
52
- | variant | 表单内控件变体 | outlined | outlined | 5.13.0 | |
53
- | wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 labelCol | | - | |
54
- | onFieldsChange | 字段更新时触发回调事件 | function(changedFields, allFields) | - | |
55
- | onFinish | 提交表单且数据验证成功后回调事件 | function(values) | - | |
56
- | onFinishFailed | 提交表单且数据验证失败后回调事件 | function({ values, errorFields, outOfDate }) | - | |
57
- | onValuesChange | 字段值更新时触发回调事件 | function(changedValues, allValues) | - | |
58
- | clearOnDestroy | 当表单被卸载时清空表单值 | boolean | false | 5.18.0 |
59
-
60
-
61
- 支持原生 form 除 `onSubmit` 外的所有属性。
62
-
63
- ### validateMessages
64
-
65
- Form 为验证提供了[默认的错误提示信息](https://github.com/ant-design/ant-design/blob/6234509d18bac1ac60fbb3f92a5b2c6a6361295a/components/locale/en_US.ts#L88-L134),你可以通过配置 `validateMessages` 属性,修改对应的提示模板。一种常见的使用方式,是配置国际化提示信息:
66
-
67
-
68
-
69
-
70
-
71
- 此外,[ConfigProvider](/components/config-provider-cn) 也提供了全局化配置方案,允许统一配置错误提示模板:
72
-
73
-
74
-
75
-
76
-
77
- ## Form.Item
78
-
79
- 表单字段组件,用于数据双向绑定、校验、布局等。
80
-
81
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
82
- |--------|--------|--------|--------|--------|
83
- | colon | 配合 | boolean | true | |
84
- | dependencies | 设置依赖字段,说明 | | - | |
85
- | extra | 额外的提示信息,和 | ReactNode | - | |
86
- | getValueFromEvent | 设置如何将 event 的值转换成字段值 | (..args: any[]) => any | - | |
87
- | getValueProps | 为子元素添加额外的属性 (不建议通过 | (value: any) => Record<string, any> | - | 4.2.0 |
88
- | hasFeedback | 配合 | boolean | { icons: | false | icons: 5.9.0 |
89
- | help | 提示信息,如不设置,则会根据校验规则自动生成 | ReactNode | - | |
90
- | hidden | 是否隐藏字段(依然会收集和校验字段) | boolean | false | 4.4.0 |
91
- | htmlFor | 设置子元素 label | string | - | |
92
- | initialValue | 设置子元素默认值,如果与 Form 的 | string | - | 4.2.0 |
93
- | label | label | ReactNode | - | null: 5.22.0 |
94
- | labelAlign | 标签文本对齐方式 | left | right | |
95
- | labelCol | label | | - | |
96
- | messageVariables | 默认验证字段的信息,查看 | Record<string, string> | - | 4.7.0 |
97
- | name | 字段名,支持数组 | | - | |
98
- | normalize | 组件获取值后进行转换,再放入 Form 中。不支持异步 | (value, prevValue, prevValues) => any | - | |
99
- | noStyle | 为 | boolean | false | |
100
- | preserve | 当字段被删除时保留字段值 | boolean | true | 4.4.0 |
101
- | required | 必填样式设置。如不设置,则会根据校验规则自动生成 | boolean | false | |
102
- | rules | 校验规则,设置字段的校验逻辑。点击 | | - | |
103
- | shouldUpdate | 自定义字段更新逻辑,说明 | boolean | (prevValue, curValue) => boolean | false | |
104
- | tooltip | 配置提示信息 | ReactNode | | - | 4.7.0 |
105
- | trigger | 设置收集字段值变更的时机。点击 | string | onChange | |
106
- | validateFirst | 当某一规则校验不通过时,是否停止剩下的规则的校验。设置 | boolean | | false | parallel |
107
- | validateDebounce | 设置防抖,延迟毫秒数后进行校验 | number | - | 5.9.0 |
108
- | validateStatus | 校验状态,如不设置,则会根据校验规则自动生成,可选:'success' 'warning' 'error' 'validating' | string | - | |
109
- | validateTrigger | 设置字段校验的时机 | string | string[] | onChange | |
110
- | valuePropName | 子节点的值的属性。注意:Switch、Checkbox 的 valuePropName 应该是 | string | value | |
111
- | wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 | | - | |
112
- | layout | 表单项布局 | horizontal | - | 5.18.0 |
113
-
114
-
115
- 被设置了 `name` 属性的 `Form.Item` 包装的控件,表单控件会自动添加 `value`(或 `valuePropName` 指定的其他属性) `onChange`(或 `trigger` 指定的其他属性),数据同步将被 Form 接管,这会导致以下结果:
116
-
117
-
118
- 1. 你**不再需要也不应该**用 `onChange` 来做数据收集同步(你可以使用 Form 的 `onValuesChange`),但还是可以继续监听 `onChange` 事件。
119
- 2. 你不能用控件的 `value` 或 `defaultValue` 等属性来设置表单域的值,默认值可以用 Form 里的 `initialValues` 来设置。注意 `initialValues` 不能被 `setState` 动态更新,你需要用 `setFieldsValue` 来更新。
120
- 3. 你不应该用 `setState`,可以使用 `form.setFieldsValue` 来动态改变表单值。
121
-
122
- ### dependencies
123
-
124
- 当字段间存在依赖关系时使用。如果一个字段设置了 `dependencies` 属性。那么它所依赖的字段更新时,该字段将自动触发更新与校验。一种常见的场景,就是注册用户表单的“密码”与“确认密码”字段。“确认密码”校验依赖于“密码”字段,设置 `dependencies` 后,“密码”字段更新会重新触发“校验密码”的校验逻辑。你可以参考[具体例子](#form-demo-dependencies)。
125
-
126
- `dependencies` 不应和 `shouldUpdate` 一起使用,因为这可能带来更新逻辑的混乱。
127
-
128
- ### FeedbackIcons
129
-
130
- `({ status: ValidateStatus, errors: ReactNode, warnings: ReactNode }) => Record<ValidateStatus, ReactNode>`
131
-
132
- ### shouldUpdate
133
-
134
- Form 通过增量更新方式,只更新被修改的字段相关组件以达到性能优化目的。大部分场景下,你只需要编写代码或者与 [`dependencies`](#dependencies) 属性配合校验即可。而在某些特定场景,例如修改某个字段值后出现新的字段选项、或者纯粹希望表单任意变化都对某一个区域进行渲染。你可以通过 `shouldUpdate` 修改 Form.Item 的更新逻辑。
135
-
136
- 当 `shouldUpdate` 为 `true` 时,Form 的任意变化都会使该 Form.Item 重新渲染。这对于自定义渲染一些区域十分有帮助,要注意 Form.Item 里包裹的子组件必须由函数返回,否则 `shouldUpdate` 不会起作用:
137
-
138
- 相关issue:[#34500](https://github.com/ant-design/ant-design/issues/34500)
139
-
140
-
141
-
142
-
143
-
144
- 你可以参考[示例](#form-demo-inline-login)查看具体使用场景。
145
-
146
- 当 `shouldUpdate` 为方法时,表单的每次数值更新都会调用该方法,提供原先的值与当前的值以供你比较是否需要更新。这对于是否根据值来渲染额外字段十分有帮助:
147
-
148
-
149
-
150
-
151
-
152
- 你可以参考[示例](#form-demo-control-hooks)查看具体使用场景。
153
-
154
- ### messageVariables
155
-
156
- 你可以通过 `messageVariables` 修改 Form.Item 的默认验证信息。
157
-
158
-
159
-
160
-
161
-
162
- 自 `5.20.2` 起,当你希望不要转译 `${}` 时,你可以通过 `\\${}` 来略过:
163
-
164
-
165
-
166
-
167
-
168
- ## Form.List
169
-
170
- 为字段提供数组化管理。
171
-
172
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
173
- |--------|--------|--------|--------|--------|
174
- | children | 渲染函数 | (fields: Field[], operation: { add, remove, move }, meta: { errors }) => React.ReactNode | - | |
175
- | initialValue | 设置子元素默认值,如果与 Form 的 | any[] | - | 4.9.0 |
176
- | name | 字段名,支持数组。List 本身也是字段,因而 | | - | |
177
- | rules | 校验规则,仅支持自定义规则。需要配合 | { validator, message }[] | - | 4.7.0 |
178
-
179
-
180
-
181
-
182
-
183
-
184
- 注意:Form.List 下的字段不应该配置 `initialValue`,你始终应该通过 Form.List 的 `initialValue` 或者 Form 的 `initialValues` 来配置。
185
-
186
- ## operation
187
-
188
- Form.List 渲染表单相关操作函数。
189
-
190
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
191
- |--------|--------|--------|--------|--------|
192
- | add | 新增表单项 | (defaultValue?: any, insertIndex?: number) => void | insertIndex | 4.6.0 |
193
- | move | 移动表单项 | (from: number, to: number) => void | - | |
194
- | remove | 删除表单项 | (index: number | number[]) => void | number[] | 4.5.0 |
195
-
196
-
197
- ## Form.ErrorList
198
-
199
- 4.7.0 新增。错误展示组件,仅限配合 Form.List 的 rules 一同使用。参考[示例](#form-demo-dynamic-form-item)。
200
-
201
- | 参数 | 说明 | 类型 | 默认值 |
202
- |--------|--------|--------|--------|
203
- | errors | 错误列表 | ReactNode[] | - |
204
-
205
-
206
- ## Form.Provider
207
-
208
- 提供表单间联动功能,其下设置 `name` 的 Form 更新时,会自动触发对应事件。查看[示例](#form-demo-form-context)。
209
-
210
- | 参数 | 说明 | 类型 | 默认值 |
211
- |--------|--------|--------|--------|
212
- | onFormChange | 子表单字段更新时触发 | function(formName: string, info: { changedFields, forms }) | - |
213
- | onFormFinish | 子表单提交时触发 | function(formName: string, info: { values, forms }) | - |
214
-
215
-
216
-
217
-
218
-
219
-
220
- ### FormInstance
221
-
222
- | 名称 | 说明 | 类型 | 版本 |
223
- |--------|--------|--------|--------|
224
- | getFieldError | 获取对应字段名的错误信息 | (name: | |
225
- | getFieldInstance | 获取对应字段实例 | (name: | 4.4.0 |
226
- | getFieldsError | 获取一组字段名对应的错误信息,返回为数组形式 | (nameList?: | |
227
- | getFieldsValue | 获取一组字段名对应的值,会按照对应结构返回。默认返回现存字段值,当调用 | | |
228
- | getFieldValue | 获取对应字段名的值 | (name: | |
229
- | isFieldsTouched | 检查一组字段是否被用户操作过, | (nameList?: | |
230
- | isFieldTouched | 检查对应字段是否被用户操作过 | (name: | |
231
- | isFieldValidating | 检查对应字段是否正在校验 | (name: | |
232
- | resetFields | 重置一组字段到 | (fields?: | |
233
- | scrollToField | 滚动到对应字段位置 | (name: | focus: 5.24.0 |
234
- | setFields | 设置一组字段状态 | (fields: | |
235
- | setFieldValue | 设置表单的值(该值将直接传入 form store 中并且 | (name: | 4.22.0 |
236
- | setFieldsValue | 设置表单的值(该值将直接传入 form store 中并且 | (values) => void | |
237
- | submit | 提交表单,与点击 | () => void | |
238
- | validateFields | 触发表单验证,设置 | (nameList?: | |
239
-
240
-
241
- #### validateFields
242
-
243
-
244
-
245
-
246
-
247
- 返回示例:
248
-
249
-
250
-
251
-
252
-
253
- ## Hooks
254
-
255
- ### Form.useForm
256
-
257
- `type Form.useForm = (): [FormInstance]`
258
-
259
- 创建 Form 实例,用于管理所有数据状态。
260
-
261
- ### Form.useFormInstance
262
-
263
- `type Form.useFormInstance = (): FormInstance`
264
-
265
- `4.20.0` 新增,获取当前上下文正在使用的 Form 实例,常见于封装子组件消费无需透传 Form 实例:
266
-
267
-
268
-
269
-
270
-
271
- ### Form.useWatch
272
-
273
- `type Form.useWatch = (namePath: NamePath | (selector: (values: Store)) => any, formInstance?: FormInstance | WatchOptions): Value`
274
-
275
- `5.12.0` 新增 `selector`
276
-
277
- 用于直接获取 form 中字段对应的值。通过该 Hooks 可以与诸如 `useSWR` 进行联动从而降低维护成本:
278
-
279
-
280
-
281
-
282
-
283
- 如果你的组件被包裹在 `Form.Item` 内部,你可以省略第二个参数,`Form.useWatch` 会自动找到上层最近的 `FormInstance`。
284
-
285
- `useWatch` 默认只监听在 Form 中注册的字段,如果需要监听非注册字段,可以通过配置 `preserve` 进行监听:
286
-
287
-
288
-
289
-
290
-
291
- ### Form.Item.useStatus
292
-
293
- `type Form.Item.useStatus = (): { status: ValidateStatus | undefined, errors: ReactNode[], warnings: ReactNode[] }`
294
-
295
- `4.22.0` 新增,可用于获取当前 Form.Item 的校验状态,如果上层没有 Form.Item,`status` 将会返回 `undefined`。`5.4.0` 新增 `errors` 和 `warnings`,可用于获取当前 Form.Item 的错误信息和警告信息:
296
-
297
-
298
-
299
-
300
-
301
- #### 与其他获取数据的方式的区别
302
-
303
- Form 仅会对变更的 Field 进行刷新,从而避免完整的组件刷新可能引发的性能问题。因而你无法在 render 阶段通过 `form.getFieldsValue` 来实时获取字段值,而 `useWatch` 提供了一种特定字段访问的方式,从而使得在当前组件中可以直接消费字段的值。同时,如果为了更好的渲染性能,你可以通过 Field 的 renderProps 仅更新需要更新的部分。而当当前组件更新或者 effect 都不需要消费字段值时,则可以通过 `onValuesChange` 将数据抛出,从而避免组件更新。
304
-
305
- ## Interface
306
-
307
- ### NamePath
308
-
309
- `string | number | (string | number)[]`
310
-
311
- ### GetFieldsValue
312
-
313
- `getFieldsValue` 提供了多种重载方法:
314
-
315
- #### getFieldsValue(nameList?: true | [NamePath](#namepath)[], filterFunc?: FilterFunc)
316
-
317
- 当不提供 `nameList` 时,返回所有注册字段,这也包含 List 下所有的值(即便 List 下没有绑定 Item)。
318
-
319
- 当 `nameList` 为 `true` 时,返回 store 中所有的值,包含未注册字段。例如通过 `setFieldsValue` 设置了不存在的 Item 的值,也可以通过 `true` 全部获取。
320
-
321
- 当 `nameList` 为数组时,返回规定路径的值。需要注意的是,`nameList` 为嵌套数组。例如你需要某路径值应该如下:
322
-
323
-
324
-
325
-
326
-
327
- #### getFieldsValue({ strict?: boolean, filter?: FilterFunc })
328
-
329
- `5.8.0` 新增接受配置参数。当 `strict` 为 `true` 时会仅匹配 Item 的值。例如 `{ list: [{ bamboo: 1, little: 2 }] }` 中,如果 List 仅绑定了 `bamboo` 字段,那么 `getFieldsValue({ strict: true })` 会只获得 `{ list: [{ bamboo: 1 }] }`。
330
-
331
- ### FilterFunc
332
-
333
- 用于过滤一些字段值,`meta` 会返回字段相关信息。例如可以用来获取仅被用户修改过的值等等。
334
-
335
-
336
-
337
-
338
-
339
- ### FieldData
340
-
341
- | 名称 | 说明 | 类型 |
342
- |--------|--------|--------|
343
- | errors | 错误信息 | string[] |
344
- | warnings | 警告信息 | string[] |
345
- | name | 字段名称 | |
346
- | touched | 是否被用户操作过 | boolean |
347
- | validating | 是否正在校验 | boolean |
348
- | value | 字段对应值 | any |
349
-
350
-
351
- ### Rule
352
-
353
- Rule 支持接收 object 进行配置,也支持 function 来动态获取 form 的数据:
354
-
355
-
356
-
357
-
358
-
359
- | 名称 | 说明 | 类型 | 版本 |
360
- |--------|--------|--------|--------|
361
- | defaultField | 仅在 | | |
362
- | enum | 是否匹配枚举中的值(需要将 | any[] | |
363
- | fields | 仅在 | Record<string, | |
364
- | len | string 类型时为字符串长度;number 类型时为确定数字; array 类型时为数组长度 | number | |
365
- | max | 必须设置 | number | |
366
- | message | 错误信息,不设置时会通过 | string | ReactElement | |
367
- | min | 必须设置 | number | |
368
- | pattern | 正则表达式匹配 | RegExp | |
369
- | required | 是否为必选字段 | boolean | |
370
- | transform | 将字段值转换成目标值后进行校验 | (value) => any | |
371
- | type | 类型,常见有 | string | |
372
- | validateTrigger | 设置触发验证时机,必须是 Form.Item 的 | string | string[] | |
373
- | validator | 自定义校验,接收 Promise 作为返回值。 | ( | |
374
- | warningOnly | 仅警告,不阻塞表单提交 | boolean | 4.17.0 |
375
- | whitespace | 如果字段仅包含空格则校验不通过,只在 | boolean | |
376
-
377
-
378
- ### WatchOptions
379
-
380
- | 名称 | 说明 | 类型 | 默认值 | 版本 |
381
- |--------|--------|--------|--------|--------|
382
- | form | 指定 Form 实例 | FormInstance | 当前 context 中的 Form | 5.4.0 |
383
- | preserve | 是否监视没有对应的 | boolean | false | 5.4.0 |
@@ -1,68 +0,0 @@
1
-
2
-
3
- <DemoTitle title="IconButton" desc="以图标为核心的轻量按钮组件,用于触发操作。"></DemoTitle>
4
-
5
-
6
-
7
-
8
-
9
- 示例
10
-
11
- <Install>IconButton</Install>
12
-
13
- #### 图标按钮示例
14
-
15
- 以下是此组件的示例和变体
16
-
17
-
18
-
19
-
20
- 带边框的图标按钮
21
-
22
-
23
-
24
-
25
- 圆形图标按钮
26
-
27
- #### API
28
-
29
- | <div><span class="lang-en">Attribute</span><span class="lang-cn">属性名</span></div> | <div><span class="lang-en">Description</span><span class="lang-cn">描述</span></div> | <div><span class="lang-en">Type</span><span class="lang-cn">类型</span></div> | <div><span class="lang-en">Default</span><span class="lang-cn">默认值</span></div> |
30
- |--------|--------|--------|--------|
31
- | icon | <div><span class="lang-en"></span><span class="lang-cn">icon</span></div> | ReactNode | string | |
32
- | iconType | <div><span class="lang-en"></span><span class="lang-cn">百炼图标iconfont的key,依赖百炼的iconFont,例如bl-icon-add</span></div> | string | |
33
- | bordered | <div><span class="lang-en"></span><span class="lang-cn">边框</span></div> | boolean | true |
34
- | shape | <div><span class="lang-en"></span><span class="lang-cn">形状</span></div> | 'default' | 'circle' | 'default' |
35
-
36
-
37
- ## antd API
38
-
39
- 通用属性参考:[通用属性](/docs/react/common-props)
40
-
41
- 通过设置 Button 的属性来产生不同的按钮样式,推荐顺序为:`type` -> `shape` -> `size` -> `loading` -> `disabled`。
42
-
43
- 按钮的属性说明如下:
44
-
45
- | 属性 | 说明 | 类型 | 默认值 | 版本 |
46
- |--------|--------|--------|--------|--------|
47
- | autoInsertSpace | 我们默认提供两个汉字之间的空格,可以设置 | boolean | true | 5.17.0 |
48
- | block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
49
- | classNames | 语义化结构 class | | - | 5.4.0 |
50
- | color | 设置按钮的颜色 | default | - | default |
51
- | danger | 语法糖,设置危险按钮。当设置 | boolean | false | |
52
- | disabled | 设置按钮失效状态 | boolean | false | |
53
- | ghost | 幽灵属性,使按钮背景透明 | boolean | false | |
54
- | href | 点击跳转的地址,指定此属性 button 的行为和 a 链接一致 | string | - | |
55
- | htmlType | 设置 | submit | button | |
56
- | iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
57
- | loading | 设置按钮载入状态 | boolean | { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
58
- | styles | 语义化结构 style | | - | 5.4.0 |
59
- | target | 相当于 a 链接的 target 属性,href 存在时生效 | string | - | |
60
- | onClick | 点击按钮时的回调 | (event: React.MouseEvent<HTMLElement, MouseEvent>) => void | - | |
61
- | variant | 设置按钮的变体 | outlined | - | 5.21.0 |
62
-
63
-
64
- 支持原生 button 的其他所有属性。
65
-
66
- ### PresetColors
67
-
68
- type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
@@ -1,118 +0,0 @@
1
-
2
-
3
- <DemoTitle title="Image" desc="可预览的图片"></DemoTitle>
4
-
5
-
6
-
7
-
8
-
9
- 示例
10
-
11
- <Install>Image</Install>
12
-
13
- #### API
14
-
15
- 本组件完全兼容 antd 同名组件,详情可访问 [antd image](https://ant.design/components/image-cn) 查看更多 API
16
-
17
-
18
- ## antd API
19
-
20
- 通用属性参考:[通用属性](/docs/react/common-props)
21
-
22
- ### Image
23
-
24
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
25
- |--------|--------|--------|--------|--------|
26
- | alt | 图像描述 | string | - | 4.6.0 |
27
- | fallback | 加载失败容错地址 | string | - | 4.6.0 |
28
- | height | 图像高度 | string | number | - | 4.6.0 |
29
- | placeholder | 加载占位,为 | ReactNode | - | 4.6.0 |
30
- | preview | 预览参数,为 | boolean | | true | 4.6.0 |
31
- | src | 图片地址 | string | - | 4.6.0 |
32
- | width | 图像宽度 | string | number | - | 4.6.0 |
33
- | onError | 加载错误回调 | (event: Event) => void | - | 4.12.0 |
34
-
35
-
36
- 其他属性见 [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
37
-
38
- ### PreviewType
39
-
40
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
41
- |--------|--------|--------|--------|--------|
42
- | visible | 是否显示 | boolean | - | - |
43
- | src | 自定义预览 src | string | - | 4.10.0 |
44
- | getContainer | 指定预览挂载的节点,但依旧为全屏展示,false 为挂载在当前位置 | string | HTMLElement | (() => HTMLElement) | false | - | 4.8.0 |
45
- | movable | 是否可移动 | boolean | true | 5.8.0 |
46
- | mask | 缩略图遮罩 | ReactNode | - | 4.9.0 |
47
- | maskClassName | 缩略图遮罩类名 | string | - | 4.11.0 |
48
- | rootClassName | 预览图的根 DOM 类名 | string | - | 5.4.0 |
49
- | scaleStep | 1 + scaleStep | number | 0.5 | - |
50
- | minScale | 最小缩放倍数 | number | 1 | 5.7.0 |
51
- | maxScale | 最大放大倍数 | number | 50 | 5.7.0 |
52
- | closeIcon | 自定义关闭 Icon | React.ReactNode | - | 5.7.0 |
53
- | forceRender | 强制渲染预览图 | boolean | - | - |
54
- | toolbarRender | 自定义工具栏 | (originalNode: React.ReactElement, info: Omit< | - | 5.7.0, |
55
- | imageRender | 自定义预览内容 | (originalNode: React.ReactElement, info: { transform: | - | 5.7.0, image: 5.18.0 |
56
- | | 关闭预览时销毁子元素 | boolean | false | |
57
- | destroyOnHidden | 关闭预览时销毁子元素 | boolean | false | 5.25.0 |
58
- | onTransform | 预览图 transform 变化的回调 | { transform: | - | 5.7.0 |
59
- | onVisibleChange | 当 | (visible: boolean, prevVisible: boolean) => void | - | - |
60
-
61
-
62
- ## PreviewGroup
63
-
64
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
65
- |--------|--------|--------|--------|--------|
66
- | preview | 预览参数,为 | boolean | | true | 4.6.0 |
67
- | items | 预览数组 | string[] | { src: string, crossOrigin: string, ... }[] | - | 5.7.0 |
68
- | fallback | 加载失败容错地址 | string | - | 5.7.0 |
69
-
70
-
71
- ### PreviewGroupType
72
-
73
- | 参数 | 说明 | 类型 | 默认值 | 版本 |
74
- |--------|--------|--------|--------|--------|
75
- | visible | 是否显示 | boolean | - | - |
76
- | getContainer | 指定预览挂载的节点,但依旧为全屏展示,false 为挂载在当前位置 | string | HTMLElement | (() => HTMLElement) | false | - | 4.8.0 |
77
- | movable | 是否可移动 | boolean | true | 5.8.0 |
78
- | current | 当前预览图的 index | number | - | 4.12.0 |
79
- | mask | 缩略图遮罩 | ReactNode | - | 4.9.0 |
80
- | maskClassName | 缩略图遮罩类名 | string | - | 4.11.0 |
81
- | | 预览图的根 DOM 类名,不做推荐了,v6 会移到根组件上 | string | - | 5.4.0 |
82
- | scaleStep | 1 + scaleStep | number | 0.5 | - |
83
- | minScale | 最小缩放倍数 | number | 1 | 5.7.0 |
84
- | maxScale | 最大放大倍数 | number | 50 | 5.7.0 |
85
- | closeIcon | 自定义关闭 Icon | React.ReactNode | - | 5.7.0 |
86
- | forceRender | 强制渲染预览图 | boolean | - | - |
87
- | countRender | 自定义预览计数内容 | (current: number, total: number) => React.ReactNode | - | 4.20.0 |
88
- | toolbarRender | 自定义工具栏 | (originalNode: React.ReactElement, info: | - | 5.7.0, |
89
- | imageRender | 自定义预览内容 | (originalNode: React.ReactElement, info: { transform: | - | 5.7.0, image: 5.18.0 |
90
- | onTransform | 预览图 transform 变化的回调 | { transform: | - | 5.7.0 |
91
- | onChange | 切换预览图的回调 | (current: number, prevCurrent: number) => void | - | 5.3.0 |
92
- | onVisibleChange | 当 | (visible: boolean, prevVisible: boolean, current: number) => void | - | current 参数 5.3.0 |
93
-
94
-
95
- ## Interface
96
-
97
- ### TransformType
98
-
99
-
100
-
101
-
102
-
103
- ### TransformAction
104
-
105
-
106
-
107
-
108
-
109
- ### ToolbarRenderInfoType
110
-
111
-
112
-
113
-
114
-
115
- ### ImgInfo
116
-
117
-
118
-