components/antd/overview/README-zh_CN.md

概览

modelscope_studio集成了 Ant Design 的组件，并支持大部分的组件属性，您只需要引入antd模块即可直接使用。

import modelscope_studio.components.antd as antd

快速开始

注意：其中ms.Application与antd.ConfigProvider是必须的,ms.AutoLoading为可选。。

• Application 包含了modelscope_studio中所有的组件依赖，请确保modelscope_studio所有导出的组件都被其包裹，否则页面将会无法成功预览。
• ConfigProvider 与 Ant Design 中的功能一致，除此之外，我们还加了一些额外的适配来兼容 Gradio 的样式。因此，为了保证页面样式正常，所有的antd组件需要包裹在该组件下。
• AutoLoading会在Gradio前端发送请求时自动为被包裹的内容添加加载动画。该组件会自动收集子组件的加载状态，建议至少在全局使用一次此组件，以显示兜底的加载反馈。

属性限制

由于 Python 的类型限制，一些组件属性的支持形式有所不同。

事件

在antd中，所有以onXxx形式绑定的事件，均改为了gradio的事件绑定形式，如onClick、onChange等。如果您想要获取事件参数，也需要绑定gr.EventData，所有的事件参数都通过数组的形式保存在e._data["payload"]中。

ReactNode

在 Python 中无法直接将某个组件作为参数，因此我们提供了插槽机制，您可以使用ms.Slot来包裹需要被渲染的模块。

注：

• 您可以通过查看组件的SLOTS属性获取所有支持的插槽。

• 如果您只想渲染一段字符串或数字，您依然可以直接将其作为组件的属性传入，无需使用ms.Slot。下面两种写法效果是一样的，并且更推荐直接作为组件属性传入：

  antd.Card(title="Card Title")
  
  with antd.Card():
    ms.Slot("title"):
      ms.Text("Card Title")
  

普通函数（(...args) => {}）

为了支持在 Python 直接传入 Javascript 函数，我们将其改为了str类型。因此，您只需要传递普通的函数字符串即可，它会在前端被自动编译为 Javascript 函数。

我们在全局注入了事件通知对象，您可以通过在函数中调用window.ms_globals.dispatch来主动向 Python 端发送事件，在 Python 端可以通过ms.Application.custom事件接收。

返回 ReactNode 的函数 ((...args) => ReactNode)

当您的 Javascript 函数返回值为 ReactNode 时，我们提供了两种处理方式：

1. 将其当做普通的 ReactNode 值，继续使用ms.Slot来渲染模块，在此基础上，ms.Slot还支持传入params_mapping参数，该参数同样接收一个 Javascript 函数字符串，它可以将函数的参数映射为当前slot环境的上下文（具体请参考ms.Each）。

2. 将其当做普通函数，通过window.ms_globals.React与window.ms_globals.antd等全局变量在前端生成 ReactNode（注意此时不能使用 jsx，需要使用 React.createElement）。

集成其他 Gradio 组件

某些组件的插槽可能只支持modelscope_studio中的组件，如果您想要支持其他的 Gradio 组件，您需要使用Fragment来将其包裹。