---
nav:
path: /client
group:
path: /client
---
# SchemaInitializer
用于配置各种 schema 的初始化
## SchemaInitializer.Button
常规区块的初始化按钮
```tsx | pure
const items = [
{
title: 'Data blocks',
children: [
{
title: 'Table',
component: 'TableBlockInitializerItem',
},
{
title: 'Form',
component: 'FormBlockInitializerItem',
},
],
},
];
export const AddBlockButton = () => {
return (
schema}
// 插入位置
insertPosition={'beforeBegin'}
// 菜单项
items={items}
>Create block
);
}
```
动态字段的配置
```tsx | pure
const useFormItemInitializerFields = () => {
const { fields } = useCollection();
return fields.map(field => {
return {
key: field.name,
component: 'FormItemInitializerItem'
}
});
}
export const AddFieldButton = () => {
return (
schema}
// 插入位置
insertPosition={'beforeBegin'}
items={[
{
title: 'Display fields',
children: useFormItemInitializerFields(),
},
]}
>Configure fields
)
}
```
## SchemaInitializer.Item
扩展项
```tsx | pure
const TableBlockInitializerItem = (props) => {
const { insert } = props;
return (
}
onClick={(info) => {
console.log({ info });
insert({
type: 'void',
title: info.key,
'x-component': 'Hello',
});
}}
items={[
{
type: 'itemGroup',
title: 'select a data source',
children: [
{
key: 'users',
title: 'Users',
},
{
key: 'posts',
title: 'Posts',
},
],
},
]}
>
Table
);
};
```
## Examples
### Block