mirror of
https://github.com/nocobase/nocobase
synced 2024-11-15 11:56:29 +00:00
docs: component demo
This commit is contained in:
parent
6747657c75
commit
71f0681a5b
@ -219,56 +219,6 @@ export default defineConfig({
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
'/components': [
|
'/components': [
|
||||||
{
|
|
||||||
title: '全局',
|
|
||||||
type: 'group',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
title: 'Page',
|
|
||||||
link: '/components/page',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Tabs',
|
|
||||||
link: '/components/tabs',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Menu',
|
|
||||||
link: '/components/menu',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '装饰器',
|
|
||||||
type: 'group',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
title: '基础装饰器',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
title: 'BlockItem',
|
|
||||||
link: '/components/block-item',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'CardItem',
|
|
||||||
link: '/components/card-item',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'FormItem',
|
|
||||||
link: '/components/form-item',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '区块装饰器',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
title: 'DataBlockProvider',
|
|
||||||
link: '/components/data-block',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: 'Field',
|
title: 'Field',
|
||||||
type: 'group',
|
type: 'group',
|
||||||
@ -357,18 +307,14 @@ export default defineConfig({
|
|||||||
title: 'Cron',
|
title: 'Cron',
|
||||||
link: '/components/cron',
|
link: '/components/cron',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: 'Preview',
|
||||||
|
link: '/components/preview',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: 'Markdown',
|
title: 'Markdown',
|
||||||
link: '/components/markdown',
|
link: '/components/markdown',
|
||||||
},
|
},
|
||||||
{
|
|
||||||
title: 'Variable',
|
|
||||||
link: '/components/variable',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'QuickEdit',
|
|
||||||
link: '/components/quick-edit',
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: 'RichText',
|
title: 'RichText',
|
||||||
link: '/components/rich-text',
|
link: '/components/rich-text',
|
||||||
@ -376,7 +322,21 @@ export default defineConfig({
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '展示',
|
title: '操作',
|
||||||
|
type: 'group',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
title: 'Action',
|
||||||
|
link: '/components/action',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Filter.Action',
|
||||||
|
link: '/components/filter',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '区块',
|
||||||
type: 'group',
|
type: 'group',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
@ -406,16 +366,34 @@ export default defineConfig({
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '操作',
|
title: '装饰器',
|
||||||
type: 'group',
|
type: 'group',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
title: 'Action',
|
title: '基础装饰器',
|
||||||
link: '/components/action',
|
children: [
|
||||||
|
{
|
||||||
|
title: 'BlockItem',
|
||||||
|
link: '/components/block-item',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Filter.Action',
|
title: 'CardItem',
|
||||||
link: '/components/filter',
|
link: '/components/card-item',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'FormItem',
|
||||||
|
link: '/components/form-item',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '区块装饰器',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
title: 'DataBlockProvider',
|
||||||
|
link: '/components/data-block',
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
@ -441,6 +419,22 @@ export default defineConfig({
|
|||||||
title: '其他',
|
title: '其他',
|
||||||
type: 'group',
|
type: 'group',
|
||||||
children: [
|
children: [
|
||||||
|
{
|
||||||
|
title: 'Variable',
|
||||||
|
link: '/components/variable',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Page',
|
||||||
|
link: '/components/page',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Tabs',
|
||||||
|
link: '/components/tabs',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Menu',
|
||||||
|
link: '/components/menu',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: 'ErrorFallback',
|
title: 'ErrorFallback',
|
||||||
link: '/components/error-fallback',
|
link: '/components/error-fallback',
|
||||||
@ -453,9 +447,10 @@ export default defineConfig({
|
|||||||
title: 'Pagination',
|
title: 'Pagination',
|
||||||
link: '/components/pagination',
|
link: '/components/pagination',
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
title: 'Preview',
|
title: 'QuickEdit',
|
||||||
link: '/components/preview',
|
link: '/components/quick-edit',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
@ -0,0 +1,34 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { mockApp } from '@nocobase/client/demo-utils';
|
||||||
|
import { SchemaComponent, Plugin, ISchema } from '@nocobase/client';
|
||||||
|
|
||||||
|
const schema: ISchema = {
|
||||||
|
type: 'void',
|
||||||
|
name: 'root',
|
||||||
|
'x-decorator': 'FormV2',
|
||||||
|
'x-component': 'ShowFormData',
|
||||||
|
properties: {
|
||||||
|
test: {
|
||||||
|
type: 'string',
|
||||||
|
title: 'Email',
|
||||||
|
'x-decorator': 'FormItem',
|
||||||
|
'x-component': 'Input',
|
||||||
|
'x-validator': 'email',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
const Demo = () => {
|
||||||
|
return <SchemaComponent schema={schema} />;
|
||||||
|
};
|
||||||
|
|
||||||
|
class DemoPlugin extends Plugin {
|
||||||
|
async load() {
|
||||||
|
this.app.router.add('root', { path: '/', Component: Demo });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const app = mockApp({
|
||||||
|
plugins: [DemoPlugin],
|
||||||
|
});
|
||||||
|
|
||||||
|
export default app.getRootComponent();
|
@ -2,7 +2,11 @@
|
|||||||
|
|
||||||
文本输入框。其基于 ant-design [Input](https://ant.design/components/input/) 组件进行封装。
|
文本输入框。其基于 ant-design [Input](https://ant.design/components/input/) 组件进行封装。
|
||||||
|
|
||||||
## Input
|
|
||||||
|
Input组件是文本类型字段,如 Email、UUID、Phone 等字段的UI组件,通过 `x-validator`设置不同的验证规则。
|
||||||
|
|
||||||
|
<code src="./demos/new-demos/email.tsx"></code>
|
||||||
|
|
||||||
|
|
||||||
### Basic Usage
|
### Basic Usage
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user