a6eebb940f
* feat: improve code * feat: update docs * feat: update docs * Update index.md * Update features.md * Update when.md * Update contributing.md * Update translations.md * feat: clean up * Add files via upload * Update the-first-app.md * Update plugins.md * Update a-b-c.md * Update blocks.md * feat: update docs * Add files via upload * Update charts.md * feat: update navs * Update index.md * Update index.md * Update features.md * Update index.md * Update docker-compose.md * Update create-nocobase-app.md * Update git-clone.md * Update contributing.md * Update translations.md * Update plugins.md * Update the-first-app.md * Add files via upload * Update charts.md * Update charts.md * Update a-b-c.md * Update collections.md * Update menus.md * Update menus.md Co-authored-by: Zhou <zhou.working@gmail.com>
5.3 KiB
5.3 KiB
CollectionManager
Components
CollectionManagerProvider
<CollectionManagerProvider interfaces={{}} collections={[]}></CollectionManagerProvider>
CollectionProvider
const collection = {
name: 'tests',
fields: [
{
type: 'string',
name: 'title',
interface: 'input',
uiSchema: {
type: 'string',
'x-component': 'Input'
},
},
],
};
<CollectionProvider collection={collection}></CollectionProvider>
如果没有传 collection 参数，从 CollectionManagerProvider 里取对应 name 的 collection。
const collections = [
{
name: 'tests',
fields: [
{
type: 'string',
name: 'title',
interface: 'input',
uiSchema: {
type: 'string',
'x-component': 'Input'
},
},
],
}
];
<CollectionManagerProvider collections={collections}>
<CollectionProvider name={'tests'}></CollectionProvider>
</CollectionManagerProvider>
CollectionFieldProvider
const field = {
type: 'string',
name: 'title',
interface: 'input',
uiSchema: {
type: 'string',
'x-component': 'Input'
},
};
<CollectionFieldProvider field={field}></CollectionFieldProvider>
如果没有传 field 参数，从 CollectionProvider 里取对应 name 的 field。
const collection = {
name: 'tests',
fields: [
{
type: 'string',
name: 'title',
interface: 'input',
uiSchema: {
type: 'string',
'x-component': 'Input'
},
},
],
};
<CollectionProvider collection={collection}>
<CollectionFieldProvider name={'title'}></CollectionFieldProvider>
</CollectionProvider>
CollectionField
万能字段组件，需要与 <CollectionProvider/> 搭配使用，仅限于在 Schema 场景使用。从 CollectionProvider 里取对应 name 的 field schema。可通过 CollectionField 所在的 schema 扩展配置。
{
name: 'title',
'x-decorator': 'FormItem',
'x-decorator-props': {},
'x-component': 'CollectionField',
'x-component-props': {},
properties: {},
}
Hooks
useCollectionManager()
与 <CollectionManagerProvider/> 搭配使用
const { collections, get } = useCollectionManager();
useCollection()
与 <CollectionProvider/> 搭配使用
const { name, fields, getField, findField, resource } = useCollection();
useCollectionField()
与 <CollectionFieldProvider/> 搭配使用
const { name, uiSchema, resource } = useCollectionField();
resource 需要与 <RecordProvider/> 搭配使用，用于提供当前数据表行记录的上下文。如：
CollectionManager
Components
CollectionManagerProvider
<CollectionManagerProvider interfaces={{}} collections={[]}></CollectionManagerProvider>
CollectionProvider
const collection = {
name: 'tests',
fields: [
{
type: 'string',
name: 'title',
interface: 'input',
uiSchema: {
type: 'string',
'x-component': 'Input'
},
},
],
};
<CollectionProvider collection={collection}></CollectionProvider>
如果没有传 collection 参数，从 CollectionManagerProvider 里取对应 name 的 collection。
const collections = [
{
name: 'tests',
fields: [
{
type: 'string',
name: 'title',
interface: 'input',
uiSchema: {
type: 'string',
'x-component': 'Input'
},
},
],
}
];
<CollectionManagerProvider collections={collections}>
<CollectionProvider name={'tests'}></CollectionProvider>
</CollectionManagerProvider>
CollectionFieldProvider
const field = {
type: 'string',
name: 'title',
interface: 'input',
uiSchema: {
type: 'string',
'x-component': 'Input'
},
};
<CollectionFieldProvider field={field}></CollectionFieldProvider>
如果没有传 field 参数，从 CollectionProvider 里取对应 name 的 field。
const collection = {
name: 'tests',
fields: [
{
type: 'string',
name: 'title',
interface: 'input',
uiSchema: {
type: 'string',
'x-component': 'Input'
},
},
],
};
<CollectionProvider collection={collection}>
<CollectionFieldProvider name={'title'}></CollectionFieldProvider>
</CollectionProvider>
CollectionField
万能字段组件，需要与 <CollectionProvider/> 搭配使用，仅限于在 Schema 场景使用。从 CollectionProvider 里取对应 name 的 field schema。可通过 CollectionField 所在的 schema 扩展配置。
{
name: 'title',
'x-decorator': 'FormItem',
'x-decorator-props': {},
'x-component': 'CollectionField',
'x-component-props': {},
properties: {},
}
Hooks
useCollectionManager()
与 <CollectionManagerProvider/> 搭配使用
const { collections, get } = useCollectionManager();
useCollection()
与 <CollectionProvider/> 搭配使用
const { name, fields, getField, findField, resource } = useCollection();
useCollectionField()
与 <CollectionFieldProvider/> 搭配使用
const { name, uiSchema, resource } = useCollectionField();
resource 需要与 <RecordProvider/> 搭配使用，用于提供当前数据表行记录的上下文。