SchemaInitializer 初始化器

当激活 UI 配置之后,界面上直观可见的各种橙色按钮就是 Schema 初始化器,用于向界面内添加各种卡片、字段、操作等。

向已有的初始化器里添加项

推荐使用 schemaInitializerManager.addItem() 方法添加项

1class PluginDemoAddSchemaInitializerItem extends Plugin {
2  async load() {
3    this.schemaInitializerManager.addItem(
4      'myInitializer', // 示例,已存在的 schema initializer
5      'otherBlocks.custom', // 向 otherBlocks 分组内添加 custom
6      {
7        type: 'item',
8        useComponentProps() {},
9      }
10    )
11  }
12}

添加新的初始化器

1const myInitializer = new SchemaInitializer({
2  // 初始化器标识,全局唯一
3  name: 'myInitializer',
4  title: 'Add Block',
5  // 包装,例如插入到 Grid 里,需要用 Grid.wrap 处理(添加行列标签)
6  wrap: Grid.wrap,
7  // 插入位置,默认为 beforeEnd,支持 'beforeBegin' | 'afterBegin' | 'beforeEnd' | 'afterEnd'
8  insertPosition: 'beforeEnd',
9  // 下拉菜单项
10  items: [
11    {
12      name: 'a',
13      type: 'item',
14      useComponentProps() {},
15    },
16  ],
17})

在插件的 load 方法中注册

推荐使用 schemaInitializerManager.add() 将新增的初始化器添加到应用里

1class PluginDemoAddSchemaInitializer extends Plugin {
2  async load() {
3    const myInitializer = new SchemaInitializer({
4      name: 'myInitializer',
5      title: 'Add block',
6      wrap: Grid.wrap,
7      items: [
8        {
9          name: 'helloBlock',
10          type: 'item',
11          useComponentProps() {
12            const { insert } = useSchemaInitializer()
13            return {
14              title: 'Hello',
15              onClick: () => {
16                insert({
17                  type: 'void',
18                  'x-decorator': 'CardItem',
19                  'x-component': 'h1',
20                  'x-content': 'Hello, world!',
21                })
22              },
23            }
24          },
25        },
26      ],
27    })
28    this.schemaInitializerManager.add(myInitializer)
29  }
30}

如何使用新添加的初始化器

SchemaInitializer 用于 Schema 的 x-initializer 参数中。

通用的支持 x-initializer 的 Schema 组件有 Grid、ActionBar、Tabs,例如:

1{
2  "type": "void",
3  "x-component": "Grid",
4  "x-initializer": "myInitializer"
5}

如果 Grid、ActionBar、Tabs 这类组件并不满足需求,自定义的组件中,也可以使用 useSchemaInitializerRender() 处理 x-initializer 的渲染。