mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-03-07 02:47:12 +00:00
269 KiB
269 KiB
Snapshot report for test/index.ts
The actual snapshot is saved in index.ts.snap.
Generated by AVA.
fusion next component by local
Snapshot 1
[
{
componentName: 'Affix',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Affix',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
defaultValue: Function {},
description: `设置 Affix 需要监听滚动事件的容器元素␊
@return {ReactElement} 目标容器元素的实例`,
name: 'container',
propType: 'func',
},
{
description: '距离窗口顶部达到指定偏移量后触发',
name: 'offsetTop',
propType: 'number',
},
{
description: '距离窗口底部达到制定偏移量后触发',
name: 'offsetBottom',
propType: 'number',
},
{
description: `当元素的样式发生固钉样式变化时触发的回调函数␊
@param {Boolean} affixed 元素是否被固钉`,
name: 'onAffix',
propType: 'func',
},
{
description: `是否启用绝对布局实现 affix␊
@param {Boolean} 是否启用绝对布局`,
name: 'useAbsolute',
propType: 'bool',
},
{
name: 'className',
propType: 'string',
},
{
name: 'style',
propType: 'object',
},
{
name: 'children',
propType: 'any',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Animate',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Animate',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
description: '动画 className',
name: 'animation',
propType: {
type: 'oneOfType',
value: [
'string',
'object',
],
},
},
{
defaultValue: true,
description: '子元素第一次挂载时是否执行动画',
name: 'animationAppear',
propType: 'bool',
},
{
defaultValue: 'div',
description: '包裹子元素的标签',
name: 'component',
propType: 'any',
},
{
defaultValue: true,
description: '是否只有单个子元素，如果有多个子元素，请设置为 false',
name: 'singleMode',
propType: 'bool',
},
{
description: '子元素',
name: 'children',
propType: {
type: 'oneOfType',
value: [
'element',
{
type: 'arrayOf',
value: 'element',
},
],
},
},
{
defaultValue: Function {},
description: `执行第一次挂载动画前触发的回调函数␊
@param {HTMLElement} node 执行动画的 dom 元素`,
name: 'beforeAppear',
propType: 'func',
},
{
defaultValue: Function {},
description: `执行第一次挂载动画，添加 xxx-appear-active 类名后触发的回调函数␊
@param {HTMLElement} node 执行动画的 dom 元素`,
name: 'onAppear',
propType: 'func',
},
{
defaultValue: Function {},
description: `执行完第一次挂载动画后触发的函数␊
@param {HTMLElement} node 执行动画的 dom 元素`,
name: 'afterAppear',
propType: 'func',
},
{
defaultValue: Function {},
description: `执行进场动画前触发的回调函数␊
@param {HTMLElement} node 执行动画的 dom 元素`,
name: 'beforeEnter',
propType: 'func',
},
{
defaultValue: Function {},
description: `执行进场动画，添加 xxx-enter-active 类名后触发的回调函数␊
@param {HTMLElement} node 执行动画的 dom 元素`,
name: 'onEnter',
propType: 'func',
},
{
defaultValue: Function {},
description: `执行完进场动画后触发的回调函数␊
@param {HTMLElement} node 执行动画的 dom 元素`,
name: 'afterEnter',
propType: 'func',
},
{
defaultValue: Function {},
description: `执行离场动画前触发的回调函数␊
@param {HTMLElement} node 执行动画的 dom 元素`,
name: 'beforeLeave',
propType: 'func',
},
{
defaultValue: Function {},
description: `执行离场动画，添加 xxx-leave-active 类名后触发的回调函数␊
@param {HTMLElement} node 执行动画的 dom 元素`,
name: 'onLeave',
propType: 'func',
},
{
defaultValue: Function {},
description: `执行完离场动画后触发的回调函数␊
@param {HTMLElement} node 执行动画的 dom 元素`,
name: 'afterLeave',
propType: 'func',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Badge',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Badge',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
name: 'rtl',
propType: 'bool',
},
{
name: 'className',
propType: 'string',
},
{
name: 'style',
propType: 'object',
},
{
description: '徽章依托的内容',
name: 'children',
propType: 'node',
},
{
defaultValue: 0,
description: '展示的数字，大于 overflowCount 时显示为 ${overflowCount}+，为 0 时默认隐藏',
name: 'count',
propType: {
type: 'oneOfType',
value: [
'number',
'string',
],
},
},
{
defaultValue: false,
description: '当count为0时，是否显示count',
name: 'showZero',
propType: 'bool',
},
{
description: '自定义节点内容',
name: 'content',
propType: 'node',
},
{
defaultValue: 99,
description: '展示的封顶的数字',
name: 'overflowCount',
propType: {
type: 'oneOfType',
value: [
'number',
'string',
],
},
},
{
defaultValue: false,
description: '不展示数字，只展示一个小红点',
name: 'dot',
propType: 'bool',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Balloon',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Balloon',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
defaultValue: false,
name: 'pure',
propType: 'bool',
},
{
name: 'rtl',
propType: 'bool',
},
{
description: '自定义类名',
name: 'className',
propType: 'string',
},
{
description: '自定义内敛样式',
name: 'style',
propType: 'object',
},
{
description: '浮层的内容',
name: 'children',
propType: 'any',
},
{
defaultValue: 'medium',
name: 'size',
propType: 'string',
},
{
defaultValue: 'normal',
description: '样式类型',
name: 'type',
propType: {
type: 'oneOf',
value: [
'normal',
'primary',
],
},
},
{
description: '弹层当前显示的状态',
name: 'visible',
propType: 'bool',
},
{
defaultValue: false,
description: '弹层默认显示的状态',
name: 'defaultVisible',
propType: 'bool',
},
{
description: `弹层在显示和隐藏触发的事件␊
@param {Boolean} visible 弹层是否隐藏和显示␊
@param {String} type 触发弹层显示或隐藏的来源， closeClick 表示由自带的关闭按钮触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发`,
name: 'onVisibleChange',
propType: 'func',
},
{
defaultValue: false,
description: '弹出层对齐方式, 是否为边缘对齐',
name: 'alignEdge',
propType: 'bool',
},
{
defaultValue: true,
description: '是否显示关闭按钮',
name: 'closable',
propType: 'bool',
},
{
defaultValue: 'b',
description: `弹出层位置␊
@enumdesc 上, 右, 下, 左, 上左, 上右, 下左, 下右, 左上, 左下, 右上, 右下 及其 两两组合`,
name: 'align',
propType: {
type: 'oneOf',
value: [
't',
'r',
'b',
'l',
'tl',
'tr',
'bl',
'br',
'lt',
'lb',
'rt',
'rb',
],
},
},
{
defaultValue: [
0,
0,
],
description: `弹层相对于trigger的定位的微调, 接收数组[hoz, ver], 表示弹层在 left / top 上的增量␊
e.g. [100, 100] 表示往右(RTL 模式下是往左) 、下分布偏移100px`,
name: 'offset',
propType: 'array',
},
{
description: '触发元素',
name: 'trigger',
propType: 'any',
},
{
defaultValue: 'hover',
description: `触发行为␊
鼠标悬浮, 鼠标点击('hover','click')或者它们组成的数组，如 ['hover', 'click'], 强烈不建议使用'focus'，若弹窗内容有复杂交互请使用click`,
name: 'triggerType',
propType: {
type: 'oneOfType',
value: [
'string',
'array',
],
},
},
{
name: 'onClick',
propType: 'func',
},
{
description: '任何visible为false时会触发的事件',
name: 'onClose',
propType: 'func',
},
{
name: 'onHover',
propType: 'func',
},
{
defaultValue: false,
description: '是否进行自动位置调整',
name: 'needAdjust',
propType: 'bool',
},
{
description: '弹层在触发以后的延时显示, 单位毫秒 ms',
name: 'delay',
propType: 'number',
},
{
description: '浮层关闭后触发的事件, 如果有动画，则在动画结束后触发',
name: 'afterClose',
propType: 'func',
},
{
description: '强制更新定位信息',
name: 'shouldUpdatePosition',
propType: 'bool',
},
{
defaultValue: true,
description: '弹层出现后是否自动focus到内部第一个元素',
name: 'autoFocus',
propType: 'bool',
},
{
defaultValue: undefined,
description: '安全节点:对于triggetType为click的浮层,会在点击除了浮层外的其它区域时关闭浮层.safeNode用于添加不触发关闭的节点, 值可以是dom节点的id或者是节点的dom对象',
name: 'safeNode',
propType: 'string',
},
{
defaultValue: null,
description: '用来指定safeNode节点的id，和safeNode配合使用',
name: 'safeId',
propType: 'string',
},
{
description: `配置动画的播放方式␊
@param {String} in 进场动画␊
@param {String} out 出场动画`,
name: 'animation',
propType: {
type: 'oneOfType',
value: [
'object',
'bool',
],
},
},
{
defaultValue: false,
description: '弹层的dom节点关闭时是否删除',
name: 'cache',
propType: 'bool',
},
{
description: '指定浮层渲染的父节点, 可以为节点id的字符串，也可以返回节点的函数。',
name: 'popupContainer',
propType: 'any',
},
{
name: 'container',
propType: 'any',
},
{
defaultValue: undefined,
description: '弹层组件style，透传给Popup',
name: 'popupStyle',
propType: 'object',
},
{
defaultValue: '',
description: '弹层组件className，透传给Popup',
name: 'popupClassName',
propType: 'string',
},
{
defaultValue: undefined,
description: '弹层组件属性，透传给Popup',
name: 'popupProps',
propType: 'object',
},
{
description: '是否跟随滚动',
name: 'followTrigger',
propType: 'bool',
},
{
description: '弹层id, 传入值才会支持无障碍',
name: 'id',
propType: 'string',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Breadcrumb',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Breadcrumb',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
description: '样式类名的品牌前缀',
name: 'prefix',
propType: 'string',
},
{
name: 'rtl',
propType: 'bool',
},
{
description: '面包屑子节点，需传入 Breadcrumb.Item',
name: 'children',
propType: 'custom',
},
{
defaultValue: 100,
description: '面包屑最多显示个数，超出部分会被隐藏, 设置为 auto 会自动根据父元素的宽度适配。',
name: 'maxNode',
propType: {
type: 'oneOfType',
value: [
'number',
{
type: 'oneOf',
value: [
'auto',
],
},
],
},
},
{
description: '分隔符，可以是文本或 Icon',
name: 'separator',
propType: 'node',
},
{
defaultValue: 'nav',
description: '设置标签类型',
name: 'component',
propType: {
type: 'oneOfType',
value: [
'string',
'func',
],
},
},
{
name: 'className',
propType: 'any',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Button',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Button',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
name: 'rtl',
propType: 'bool',
},
{
defaultValue: 'normal',
description: '按钮的类型',
name: 'type',
propType: {
type: 'oneOf',
value: [
'primary',
'secondary',
'normal',
],
},
},
{
defaultValue: 'medium',
description: '按钮的尺寸',
name: 'size',
propType: {
type: 'oneOf',
value: [
'small',
'medium',
'large',
],
},
},
{
description: '按钮中 Icon 的尺寸，用于替代 Icon 的默认大小',
name: 'iconSize',
propType: {
type: 'oneOf',
value: [
'xxs',
'xs',
'small',
'medium',
'large',
'xl',
'xxl',
'xxxl',
],
},
},
{
defaultValue: 'button',
description: '当 component = \'button\' 时，设置 button 标签的 type 值',
name: 'htmlType',
propType: {
type: 'oneOf',
value: [
'submit',
'reset',
'button',
],
},
},
{
defaultValue: 'button',
description: '设置标签类型',
name: 'component',
propType: {
type: 'oneOf',
value: [
'button',
'a',
'div',
'span',
],
},
},
{
defaultValue: false,
description: '设置按钮的载入状态',
name: 'loading',
propType: 'bool',
},
{
defaultValue: false,
description: '是否为幽灵按钮',
name: 'ghost',
propType: {
type: 'oneOf',
value: [
true,
false,
'light',
'dark',
],
},
},
{
defaultValue: false,
description: '是否为文本按钮',
name: 'text',
propType: 'bool',
},
{
defaultValue: false,
description: '是否为警告按钮',
name: 'warning',
propType: 'bool',
},
{
defaultValue: false,
description: '是否禁用',
name: 'disabled',
propType: 'bool',
},
{
defaultValue: Function {},
description: `点击按钮的回调␊
@param {Object} e Event Object`,
name: 'onClick',
propType: 'func',
},
{
name: 'className',
propType: 'string',
},
{
name: 'onMouseUp',
propType: 'func',
},
{
name: 'children',
propType: 'node',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Calendar',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Calendar',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
defaultValue: false,
name: 'rtl',
propType: 'bool',
},
{
description: '默认选中的日期（moment 对象）',
name: 'defaultValue',
propType: 'custom',
},
{
description: '选中的日期值 (moment 对象)',
name: 'value',
propType: 'custom',
},
{
name: 'modes',
propType: 'array',
},
{
defaultValue: false,
name: 'disableChangeMode',
propType: 'bool',
},
{
defaultValue: 'YYYY-MM-DD',
name: 'format',
propType: 'string',
},
{
defaultValue: true,
description: '是否展示非本月的日期',
name: 'showOtherMonth',
propType: 'bool',
},
{
description: '默认展示的月份',
name: 'defaultVisibleMonth',
propType: 'func',
},
{
defaultValue: 'fullscreen',
description: '展现形态',
name: 'shape',
propType: {
type: 'oneOf',
value: [
'card',
'fullscreen',
'panel',
],
},
},
{
description: `选择日期单元格时的回调␊
@param {Object} value 对应的日期值 (moment 对象)`,
name: 'onSelect',
propType: 'func',
},
{
description: `面板模式变化时的回调␊
@param {String} mode 对应面板模式 date month year`,
name: 'onModeChange',
propType: 'func',
},
{
description: `展现的月份变化时的回调␊
@param {Object} value 显示的月份 (moment 对象)␊
@param {String} reason 触发月份改变原因`,
name: 'onVisibleMonthChange',
propType: 'func',
},
{
description: '自定义样式类',
name: 'className',
propType: 'string',
},
{
defaultValue: Function {},
description: `自定义日期渲染函数␊
@param {Object} value 日期值（moment对象）␊
@returns {ReactNode}`,
name: 'dateCellRender',
propType: 'func',
},
{
description: `自定义月份渲染函数␊
@param {Object} calendarDate 对应 Calendar 返回的自定义日期对象␊
@returns {ReactNode}`,
name: 'monthCellRender',
propType: 'func',
},
{
name: 'yearCellRender',
propType: 'func',
},
{
description: '年份范围，[START_YEAR, END_YEAR] (只在shape 为 ‘card’, \'fullscreen\' 下生效)',
name: 'yearRange',
propType: {
type: 'arrayOf',
value: 'number',
},
},
{
description: `不可选择的日期␊
@param {Object} calendarDate 对应 Calendar 返回的自定义日期对象␊
@param {String} view 当前视图类型，year: 年， month: 月, date: 日␊
@returns {Boolean}`,
name: 'disabledDate',
propType: 'func',
},
{
description: '国际化配置',
name: 'locale',
propType: 'object',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Card',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Card',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
name: 'rtl',
propType: 'bool',
},
{
description: '卡片的上的图片 / 视频',
name: 'media',
propType: 'node',
},
{
description: '卡片的标题',
name: 'title',
propType: 'node',
},
{
description: '卡片的副标题',
name: 'subTitle',
propType: 'node',
},
{
description: '卡片操作组，位置在卡片底部',
name: 'actions',
propType: 'node',
},
{
defaultValue: true,
description: '是否显示标题的项目符号',
name: 'showTitleBullet',
propType: 'bool',
},
{
defaultValue: true,
description: '是否展示头部的分隔线',
name: 'showHeadDivider',
propType: 'bool',
},
{
defaultValue: 120,
description: '内容区域的固定高度',
name: 'contentHeight',
propType: {
type: 'oneOfType',
value: [
'string',
'number',
],
},
},
{
description: '标题区域的用户自定义内容',
name: 'extra',
propType: 'node',
},
{
defaultValue: false,
description: '是否开启自由模式，开启后card 将使用子组件配合使用, 设置此项后 title, subtitle, 等等属性都将失效',
name: 'free',
propType: 'bool',
},
{
name: 'className',
propType: 'string',
},
{
name: 'children',
propType: 'node',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Cascader',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Cascader',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
defaultValue: false,
name: 'rtl',
propType: 'bool',
},
{
defaultValue: false,
name: 'pure',
propType: 'bool',
},
{
name: 'className',
propType: 'string',
},
{
defaultValue: [],
description: '数据源，结构可参考下方说明',
name: 'dataSource',
propType: {
type: 'arrayOf',
value: 'object',
},
},
{
defaultValue: null,
description: '（非受控）默认值',
name: 'defaultValue',
propType: {
type: 'oneOfType',
value: [
'string',
{
type: 'arrayOf',
value: 'string',
},
],
},
},
{
description: '（受控）当前值',
name: 'value',
propType: {
type: 'oneOfType',
value: [
'string',
{
type: 'arrayOf',
value: 'string',
},
],
},
},
{
description: `选中值改变时触发的回调函数␊
@param {String|Array} value 选中的值，单选时返回单个值，多选时返回数组␊
@param {Object|Array} data 选中的数据，包括 value 和 label，单选时返回单个值，多选时返回数组，父子节点选中关联时，同时选中，只返回父节点␊
@param {Object} extra 额外参数␊
@param {Array} extra.selectedPath 单选时选中的数据的路径␊
@param {Boolean} extra.checked 多选时当前的操作是选中还是取消选中␊
@param {Object} extra.currentData 多选时当前操作的数据␊
@param {Array} extra.checkedData 多选时所有被选中的数据␊
@param {Array} extra.indeterminateData 多选时半选的数据`,
name: 'onChange',
propType: 'func',
},
{
name: 'onSelect',
propType: 'func',
},
{
description: '（非受控）默认展开值，如果不设置，组件内部会根据 defaultValue/value 进行自动设置',
name: 'defaultExpandedValue',
propType: {
type: 'arrayOf',
value: 'string',
},
},
{
description: '（受控）当前展开值',
name: 'expandedValue',
propType: {
type: 'arrayOf',
value: 'string',
},
},
{
defaultValue: 'click',
description: '展开触发的方式',
name: 'expandTriggerType',
propType: {
type: 'oneOf',
value: [
'click',
'hover',
],
},
},
{
description: `展开时触发的回调函数␊
@param {Array} expandedValue 各列展开值的数组`,
name: 'onExpand',
propType: 'func',
},
{
defaultValue: false,
description: '是否开启虚拟滚动',
name: 'useVirtual',
propType: 'bool',
},
{
defaultValue: false,
description: '是否多选',
name: 'multiple',
propType: 'bool',
},
{
defaultValue: false,
description: '单选时是否只能选中叶子节点',
name: 'canOnlySelectLeaf',
propType: 'bool',
},
{
defaultValue: false,
description: '多选时是否只能选中叶子节点',
name: 'canOnlyCheckLeaf',
propType: 'bool',
},
{
defaultValue: false,
description: '父子节点是否选中不关联',
name: 'checkStrictly',
propType: 'bool',
},
{
description: '每列列表样式对象',
name: 'listStyle',
propType: 'object',
},
{
description: '每列列表类名',
name: 'listClassName',
propType: 'string',
},
{
defaultValue: Function {},
description: `每列列表项渲染函数␊
@param {Object} data 数据␊
@return {ReactNode} 列表项内容`,
name: 'itemRender',
propType: 'func',
},
{
description: `异步加载数据函数␊
@param {Object} data 当前点击异步加载的数据␊
@param {Object} source 当前点击数据，source是原始对象`,
name: 'loadData',
propType: 'func',
},
{
name: 'searchValue',
propType: 'string',
},
{
name: 'onBlur',
propType: 'func',
},
{
name: 'filteredPaths',
propType: 'array',
},
{
name: 'filteredListStyle',
propType: 'object',
},
{
name: 'resultRender',
propType: 'func',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'CascaderSelect',
docUrl: '',
npm: {
destructuring: false,
exportName: 'CascaderSelect',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
defaultValue: false,
name: 'pure',
propType: 'bool',
},
{
name: 'className',
propType: 'string',
},
{
defaultValue: 'medium',
description: '选择框大小',
name: 'size',
propType: {
type: 'oneOf',
value: [
'small',
'medium',
'large',
],
},
},
{
description: '选择框占位符',
name: 'placeholder',
propType: 'string',
},
{
defaultValue: false,
description: '是否禁用',
name: 'disabled',
propType: 'bool',
},
{
defaultValue: true,
description: '是否有下拉箭头',
name: 'hasArrow',
propType: 'bool',
},
{
defaultValue: true,
description: '是否有边框',
name: 'hasBorder',
propType: 'bool',
},
{
defaultValue: false,
description: '是否有清除按钮',
name: 'hasClear',
propType: 'bool',
},
{
description: '自定义内联 label',
name: 'label',
propType: 'node',
},
{
description: '是否只读，只读模式下可以展开弹层但不能选',
name: 'readOnly',
propType: 'bool',
},
{
defaultValue: [],
description: '数据源，结构可参考下方说明',
name: 'dataSource',
propType: {
type: 'arrayOf',
value: 'object',
},
},
{
defaultValue: null,
description: '（非受控）默认值',
name: 'defaultValue',
propType: {
type: 'oneOfType',
value: [
'string',
{
type: 'arrayOf',
value: 'string',
},
],
},
},
{
description: '（受控）当前值',
name: 'value',
propType: {
type: 'oneOfType',
value: [
'string',
{
type: 'arrayOf',
value: 'string',
},
],
},
},
{
description: `选中值改变时触发的回调函数␊
@param {String|Array} value 选中的值，单选时返回单个值，多选时返回数组␊
@param {Object|Array} data 选中的数据，包括 value 和 label，单选时返回单个值，多选时返回数组，父子节点选中关联时，同时选中，只返回父节点␊
@param {Object} extra 额外参数␊
@param {Array} extra.selectedPath 单选时选中的数据的路径␊
@param {Boolean} extra.checked 多选时当前的操作是选中还是取消选中␊
@param {Object} extra.currentData 多选时当前操作的数据␊
@param {Array} extra.checkedData 多选时所有被选中的数据␊
@param {Array} extra.indeterminateData 多选时半选的数据`,
name: 'onChange',
propType: 'func',
},
{
description: '默认展开值，如果不设置，组件内部会根据 defaultValue/value 进行自动设置',
name: 'defaultExpandedValue',
propType: {
type: 'arrayOf',
value: 'string',
},
},
{
defaultValue: 'click',
description: '展开触发的方式',
name: 'expandTriggerType',
propType: {
type: 'oneOf',
value: [
'click',
'hover',
],
},
},
{
defaultValue: Function {},
name: 'onExpand',
propType: 'func',
},
{
defaultValue: false,
description: '是否开启虚拟滚动',
name: 'useVirtual',
propType: 'bool',
},
{
defaultValue: false,
description: '是否多选',
name: 'multiple',
propType: 'bool',
},
{
defaultValue: false,
description: '是否选中即发生改变, 该属性仅在单选模式下有效',
name: 'changeOnSelect',
propType: 'bool',
},
{
defaultValue: false,
description: '是否只能勾选叶子项的checkbox，该属性仅在多选模式下有效',
name: 'canOnlyCheckLeaf',
propType: 'bool',
},
{
defaultValue: false,
description: '父子节点是否选中不关联',
name: 'checkStrictly',
propType: 'bool',
},
{
description: '每列列表样式对象',
name: 'listStyle',
propType: 'object',
},
{
description: '每列列表类名',
name: 'listClassName',
propType: 'string',
},
{
description: `选择框单选时展示结果的自定义渲染函数␊
@param {Array} label 选中路径的文本数组␊
@return {ReactNode} 渲染在选择框中的内容␊
@default 单选时：labelPath => labelPath.join(' / ')；多选时：labelPath => labelPath[labelPath.length - 1]`,
name: 'displayRender',
propType: 'func',
},
{
description: `渲染 item 内容的方法␊
@param {Object} item 渲染节点的item␊
@return {ReactNode} item node`,
name: 'itemRender',
propType: 'func',
},
{
defaultValue: false,
description: '是否显示搜索框',
name: 'showSearch',
propType: 'bool',
},
{
defaultValue: Function {},
description: `自定义搜索函数␊
@param {String} searchValue 搜索的关键字␊
@param {Array} path 节点路径␊
@return {Boolean} 是否匹配␊
@default 根据路径所有节点的文本值模糊匹配`,
name: 'filter',
propType: 'func',
},
{
description: `搜索结果自定义渲染函数␊
@param {String} searchValue 搜索的关键字␊
@param {Array} path 匹配到的节点路径␊
@return {ReactNode} 渲染的内容␊
@default 按照节点文本 a / b / c 的模式渲染`,
name: 'resultRender',
propType: 'func',
},
{
defaultValue: true,
description: '搜索结果列表是否和选择框等宽',
name: 'resultAutoWidth',
propType: 'bool',
},
{
defaultValue: 'Not Found',
description: '无数据时显示内容',
name: 'notFoundContent',
propType: 'node',
},
{
description: `异步加载数据函数␊
@param {Object} data 当前点击异步加载的数据`,
name: 'loadData',
propType: 'func',
},
{
description: '自定义下拉框头部',
name: 'header',
propType: 'node',
},
{
description: '自定义下拉框底部',
name: 'footer',
propType: 'node',
},
{
defaultValue: false,
description: '初始下拉框是否显示',
name: 'defaultVisible',
propType: 'bool',
},
{
description: '当前下拉框是否显示',
name: 'visible',
propType: 'bool',
},
{
defaultValue: Function {},
description: `下拉框显示或关闭时触发事件的回调函数␊
@param {Boolean} visible 是否显示␊
@param {String} type 触发显示关闭的操作类型, fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发`,
name: 'onVisibleChange',
propType: 'func',
},
{
description: '下拉框自定义样式对象',
name: 'popupStyle',
propType: 'object',
},
{
description: '下拉框样式自定义类名',
name: 'popupClassName',
propType: 'string',
},
{
description: '下拉框挂载的容器节点',
name: 'popupContainer',
propType: 'any',
},
{
defaultValue: undefined,
description: '透传到 Popup 的属性对象',
name: 'popupProps',
propType: 'object',
},
{
description: '是否跟随滚动',
name: 'followTrigger',
propType: 'bool',
},
{
description: '是否为预览态',
name: 'isPreview',
propType: 'bool',
},
{
description: `预览态模式下渲染的内容␊
@param {Array<data>} value 选择值 { label: , value:}`,
name: 'renderPreview',
propType: 'func',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Checkbox',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Checkbox',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
name: 'rtl',
propType: 'bool',
},
{
description: '自定义类名',
name: 'className',
propType: 'string',
},
{
description: 'checkbox id, 挂载在input上',
name: 'id',
propType: 'string',
},
{
description: '自定义内敛样式',
name: 'style',
propType: 'object',
},
{
description: '选中状态',
name: 'checked',
propType: 'bool',
},
{
defaultValue: false,
description: '默认选中状态',
name: 'defaultChecked',
propType: 'bool',
},
{
description: '禁用',
name: 'disabled',
propType: 'bool',
},
{
description: '通过属性配置label，',
name: 'label',
propType: 'node',
},
{
description: 'Checkbox 的中间状态，只会影响到 Checkbox 的样式，并不影响其 checked 属性',
name: 'indeterminate',
propType: 'bool',
},
{
defaultValue: false,
description: 'Checkbox 的默认中间态，只会影响到 Checkbox 的样式，并不影响其 checked 属性',
name: 'defaultIndeterminate',
propType: 'bool',
},
{
description: `状态变化时触发的事件␊
@param {Boolean} checked 是否选中␊
@param {Event} e Dom 事件对象`,
name: 'onChange',
propType: 'func',
},
{
description: `鼠标进入enter事件␊
@param {Event} e Dom 事件对象`,
name: 'onMouseEnter',
propType: 'func',
},
{
description: `鼠标离开Leave事件␊
@param {Event} e Dom 事件对象`,
name: 'onMouseLeave',
propType: 'func',
},
{
description: 'checkbox 的value',
name: 'value',
propType: {
type: 'oneOfType',
value: [
'string',
'number',
],
},
},
{
description: 'name',
name: 'name',
propType: 'string',
},
{
defaultValue: false,
description: '是否为预览态',
name: 'isPreview',
propType: 'bool',
},
{
description: `预览态模式下渲染的内容␊
@param {number} value 评分值`,
name: 'renderPreview',
propType: 'func',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Collapse',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Collapse',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
description: '样式前缀',
name: 'prefix',
propType: 'string',
},
{
description: '组件接受行内样式',
name: 'style',
propType: 'object',
},
{
description: '使用数据模型构建',
name: 'dataSource',
propType: 'array',
},
{
description: '默认展开keys',
name: 'defaultExpandedKeys',
propType: 'array',
},
{
description: '受控展开keys',
name: 'expandedKeys',
propType: 'array',
},
{
description: '展开状态发升变化时候的回调',
name: 'onExpand',
propType: 'func',
},
{
description: '所有禁用',
name: 'disabled',
propType: 'bool',
},
{
description: '扩展class',
name: 'className',
propType: 'string',
},
{
defaultValue: false,
description: '手风琴模式，一次只能打开一个',
name: 'accordion',
propType: 'bool',
},
{
name: 'children',
propType: 'node',
},
{
name: 'id',
propType: 'string',
},
{
name: 'rtl',
propType: 'bool',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'ConfigProvider',
docUrl: '',
npm: {
destructuring: false,
exportName: 'ConfigProvider',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
description: '样式类名的品牌前缀',
name: 'prefix',
propType: 'string',
},
{
description: '国际化文案对象，属性为组件的 displayName',
name: 'locale',
propType: 'object',
},
{
defaultValue: false,
description: `是否开启错误捕捉 errorBoundary␊
如需自定义参数，请传入对象 对象接受参数列表如下：␊
␊
fallbackUI `Function(error?: {}, errorInfo?: {}) => Element` 捕获错误后的展示␊
afterCatch `Function(error?: {}, errorInfo?: {})` 捕获错误后的行为, 比如埋点上传`,
name: 'errorBoundary',
propType: {
type: 'oneOfType',
value: [
'bool',
'object',
],
},
},
{
description: '是否开启 Pure Render 模式，会提高性能，但是也会带来副作用',
name: 'pure',
propType: 'bool',
},
{
defaultValue: true,
description: '是否在开发模式下显示组件属性被废弃的 warning 提示',
name: 'warning',
propType: 'bool',
},
{
description: '是否开启 rtl 模式',
name: 'rtl',
propType: 'bool',
},
{
description: '设备类型，针对不同的设备类型组件做出对应的响应式变化',
name: 'device',
propType: {
type: 'oneOf',
value: [
'tablet',
'desktop',
'phone',
],
},
},
{
description: '组件树',
name: 'children',
propType: 'any',
},
{
description: '指定浮层渲染的父节点, 可以为节点id的字符串，也可以返回节点的函数',
name: 'popupContainer',
propType: 'any',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'DatePicker',
docUrl: '',
npm: {
destructuring: false,
exportName: 'DatePicker',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
defaultValue: false,
name: 'rtl',
propType: 'bool',
},
{
description: '输入框内置标签',
name: 'label',
propType: 'node',
},
{
description: '输入框状态',
name: 'state',
propType: {
type: 'oneOf',
value: [
'success',
'loading',
'error',
],
},
},
{
description: '输入提示',
name: 'placeholder',
propType: 'string',
},
{
description: `默认展现的月␊
@return {MomentObject} 返回包含指定月份的 moment 对象实例`,
name: 'defaultVisibleMonth',
propType: 'func',
},
{
name: 'onVisibleMonthChange',
propType: 'func',
},
{
description: '日期值（受控）moment 对象',
name: 'value',
propType: 'custom',
},
{
description: '初始日期值，moment 对象',
name: 'defaultValue',
propType: 'custom',
},
{
defaultValue: 'YYYY-MM-DD',
description: '日期值的格式（用于限定用户输入和展示）',
name: 'format',
propType: 'string',
},
{
defaultValue: false,
description: '是否使用时间控件，传入 TimePicker 的属性 { defaultValue, format, ... }',
name: 'showTime',
propType: {
type: 'oneOfType',
value: [
'object',
'bool',
],
},
},
{
defaultValue: false,
description: '每次选择日期时是否重置时间（仅在 showTime 开启时有效）',
name: 'resetTime',
propType: 'bool',
},
{
defaultValue: Function {},
description: `禁用日期函数␊
@param {MomentObject} 日期值␊
@param {String} view 当前视图类型，year: 年， month: 月, date: 日␊
@return {Boolean} 是否禁用`,
name: 'disabledDate',
propType: 'func',
},
{
defaultValue: Function {},
description: `自定义面板页脚␊
@return {Node} 自定义的面板页脚组件`,
name: 'footerRender',
propType: 'func',
},
{
description: `日期值改变时的回调␊
@param {MomentObject|String} value 日期值`,
name: 'onChange',
propType: 'func',
},
{
description: `点击确认按钮时的回调␊
@return {MomentObject|String} 日期值`,
name: 'onOk',
propType: 'func',
},
{
defaultValue: 'medium',
description: '输入框尺寸',
name: 'size',
propType: {
type: 'oneOf',
value: [
'small',
'medium',
'large',
],
},
},
{
description: '是否禁用',
name: 'disabled',
propType: 'bool',
},
{
defaultValue: true,
description: '是否显示清空按钮',
name: 'hasClear',
propType: 'bool',
},
{
description: '弹层显示状态',
name: 'visible',
propType: 'bool',
},
{
defaultValue: false,
description: '弹层默认是否显示',
name: 'defaultVisible',
propType: 'bool',
},
{
description: `弹层展示状态变化时的回调␊
@param {Boolean} visible 弹层是否显示␊
@param {String} type 触发弹层显示和隐藏的来源 calendarSelect 表示由日期表盘的选择触发； okBtnClick 表示由确认按钮触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发`,
name: 'onVisibleChange',
propType: 'func',
},
{
defaultValue: 'click',
description: '弹层触发方式',
name: 'popupTriggerType',
propType: {
type: 'oneOf',
value: [
'click',
'hover',
],
},
},
{
defaultValue: 'tl tl',
description: '弹层对齐方式,具体含义见 OverLay文档',
name: 'popupAlign',
propType: 'string',
},
{
description: `弹层容器␊
@param {Element} target 目标元素␊
@return {Element} 弹层的容器元素`,
name: 'popupContainer',
propType: 'any',
},
{
description: '弹层自定义样式',
name: 'popupStyle',
propType: 'object',
},
{
description: '弹层自定义样式类',
name: 'popupClassName',
propType: 'string',
},
{
description: '弹层其他属性',
name: 'popupProps',
propType: 'object',
},
{
description: '是否跟随滚动',
name: 'followTrigger',
propType: 'bool',
},
{
description: '输入框其他属性',
name: 'inputProps',
propType: 'object',
},
{
description: `自定义日期渲染函数␊
@param {Object} value 日期值（moment对象）␊
@returns {ReactNode}`,
name: 'dateCellRender',
propType: 'func',
},
{
description: `自定义月份渲染函数␊
@param {Object} calendarDate 对应 Calendar 返回的自定义日期对象␊
@returns {ReactNode}`,
name: 'monthCellRender',
propType: 'func',
},
{
name: 'yearCellRender',
propType: 'func',
},
{
description: '日期输入框的 aria-label 属性',
name: 'dateInputAriaLabel',
propType: 'string',
},
{
description: '时间输入框的 aria-label 属性',
name: 'timeInputAriaLabel',
propType: 'string',
},
{
description: '是否为预览态',
name: 'isPreview',
propType: 'bool',
},
{
description: `预览态模式下渲染的内容␊
@param {MomentObject} value 日期`,
name: 'renderPreview',
propType: 'func',
},
{
name: 'locale',
propType: 'object',
},
{
name: 'className',
propType: 'string',
},
{
name: 'name',
propType: 'string',
},
{
name: 'popupComponent',
propType: 'elementType',
},
{
name: 'popupContent',
propType: 'node',
},
{
name: 'disableChangeMode',
propType: 'bool',
},
{
name: 'yearRange',
propType: {
type: 'arrayOf',
value: 'number',
},
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Dialog',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Dialog',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
defaultValue: false,
name: 'pure',
propType: 'bool',
},
{
name: 'rtl',
propType: 'bool',
},
{
name: 'className',
propType: 'string',
},
{
defaultValue: false,
description: '是否显示',
name: 'visible',
propType: 'bool',
},
{
description: '标题',
name: 'title',
propType: 'node',
},
{
description: '内容',
name: 'children',
propType: 'node',
},
{
description: `底部内容，设置为 false，则不进行显示␊
@default [<Button type="primary">确定</Button>, <Button>取消</Button>]`,
name: 'footer',
propType: {
type: 'oneOfType',
value: [
'bool',
'node',
],
},
},
{
defaultValue: 'right',
description: '底部按钮的对齐方式',
name: 'footerAlign',
propType: {
type: 'oneOf',
value: [
'left',
'center',
'right',
],
},
},
{
defaultValue: [
'ok',
'cancel',
],
description: `指定确定按钮和取消按钮是否存在以及如何排列,<br><br>**可选值**：␊
['ok', 'cancel']（确认取消按钮同时存在，确认按钮在左）␊
['cancel', 'ok']（确认取消按钮同时存在，确认按钮在右）␊
['ok']（只存在确认按钮）␊
['cancel']（只存在取消按钮）`,
name: 'footerActions',
propType: 'array',
},
{
defaultValue: Function {},
description: `在点击确定按钮时触发的回调函数␊
@param {Object} event 点击事件对象`,
name: 'onOk',
propType: 'func',
},
{
defaultValue: Function {},
description: `在点击取消按钮时触发的回调函数␊
@param {Object} event 点击事件对象`,
name: 'onCancel',
propType: 'func',
},
{
defaultValue: undefined,
description: '应用于确定按钮的属性对象',
name: 'okProps',
propType: 'object',
},
{
defaultValue: undefined,
description: '应用于取消按钮的属性对象',
name: 'cancelProps',
propType: 'object',
},
{
defaultValue: 'esc,close',
description: `控制对话框关闭的方式，值可以为字符串或者布尔值，其中字符串是由以下值组成：␊
**close** 表示点击关闭按钮可以关闭对话框␊
**mask** 表示点击遮罩区域可以关闭对话框␊
**esc** 表示按下 esc 键可以关闭对话框␊
如 'close' 或 'close,esc,mask'␊
如果设置为 true，则以上关闭方式全部生效␊
如果设置为 false，则以上关闭方式全部失效`,
name: 'closeable',
propType: {
type: 'oneOfType',
value: [
'string',
'bool',
],
},
},
{
defaultValue: Function {},
description: `对话框关闭时触发的回调函数␊
@param {String} trigger 关闭触发行为的描述字符串␊
@param {Object} event 关闭时事件对象`,
name: 'onClose',
propType: 'func',
},
{
defaultValue: Function {},
description: '对话框关闭后触发的回调函数, 如果有动画，则在动画结束后触发',
name: 'afterClose',
propType: 'func',
},
{
defaultValue: true,
description: '是否显示遮罩',
name: 'hasMask',
propType: 'bool',
},
{
description: `显示隐藏时动画的播放方式␊
@property {String} in 进场动画␊
@property {String} out 出场动画`,
name: 'animation',
propType: {
type: 'oneOfType',
value: [
'object',
'bool',
],
},
},
{
defaultValue: false,
description: '对话框弹出时是否自动获得焦点',
name: 'autoFocus',
propType: 'bool',
},
{
defaultValue: 'cc cc',
description: '对话框对齐方式, 具体见Overlay文档',
name: 'align',
propType: {
type: 'oneOfType',
value: [
'string',
'bool',
],
},
},
{
defaultValue: false,
description: '当对话框高度超过浏览器视口高度时，是否显示所有内容而不是出现滚动条以保证对话框完整显示在浏览器视口内，该属性仅在对话框垂直水平居中时生效，即 align 被设置为 \'cc cc\' 时',
name: 'isFullScreen',
propType: 'bool',
},
{
defaultValue: false,
description: '是否在对话框重新渲染时及时更新对话框位置，一般用于对话框高度变化后依然能保证原来的对齐方式',
name: 'shouldUpdatePosition',
propType: 'bool',
},
{
defaultValue: 40,
description: '对话框距离浏览器顶部和底部的最小间距，align 被设置为 \'cc cc\' 并且 isFullScreen 被设置为 true 时不生效',
name: 'minMargin',
propType: 'number',
},
{
defaultValue: undefined,
description: '透传到弹层组件的属性对象',
name: 'overlayProps',
propType: 'object',
},
{
description: `自定义国际化文案对象␊
@property {String} ok 确认按钮文案␊
@property {String} cancel 取消按钮文案`,
name: 'locale',
propType: 'object',
},
{
description: '对话框的高度样式属性',
name: 'height',
propType: 'string',
},
{
name: 'popupContainer',
propType: 'any',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Dropdown',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Dropdown',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
defaultValue: false,
name: 'pure',
propType: 'bool',
},
{
name: 'rtl',
propType: 'bool',
},
{
name: 'className',
propType: 'string',
},
{
description: '弹层内容',
name: 'children',
propType: 'node',
},
{
description: '弹层当前是否显示',
name: 'visible',
propType: 'bool',
},
{
defaultValue: false,
description: '弹层默认是否显示',
name: 'defaultVisible',
propType: 'bool',
},
{
description: `弹层显示或隐藏时触发的回调函数␊
@param {Boolean} visible 弹层是否显示␊
@param {String} type 触发弹层显示或隐藏的来源 fromContent 表示由Dropdown内容触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发`,
name: 'onVisibleChange',
propType: 'func',
},
{
description: '触发弹层显示或者隐藏的元素',
name: 'trigger',
propType: 'node',
},
{
defaultValue: 'hover',
description: '触发弹层显示或隐藏的操作类型，可以是 \'click\'，\'hover\'，或者它们组成的数组，如 [\'hover\', \'click\']',
name: 'triggerType',
propType: {
type: 'oneOfType',
value: [
'string',
'array',
],
},
},
{
defaultValue: false,
description: '设置此属性，弹层无法显示或隐藏',
name: 'disabled',
propType: 'bool',
},
{
defaultValue: 'tl bl',
description: '弹层相对于触发元素的定位, 详见 Overlay 的定位部分',
name: 'align',
propType: 'string',
},
{
defaultValue: [
0,
0,
],
description: `弹层相对于trigger的定位的微调, 接收数组[hoz, ver], 表示弹层在 left / top 上的增量␊
e.g. [100, 100] 表示往右(RTL 模式下是往左) 、下分布偏移100px`,
name: 'offset',
propType: 'array',
},
{
defaultValue: 200,
description: '弹层显示或隐藏的延时时间（以毫秒为单位），在 triggerType 被设置为 hover 时生效',
name: 'delay',
propType: 'number',
},
{
description: '弹层打开时是否让其中的元素自动获取焦点',
name: 'autoFocus',
propType: 'bool',
},
{
defaultValue: false,
description: '是否显示遮罩',
name: 'hasMask',
propType: 'bool',
},
{
defaultValue: false,
description: '隐藏时是否保留子节点',
name: 'cache',
propType: 'bool',
},
{
description: `配置动画的播放方式，支持 { in: 'enter-class', out: 'leave-class' } 的对象参数，如果设置为 false，则不播放动画␊
@default { in: 'expandInDown', out: 'expandOutUp' }`,
name: 'animation',
propType: {
type: 'oneOfType',
value: [
'object',
'bool',
],
},
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Drawer',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Drawer',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
name: 'pure',
propType: 'bool',
},
{
name: 'rtl',
propType: 'bool',
},
{
defaultValue: null,
name: 'trigger',
propType: 'element',
},
{
defaultValue: 'click',
name: 'triggerType',
propType: {
type: 'oneOfType',
value: [
'string',
'array',
],
},
},
{
description: '宽度，仅在 placement是 left right 的时候生效',
name: 'width',
propType: {
type: 'oneOfType',
value: [
'number',
'string',
],
},
},
{
description: '高度，仅在 placement是 top bottom 的时候生效',
name: 'height',
propType: {
type: 'oneOfType',
value: [
'number',
'string',
],
},
},
{
defaultValue: true,
description: `控制对话框关闭的方式，值可以为字符串或者布尔值，其中字符串是由以下值组成：␊
**close** 表示点击关闭按钮可以关闭对话框␊
**mask** 表示点击遮罩区域可以关闭对话框␊
**esc** 表示按下 esc 键可以关闭对话框␊
如 'close' 或 'close,esc,mask'␊
如果设置为 true，则以上关闭方式全部生效␊
如果设置为 false，则以上关闭方式全部失效`,
name: 'closeable',
propType: {
type: 'oneOfType',
value: [
'string',
'bool',
],
},
},
{
defaultValue: Function {},
description: `对话框关闭时触发的回调函数␊
@param {String} trigger 关闭触发行为的描述字符串␊
@param {Object} event 关闭时事件对象`,
name: 'onClose',
propType: 'func',
},
{
defaultValue: 'right',
description: '位于页面的位置',
name: 'placement',
propType: {
type: 'oneOf',
value: [
'top',
'right',
'bottom',
'left',
],
},
},
{
description: '标题',
name: 'title',
propType: 'node',
},
{
description: 'header上的样式',
name: 'headerStyle',
propType: 'object',
},
{
description: 'body上的样式',
name: 'bodyStyle',
propType: 'object',
},
{
description: '是否显示',
name: 'visible',
propType: 'bool',
},
{
defaultValue: true,
description: '是否显示遮罩',
name: 'hasMask',
propType: 'bool',
},
{
name: 'onVisibleChange',
propType: 'func',
},
{
description: `显示隐藏时动画的播放方式␊
@property {String} in 进场动画␊
@property {String} out 出场动画`,
name: 'animation',
propType: {
type: 'oneOfType',
value: [
'object',
'bool',
],
},
},
{
name: 'locale',
propType: 'object',
},
{
name: 'popupContainer',
propType: 'any',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Form',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Form',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
description: '样式前缀',
name: 'prefix',
propType: 'string',
},
{
description: '内联表单',
name: 'inline',
propType: 'bool',
},
{
defaultValue: 'medium',
description: `单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。␊
@enumdesc 大, 中, 小`,
name: 'size',
propType: {
type: 'oneOf',
value: [
'large',
'medium',
'small',
],
},
},
{
description: '单个 Item 中表单类组件宽度是否是100%',
name: 'fullWidth',
propType: 'bool',
},
{
defaultValue: 'left',
description: `标签的位置␊
@enumdesc 上, 左, 内`,
name: 'labelAlign',
propType: {
type: 'oneOf',
value: [
'top',
'left',
'inset',
],
},
},
{
description: `标签的左右对齐方式␊
@enumdesc 左, 右`,
name: 'labelTextAlign',
propType: {
type: 'oneOf',
value: [
'left',
'right',
],
},
},
{
description: 'field 实例, 传 false 会禁用 field',
name: 'field',
propType: 'any',
},
{
description: '保存 Form 自动生成的 field 对象',
name: 'saveField',
propType: 'func',
},
{
description: '控制第一级 Item 的 labelCol',
name: 'labelCol',
propType: 'object',
},
{
description: '控制第一级 Item 的 wrapperCol',
name: 'wrapperCol',
propType: 'object',
},
{
defaultValue: undefined,
description: 'form内有 `htmlType="submit"` 的元素的时候会触发',
name: 'onSubmit',
propType: 'func',
},
{
description: '子元素',
name: 'children',
propType: 'any',
},
{
description: '扩展class',
name: 'className',
propType: 'string',
},
{
description: '自定义内联样式',
name: 'style',
propType: 'object',
},
{
description: '表单数值',
name: 'value',
propType: 'object',
},
{
description: `表单变化回调␊
@param {Object} values 表单数据␊
@param {Object} item 详细␊
@param {String} item.name 变化的组件名␊
@param {String} item.value 变化的数据␊
@param {Object} item.field field 实例`,
name: 'onChange',
propType: 'func',
},
{
defaultValue: 'form',
description: '设置标签类型',
name: 'component',
propType: {
type: 'oneOfType',
value: [
'string',
'func',
],
},
},
{
name: 'fieldOptions',
propType: 'object',
},
{
name: 'rtl',
propType: 'bool',
},
{
defaultValue: 'desktop',
description: '预设屏幕宽度',
name: 'device',
propType: {
type: 'oneOf',
value: [
'phone',
'tablet',
'desktop',
],
},
},
{
description: '是否开启内置的响应式布局 （使用ResponsiveGrid）',
name: 'responsive',
propType: 'bool',
},
{
description: '是否开启预览态',
name: 'isPreview',
propType: 'bool',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Icon',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Icon',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
description: '指定显示哪种图标',
name: 'type',
propType: 'string',
},
{
name: 'children',
propType: 'node',
},
{
defaultValue: 'medium',
description: `指定图标大小␊
<br/>**可选值**<br/> xxs, xs, small, medium, large, xl, xxl, xxxl, inherit`,
name: 'size',
propType: {
type: 'oneOfType',
value: [
{
type: 'oneOf',
value: [
'xxs',
'xs',
'small',
'medium',
'large',
'xl',
'xxl',
'xxxl',
'inherit',
],
},
'number',
],
},
},
{
name: 'className',
propType: 'string',
},
{
name: 'style',
propType: 'object',
},
{
defaultValue: 'next-',
name: 'prefix',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Input',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Input',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
description: 'label',
name: 'label',
propType: 'node',
},
{
description: '是否出现clear按钮',
name: 'hasClear',
propType: 'bool',
},
{
defaultValue: true,
description: '是否有边框',
name: 'hasBorder',
propType: 'bool',
},
{
description: `状态␊
@enumdesc 错误, 校验中, 成功, 警告`,
name: 'state',
propType: {
type: 'oneOf',
value: [
'error',
'loading',
'success',
'warning',
],
},
},
{
defaultValue: 'medium',
description: `尺寸␊
@enumdesc 小, 中, 大`,
name: 'size',
propType: {
type: 'oneOf',
value: [
'small',
'medium',
'large',
],
},
},
{
description: '按下回车的回调',
name: 'onPressEnter',
propType: 'func',
},
{
name: 'onClear',
propType: 'func',
},
{
description: '原生type',
name: 'htmlType',
propType: 'string',
},
{
name: 'htmlSize',
propType: 'string',
},
{
description: '水印 (Icon的type类型，和hasClear占用一个地方)',
name: 'hint',
propType: 'string',
},
{
description: '文字前附加内容',
name: 'innerBefore',
propType: 'node',
},
{
description: '文字后附加内容',
name: 'innerAfter',
propType: 'node',
},
{
description: '输入框前附加内容',
name: 'addonBefore',
propType: 'node',
},
{
description: '输入框后附加内容',
name: 'addonAfter',
propType: 'node',
},
{
description: '输入框前附加文字',
name: 'addonTextBefore',
propType: 'node',
},
{
description: '输入框后附加文字',
name: 'addonTextAfter',
propType: 'node',
},
{
defaultValue: 'off',
description: '(原生input支持)',
name: 'autoComplete',
propType: 'string',
},
{
description: '自动聚焦(原生input支持)',
name: 'autoFocus',
propType: 'bool',
},
{
defaultValue: Function {},
name: 'inputRender',
propType: 'func',
},
{
name: 'extra',
propType: 'node',
},
{
name: 'innerBeforeClassName',
propType: 'string',
},
{
name: 'innerAfterClassName',
propType: 'string',
},
{
defaultValue: false,
description: '是否为预览态',
name: 'isPreview',
propType: 'bool',
},
{
description: `预览态模式下渲染的内容␊
@param {number} value 评分值`,
name: 'renderPreview',
propType: 'func',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Loading',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Loading',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
description: '样式前缀',
name: 'prefix',
propType: 'string',
},
{
description: '自定义内容',
name: 'tip',
propType: 'any',
},
{
defaultValue: 'bottom',
description: `自定义内容位置␊
@enumdesc 出现在动画右边, 出现在动画下面`,
name: 'tipAlign',
propType: {
type: 'oneOf',
value: [
'right',
'bottom',
],
},
},
{
defaultValue: true,
description: 'loading 状态, 默认 true',
name: 'visible',
propType: 'bool',
},
{
name: 'onVisibleChange',
propType: 'func',
},
{
description: '自定义class',
name: 'className',
propType: 'string',
},
{
description: '自定义内联样式',
name: 'style',
propType: 'object',
},
{
defaultValue: 'large',
description: `设置动画尺寸␊
@description 仅仅对默认动画效果起作用␊
@enumdesc 大号, 中号`,
name: 'size',
propType: {
type: 'oneOf',
value: [
'large',
'medium',
],
},
},
{
description: '自定义动画',
name: 'indicator',
propType: 'any',
},
{
description: '动画颜色',
name: 'color',
propType: 'string',
},
{
description: '全屏展示',
name: 'fullScreen',
propType: 'bool',
},
{
description: '子元素',
name: 'children',
propType: 'any',
},
{
defaultValue: true,
description: 'should loader be displayed inline',
name: 'inline',
propType: 'bool',
},
{
name: 'rtl',
propType: 'bool',
},
{
defaultValue: null,
name: 'animate',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Menu',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Menu',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
defaultValue: false,
name: 'pure',
propType: 'bool',
},
{
name: 'rtl',
propType: 'bool',
},
{
name: 'className',
propType: 'string',
},
{
description: '菜单项和子菜单',
name: 'children',
propType: 'node',
},
{
defaultValue: Function {},
description: `点击菜单项触发的回调函数␊
@param {String} key 点击的菜单项的 key 值␊
@param {Object} item 点击的菜单项对象␊
@param {Object} event 点击的事件对象`,
name: 'onItemClick',
propType: 'func',
},
{
description: '当前打开的子菜单的 key 值',
name: 'openKeys',
propType: {
type: 'oneOfType',
value: [
'string',
'array',
],
},
},
{
defaultValue: [],
description: '初始打开的子菜单的 key 值',
name: 'defaultOpenKeys',
propType: {
type: 'oneOfType',
value: [
'string',
'array',
],
},
},
{
defaultValue: false,
description: '初始展开所有的子菜单，只在 mode 设置为 \'inline\' 以及 openMode 设置为 \'multiple\' 下生效，优先级高于 defaultOpenKeys',
name: 'defaultOpenAll',
propType: 'bool',
},
{
defaultValue: Function {},
description: `打开或关闭子菜单触发的回调函数␊
@param {String} key 打开的所有子菜单的 key 值␊
@param {Object} extra 额外参数␊
@param {String} extra.key 当前操作子菜单的 key 值␊
@param {Boolean} extra.open 是否是打开`,
name: 'onOpen',
propType: 'func',
},
{
defaultValue: 'inline',
description: '子菜单打开的模式',
name: 'mode',
propType: {
type: 'oneOf',
value: [
'inline',
'popup',
],
},
},
{
defaultValue: 'click',
description: '子菜单打开的触发行为',
name: 'triggerType',
propType: {
type: 'oneOf',
value: [
'click',
'hover',
],
},
},
{
defaultValue: 'multiple',
description: '展开内连子菜单的模式，同时可以展开一个子菜单还是多个子菜单，该属性仅在 mode 为 inline 时生效',
name: 'openMode',
propType: {
type: 'oneOf',
value: [
'single',
'multiple',
],
},
},
{
defaultValue: 20,
description: '内连子菜单缩进距离',
name: 'inlineIndent',
propType: 'number',
},
{
defaultValue: 'down',
name: 'inlineArrowDirection',
propType: {
type: 'oneOf',
value: [
'down',
'right',
],
},
},
{
defaultValue: false,
description: '是否自动让弹层的宽度和菜单项保持一致，如果弹层的宽度比菜单项小则和菜单项保持一致，如果宽度大于菜单项则不做处理',
name: 'popupAutoWidth',
propType: 'bool',
},
{
defaultValue: 'follow',
description: '弹层的对齐方式',
name: 'popupAlign',
propType: {
type: 'oneOf',
value: [
'follow',
'outside',
],
},
},
{
defaultValue: undefined,
description: '弹层自定义 props',
name: 'popupProps',
propType: {
type: 'oneOfType',
value: [
'object',
'func',
],
},
},
{
description: '弹出子菜单自定义 className',
name: 'popupClassName',
propType: 'string',
},
{
description: '弹出子菜单自定义 style',
name: 'popupStyle',
propType: 'object',
},
{
description: '当前选中菜单项的 key 值',
name: 'selectedKeys',
propType: {
type: 'oneOfType',
value: [
'string',
'array',
],
},
},
{
defaultValue: [],
description: '初始选中菜单项的 key 值',
name: 'defaultSelectedKeys',
propType: {
type: 'oneOfType',
value: [
'string',
'array',
],
},
},
{
defaultValue: Function {},
description: `选中或取消选中菜单项触发的回调函数␊
@param {Array} selectedKeys 选中的所有菜单项的值␊
@param {Object} item 选中或取消选中的菜单项␊
@param {Object} extra 额外参数␊
@param {Boolean} extra.select 是否是选中␊
@param {Array} extra.key 菜单项的 key␊
@param {Object} extra.label 菜单项的文本␊
@param {Array} extra.keyPath 菜单项 key 的路径`,
name: 'onSelect',
propType: 'func',
},
{
description: '选中模式，单选还是多选，默认无值，不可选',
name: 'selectMode',
propType: {
type: 'oneOf',
value: [
'single',
'multiple',
],
},
},
{
defaultValue: false,
description: '是否只能选择第一层菜单项（不能选择子菜单中的菜单项）',
name: 'shallowSelect',
propType: 'bool',
},
{
defaultValue: true,
description: '是否显示选中图标，如果设置为 false 需配合配置平台设置选中时的背景色以示区分',
name: 'hasSelectedIcon',
propType: 'bool',
},
{
defaultValue: true,
name: 'labelToggleChecked',
propType: 'bool',
},
{
defaultValue: false,
description: `是否将选中图标居右，仅当 hasSelectedIcon 为true 时生效。␊
注意：SubMenu 上的选中图标一直居左，不受此API控制`,
name: 'isSelectIconRight',
propType: 'bool',
},
{
defaultValue: 'ver',
description: '菜单第一层展示方向',
name: 'direction',
propType: {
type: 'oneOf',
value: [
'ver',
'hoz',
],
},
},
{
defaultValue: 'left',
description: '横向菜单条 item 和 footer 的对齐方向，在 direction 设置为 \'hoz\' 并且 header 存在时生效',
name: 'hozAlign',
propType: {
type: 'oneOf',
value: [
'left',
'right',
],
},
},
{
defaultValue: false,
description: '横向菜单模式下，是否维持在一行，即超出一行折叠成 SubMenu 显示， 仅在 direction=\'hoz\' mode=\'popup\' 时生效',
name: 'hozInLine',
propType: 'bool',
},
{
name: 'renderMore',
propType: 'func',
},
{
description: '自定义菜单头部',
name: 'header',
propType: 'node',
},
{
description: '自定义菜单尾部',
name: 'footer',
propType: 'node',
},
{
defaultValue: false,
description: '是否自动获得焦点',
name: 'autoFocus',
propType: 'bool',
},
{
description: '当前获得焦点的子菜单或菜单项 key 值',
name: 'focusedKey',
propType: 'string',
},
{
defaultValue: true,
name: 'focusable',
propType: 'bool',
},
{
defaultValue: Function {},
name: 'onItemFocus',
propType: 'func',
},
{
name: 'onBlur',
propType: 'func',
},
{
defaultValue: false,
description: '是否开启嵌入式模式，一般用于Layout的布局中，开启后没有默认背景、外层border、box-shadow，可以配合`<Menu style={{lineHeight: \'100px\'}}>` 自定义高度',
name: 'embeddable',
propType: 'bool',
},
{
defaultValue: Function {},
name: 'onItemKeyDown',
propType: 'func',
},
{
defaultValue: true,
name: 'expandAnimation',
propType: 'bool',
},
{
name: 'itemClassName',
propType: 'string',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'MenuButton',
docUrl: '',
npm: {
destructuring: false,
exportName: 'MenuButton',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
description: '按钮上的文本内容',
name: 'label',
propType: 'node',
},
{
defaultValue: true,
description: '弹层是否与按钮宽度相同',
name: 'autoWidth',
propType: 'bool',
},
{
defaultValue: 'click',
description: '弹层触发方式',
name: 'popupTriggerType',
propType: {
type: 'oneOf',
value: [
'click',
'hover',
],
},
},
{
description: '弹层容器',
name: 'popupContainer',
propType: 'any',
},
{
description: '弹层展开状态',
name: 'visible',
propType: 'bool',
},
{
description: '弹层默认是否展开',
name: 'defaultVisible',
propType: 'bool',
},
{
description: '弹层在显示和隐藏触发的事件',
name: 'onVisibleChange',
propType: 'func',
},
{
description: '弹层自定义样式',
name: 'popupStyle',
propType: 'object',
},
{
description: '弹层自定义样式类',
name: 'popupClassName',
propType: 'string',
},
{
description: '弹层属性透传',
name: 'popupProps',
propType: 'object',
},
{
description: '是否跟随滚动',
name: 'followTrigger',
propType: 'bool',
},
{
defaultValue: [],
description: '默认激活的菜单项（用法同 Menu 非受控）',
name: 'defaultSelectedKeys',
propType: 'array',
},
{
description: '激活的菜单项（用法同 Menu 受控）',
name: 'selectedKeys',
propType: 'array',
},
{
description: '菜单的选择模式，同 Menu',
name: 'selectMode',
propType: {
type: 'oneOf',
value: [
'single',
'multiple',
],
},
},
{
description: '点击菜单项后的回调，同 Menu',
name: 'onItemClick',
propType: 'func',
},
{
description: '选择菜单后的回调，同 Menu',
name: 'onSelect',
propType: 'func',
},
{
defaultValue: undefined,
description: '菜单属性透传',
name: 'menuProps',
propType: 'object',
},
{
name: 'style',
propType: 'object',
},
{
name: 'className',
propType: 'string',
},
{
name: 'children',
propType: 'any',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Message',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Message',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
defaultValue: false,
name: 'pure',
propType: 'bool',
},
{
name: 'className',
propType: 'string',
},
{
name: 'style',
propType: 'object',
},
{
defaultValue: 'success',
description: '反馈类型',
name: 'type',
propType: {
type: 'oneOf',
value: [
'success',
'warning',
'error',
'notice',
'help',
'loading',
],
},
},
{
defaultValue: 'inline',
description: '反馈外观',
name: 'shape',
propType: {
type: 'oneOf',
value: [
'inline',
'addon',
'toast',
],
},
},
{
defaultValue: 'medium',
description: '反馈大小',
name: 'size',
propType: {
type: 'oneOf',
value: [
'medium',
'large',
],
},
},
{
description: '标题',
name: 'title',
propType: 'node',
},
{
description: '内容',
name: 'children',
propType: 'node',
},
{
defaultValue: true,
description: '默认是否显示',
name: 'defaultVisible',
propType: 'bool',
},
{
description: '当前是否显示',
name: 'visible',
propType: 'bool',
},
{
description: '显示的图标类型，会覆盖内部设置的IconType',
name: 'iconType',
propType: 'string',
},
{
defaultValue: false,
description: '显示关闭按钮',
name: 'closeable',
propType: 'bool',
},
{
defaultValue: Function {},
description: '关闭按钮的回调',
name: 'onClose',
propType: 'func',
},
{
defaultValue: Function {},
description: '关闭之后调用的函数',
name: 'afterClose',
propType: 'func',
},
{
defaultValue: true,
description: '是否开启展开收起动画',
name: 'animation',
propType: 'bool',
},
{
name: 'locale',
propType: 'object',
},
{
name: 'rtl',
propType: 'bool',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Nav',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Nav',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
defaultValue: false,
name: 'pure',
propType: 'bool',
},
{
name: 'rtl',
propType: 'bool',
},
{
name: 'className',
propType: 'string',
},
{
name: 'style',
propType: 'object',
},
{
description: '导航项和子导航',
name: 'children',
propType: 'node',
},
{
defaultValue: 'normal',
description: `导航类型␊
@enumdesc 普通, 主要, 次要, 线形`,
name: 'type',
propType: {
type: 'oneOf',
value: [
'normal',
'primary',
'secondary',
'line',
],
},
},
{
defaultValue: 'ver',
description: `导航布局␊
@enumdesc 水平, 垂直`,
name: 'direction',
propType: {
type: 'oneOf',
value: [
'hoz',
'ver',
],
},
},
{
defaultValue: 'left',
description: '横向导航条 items 和 footer 的对齐方向，在 direction 设置为 \'hoz\' 并且 header 存在时生效',
name: 'hozAlign',
propType: {
type: 'oneOf',
value: [
'left',
'right',
],
},
},
{
description: `设置组件选中状态的 active 边方向␊
@enumdesc 无, 上, 下, 左, 右␊
@default 当 direction 为 'hoz' 时，默认值为 'bottom'，当 direction 为 'ver' 时，默认值为 'left'`,
name: 'activeDirection',
propType: {
type: 'oneOf',
value: [
null,
'top',
'bottom',
'left',
'right',
],
},
},
{
defaultValue: 'inline',
description: `子导航打开的模式（水平导航只支持弹出）␊
@eumdesc 行内, 弹出`,
name: 'mode',
propType: {
type: 'oneOf',
value: [
'inline',
'popup',
],
},
},
{
defaultValue: 'click',
description: '子导航打开的触发方式',
name: 'triggerType',
propType: {
type: 'oneOf',
value: [
'click',
'hover',
],
},
},
{
defaultValue: 20,
description: '内联子导航缩进距离',
name: 'inlineIndent',
propType: 'number',
},
{
defaultValue: false,
description: '初始展开所有的子导航，只在 mode 设置为 \'inline\' 以及 openMode 设置为 \'multiple\' 下生效',
name: 'defaultOpenAll',
propType: 'bool',
},
{
defaultValue: 'multiple',
description: `内联子导航的展开模式，同时可以展开一个同级子导航还是多个同级子导航，该属性仅在 mode 为 inline 时生效␊
@eumdesc 一个, 多个`,
name: 'openMode',
propType: {
type: 'oneOf',
value: [
'single',
'multiple',
],
},
},
{
description: '当前选中导航项的 key 值',
name: 'selectedKeys',
propType: {
type: 'oneOfType',
value: [
'string',
'array',
],
},
},
{
defaultValue: [],
description: '初始选中导航项的 key 值',
name: 'defaultSelectedKeys',
propType: {
type: 'oneOfType',
value: [
'string',
'array',
],
},
},
{
description: `选中或取消选中导航项触发的回调函数␊
@param {Array} selectedKeys 选中的所有导航项的 key␊
@param {Object} item 选中或取消选中的导航项␊
@param {Object} extra 额外参数␊
@param {Boolean} extra.select 是否是选中␊
@param {Array} extra.key 导航项的 key␊
@param {Object} extra.label 导航项的文本␊
@param {Array} extra.keyPath 导航项 key 的路径`,
name: 'onSelect',
propType: 'func',
},
{
defaultValue: 'follow',
description: `弹出子导航的对齐方式（水平导航只支持 follow ）␊
@eumdesc Item 顶端对齐, Nav 顶端对齐`,
name: 'popupAlign',
propType: {
type: 'oneOf',
value: [
'follow',
'outside',
],
},
},
{
description: '弹出子导航的自定义类名',
name: 'popupClassName',
propType: 'string',
},
{
description: '是否只显示图标',
name: 'iconOnly',
propType: 'bool',
},
{
defaultValue: true,
description: '是否显示右侧的箭头（仅在 iconOnly=true 时生效）',
name: 'hasArrow',
propType: 'bool',
},
{
defaultValue: false,
description: '是否有 ToolTips （仅在 iconOnly=true 时生效）',
name: 'hasTooltip',
propType: 'bool',
},
{
description: '自定义导航头部',
name: 'header',
propType: 'node',
},
{
description: '自定义导航尾部',
name: 'footer',
propType: 'node',
},
{
defaultValue: false,
description: '是否开启嵌入式模式，一般用于Layout的布局中，开启后没有默认背景、外层border、box-shadow，可以配合`<Nav style={{lineHeight: \'100px\'}}>` 自定义高度',
name: 'embeddable',
propType: 'bool',
},
{
defaultValue: undefined,
name: 'popupProps',
propType: 'object',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'NumberPicker',
docUrl: '',
npm: {
destructuring: false,
exportName: 'NumberPicker',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
description: '样式前缀',
name: 'prefix',
propType: 'string',
},
{
defaultValue: 'normal',
description: `设置类型␊
@enumdesc 普通, 内联`,
name: 'type',
propType: {
type: 'oneOf',
value: [
'normal',
'inline',
],
},
},
{
defaultValue: 'medium',
description: '大小',
name: 'size',
propType: {
type: 'oneOf',
value: [
'large',
'medium',
],
},
},
{
description: '当前值',
name: 'value',
propType: 'number',
},
{
description: '默认值',
name: 'defaultValue',
propType: 'number',
},
{
description: '是否禁用',
name: 'disabled',
propType: 'bool',
},
{
defaultValue: 1,
description: '步长',
name: 'step',
propType: {
type: 'oneOfType',
value: [
'number',
'string',
],
},
},
{
defaultValue: 0,
description: '保留小数点后位数',
name: 'precision',
propType: 'number',
},
{
defaultValue: true,
description: '用户是否可以输入',
name: 'editable',
propType: 'bool',
},
{
description: '自动焦点',
name: 'autoFocus',
propType: 'bool',
},
{
description: `数值被改变的事件␊
@param {Number} value 数据␊
@param {Event} e DOM事件对象`,
name: 'onChange',
propType: 'func',
},
{
description: '键盘按下',
name: 'onKeyDown',
propType: 'func',
},
{
description: '焦点获得',
name: 'onFocus',
propType: 'func',
},
{
description: '焦点失去',
name: 'onBlur',
propType: 'func',
},
{
description: `数值订正后的回调␊
@param {Object} obj {currentValue,oldValue:String}`,
name: 'onCorrect',
propType: 'func',
},
{
name: 'onDisabled',
propType: 'func',
},
{
defaultValue: Infinity,
description: '最大值',
name: 'max',
propType: 'number',
},
{
defaultValue: -Infinity,
description: '最小值',
name: 'min',
propType: 'number',
},
{
description: '自定义class',
name: 'className',
propType: 'string',
},
{
defaultValue: undefined,
description: '自定义内联样式',
name: 'style',
propType: 'object',
},
{
name: 'state',
propType: {
type: 'oneOf',
value: [
'error',
],
},
},
{
description: `格式化当前值␊
@param {Number} value␊
@return {String|Number}`,
name: 'format',
propType: 'func',
},
{
description: '增加按钮的props',
name: 'upBtnProps',
propType: 'object',
},
{
description: '减少按钮的props',
name: 'downBtnProps',
propType: 'object',
},
{
description: '内联 label',
name: 'label',
propType: 'node',
},
{
description: 'inner after',
name: 'innerAfter',
propType: 'node',
},
{
name: 'rtl',
propType: 'bool',
},
{
description: '是否为预览态',
name: 'isPreview',
propType: 'bool',
},
{
description: `预览态模式下渲染的内容␊
@param {number} value 评分值`,
name: 'renderPreview',
propType: 'func',
},
{
description: '预设屏幕宽度',
name: 'device',
propType: {
type: 'oneOf',
value: [
'phone',
'tablet',
'desktop',
],
},
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Overlay',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Overlay',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
defaultValue: false,
name: 'pure',
propType: 'bool',
},
{
name: 'rtl',
propType: 'bool',
},
{
name: 'className',
propType: 'string',
},
{
name: 'style',
propType: 'object',
},
{
description: '弹层内容',
name: 'children',
propType: 'any',
},
{
defaultValue: false,
description: '是否显示弹层',
name: 'visible',
propType: 'bool',
},
{
description: `弹层请求关闭时触发事件的回调函数␊
@param {String} type 弹层关闭的来源␊
@param {Object} e DOM 事件`,
name: 'onRequestClose',
propType: 'func',
},
{
description: '弹层定位的参照元素',
name: 'target',
propType: 'any',
},
{
defaultValue: 'tl bl',
description: '弹层相对于参照元素的定位, 详见开发指南的[定位部分](#定位)',
name: 'align',
propType: {
type: 'oneOfType',
value: [
'string',
'bool',
],
},
},
{
defaultValue: [
0,
0,
],
description: `弹层相对于trigger的定位的微调, 接收数组[hoz, ver], 表示弹层在 left / top 上的增量␊
e.g. [100, 100] 表示往右(RTL 模式下是往左) 、下分布偏移100px`,
name: 'offset',
propType: 'array',
},
{
description: '渲染组件的容器，如果是函数需要返回 ref，如果是字符串则是该 DOM 的 id，也可以直接传入 DOM 节点',
name: 'container',
propType: 'any',
},
{
defaultValue: false,
description: '是否显示遮罩',
name: 'hasMask',
propType: 'bool',
},
{
defaultValue: true,
description: '是否支持 esc 按键关闭弹层',
name: 'canCloseByEsc',
propType: 'bool',
},
{
defaultValue: true,
description: '点击弹层外的区域是否关闭弹层，不显示遮罩时生效',
name: 'canCloseByOutSideClick',
propType: 'bool',
},
{
defaultValue: true,
description: '点击遮罩区域是否关闭弹层，显示遮罩时生效',
name: 'canCloseByMask',
propType: 'bool',
},
{
description: '弹层打开前触发事件的回调函数',
name: 'beforeOpen',
propType: 'func',
},
{
description: '弹层打开时触发事件的回调函数',
name: 'onOpen',
propType: 'func',
},
{
description: '弹层打开后触发事件的回调函数, 如果有动画，则在动画结束后触发',
name: 'afterOpen',
propType: 'func',
},
{
description: '弹层关闭前触发事件的回调函数',
name: 'beforeClose',
propType: 'func',
},
{
description: '弹层关闭时触发事件的回调函数',
name: 'onClose',
propType: 'func',
},
{
description: '弹层关闭后触发事件的回调函数, 如果有动画，则在动画结束后触发',
name: 'afterClose',
propType: 'func',
},
{
description: '弹层定位完成前触发的事件',
name: 'beforePosition',
propType: 'func',
},
{
description: `弹层定位完成时触发的事件␊
@param {Object} config 定位的参数␊
@param {Array} config.align 对齐方式，如 ['cc', 'cc']（如果开启 needAdjust，可能和预先设置的 align 不同）␊
@param {Number} config.top 距离视口顶部距离␊
@param {Number} config.left 距离视口左侧距离␊
@param {Object} node 定位参照的容器节点`,
name: 'onPosition',
propType: 'func',
},
{
defaultValue: false,
description: '是否在每次弹层重新渲染后强制更新定位信息，一般用于弹层内容区域大小发生变化时，仍需保持原来的定位方式',
name: 'shouldUpdatePosition',
propType: 'bool',
},
{
defaultValue: false,
description: '弹层打开时是否让其中的元素自动获取焦点',
name: 'autoFocus',
propType: 'bool',
},
{
defaultValue: true,
description: '当弹层由于页面滚动等情况不在可视区域时，是否自动调整定位以出现在可视区域',
name: 'needAdjust',
propType: 'bool',
},
{
defaultValue: false,
description: '是否禁用页面滚动',
name: 'disableScroll',
propType: 'bool',
},
{
defaultValue: false,
description: '隐藏时是否保留子节点',
name: 'cache',
propType: 'bool',
},
{
description: '安全节点，当点击 document 的时候，如果包含该节点则不会关闭弹层，如果是函数需要返回 ref，如果是字符串则是该 DOM 的 id，也可以直接传入 DOM 节点，或者以上值组成的数组',
name: 'safeNode',
propType: 'any',
},
{
description: '弹层的根节点的样式类',
name: 'wrapperClassName',
propType: 'string',
},
{
description: '弹层的根节点的内联样式',
name: 'wrapperStyle',
propType: 'object',
},
{
description: `配置动画的播放方式，支持 { in: 'enter-class', out: 'leave-class' } 的对象参数，如果设置为 false，则不播放动画。 请参考 Animate 组件的文档获取可用的动画名␊
@default { in: 'expandInDown', out: 'expandOutUp' }`,
name: 'animation',
propType: {
type: 'oneOfType',
value: [
'object',
'bool',
],
},
},
{
name: 'onMaskMouseEnter',
propType: 'func',
},
{
name: 'onMaskMouseLeave',
propType: 'func',
},
{
defaultValue: Function {},
name: 'onClick',
propType: 'func',
},
{
defaultValue: '',
name: 'maskClass',
propType: 'string',
},
{
defaultValue: false,
name: 'isChildrenInMask',
propType: 'bool',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Pagination',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Pagination',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
defaultValue: false,
name: 'pure',
propType: 'bool',
},
{
defaultValue: false,
name: 'rtl',
propType: 'bool',
},
{
name: 'device',
propType: {
type: 'oneOf',
value: [
'desktop',
'tablet',
'phone',
],
},
},
{
name: 'className',
propType: 'string',
},
{
description: '自定义国际化文案对象',
name: 'locale',
propType: 'object',
},
{
defaultValue: 'normal',
description: '分页组件类型',
name: 'type',
propType: {
type: 'oneOf',
value: [
'normal',
'simple',
'mini',
],
},
},
{
defaultValue: 'normal',
description: '前进后退按钮样式',
name: 'shape',
propType: {
type: 'oneOf',
value: [
'normal',
'arrow-only',
'arrow-prev-only',
'no-border',
],
},
},
{
defaultValue: 'medium',
description: '分页组件大小',
name: 'size',
propType: {
type: 'oneOf',
value: [
'small',
'medium',
'large',
],
},
},
{
description: '（受控）当前页码',
name: 'current',
propType: 'number',
},
{
defaultValue: 1,
description: '（非受控）初始页码',
name: 'defaultCurrent',
propType: 'number',
},
{
defaultValue: Function {},
description: `页码发生改变时的回调函数␊
@param {Number} current 改变后的页码数␊
@param {Object} e 点击事件对象`,
name: 'onChange',
propType: 'func',
},
{
defaultValue: 100,
description: '总记录数',
name: 'total',
propType: 'number',
},
{
description: `总数的渲染函数␊
@param {Number} total 总数␊
@param {Array} range 当前数据在总数中的区间`,
name: 'totalRender',
propType: 'func',
},
{
defaultValue: 5,
description: '页码显示的数量，更多的使用...代替',
name: 'pageShowCount',
propType: 'number',
},
{
defaultValue: 10,
description: '一页中的记录数',
name: 'pageSize',
propType: 'number',
},
{
defaultValue: false,
description: '每页显示选择器类型',
name: 'pageSizeSelector',
propType: {
type: 'oneOf',
value: [
false,
'filter',
'dropdown',
],
},
},
{
defaultValue: [
5,
10,
20,
],
description: '每页显示选择器可选值',
name: 'pageSizeList',
propType: {
type: 'oneOfType',
value: [
{
type: 'arrayOf',
value: 'number',
},
{
type: 'arrayOf',
value: {
type: 'shape',
value: [
{
name: 'label',
propType: 'string',
},
{
name: 'value',
propType: 'number',
},
],
},
},
],
},
},
{
defaultValue: Function {},
description: `自定义页码渲染函数，函数作用于页码button以及当前页/总页数的数字渲染␊
@param {Number} index 分页的页码，从1开始␊
@return {ReactNode} 返回渲染结果`,
name: 'pageNumberRender',
propType: 'func',
},
{
defaultValue: 'start',
description: '每页显示选择器在组件中的位置',
name: 'pageSizePosition',
propType: {
type: 'oneOf',
value: [
'start',
'end',
],
},
},
{
defaultValue: false,
description: '存在每页显示选择器时是否使用浮动布局',
name: 'useFloatLayout',
propType: 'bool',
},
{
defaultValue: Function {},
description: `每页显示记录数量改变时的回调函数␊
@param {Number} pageSize 改变后的每页显示记录数`,
name: 'onPageSizeChange',
propType: 'func',
},
{
defaultValue: false,
description: '当分页数为1时，是否隐藏分页器',
name: 'hideOnlyOnePage',
propType: 'bool',
},
{
defaultValue: true,
description: 'type 设置为 normal 时，在页码数超过5页后，会显示跳转输入框与按钮，当设置 showJump 为 false 时，不再显示该跳转区域',
name: 'showJump',
propType: 'bool',
},
{
description: '设置页码按钮的跳转链接，它的值为一个包含 {page} 的模版字符串，如：http://www.taobao.com/{page}',
name: 'link',
propType: 'string',
},
{
defaultValue: Function {},
name: 'selectPopupContiner',
propType: 'any',
},
{
description: '弹层组件属性，透传给Popup',
name: 'popupProps',
propType: 'object',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Paragraph',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Paragraph',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
description: '额外的样式名 会附加到 root dom 上',
name: 'className',
propType: 'string',
},
{
defaultValue: 'long',
description: `什么方式展示段落␊
@enumdesc 展示所有文本, 展示三行以内（非强制）`,
name: 'type',
propType: {
type: 'oneOf',
value: [
'long',
'short',
],
},
},
{
defaultValue: 'medium',
description: `组件大小。␊
@enumdesc 中号, 小号`,
name: 'size',
propType: {
type: 'oneOf',
value: [
'medium',
'small',
],
},
},
{
name: 'rtl',
propType: 'bool',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Progress',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Progress',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
defaultValue: 'line',
description: '形态',
name: 'shape',
propType: {
type: 'oneOf',
value: [
'circle',
'line',
],
},
},
{
defaultValue: 'medium',
description: '尺寸',
name: 'size',
propType: {
type: 'oneOf',
value: [
'small',
'medium',
'large',
],
},
},
{
defaultValue: 0,
description: '所占百分比',
name: 'percent',
propType: 'number',
},
{
defaultValue: 'normal',
description: '进度状态, 显示优先级: color > progressive > state',
name: 'state',
propType: {
type: 'oneOf',
value: [
'normal',
'success',
'error',
],
},
},
{
defaultValue: false,
description: '是否为色彩阶段变化模式, 显示优先级: color > progressive > state',
name: 'progressive',
propType: 'bool',
},
{
defaultValue: false,
description: '是否添加 Border（只适用于 Line Progress)',
name: 'hasBorder',
propType: 'bool',
},
{
defaultValue: Function {},
description: `文本渲染函数␊
@param {Number} percent 当前的进度信息␊
@param {Object} option 额外的参数␊
@property {Boolean} option.rtl 是否在rtl 模式下渲染␊
@return {ReactNode} 返回文本节点`,
name: 'textRender',
propType: 'func',
},
{
description: '进度条颜色, 显示优先级: color > progressive > state',
name: 'color',
propType: 'string',
},
{
description: '背景色',
name: 'backgroundColor',
propType: 'string',
},
{
name: 'rtl',
propType: 'bool',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Radio',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Radio',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
description: '自定义类名',
name: 'className',
propType: 'string',
},
{
description: '组件input的id',
name: 'id',
propType: 'string',
},
{
description: '自定义内敛样式',
name: 'style',
propType: 'object',
},
{
description: '设置radio是否选中',
name: 'checked',
propType: 'bool',
},
{
description: '设置radio是否默认选中',
name: 'defaultChecked',
propType: 'bool',
},
{
description: '通过属性配置label',
name: 'label',
propType: 'node',
},
{
description: `状态变化时触发的事件␊
@param {Boolean} checked 是否选中␊
@param {Event} e Dom 事件对象`,
name: 'onChange',
propType: 'func',
},
{
description: `鼠标进入enter事件␊
@param {Event} e Dom 事件对象`,
name: 'onMouseEnter',
propType: 'func',
},
{
description: `鼠标离开事件␊
@param {Event} e Dom 事件对象`,
name: 'onMouseLeave',
propType: 'func',
},
{
description: 'radio是否被禁用',
name: 'disabled',
propType: 'bool',
},
{
description: 'radio 的value',
name: 'value',
propType: {
type: 'oneOfType',
value: [
'string',
'number',
'bool',
],
},
},
{
description: 'name',
name: 'name',
propType: 'string',
},
{
defaultValue: false,
description: '是否为预览态',
name: 'isPreview',
propType: 'bool',
},
{
description: `预览态模式下渲染的内容␊
@param {number} value 评分值`,
name: 'renderPreview',
propType: 'func',
},
{
defaultValue: 0,
name: 'tabIndex',
},
{
defaultValue: 'next-',
name: 'prefix',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Range',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Range',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
description: '样式类名的品牌前缀',
name: 'prefix',
propType: 'string',
},
{
description: '自定义类名',
name: 'className',
propType: 'string',
},
{
description: '自定义内敛样式',
name: 'style',
propType: 'object',
},
{
defaultValue: 'single',
description: `滑块个数␊
@enumdesc 单个, 两个`,
name: 'slider',
propType: {
type: 'oneOf',
value: [
'single',
'double',
],
},
},
{
defaultValue: 0,
description: '最小值',
name: 'min',
propType: 'number',
},
{
defaultValue: 100,
description: '最大值',
name: 'max',
propType: 'number',
},
{
defaultValue: 1,
description: '步长，取值必须大于 0，并且可被 (max - min) 整除。',
name: 'step',
propType: 'number',
},
{
description: '设置当前取值。当 `slider` 为 `single` 时，使用 `Number`，否则用 `[Number, Number]`',
name: 'value',
propType: {
type: 'oneOfType',
value: [
'number',
{
type: 'arrayOf',
value: 'number',
},
],
},
},
{
name: 'tempValue',
propType: {
type: 'oneOfType',
value: [
'number',
{
type: 'arrayOf',
value: 'number',
},
],
},
},
{
description: '设置初始取值。当 `slider` 为 `single` 时，使用 `Number`，否则用 `[Number, Number]`',
name: 'defaultValue',
propType: {
type: 'oneOfType',
value: [
'number',
{
type: 'arrayOf',
value: 'number',
},
],
},
},
{
defaultValue: false,
description: '刻度数值显示逻辑（false 代表不显示，array 枚举显示的值，number 代表按 number 平分，object 表示按 key 划分，value 值显示）',
name: 'marks',
propType: {
type: 'oneOfType',
value: [
'bool',
'number',
{
type: 'arrayOf',
value: 'number',
},
'object',
],
},
},
{
defaultValue: 'above',
description: 'marks显示在上方(\'above\')or下方(\'below\')',
name: 'marksPosition',
propType: {
type: 'oneOf',
value: [
'above',
'below',
],
},
},
{
defaultValue: false,
description: '值为 `true` 时，滑块为禁用状态',
name: 'disabled',
propType: 'bool',
},
{
description: `当 Range 的值发生改变后，会触发 onChange 事件，并把改变后的值作为参数传入, 如果设置了value, 要配合此函数做受控使用␊
@param {String/number} value`,
name: 'onChange',
propType: 'func',
},
{
description: `滑块拖动的时候触发的事件,不建议在这里setState, 一般情况下不需要用, 滑动时有特殊需求时使用␊
@param {String/number} value`,
name: 'onProcess',
propType: 'func',
},
{
defaultValue: true,
description: '是否显示 tip',
name: 'hasTip',
propType: 'bool',
},
{
defaultValue: Function {},
description: `自定义 tip 显示内容␊
@param {Number|String} value 值␊
@return {ReactNode} 显示内容`,
name: 'tipRender',
propType: 'func',
},
{
name: 'id',
propType: 'string',
},
{
defaultValue: false,
description: '选中态反转',
name: 'reverse',
propType: 'bool',
},
{
defaultValue: false,
description: '是否pure render',
name: 'pure',
propType: 'bool',
},
{
defaultValue: false,
description: '是否为拖动线段类型,默认slider为double, defaultValue必传且指定区间',
name: 'fixedWidth',
propType: 'bool',
},
{
defaultValue: false,
description: 'tooltip是否默认展示',
name: 'tooltipVisible',
propType: 'bool',
},
{
defaultValue: false,
description: '是否已rtl模式展示',
name: 'rtl',
propType: 'bool',
},
{
defaultValue: false,
description: '是否为预览态',
name: 'isPreview',
propType: 'bool',
},
{
description: `预览态模式下渲染的内容␊
@param {number} value 评分值`,
name: 'renderPreview',
propType: 'func',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Rating',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Rating',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
defaultValue: 0,
description: '默认值',
name: 'defaultValue',
propType: 'number',
},
{
description: '值',
name: 'value',
propType: 'number',
},
{
defaultValue: 5,
description: '评分的总数',
name: 'count',
propType: 'number',
},
{
defaultValue: false,
description: '是否显示 grade',
name: 'showGrade',
propType: 'bool',
},
{
defaultValue: 'medium',
description: '尺寸',
name: 'size',
propType: {
type: 'oneOf',
value: [
'small',
'medium',
'large',
],
},
},
{
defaultValue: false,
description: '是否允许半星评分',
name: 'allowHalf',
propType: 'bool',
},
{
description: `用户点击评分时触发的回调␊
@param {String} value 评分值`,
name: 'onChange',
propType: 'func',
},
{
description: `用户hover评分时触发的回调␊
@param {String} value 评分值`,
name: 'onHoverChange',
propType: 'func',
},
{
defaultValue: false,
description: '是否禁用',
name: 'disabled',
propType: 'bool',
},
{
defaultValue: Function {},
description: '评分文案生成方法，传入id支持无障碍时，读屏软件可读',
name: 'readAs',
propType: 'func',
},
{
defaultValue: 'favorites-filling',
name: 'iconType',
propType: 'string',
},
{
name: 'strokeMode',
propType: 'bool',
},
{
name: 'className',
propType: 'string',
},
{
name: 'id',
propType: 'string',
},
{
name: 'rtl',
propType: 'bool',
},
{
description: '自定义国际化文案对象',
name: 'locale',
propType: 'object',
},
{
defaultValue: false,
description: '是否为预览态',
name: 'isPreview',
propType: 'bool',
},
{
description: `预览态模式下渲染的内容␊
@param {number} value 评分值`,
name: 'renderPreview',
propType: 'func',
},
{
defaultValue: false,
description: '是否为只读态，效果上同 disabeld',
name: 'readOnly',
propType: 'bool',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Search',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Search',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
description: '样式前缀',
name: 'prefix',
propType: 'string',
},
{
defaultValue: 'normal',
description: '形状',
name: 'shape',
propType: {
type: 'oneOf',
value: [
'normal',
'simple',
],
},
},
{
defaultValue: 'normal',
description: '类型 shape=normal: primary/secondary; shape=simple: normal/dark;',
name: 'type',
propType: {
type: 'oneOf',
value: [
'primary',
'secondary',
'normal',
'dark',
],
},
},
{
defaultValue: 'medium',
description: `大小␊
@enumdesc '大', '小'`,
name: 'size',
propType: {
type: 'oneOf',
value: [
'large',
'medium',
],
},
},
{
description: '搜索框默认值',
name: 'defaultValue',
propType: 'string',
},
{
description: '搜索框数值',
name: 'value',
propType: {
type: 'oneOfType',
value: [
'string',
'number',
],
},
},
{
description: `输入关键字时的回掉␊
@param {Object} value 输入值`,
name: 'onChange',
propType: 'func',
},
{
description: `点击搜索按钮触发的回调␊
@param {String} value 输入值␊
@param {String} filterValue 选项值`,
name: 'onSearch',
propType: 'func',
},
{
description: '选择器默认值',
name: 'defaultFilterValue',
propType: 'string',
},
{
defaultValue: [],
description: '选择器',
name: 'filter',
propType: 'array',
},
{
description: '选择器值',
name: 'filterValue',
propType: 'string',
},
{
description: `选择器发生变化时回调␊
@param {Object} filter value`,
name: 'onFilterChange',
propType: 'func',
},
{
description: '搜索框下拉联想列表',
name: 'dataSource',
propType: 'array',
},
{
description: '默认提示',
name: 'placeholder',
propType: 'string',
},
{
description: 'button 的内容',
name: 'searchText',
propType: 'node',
},
{
description: '自定义样式',
name: 'style',
propType: 'object',
},
{
description: '样式名称',
name: 'className',
propType: 'string',
},
{
description: '选择器的props',
name: 'filterProps',
propType: 'object',
},
{
defaultValue: undefined,
description: '按钮的额外属性',
name: 'buttonProps',
propType: 'object',
},
{
description: '自定义渲染的的下拉框',
name: 'popupContent',
propType: 'node',
},
{
description: '是否跟随滚动',
name: 'followTrigger',
propType: 'bool',
},
{
description: '自定义渲染的的下拉框',
name: 'visible',
propType: 'bool',
},
{
defaultValue: false,
description: '是否显示清除按钮',
name: 'hasClear',
propType: 'bool',
},
{
defaultValue: true,
description: '是否显示搜索按钮',
name: 'hasIcon',
propType: 'bool',
},
{
defaultValue: false,
description: '是否禁用',
name: 'disabled',
propType: 'bool',
},
{
name: 'locale',
propType: 'object',
},
{
name: 'rtl',
propType: 'bool',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Select',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Select',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'single',
description: '选择器模式',
name: 'mode',
propType: {
type: 'oneOf',
value: [
'single',
'multiple',
'tag',
],
},
},
{
description: '当前值，用于受控模式',
name: 'value',
propType: 'any',
},
{
description: '初始的默认值',
name: 'defaultValue',
propType: 'any',
},
{
description: `Select发生改变时触发的回调␊
@param {*} value 选中的值␊
@param {String} actionType 触发的方式, 'itemClick', 'enter', 'tag'␊
@param {*} item 选中的值的对象数据 (useDetailValue=false有效)`,
name: 'onChange',
propType: 'func',
},
{
description: '传入的数据源，可以动态渲染子项，详见 [dataSource的使用](#dataSource的使用)',
name: 'dataSource',
propType: {
type: 'arrayOf',
value: {
type: 'oneOfType',
value: [
{
type: 'shape',
value: [
{
name: 'value',
propType: 'any',
},
{
name: 'label',
propType: 'any',
},
{
name: 'disabled',
propType: 'bool',
},
{
name: 'children',
propType: 'array',
},
],
},
'bool',
'number',
'string',
],
},
},
},
{
description: '是否有边框',
name: 'hasBorder',
propType: 'bool',
},
{
defaultValue: true,
description: '是否有下拉箭头',
name: 'hasArrow',
propType: 'bool',
},
{
defaultValue: false,
description: '展开后是否能搜索（tag 模式下固定为true）',
name: 'showSearch',
propType: 'bool',
},
{
description: `当搜索框值变化时回调␊
@param {String} value 数据`,
name: 'onSearch',
propType: 'func',
},
{
description: `当搜索框值被清空时候的回调␊
@param {String} actionType 触发的方式, 'select'(选择清空), 'popupClose'(弹窗关闭清空)`,
name: 'onSearchClear',
propType: 'func',
},
{
description: '多选模式下是否有全选功能',
name: 'hasSelectAll',
propType: {
type: 'oneOfType',
value: [
'bool',
'string',
],
},
},
{
description: '填充到选择框里的值的 key',
name: 'fillProps',
propType: 'string',
},
{
description: 'onChange 返回的 value 使用 dataSource 的对象',
name: 'useDetailValue',
propType: 'bool',
},
{
defaultValue: true,
description: 'dataSource 变化的时是否保留已选的内容',
name: 'cacheValue',
propType: 'bool',
},
{
defaultValue: Function {},
description: `渲染 Select 展现内容的方法␊
@param {Object} item 渲染节点的item␊
@return {ReactNode} 展现内容␊
@default item => item.label \\|\\| item.value`,
name: 'valueRender',
propType: 'func',
},
{
description: `渲染 MenuItem 内容的方法␊
@param {Object} item 渲染节点的item␊
@param {String} searchValue 搜索关键字（如果开启搜索）␊
@return {ReactNode} item node`,
name: 'itemRender',
propType: 'func',
},
{
description: '弹层内容为空的文案',
name: 'notFoundContent',
propType: 'node',
},
{
name: 'style',
propType: 'object',
},
{
description: `受控搜索值，一般不需要设置␊
@type {[type]}`,
name: 'searchValue',
propType: 'string',
},
{
defaultValue: false,
description: '是否一行显示，仅在 mode 为 multiple 的时候生效',
name: 'tagInline',
propType: 'bool',
},
{
description: '最多显示多少个 tag',
name: 'maxTagCount',
propType: 'number',
},
{
description: `隐藏多余 tag 时显示的内容，在 maxTagCount 生效时起作用␊
@param {number} selectedValues 当前已选中的元素␊
@param {number} totalValues 总待选元素`,
name: 'maxTagPlaceholder',
propType: 'func',
},
{
description: '选择后是否立即隐藏菜单 (mode=multiple/tag 模式生效)',
name: 'hiddenSelected',
propType: 'bool',
},
{
description: `tag 删除回调␊
@param {object} item 渲染节点的item`,
name: 'onRemove',
propType: 'func',
},
{
description: '焦点事件',
name: 'onFocus',
propType: 'func',
},
{
description: '失去焦点事件',
name: 'onBlur',
propType: 'func',
},
{
name: 'onMouseEnter',
propType: 'func',
},
{
name: 'onMouseLeave',
propType: 'func',
},
{
name: 'onKeyDown',
propType: 'func',
},
{
name: 'locale',
propType: 'object',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Slider',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Slider',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
defaultValue: false,
name: 'rtl',
propType: 'bool',
},
{
description: '自定义传入的样式',
name: 'className',
propType: 'any',
},
{
defaultValue: false,
description: '是否使用自适应高度',
name: 'adaptiveHeight',
propType: 'bool',
},
{
defaultValue: 'slide',
description: '动效类型，默认是\'slide\'',
name: 'animation',
propType: {
type: 'oneOfType',
value: [
'string',
'bool',
],
},
},
{
defaultValue: true,
description: '是否显示箭头',
name: 'arrows',
propType: 'bool',
},
{
defaultValue: 'medium',
description: '导航箭头大小 可选值: \'medium\', \'large\'',
name: 'arrowSize',
propType: {
type: 'oneOf',
value: [
'medium',
'large',
],
},
},
{
defaultValue: 'inner',
description: '导航箭头位置 可选值: \'inner\', \'outer\'',
name: 'arrowPosition',
propType: {
type: 'oneOf',
value: [
'inner',
'outer',
],
},
},
{
defaultValue: 'hoz',
description: '导航箭头的方向 可选值: \'hoz\', \'ver\'',
name: 'arrowDirection',
propType: {
type: 'oneOf',
value: [
'hoz',
'ver',
],
},
},
{
defaultValue: false,
description: '是否自动播放',
name: 'autoplay',
propType: 'bool',
},
{
defaultValue: 3000,
description: '自动播放的速度',
name: 'autoplaySpeed',
propType: 'number',
},
{
defaultValue: null,
description: '向后箭头',
name: 'nextArrow',
propType: 'element',
},
{
defaultValue: null,
description: '向前箭头',
name: 'prevArrow',
propType: 'element',
},
{
defaultValue: false,
description: '是否启用居中模式',
name: 'centerMode',
propType: 'bool',
},
{
defaultValue: true,
description: '是否显示导航锚点',
name: 'dots',
propType: 'bool',
},
{
defaultValue: 'hoz',
description: '导航锚点位置',
name: 'dotsDirection',
propType: {
type: 'oneOf',
value: [
'hoz',
'ver',
],
},
},
{
name: 'dotsClass',
propType: 'string',
},
{
description: '自定义导航锚点',
name: 'dotRender',
propType: 'func',
},
{
defaultValue: true,
description: '是否可拖拽',
name: 'draggable',
propType: 'bool',
},
{
defaultValue: true,
description: '是否使用无穷循环模式',
name: 'infinite',
propType: 'bool',
},
{
defaultValue: 0,
description: '初始被激活的轮播图',
name: 'defaultActiveIndex',
propType: 'number',
},
{
defaultValue: false,
description: '是否启用懒加载',
name: 'lazyLoad',
propType: 'bool',
},
{
defaultValue: 'div',
name: 'slide',
propType: 'string',
},
{
defaultValue: 'hoz',
description: '轮播方向',
name: 'slideDirection',
propType: {
type: 'oneOf',
value: [
'hoz',
'ver',
],
},
},
{
defaultValue: 1,
description: '同时展示的图片数量',
name: 'slidesToShow',
propType: 'number',
},
{
defaultValue: 1,
description: '同时滑动的图片数量',
name: 'slidesToScroll',
propType: 'number',
},
{
defaultValue: 600,
description: '轮播速度',
name: 'speed',
propType: 'number',
},
{
description: '跳转到指定的轮播图（受控）',
name: 'activeIndex',
propType: 'number',
},
{
defaultValue: 'click',
description: '锚点导航触发方式',
name: 'triggerType',
propType: {
type: 'oneOf',
value: [
'click',
'hover',
],
},
},
{
defaultValue: Function {},
description: `轮播切换的回调函数␊
@param {Number} index 幻灯片的索引`,
name: 'onChange',
propType: 'func',
},
{
defaultValue: Function {},
name: 'onBeforeChange',
propType: 'func',
},
{
name: 'children',
propType: 'any',
},
{
defaultValue: null,
description: '自定义传入的class',
name: 'style',
propType: 'object',
},
{
defaultValue: '50px',
description: 'Side padding when in center mode (px or %); 展示部分为center，pading会产生前后预览',
name: 'centerPadding',
propType: 'string',
},
{
defaultValue: 'ease',
description: 'CSS3 Animation Easing,默认‘ease’',
name: 'cssEase',
propType: 'string',
},
{
defaultValue: 0.35,
name: 'edgeFriction',
propType: 'number',
},
{
defaultValue: false,
description: '多图轮播时，点击选中后自动居中',
name: 'focusOnSelect',
propType: 'bool',
},
{
defaultValue: false,
name: 'pauseOnHover',
propType: 'bool',
},
{
defaultValue: true,
name: 'swipe',
propType: 'bool',
},
{
defaultValue: false,
name: 'swipeToSlide',
propType: 'bool',
},
{
defaultValue: true,
name: 'touchMove',
propType: 'bool',
},
{
defaultValue: 5,
name: 'touchThreshold',
propType: 'number',
},
{
defaultValue: true,
name: 'useCSS',
propType: 'bool',
},
{
defaultValue: false,
name: 'variableWidth',
propType: 'bool',
},
{
defaultValue: true,
name: 'waitForAnimate',
propType: 'bool',
},
{
defaultValue: null,
name: 'edgeEvent',
propType: 'any',
},
{
defaultValue: null,
name: 'swipeEvent',
propType: 'any',
},
{
defaultValue: false,
name: 'vertical',
},
{
defaultValue: false,
name: 'verticalSwiping',
},
{
defaultValue: null,
name: 'dotsRender',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'SplitButton',
docUrl: '',
npm: {
destructuring: false,
exportName: 'SplitButton',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
name: 'style',
propType: 'object',
},
{
defaultValue: 'normal',
description: '按钮的类型',
name: 'type',
propType: {
type: 'oneOf',
value: [
'normal',
'primary',
'secondary',
],
},
},
{
defaultValue: 'medium',
description: '按钮组的尺寸',
name: 'size',
propType: {
type: 'oneOf',
value: [
'small',
'medium',
'large',
],
},
},
{
description: '主按钮的文案',
name: 'label',
propType: 'node',
},
{
description: '设置标签类型',
name: 'component',
propType: {
type: 'oneOf',
value: [
'button',
'a',
],
},
},
{
description: '是否为幽灵按钮',
name: 'ghost',
propType: {
type: 'oneOf',
value: [
'light',
'dark',
false,
true,
],
},
},
{
defaultValue: [],
description: '默认激活的菜单项（用法同 Menu 非受控）',
name: 'defaultSelectedKeys',
propType: 'array',
},
{
description: '激活的菜单项（用法同 Menu 受控）',
name: 'selectedKeys',
propType: 'array',
},
{
description: '菜单的选择模式',
name: 'selectMode',
propType: {
type: 'oneOf',
value: [
'single',
'multiple',
],
},
},
{
description: '选择菜单项时的回调，参考 Menu',
name: 'onSelect',
propType: 'func',
},
{
description: '点击菜单项时的回调，参考 Menu',
name: 'onItemClick',
propType: 'func',
},
{
description: '触发按钮的属性（支持 Button 的所有属性透传）',
name: 'triggerProps',
propType: 'object',
},
{
defaultValue: true,
description: '弹层菜单的宽度是否与按钮组一致',
name: 'autoWidth',
propType: 'bool',
},
{
description: '弹层是否显示',
name: 'visible',
propType: 'bool',
},
{
description: '弹层默认是否显示',
name: 'defaultVisible',
propType: 'bool',
},
{
description: `弹层显示状态变化时的回调函数␊
@param {Boolean} visible 弹层显示状态␊
@param {String} type 触发弹层显示或隐藏的来源 menuSelect 表示由menu触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发`,
name: 'onVisibleChange',
propType: 'func',
},
{
defaultValue: 'click',
description: '弹层的触发方式',
name: 'popupTriggerType',
propType: {
type: 'oneOf',
value: [
'click',
'hover',
],
},
},
{
description: '弹层对齐方式, 详情见Overlay align',
name: 'popupAlign',
propType: 'string',
},
{
description: '弹层自定义样式',
name: 'popupStyle',
propType: 'object',
},
{
description: '弹层自定义样式类',
name: 'popupClassName',
propType: 'string',
},
{
description: '透传给弹层的属性',
name: 'popupProps',
propType: 'object',
},
{
description: '是否跟随滚动',
name: 'followTrigger',
propType: 'bool',
},
{
defaultValue: undefined,
description: '透传给 Menu 的属性',
name: 'menuProps',
propType: 'object',
},
{
defaultValue: undefined,
description: '透传给 左侧按钮 的属性',
name: 'leftButtonProps',
propType: 'object',
},
{
name: 'className',
propType: 'string',
},
{
name: 'children',
propType: 'any',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Step',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Step',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
name: 'rtl',
propType: 'bool',
},
{
defaultValue: 0,
description: '当前步骤',
name: 'current',
propType: 'number',
},
{
defaultValue: 'hoz',
description: '展示方向',
name: 'direction',
propType: {
type: 'oneOf',
value: [
'hoz',
'ver',
],
},
},
{
defaultValue: 'ver',
description: '横向布局时( direction 为 hoz )的内容排列',
name: 'labelPlacement',
propType: {
type: 'oneOf',
value: [
'hoz',
'ver',
],
},
},
{
defaultValue: 'circle',
description: '类型',
name: 'shape',
propType: {
type: 'oneOf',
value: [
'circle',
'arrow',
'dot',
],
},
},
{
description: '是否只读模式',
name: 'readOnly',
propType: 'bool',
},
{
defaultValue: true,
description: '是否开启动效',
name: 'animation',
propType: 'bool',
},
{
description: '自定义样式名',
name: 'className',
propType: 'string',
},
{
defaultValue: null,
description: `StepItem 的自定义渲染␊
@param {Number} index 节点索引␊
@param {String} status 节点状态␊
@returns {Node} 节点的渲染结果`,
name: 'itemRender',
propType: 'func',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Switch',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Switch',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
name: 'rtl',
propType: 'bool',
},
{
name: 'pure',
propType: 'bool',
},
{
description: '自定义类名',
name: 'className',
propType: 'string',
},
{
description: '自定义内敛样式',
name: 'style',
propType: 'object',
},
{
description: '打开时的内容',
name: 'checkedChildren',
propType: 'any',
},
{
description: '关闭时的内容',
name: 'unCheckedChildren',
propType: 'any',
},
{
defaultValue: Function {},
description: `开关状态改变是触发此事件␊
@param {Boolean} checked 是否为打开状态␊
@param {Event} e DOM事件对象`,
name: 'onChange',
propType: 'func',
},
{
description: '开关当前的值(针对受控组件)',
name: 'checked',
propType: 'bool',
},
{
defaultValue: false,
description: '开关默认值 (针对非受控组件)',
name: 'defaultChecked',
propType: 'bool',
},
{
defaultValue: false,
description: '表示开关被禁用',
name: 'disabled',
propType: 'bool',
},
{
defaultValue: 'medium',
description: `switch的尺寸␊
@enumdesc 正常大小, 缩小版大小`,
name: 'size',
propType: {
type: 'oneOf',
value: [
'medium',
'small',
],
},
},
{
description: `鼠标点击事件␊
@param {Event} e DOM事件对象`,
name: 'onClick',
propType: 'func',
},
{
description: `键盘按键事件␊
@param {Event} e DOM事件对象`,
name: 'onKeyDown',
propType: 'func',
},
{
defaultValue: false,
description: '是否为预览态',
name: 'isPreview',
propType: 'bool',
},
{
description: `预览态模式下渲染的内容␊
@param {number} value 评分值`,
name: 'renderPreview',
propType: 'func',
},
{
description: '国际化配置',
name: 'locale',
propType: 'object',
},
{
defaultValue: false,
name: 'readOnly',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Tab',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Tab',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
name: 'rtl',
propType: 'bool',
},
{
name: 'device',
propType: {
type: 'oneOf',
value: [
'tablet',
'desktop',
'phone',
],
},
},
{
description: '被激活的选项卡的 key, 赋值则tab为受控组件, 用户无法切换',
name: 'activeKey',
propType: {
type: 'oneOfType',
value: [
'number',
'string',
],
},
},
{
description: '初始化时被激活的选项卡的 key',
name: 'defaultActiveKey',
propType: {
type: 'oneOfType',
value: [
'number',
'string',
],
},
},
{
defaultValue: 'pure',
description: '外观形态',
name: 'shape',
propType: {
type: 'oneOf',
value: [
'pure',
'wrapped',
'text',
'capsule',
],
},
},
{
defaultValue: true,
description: '是否开启动效',
name: 'animation',
propType: 'bool',
},
{
defaultValue: 'slide',
description: '选项卡过多时的滑动模式',
name: 'excessMode',
propType: {
type: 'oneOf',
value: [
'slide',
'dropdown',
],
},
},
{
defaultValue: 'top',
description: '导航选项卡的位置，只适用于包裹型（wrapped）选项卡',
name: 'tabPosition',
propType: {
type: 'oneOf',
value: [
'top',
'bottom',
'left',
'right',
],
},
},
{
defaultValue: 'medium',
description: '尺寸',
name: 'size',
propType: {
type: 'oneOf',
value: [
'small',
'medium',
],
},
},
{
defaultValue: 'click',
description: '激活选项卡的触发方式',
name: 'triggerType',
propType: {
type: 'oneOf',
value: [
'hover',
'click',
],
},
},
{
defaultValue: true,
description: '是否延迟加载 TabPane 的内容, 默认开启, 即不提前渲染',
name: 'lazyLoad',
propType: 'bool',
},
{
defaultValue: false,
description: '是否自动卸载未处于激活状态的选项卡',
name: 'unmountInactiveTabs',
propType: 'bool',
},
{
description: '导航条的自定义样式',
name: 'navStyle',
propType: 'object',
},
{
description: '导航条的自定义样式类',
name: 'navClassName',
propType: 'string',
},
{
description: '内容区容器的自定义样式',
name: 'contentStyle',
propType: 'object',
},
{
description: '内容区容器的自定义样式类',
name: 'contentClassName',
propType: 'string',
},
{
description: '导航栏附加内容',
name: 'extra',
propType: 'node',
},
{
defaultValue: Function {},
description: '点击单个选项卡时触发的回调',
name: 'onClick',
propType: 'func',
},
{
defaultValue: Function {},
description: `选项卡发生切换时的事件回调␊
@param {String|Number} key 改变后的 key`,
name: 'onChange',
propType: 'func',
},
{
defaultValue: Function {},
description: `选项卡被关闭时的事件回调␊
@param {String|Number} key 关闭的选项卡的 key`,
name: 'onClose',
propType: 'func',
},
{
description: `自定义选项卡模板渲染函数␊
@param {String} key 当前 Tab.Item 的 key 值␊
@param {Object} props 传给 Tab.Item 的所有属性键值对␊
@return {ReactNode} 返回自定义组件`,
name: 'tabRender',
propType: 'func',
},
{
description: '弹层属性透传, 只有当 excessMode 为 dropdown 时生效',
name: 'popupProps',
propType: 'object',
},
{
name: 'children',
propType: 'any',
},
{
name: 'className',
propType: 'string',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Tag',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Tag',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
description: `标签类名前缀,提供给二次开发者用␊
@default next-`,
name: 'prefix',
propType: 'string',
},
{
defaultValue: 'normal',
description: '标签的类型',
name: 'type',
propType: {
type: 'oneOf',
value: [
'normal',
'primary',
],
},
},
{
defaultValue: 'medium',
description: '标签的尺寸（large 尺寸为兼容表单场景 large = medium）',
name: 'size',
propType: {
type: 'oneOf',
value: [
'small',
'medium',
'large',
],
},
},
{
description: '标签颜色, 目前支持：blue、 green、 orange、red、 turquoise、 yellow 和 hex 颜色值 （`color keywords`作为 Tag 组件的保留字，请勿直接使用 ）, `1.19.0` 以上版本生效',
name: 'color',
propType: 'string',
},
{
defaultValue: false,
description: '是否开启动效',
name: 'animation',
propType: 'bool',
},
{
defaultValue: 'tail',
name: 'closeArea',
propType: {
type: 'oneOf',
value: [
'tag',
'tail',
],
},
},
{
name: 'closable',
propType: 'bool',
},
{
name: 'onClose',
propType: 'func',
},
{
name: 'afterClose',
propType: 'func',
},
{
description: '标签出现动画结束后执行的回调',
name: 'afterAppear',
propType: 'func',
},
{
name: 'className',
propType: 'any',
},
{
name: 'children',
propType: 'node',
},
{
description: '点击回调',
name: 'onClick',
propType: 'func',
},
{
defaultValue: 'default',
name: '_shape',
propType: {
type: 'oneOf',
value: [
'default',
'closable',
'checkable',
],
},
},
{
defaultValue: false,
name: 'disabled',
propType: 'bool',
},
{
defaultValue: false,
name: 'rtl',
propType: 'bool',
},
{
name: 'locale',
propType: 'object',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'TimePicker',
docUrl: '',
npm: {
destructuring: false,
exportName: 'TimePicker',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
defaultValue: false,
name: 'rtl',
propType: 'bool',
},
{
description: '按钮的文案',
name: 'label',
propType: 'node',
},
{
description: '输入框状态',
name: 'state',
propType: {
type: 'oneOf',
value: [
'error',
'success',
],
},
},
{
description: '输入框提示',
name: 'placeholder',
propType: 'string',
},
{
description: '时间值（moment 对象或时间字符串，受控状态使用）',
name: 'value',
propType: 'custom',
},
{
description: '时间初值（moment 对象或时间字符串，非受控状态使用）',
name: 'defaultValue',
propType: 'custom',
},
{
defaultValue: 'medium',
description: '时间选择框的尺寸',
name: 'size',
propType: {
type: 'oneOf',
value: [
'small',
'medium',
'large',
],
},
},
{
defaultValue: true,
description: '是否允许清空时间',
name: 'hasClear',
propType: 'bool',
},
{
defaultValue: 'HH:mm:ss',
description: `时间的格式␊
https://momentjs.com/docs/#/parsing/string-format/`,
name: 'format',
propType: 'string',
},
{
description: '小时选项步长',
name: 'hourStep',
propType: 'number',
},
{
description: '分钟选项步长',
name: 'minuteStep',
propType: 'number',
},
{
description: '秒钟选项步长',
name: 'secondStep',
propType: 'number',
},
{
description: `禁用小时函数␊
@param {Number} index 时 0 - 23␊
@return {Boolean} 是否禁用`,
name: 'disabledHours',
propType: 'func',
},
{
description: `禁用分钟函数␊
@param {Number} index 分 0 - 59␊
@return {Boolean} 是否禁用`,
name: 'disabledMinutes',
propType: 'func',
},
{
description: `禁用秒钟函数␊
@param {Number} index 秒 0 - 59␊
@return {Boolean} 是否禁用`,
name: 'disabledSeconds',
propType: 'func',
},
{
description: `渲染的可选择时间列表␊
[{␊
label: '01',␊
value: 1␊
}]␊
@param {Array} list 默认渲染的列表␊
@param {String} mode 渲染的菜单 hour, minute, second␊
@param {moment} value 当前时间，可能为 null␊
@return {Array} 返回需要渲染的数据`,
name: 'renderTimeMenuItems',
propType: 'func',
},
{
description: '弹层是否显示（受控）',
name: 'visible',
propType: 'bool',
},
{
description: '弹层默认是否显示（非受控）',
name: 'defaultVisible',
propType: 'bool',
},
{
description: `弹层容器␊
@param {Object} target 目标节点␊
@return {ReactNode} 容器节点`,
name: 'popupContainer',
propType: 'any',
},
{
defaultValue: 'tl tl',
description: '弹层对齐方式, 详情见Overlay 文档',
name: 'popupAlign',
propType: 'string',
},
{
defaultValue: 'click',
description: '弹层触发方式',
name: 'popupTriggerType',
propType: {
type: 'oneOf',
value: [
'click',
'hover',
],
},
},
{
description: `弹层展示状态变化时的回调␊
@param {Boolean} visible 弹层是否隐藏和显示␊
@param {String} type 触发弹层显示和隐藏的来源 fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发`,
name: 'onVisibleChange',
propType: 'func',
},
{
description: '弹层自定义样式',
name: 'popupStyle',
propType: 'object',
},
{
description: '弹层自定义样式类',
name: 'popupClassName',
propType: 'string',
},
{
description: '弹层属性',
name: 'popupProps',
propType: 'object',
},
{
description: '是否跟随滚动',
name: 'followTrigger',
propType: 'bool',
},
{
defaultValue: false,
description: '是否禁用',
name: 'disabled',
propType: 'bool',
},
{
description: '是否为预览态',
name: 'isPreview',
propType: 'bool',
},
{
description: `预览态模式下渲染的内容␊
@param {MomentObject} value 时间`,
name: 'renderPreview',
propType: 'func',
},
{
description: `时间值改变时的回调␊
@param {Object|String} value 时间对象或时间字符串`,
name: 'onChange',
propType: 'func',
},
{
name: 'className',
propType: 'string',
},
{
name: 'name',
propType: 'string',
},
{
name: 'inputProps',
propType: 'object',
},
{
name: 'popupComponent',
propType: 'elementType',
},
{
name: 'popupContent',
propType: 'node',
},
{
name: 'locale',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Timeline',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Timeline',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
description: '样式的品牌前缀',
name: 'prefix',
propType: 'string',
},
{
defaultValue: false,
name: 'rtl',
propType: 'bool',
},
{
defaultValue: [],
description: '自定义折叠选项 示例`[{foldArea: [startIndex, endIndex], foldShow: boolean}]`',
name: 'fold',
propType: 'array',
},
{
description: '自定义类名',
name: 'className',
propType: 'string',
},
{
name: 'children',
propType: 'any',
},
{
name: 'locale',
propType: 'object',
},
{
defaultValue: true,
name: 'animation',
propType: 'bool',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Transfer',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Transfer',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
defaultValue: false,
name: 'pure',
propType: 'bool',
},
{
name: 'rtl',
propType: 'bool',
},
{
name: 'className',
propType: 'string',
},
{
defaultValue: 'normal',
description: '移动选项模式',
name: 'mode',
propType: {
type: 'oneOf',
value: [
'normal',
'simple',
],
},
},
{
defaultValue: [],
description: '数据源',
name: 'dataSource',
propType: {
type: 'arrayOf',
value: 'object',
},
},
{
description: '（用于受控）当前值',
name: 'value',
propType: {
type: 'arrayOf',
value: 'string',
},
},
{
defaultValue: [],
description: '（用于非受控）初始值',
name: 'defaultValue',
propType: {
type: 'arrayOf',
value: 'string',
},
},
{
description: `值发生改变的时候触发的回调函数␊
@param {Array} value 右面板值␊
@param {Array} data 右面板数据␊
@param {Object} extra 额外参数␊
@param {Array} extra.leftValue 左面板值␊
@param {Array} extra.leftData 左面板数据␊
@param {Array} extra.movedValue 发生移动的值␊
@param {Object} extra.movedData 发生移动的数据␊
@param {String} extra.direction 移动的方向，值为'left'或'right'`,
name: 'onChange',
propType: 'func',
},
{
defaultValue: false,
description: '是否禁用',
name: 'disabled',
propType: 'bool',
},
{
defaultValue: false,
description: '是否禁用左侧面板',
name: 'leftDisabled',
propType: 'bool',
},
{
defaultValue: false,
description: '是否禁用右侧面板',
name: 'rightDisabled',
propType: 'bool',
},
{
defaultValue: Function {},
description: `列表项渲染函数␊
@param {Object} data 数据␊
@return {ReactNode} 列表项内容`,
name: 'itemRender',
propType: 'func',
},
{
defaultValue: false,
description: '是否显示搜索框',
name: 'showSearch',
propType: 'bool',
},
{
defaultValue: Function {},
description: `自定义搜索函数␊
@param {String} searchedValue 搜索的内容␊
@param {Object} data 数据␊
@return {Boolean} 是否匹配到␊
@default 根据 label 属性匹配`,
name: 'filter',
propType: 'func',
},
{
defaultValue: Function {},
description: `搜索框输入时触发的回调函数␊
@param {String} searchedValue 搜索的内容␊
@param {String} position 搜索面板的位置`,
name: 'onSearch',
propType: 'func',
},
{
description: '搜索框占位符',
name: 'searchPlaceholder',
propType: 'string',
},
{
defaultValue: 'Not Found',
description: '列表为空显示内容',
name: 'notFoundContent',
propType: 'node',
},
{
defaultValue: [],
description: '左右面板标题',
name: 'titles',
propType: {
type: 'arrayOf',
value: 'node',
},
},
{
defaultValue: [],
description: `向右向左移动按钮显示内容␊
@default [<Icon type="arrow-right" />, <Icon type="arrow-left" />]`,
name: 'operations',
propType: {
type: 'arrayOf',
value: 'node',
},
},
{
defaultValue: [],
description: '左面板默认选中值',
name: 'defaultLeftChecked',
propType: {
type: 'arrayOf',
value: 'string',
},
},
{
defaultValue: [],
description: '右面板默认选中值',
name: 'defaultRightChecked',
propType: {
type: 'arrayOf',
value: 'string',
},
},
{
description: '左右面板列表自定义样式类名',
name: 'listClassName',
propType: 'string',
},
{
description: '左右面板列表自定义样式对象',
name: 'listStyle',
propType: 'object',
},
{
defaultValue: false,
description: '是否允许拖拽排序',
name: 'sortable',
propType: 'bool',
},
{
defaultValue: Function {},
description: `拖拽排序时触发的回调函数␊
@param {Array} value 排序后的值␊
@param {String} position 拖拽的面板位置，值为：left 或 right`,
name: 'onSort',
propType: 'func',
},
{
description: '自定义国际化文案对象',
name: 'locale',
propType: 'object',
},
{
description: '请设置 id 以保证transfer的可访问性',
name: 'id',
propType: 'string',
},
{
description: '接收 children 自定义渲染列表',
name: 'children',
propType: 'func',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Tree',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Tree',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
defaultValue: false,
name: 'rtl',
propType: 'bool',
},
{
defaultValue: false,
name: 'pure',
propType: 'bool',
},
{
name: 'className',
propType: 'string',
},
{
description: '树节点',
name: 'children',
propType: 'node',
},
{
description: '数据源，该属性优先级高于 children',
name: 'dataSource',
propType: 'array',
},
{
defaultValue: false,
description: '是否显示树的线',
name: 'showLine',
propType: 'bool',
},
{
defaultValue: true,
description: '是否支持选中节点',
name: 'selectable',
propType: 'bool',
},
{
description: '（用于受控）当前选中节点 key 的数组',
name: 'selectedKeys',
propType: {
type: 'arrayOf',
value: 'string',
},
},
{
defaultValue: [],
description: '（用于非受控）默认选中节点 key 的数组',
name: 'defaultSelectedKeys',
propType: {
type: 'arrayOf',
value: 'string',
},
},
{
description: `选中或取消选中节点时触发的回调函数␊
@param {Array} selectedKeys 选中节点key的数组␊
@param {Object} extra 额外参数␊
@param {Array} extra.selectedNodes 选中节点的数组␊
@param {Object} extra.node 当前操作的节点␊
@param {Boolean} extra.selected 当前操作是否是选中`,
name: 'onSelect',
propType: 'func',
},
{
defaultValue: false,
description: '是否支持多选',
name: 'multiple',
propType: 'bool',
},
{
defaultValue: false,
description: '是否支持勾选节点的复选框',
name: 'checkable',
propType: 'bool',
},
{
description: '（用于受控）当前勾选复选框节点 key 的数组或 `{checked: Array, indeterminate: Array}` 的对象',
name: 'checkedKeys',
propType: {
type: 'oneOfType',
value: [
{
type: 'arrayOf',
value: 'string',
},
'object',
],
},
},
{
defaultValue: [],
description: '（用于非受控）默认勾选复选框节点 key 的数组',
name: 'defaultCheckedKeys',
propType: {
type: 'arrayOf',
value: 'string',
},
},
{
defaultValue: false,
description: '勾选节点复选框是否完全受控（父子节点选中状态不再关联）',
name: 'checkStrictly',
propType: 'bool',
},
{
defaultValue: 'all',
description: `定义选中时回填的方式␊
@enumdesc 返回所有选中的节点, 父子节点都选中时只返回父节点, 父子节点都选中时只返回子节点`,
name: 'checkedStrategy',
propType: {
type: 'oneOf',
value: [
'all',
'parent',
'child',
],
},
},
{
description: `勾选或取消勾选复选框时触发的回调函数␊
@param {Array} checkedKeys 勾选复选框节点key的数组␊
@param {Object} extra 额外参数␊
@param {Array} extra.checkedNodes 勾选复选框节点的数组␊
@param {Array} extra.checkedNodesPositions 包含有勾选复选框节点和其位置的对象的数组␊
@param {Array} extra.indeterminateKeys 半选复选框节点 key 的数组␊
@param {Object} extra.node 当前操作的节点␊
@param {Boolean} extra.checked 当前操作是否是勾选`,
name: 'onCheck',
propType: 'func',
},
{
description: '（用于受控）当前展开的节点 key 的数组',
name: 'expandedKeys',
propType: {
type: 'arrayOf',
value: 'string',
},
},
{
defaultValue: [],
description: '（用于非受控）默认展开的节点 key 的数组',
name: 'defaultExpandedKeys',
propType: {
type: 'arrayOf',
value: 'string',
},
},
{
defaultValue: false,
description: '是否默认展开所有节点',
name: 'defaultExpandAll',
propType: 'bool',
},
{
defaultValue: true,
description: '是否自动展开父节点，建议受控时设置为false',
name: 'autoExpandParent',
propType: 'bool',
},
{
description: `展开或收起节点时触发的回调函数␊
@param {Array} expandedKeys 展开的节点key的数组␊
@param {Object} extra 额外参数␊
@param {Object} extra.node 当前操作的节点␊
@param {Boolean} extra.expanded 当前操作是否是展开`,
name: 'onExpand',
propType: 'func',
},
{
defaultValue: false,
description: '是否支持编辑节点内容',
name: 'editable',
propType: 'bool',
},
{
description: `编辑节点内容完成时触发的回调函数␊
@param {String} key 编辑节点的 key␊
@param {String} label 编辑节点完成时节点的文本␊
@param {Object} node 当前编辑的节点`,
name: 'onEditFinish',
propType: 'func',
},
{
defaultValue: false,
description: '是否支持拖拽节点',
name: 'draggable',
propType: 'bool',
},
{
description: `开始拖拽节点时触发的回调函数␊
@param {Object} info 拖拽信息␊
@param {Object} info.event 事件对象␊
@param {Object} info.node 拖拽的节点`,
name: 'onDragStart',
propType: 'func',
},
{
description: `拖拽节点进入目标节点时触发的回调函数␊
@param {Object} info 拖拽信息␊
@param {Object} info.event 事件对象␊
@param {Object} info.node 目标节点␊
@param {Array} info.expandedKeys 当前展开的节点key的数组`,
name: 'onDragEnter',
propType: 'func',
},
{
description: `拖拽节点在目标节点上移动的时候触发的回调函数␊
@param {Object} info 拖拽信息␊
@param {Object} info.event 事件对象␊
@param {Object} info.node 目标节点`,
name: 'onDragOver',
propType: 'func',
},
{
description: `拖拽节点离开目标节点时触发的回调函数␊
@param {Object} info 拖拽信息␊
@param {Object} info.event 事件对象␊
@param {Object} info.node 目标节点`,
name: 'onDragLeave',
propType: 'func',
},
{
description: `拖拽节点拖拽结束时触发的回调函数␊
@param {Object} info 拖拽信息␊
@param {Object} info.event 事件对象␊
@param {Object} info.node 目标节点`,
name: 'onDragEnd',
propType: 'func',
},
{
description: `拖拽节点放入目标节点内或前后触发的回调函数␊
@param {Object} info 拖拽信息␊
@param {Object} info.event 事件对象␊
@param {Object} info.node 目标节点␊
@param {Object} info.dragNode 拖拽的节点␊
@param {Array} info.dragNodesKeys 拖拽的节点和其子节点 key 的数组␊
@param {Number} info.dropPosition 放置位置，-1代表当前节点前，0代表当前节点里，1代表当前节点后`,
name: 'onDrop',
propType: 'func',
},
{
defaultValue: Function {},
description: `节点是否可被作为拖拽的目标节点␊
@param {Object} info 拖拽信息␊
@param {Object} info.node 目标节点␊
@param {Object} info.dragNode 拖拽的节点␊
@param {Array} info.dragNodesKeys 拖拽的节点和其子节点 key 的数组␊
@param {Number} info.dropPosition 放置位置，-1代表当前节点前，0代表当前节点里，1代表当前节点后␊
@return {Boolean} 是否可以被当作目标节点`,
name: 'canDrop',
propType: 'func',
},
{
description: `异步加载数据的函数␊
@param {Object} node 被点击展开的节点`,
name: 'loadData',
propType: 'func',
},
{
description: `按需筛选高亮节点␊
@param {Object} node 待筛选的节点␊
@return {Boolean} 是否被筛选中`,
name: 'filterTreeNode',
propType: 'func',
},
{
description: `右键点击节点时触发的回调函数␊
@param {Object} info 信息对象␊
@param {Object} info.event 事件对象␊
@param {Object} info.node 点击的节点`,
name: 'onRightClick',
propType: 'func',
},
{
defaultValue: false,
description: '设置节点是否占满剩余空间，一般用于统一在各节点右侧添加元素(借助 flex 实现，暂时只支持 ie10+)',
name: 'isLabelBlock',
propType: 'bool',
},
{
defaultValue: false,
description: '设置节点是否占满一行',
name: 'isNodeBlock',
propType: {
type: 'oneOfType',
value: [
'bool',
'object',
],
},
},
{
defaultValue: true,
description: '是否开启展开收起动画',
name: 'animation',
propType: 'bool',
},
{
description: '当前获得焦点的子菜单或菜单项 key 值',
name: 'focusedKey',
propType: 'string',
},
{
description: `渲染子节点␊
@param {Array<ReactNode>} nodes 所有的子节点␊
@return {ReactNode} 返回节点`,
name: 'renderChildNodes',
propType: 'func',
},
{
defaultValue: true,
name: 'focusable',
propType: 'bool',
},
{
defaultValue: false,
name: 'autoFocus',
propType: 'bool',
},
{
name: 'onItemFocus',
propType: 'func',
},
{
name: 'onBlur',
propType: 'func',
},
{
name: 'onItemKeyDown',
propType: 'func',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'TreeSelect',
docUrl: '',
npm: {
destructuring: false,
exportName: 'TreeSelect',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
defaultValue: false,
name: 'pure',
propType: 'bool',
},
{
name: 'className',
propType: 'string',
},
{
description: '树节点',
name: 'children',
propType: 'node',
},
{
defaultValue: 'medium',
description: '选择框大小',
name: 'size',
propType: {
type: 'oneOf',
value: [
'small',
'medium',
'large',
],
},
},
{
description: '选择框占位符',
name: 'placeholder',
propType: 'string',
},
{
defaultValue: false,
description: '是否禁用',
name: 'disabled',
propType: 'bool',
},
{
defaultValue: true,
description: '是否有下拉箭头',
name: 'hasArrow',
propType: 'bool',
},
{
defaultValue: true,
description: '是否有边框',
name: 'hasBorder',
propType: 'bool',
},
{
defaultValue: false,
description: '是否有清空按钮',
name: 'hasClear',
propType: 'bool',
},
{
description: '自定义内联 label',
name: 'label',
propType: 'node',
},
{
description: '是否只读，只读模式下可以展开弹层但不能选择',
name: 'readOnly',
propType: 'bool',
},
{
defaultValue: true,
description: '下拉框是否与选择器对齐',
name: 'autoWidth',
propType: 'bool',
},
{
description: '数据源，该属性优先级高于 children',
name: 'dataSource',
propType: {
type: 'arrayOf',
value: 'object',
},
},
{
description: '（受控）当前值',
name: 'value',
propType: {
type: 'oneOfType',
value: [
'string',
{
type: 'arrayOf',
value: 'string',
},
],
},
},
{
defaultValue: null,
description: '（非受控）默认值',
name: 'defaultValue',
propType: {
type: 'oneOfType',
value: [
'string',
{
type: 'arrayOf',
value: 'string',
},
],
},
},
{
defaultValue: Function {},
description: `选中值改变时触发的回调函数␊
@param {String|Array} value 选中的值，单选时返回单个值，多选时返回数组␊
@param {Object|Array} data 选中的数据，包括 value, label, pos, key属性，单选时返回单个值，多选时返回数组，父子节点选中关联时，同时选中，只返回父节点`,
name: 'onChange',
propType: 'func',
},
{
defaultValue: false,
description: '是否显示搜索框',
name: 'showSearch',
propType: 'bool',
},
{
defaultValue: Function {},
description: `在搜索框中输入时触发的回调函数␊
@param {String} keyword 输入的关键字`,
name: 'onSearch',
propType: 'func',
},
{
defaultValue: Function {},
name: 'onSearchClear',
propType: 'func',
},
{
defaultValue: 'Not Found',
description: '无数据时显示内容',
name: 'notFoundContent',
propType: 'node',
},
{
defaultValue: false,
description: '是否支持多选',
name: 'multiple',
propType: 'bool',
},
{
defaultValue: false,
description: '下拉框中的树是否支持勾选节点的复选框',
name: 'treeCheckable',
propType: 'bool',
},
{
defaultValue: false,
description: '下拉框中的树勾选节点复选框是否完全受控（父子节点选中状态不再关联）',
name: 'treeCheckStrictly',
propType: 'bool',
},
{
defaultValue: 'parent',
description: `定义选中时回填的方式␊
@enumdesc 返回所有选中的节点, 父子节点都选中时只返回父节点, 父子节点都选中时只返回子节点`,
name: 'treeCheckedStrategy',
propType: {
type: 'oneOf',
value: [
'all',
'parent',
'child',
],
},
},
{
defaultValue: false,
description: '下拉框中的树是否默认展开所有节点',
name: 'treeDefaultExpandAll',
propType: 'bool',
},
{
defaultValue: [],
description: '下拉框中的树默认展开节点key的数组',
name: 'treeDefaultExpandedKeys',
propType: {
type: 'arrayOf',
value: 'string',
},
},
{
description: `下拉框中的树异步加载数据的函数，使用请参考[Tree的异步加载数据Demo](https://fusion.design/component/tree)␊
@param {ReactElement} node 被点击展开的节点`,
name: 'treeLoadData',
propType: 'func',
},
{
defaultValue: undefined,
description: '透传到 Tree 的属性对象',
name: 'treeProps',
propType: 'object',
},
{
defaultValue: false,
description: '初始下拉框是否显示',
name: 'defaultVisible',
propType: 'bool',
},
{
description: '当前下拉框是否显示',
name: 'visible',
propType: 'bool',
},
{
defaultValue: Function {},
description: `下拉框显示或关闭时触发事件的回调函数␊
@param {Boolean} visible 是否显示␊
@param {String} type 触发显示关闭的操作类型`,
name: 'onVisibleChange',
propType: 'func',
},
{
description: '下拉框自定义样式对象',
name: 'popupStyle',
propType: 'object',
},
{
description: '下拉框样式自定义类名',
name: 'popupClassName',
propType: 'string',
},
{
description: '下拉框挂载的容器节点',
name: 'popupContainer',
propType: 'any',
},
{
description: '透传到 Popup 的属性对象',
name: 'popupProps',
propType: 'object',
},
{
description: '是否跟随滚动',
name: 'followTrigger',
propType: 'bool',
},
{
description: '是否为预览态',
name: 'isPreview',
propType: 'bool',
},
{
description: `预览态模式下渲染的内容␊
@param {Array<data>} value 选择值 { label: , value:}`,
name: 'renderPreview',
propType: 'func',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Typography',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Typography',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'article',
description: '设置标签类型',
name: 'component',
propType: 'elementType',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Upload',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Upload',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
description: '样式前缀',
name: 'prefix',
propType: 'string',
},
{
description: '上传的地址',
name: 'action',
propType: 'string',
},
{
description: '文件列表',
name: 'value',
propType: 'array',
},
{
description: '默认文件列表',
name: 'defaultValue',
propType: 'array',
},
{
description: '上传按钮形状',
name: 'shape',
propType: {
type: 'oneOf',
value: [
'card',
],
},
},
{
description: `上传列表的样式␊
@enumdesc 文字, 图文, 卡片`,
name: 'listType',
propType: {
type: 'oneOf',
value: [
'text',
'image',
'card',
],
},
},
{
name: 'list',
propType: 'any',
},
{
description: '文件名字段',
name: 'name',
propType: 'string',
},
{
description: '上传额外传参',
name: 'data',
propType: {
type: 'oneOfType',
value: [
'object',
'func',
],
},
},
{
description: `数据格式化函数，配合自定义 action 使用，参数为服务器的响应数据，详见 [formatter](#formater)␊
@param {Object} response 返回␊
@param {File} file 文件对象`,
name: 'formatter',
propType: 'func',
},
{
defaultValue: Infinity,
description: '最大文件上传个数',
name: 'limit',
propType: 'number',
},
{
description: '设置上传超时,单位ms',
name: 'timeout',
propType: 'number',
},
{
description: '可选参数，是否支持拖拽上传，`ie10+` 支持。',
name: 'dragable',
propType: 'bool',
},
{
defaultValue: true,
name: 'closable',
propType: 'bool',
},
{
description: '可选参数，是否本地预览',
name: 'useDataURL',
propType: 'bool',
},
{
description: '可选参数，是否禁用上传功能',
name: 'disabled',
propType: 'bool',
},
{
description: '选择文件回调',
name: 'onSelect',
propType: 'func',
},
{
description: '上传中',
name: 'onProgress',
propType: 'func',
},
{
description: `上传文件改变时的状态␊
@param {Object} info 文件事件对象`,
name: 'onChange',
propType: 'func',
},
{
description: `可选参数，上传成功回调函数，参数为请求下响应信息以及文件␊
@param {Object} file 文件␊
@param {Array<Object>} value 值`,
name: 'onSuccess',
propType: 'func',
},
{
description: `可选参数, 用于校验文件,afterSelect仅在 autoUpload=false 的时候生效,autoUpload=true时,可以使用beforeUpload完全可以替代该功能.␊
@param {Object} file␊
@returns {Boolean} 返回false会阻止上传,其他则表示正常`,
name: 'afterSelect',
propType: 'func',
},
{
description: `移除文件回调函数␊
@param {Object} file 文件␊
@returns {Boolean|Promise} 返回 false、Promise.resolve(false)、 Promise.reject() 将阻止文件删除`,
name: 'onRemove',
propType: 'func',
},
{
description: `可选参数，上传失败回调函数，参数为上传失败的信息、响应信息以及文件␊
@param {Object} file 出错的文件␊
@param {Array} value 当前值`,
name: 'onError',
propType: 'func',
},
{
description: `可选参数, 详见 [beforeUpload](#beforeUpload)␊
@param {Object} file 所有文件␊
@param {Object} options 参数␊
@returns {Boolean|Object|Promise} 返回值作用见demo`,
name: 'beforeUpload',
propType: 'func',
},
{
description: '放文件',
name: 'onDrop',
propType: 'func',
},
{
description: '自定义class',
name: 'className',
propType: 'string',
},
{
description: '自定义内联样式',
name: 'style',
propType: 'object',
},
{
description: '子元素',
name: 'children',
propType: 'node',
},
{
defaultValue: true,
description: '自动上传',
name: 'autoUpload',
propType: 'bool',
},
{
description: `自定义上传方法␊
@param {Object} option␊
@return {Object} object with abort method`,
name: 'request',
propType: 'func',
},
{
description: '透传给Progress props',
name: 'progressProps',
propType: 'object',
},
{
name: 'rtl',
propType: 'bool',
},
{
description: '是否为预览态',
name: 'isPreview',
propType: 'bool',
},
{
description: `预览态模式下渲染的内容␊
@param {number} value 评分值`,
name: 'renderPreview',
propType: 'func',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'VirtualList',
docUrl: '',
npm: {
destructuring: false,
exportName: 'VirtualList',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
description: '渲染的子节点',
name: 'children',
propType: 'any',
},
{
defaultValue: 1,
description: '最小加载数量',
name: 'minSize',
propType: 'number',
},
{
defaultValue: 10,
description: '一屏数量',
name: 'pageSize',
propType: 'number',
},
{
description: '父渲染函数，默认为 (items, ref) => <ul ref={ref}>{items}</ul>',
name: 'itemsRenderer',
propType: 'func',
},
{
defaultValue: 100,
description: '缓冲区高度',
name: 'threshold',
propType: 'number',
},
{
description: '获取item高度的函数',
name: 'itemSizeGetter',
propType: 'func',
},
{
defaultValue: 0,
description: '设置跳转位置，需要设置 itemSizeGetter 才能生效, 不设置认为元素等高并取第一个元素高度作为默认高',
name: 'jumpIndex',
propType: 'number',
},
{
name: 'className',
propType: 'string',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Divider',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Divider',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
name: 'children',
propType: 'any',
},
{
name: 'className',
propType: 'string',
},
{
defaultValue: false,
description: '是否为虚线',
name: 'dashed',
propType: 'bool',
},
{
defaultValue: 'hoz',
description: '线是水平还是垂直类型',
name: 'direction',
propType: {
type: 'oneOf',
value: [
'hoz',
'ver',
],
},
},
{
defaultValue: 'center',
description: '分割线标题的位置',
name: 'orientation',
propType: {
type: 'oneOf',
value: [
'left',
'right',
'center',
],
},
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Avatar',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Avatar',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
name: 'children',
propType: 'any',
},
{
name: 'className',
propType: 'string',
},
{
defaultValue: 'medium',
description: '头像的大小',
name: 'size',
propType: {
type: 'oneOfType',
value: [
{
type: 'oneOf',
value: [
'small',
'medium',
'large',
],
},
'number',
],
},
},
{
defaultValue: 'circle',
description: '头像的形状',
name: 'shape',
propType: {
type: 'oneOf',
value: [
'circle',
'square',
],
},
},
{
description: 'icon 类头像的图标类型，可设为 Icon 的 `type` 或 `ReactNode`',
name: 'icon',
propType: {
type: 'oneOfType',
value: [
'node',
'string',
],
},
},
{
description: '图片类头像的资源地址',
name: 'src',
propType: 'string',
},
{
description: '图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为',
name: 'onError',
propType: 'func',
},
{
description: '图像无法显示时的 alt 替代文本',
name: 'alt',
propType: 'string',
},
{
description: '图片类头像响应式资源地址',
name: 'srcSet',
propType: 'string',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'ResponsiveGrid',
docUrl: '',
npm: {
destructuring: false,
exportName: 'ResponsiveGrid',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
name: 'className',
propType: 'any',
},
{
defaultValue: 'desktop',
description: `设备，用来做自适应，默认为 PC␊
@enumdesc 手机, 平板, PC`,
name: 'device',
propType: {
type: 'oneOf',
value: [
'phone',
'tablet',
'desktop',
],
},
},
{
name: 'rows',
propType: {
type: 'oneOfType',
value: [
'number',
'string',
],
},
},
{
description: '分为几列， 默认是 12 列',
name: 'columns',
propType: {
type: 'oneOfType',
value: [
'number',
'string',
],
},
},
{
description: '每个 cell 之间的间距， [bottom&top, right&left]',
name: 'gap',
propType: {
type: 'oneOfType',
value: [
{
type: 'arrayOf',
value: 'number',
},
'number',
],
},
},
{
defaultValue: 'div',
description: '设置标签类型',
name: 'component',
propType: 'elementType',
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'Box',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Box',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
name: 'style',
propType: 'object',
},
{
name: 'className',
propType: 'any',
},
{
description: '布局属性',
name: 'flex',
propType: {
type: 'oneOfType',
value: [
{
type: 'arrayOf',
value: {
type: 'oneOfType',
value: [
'number',
'string',
],
},
},
'number',
],
},
},
{
defaultValue: 'column',
description: `布局方向，默认为 column ，一个元素占据一整行␊
@default column`,
name: 'direction',
propType: {
type: 'oneOf',
value: [
'row',
'column',
],
},
},
{
defaultValue: false,
description: '是否折行',
name: 'wrap',
propType: 'bool',
},
{
description: '元素之间的间距 [bottom&top, right&left]',
name: 'spacing',
propType: {
type: 'oneOfType',
value: [
{
type: 'arrayOf',
value: 'number',
},
'number',
],
},
},
{
description: '设置 margin [bottom&top, right&left]',
name: 'margin',
propType: {
type: 'oneOfType',
value: [
{
type: 'arrayOf',
value: 'number',
},
'number',
],
},
},
{
description: '设置 padding [bottom&top, right&left]',
name: 'padding',
propType: {
type: 'oneOfType',
value: [
{
type: 'arrayOf',
value: 'number',
},
'number',
],
},
},
{
description: '沿着主轴方向，子元素们的排布关系 （兼容性同 justify-content ）',
name: 'justify',
propType: {
type: 'oneOf',
value: [
'flex-start',
'center',
'flex-end',
'space-between',
'space-around',
],
},
},
{
description: '垂直主轴方向，子元素们的排布关系 （兼容性同 align-items ）',
name: 'align',
propType: {
type: 'oneOf',
value: [
'flex-start',
'center',
'flex-end',
'baseline',
'stretch',
],
},
},
{
name: 'device',
propType: {
type: 'oneOf',
value: [
'phone',
'tablet',
'desktop',
],
},
},
],
screenshot: '',
title: '@alifd/next',
},
{
componentName: 'List',
docUrl: '',
npm: {
destructuring: false,
exportName: 'List',
main: 'src/index.js',
package: '@alifd/next',
subName: '',
version: '1.19.18',
},
props: [
{
defaultValue: 'next-',
name: 'prefix',
propType: 'string',
},
{
defaultValue: false,
name: 'rtl',
propType: 'bool',
},
{
description: '列表头部',
name: 'header',
propType: 'node',
},
{
description: '列表尾部',
name: 'footer',
propType: 'node',
},
{
defaultValue: 'medium',
description: '列表尺寸',
name: 'size',
propType: {
type: 'oneOf',
value: [
'medium',
'small',
],
},
},
{
defaultValue: true,
description: '是否显示分割线',
name: 'divider',
propType: 'bool',
},
{
name: 'className',
propType: 'string',
},
{
name: 'children',
propType: 'any',
},
],
screenshot: '',
title: '@alifd/next',
},
]
materialize @ali/lowcode-editor-skeleton by online
Snapshot 1
[
{
componentName: 'LowcodePanel',
docUrl: '',
npm: {
destructuring: false,
exportName: 'LowcodePanel',
main: 'es/index.js',
package: '@ali/lowcode-editor-skeleton',
subName: '',
version: '0.8.5',
},
props: [
{
defaultValue: 'left',
name: 'align',
},
{
defaultValue: 240,
name: 'defaultWidth',
},
{
defaultValue: 100,
name: 'minWidth',
},
{
defaultValue: true,
name: 'draggable',
},
{
defaultValue: false,
name: 'floatable',
},
{
defaultValue: true,
name: 'visible',
},
],
screenshot: '',
title: '@ali/lowcode-editor-skeleton',
},
{
componentName: 'LowcodeTopIcon',
docUrl: '',
npm: {
destructuring: false,
exportName: 'LowcodeTopIcon',
main: 'es/index.js',
package: '@ali/lowcode-editor-skeleton',
subName: '',
version: '0.8.5',
},
props: [
{
defaultValue: false,
name: 'active',
},
{
defaultValue: '',
name: 'className',
},
{
defaultValue: false,
name: 'disabled',
},
{
defaultValue: '',
name: 'icon',
},
{
defaultValue: '',
name: 'id',
},
{
defaultValue: false,
name: 'locked',
},
{
defaultValue: undefined,
name: 'onClick',
},
{
defaultValue: undefined,
name: 'style',
},
{
defaultValue: '',
name: 'title',
},
],
screenshot: '',
title: '@ali/lowcode-editor-skeleton',
},
]
materialize multiple exported component by local
Snapshot 1
[
{
componentName: 'AIMakeBlank',
docUrl: '',
npm: {
destructuring: false,
exportName: 'AIMakeBlank',
main: 'es/index.js',
package: 'multiple-exported-component',
subName: '',
version: '1.0.0',
},
props: [
{
name: 'children',
propType: {
type: 'oneOfType',
value: [
{
type: 'arrayOf',
value: 'node',
},
'node',
],
},
},
{
name: 'styleBoxModel',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'styleLayout',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'styleBackground',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'styleFlexLayout',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'style',
propType: 'object',
},
{
name: 'id',
propType: 'string',
},
],
screenshot: '',
title: 'multiple-exported-component',
},
{
componentName: 'AIMakeIcon',
docUrl: '',
npm: {
destructuring: false,
exportName: 'AIMakeIcon',
main: 'es/index.js',
package: 'multiple-exported-component',
subName: '',
version: '1.0.0',
},
props: [
{
name: 'className',
propType: 'string',
},
{
name: 'iconClassName',
propType: 'string',
},
{
name: 'children',
propType: {
type: 'oneOfType',
value: [
{
type: 'arrayOf',
value: 'node',
},
'node',
],
},
},
{
name: 'styleBoxModel',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'styleText',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'styleBackground',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'style',
propType: 'object',
},
],
screenshot: '',
title: 'multiple-exported-component',
},
{
componentName: 'AIMakeImage',
docUrl: '',
npm: {
destructuring: false,
exportName: 'AIMakeImage',
main: 'es/index.js',
package: 'multiple-exported-component',
subName: '',
version: '1.0.0',
},
props: [
{
name: 'styleBoxModel',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'style',
propType: 'object',
},
],
screenshot: '',
title: 'multiple-exported-component',
},
{
componentName: 'AIMakeLink',
docUrl: '',
npm: {
destructuring: false,
exportName: 'AIMakeLink',
main: 'es/index.js',
package: 'multiple-exported-component',
subName: '',
version: '1.0.0',
},
props: [
{
name: 'children',
propType: {
type: 'oneOfType',
value: [
{
type: 'arrayOf',
value: 'node',
},
'node',
],
},
},
{
name: 'styleBoxModel',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'styleText',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'styleLayout',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'styleBackground',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'style',
propType: 'object',
},
],
screenshot: '',
title: 'multiple-exported-component',
},
{
componentName: 'AIMakePlaceholder',
docUrl: '',
npm: {
destructuring: false,
exportName: 'AIMakePlaceholder',
main: 'es/index.js',
package: 'multiple-exported-component',
subName: '',
version: '1.0.0',
},
props: [
{
name: 'children',
propType: {
type: 'oneOfType',
value: [
{
type: 'arrayOf',
value: 'node',
},
'node',
],
},
},
{
name: 'styleBoxModel',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'styleLayout',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'style',
propType: 'object',
},
],
screenshot: '',
title: 'multiple-exported-component',
},
{
componentName: 'AIMakeText',
docUrl: '',
npm: {
destructuring: false,
exportName: 'AIMakeText',
main: 'es/index.js',
package: 'multiple-exported-component',
subName: '',
version: '1.0.0',
},
props: [
{
name: 'children',
propType: {
type: 'oneOfType',
value: [
{
type: 'arrayOf',
value: 'node',
},
'node',
'string',
],
},
},
{
name: 'type',
propType: 'string',
},
{
name: 'styleBoxModel',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'styleText',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'styleLayout',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'styleBackground',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'style',
propType: 'object',
},
],
screenshot: '',
title: 'multiple-exported-component',
},
{
componentName: 'Root',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Root',
main: 'es/index.js',
package: 'multiple-exported-component',
subName: '',
version: '1.0.0',
},
props: [
{
name: 'style',
propType: 'object',
},
{
name: 'children',
propType: {
type: 'oneOfType',
value: [
'element',
{
type: 'arrayOf',
value: 'element',
},
],
},
},
],
screenshot: '',
title: 'multiple-exported-component',
},
]
materialize multiple exported component by online
Snapshot 1
[
{
componentName: 'AIMakeBlank',
docUrl: '',
npm: {
destructuring: false,
exportName: 'AIMakeBlank',
main: 'es/index.js',
package: '@ali/aimake-basic',
subName: '',
version: '0.1.0',
},
props: [
{
name: 'children',
propType: {
type: 'oneOfType',
value: [
{
type: 'arrayOf',
value: 'node',
},
'node',
],
},
},
{
name: 'styleBoxModel',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'styleLayout',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'styleBackground',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'styleFlexLayout',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'style',
propType: 'object',
},
{
name: 'id',
propType: 'string',
},
],
screenshot: '',
title: '@ali/aimake-basic',
},
{
componentName: 'AIMakeIcon',
docUrl: '',
npm: {
destructuring: false,
exportName: 'AIMakeIcon',
main: 'es/index.js',
package: '@ali/aimake-basic',
subName: '',
version: '0.1.0',
},
props: [
{
name: 'className',
propType: 'string',
},
{
name: 'iconClassName',
propType: 'string',
},
{
name: 'children',
propType: {
type: 'oneOfType',
value: [
{
type: 'arrayOf',
value: 'node',
},
'node',
],
},
},
{
name: 'styleBoxModel',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'styleText',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'styleBackground',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'style',
propType: 'object',
},
],
screenshot: '',
title: '@ali/aimake-basic',
},
{
componentName: 'AIMakeImage',
docUrl: '',
npm: {
destructuring: false,
exportName: 'AIMakeImage',
main: 'es/index.js',
package: '@ali/aimake-basic',
subName: '',
version: '0.1.0',
},
props: [
{
name: 'styleBoxModel',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'style',
propType: 'object',
},
],
screenshot: '',
title: '@ali/aimake-basic',
},
{
componentName: 'AIMakeLink',
docUrl: '',
npm: {
destructuring: false,
exportName: 'AIMakeLink',
main: 'es/index.js',
package: '@ali/aimake-basic',
subName: '',
version: '0.1.0',
},
props: [
{
name: 'children',
propType: {
type: 'oneOfType',
value: [
{
type: 'arrayOf',
value: 'node',
},
'node',
],
},
},
{
name: 'styleBoxModel',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'styleText',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'styleLayout',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'styleBackground',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'style',
propType: 'object',
},
],
screenshot: '',
title: '@ali/aimake-basic',
},
{
componentName: 'AIMakePlaceholder',
docUrl: '',
npm: {
destructuring: false,
exportName: 'AIMakePlaceholder',
main: 'es/index.js',
package: '@ali/aimake-basic',
subName: '',
version: '0.1.0',
},
props: [
{
name: 'children',
propType: {
type: 'oneOfType',
value: [
{
type: 'arrayOf',
value: 'node',
},
'node',
],
},
},
{
name: 'styleBoxModel',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'styleLayout',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'style',
propType: 'object',
},
],
screenshot: '',
title: '@ali/aimake-basic',
},
{
componentName: 'AIMakeText',
docUrl: '',
npm: {
destructuring: false,
exportName: 'AIMakeText',
main: 'es/index.js',
package: '@ali/aimake-basic',
subName: '',
version: '0.1.0',
},
props: [
{
name: 'children',
propType: {
type: 'oneOfType',
value: [
{
type: 'arrayOf',
value: 'node',
},
'node',
'string',
],
},
},
{
name: 'type',
propType: 'string',
},
{
name: 'styleBoxModel',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'styleText',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'styleLayout',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'styleBackground',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'style',
propType: 'object',
},
],
screenshot: '',
title: '@ali/aimake-basic',
},
{
componentName: 'Root',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Root',
main: 'es/index.js',
package: '@ali/aimake-basic',
subName: '',
version: '0.1.0',
},
props: [
{
name: 'style',
propType: 'object',
},
{
name: 'children',
propType: {
type: 'oneOfType',
value: [
'element',
{
type: 'arrayOf',
value: 'element',
},
],
},
},
],
screenshot: '',
title: '@ali/aimake-basic',
},
]
materialize single exported component by local
Snapshot 1
[
{
componentName: 'Demo',
docUrl: '',
npm: {
destructuring: false,
exportName: 'Demo',
main: 'es/index.js',
package: 'single-exported-component',
subName: '',
version: '1.0.0',
},
props: [
{
name: 'optionalArray',
propType: 'array',
},
{
name: 'optionalBool',
propType: 'bool',
},
{
name: 'optionalFunc',
propType: 'func',
},
{
defaultValue: 123,
name: 'optionalNumber',
propType: 'number',
},
{
name: 'optionalObject',
propType: 'object',
},
{
name: 'optionalString',
propType: 'string',
},
{
name: 'optionalSymbol',
propType: 'symbol',
},
{
name: 'optionalNode',
propType: 'node',
},
{
name: 'optionalElement',
propType: 'element',
},
{
name: 'optionalElementType',
propType: 'elementType',
},
{
name: 'optionalMessage',
propType: {
type: 'instanceOf',
value: 'Demo',
},
},
{
name: 'optionalEnum',
propType: {
type: 'oneOf',
value: [
'News',
'Photos',
],
},
},
{
name: 'optionalUnion',
propType: {
type: 'oneOfType',
value: [
'string',
'number',
{
type: 'instanceOf',
value: 'Demo',
},
],
},
},
{
name: 'optionalArrayOf',
propType: {
type: 'arrayOf',
value: 'number',
},
},
{
name: 'optionalObjectOf',
propType: {
type: 'objectOf',
value: 'number',
},
},
{
name: 'optionalObjectWithShape',
propType: {
type: 'shape',
value: [
{
name: 'optionalProperty',
propType: 'string',
},
{
name: 'requiredProperty',
propType: {
isRequired: true,
type: 'number',
},
},
],
},
},
{
name: 'optionalObjectWithShape2',
propType: {
isRequired: true,
type: 'shape',
value: [
{
name: 'optionalProperty',
propType: 'string',
},
{
name: 'requiredProperty',
propType: {
isRequired: true,
type: 'number',
},
},
],
},
},
{
name: 'optionalObjectWithStrictShape',
propType: {
type: 'exact',
value: [
{
name: 'optionalProperty',
propType: 'string',
},
{
name: 'requiredProperty',
propType: {
isRequired: true,
type: 'number',
},
},
],
},
},
{
name: 'requiredFunc',
propType: {
isRequired: true,
type: 'func',
},
},
{
name: 'requiredAny',
propType: {
isRequired: true,
type: 'any',
},
},
],
screenshot: '',
title: 'single-exported-component',
},
]
materialize single exported component by online
Snapshot 1
[]
ts component by local
Snapshot 1
[
{
componentName: 'App',
docUrl: '',
npm: {
destructuring: false,
exportName: 'App',
main: 'src/index.tsx',
package: 'ts-component',
subName: '',
version: '1.0.0',
},
props: [
{
name: 'str',
propType: 'string',
},
{
name: 'num',
propType: {
isRequired: true,
type: 'number',
},
},
{
name: 'any',
propType: {
isRequired: true,
type: 'any',
},
},
{
name: 'bool',
propType: {
isRequired: true,
type: 'bool',
},
},
{
name: 'tuple',
propType: {
isRequired: true,
type: 'oneOf',
value: [
1,
'str',
true,
],
},
},
{
name: 'enum',
propType: {
isRequired: true,
type: 'oneOfType',
value: [
'red',
'yellow',
'green',
],
},
},
{
name: 'arr',
propType: {
isRequired: true,
type: 'arrayOf',
},
},
{
name: 'obj',
propType: {
isRequired: true,
type: 'shape',
value: [
{
name: 'a',
propType: {
isRequired: true,
type: 'number',
},
},
],
},
},
{
name: 'objOf',
propType: {
isRequired: true,
type: 'objectOf',
value: 'number',
},
},
{
name: 'exact',
propType: {
isRequired: true,
type: 'shape',
value: [
{
name: 'a',
propType: {
isRequired: true,
type: 'number',
},
},
],
},
},
{
name: 'empty',
propType: {
isRequired: true,
type: 'object',
},
},
{
name: 'node',
propType: 'ReactReactNode',
},
{
name: 'element',
propType: 'JSX.Element',
},
{
name: 'elementType',
propType: 'ReactElementType',
},
{
name: 'instance',
propType: {
isRequired: true,
type: 'instanceOf',
value: 'Props',
},
},
],
screenshot: '',
title: 'ts-component',
},
]