node tree of all components
This commit is contained in:
chenos
parent
6f54ee3d4e
commit
e50267d64c
@ -11,6 +11,62 @@ group:
|
||||
|
||||
# Action - 操作
|
||||
|
||||
|
||||
## 组件节点树
|
||||
|
||||
<pre lang="tsx">
|
||||
////////// 单节点 //////////
|
||||
|
||||
// 常规按钮操作
|
||||
<Action/>
|
||||
// 内链
|
||||
<Action.Link/>
|
||||
// 外链
|
||||
<Action.URL/>
|
||||
|
||||
////////// 弹出层相关操作 //////////
|
||||
|
||||
// 对话框
|
||||
<Action title={'按钮标题'}>
|
||||
<Action.Modal title={'对话框标题'}>
|
||||
// 添加其他节点
|
||||
</Action.Modal>
|
||||
</Action>
|
||||
|
||||
// 抽屉
|
||||
<Action title={'按钮标题'}>
|
||||
<Action.Drawer title={'抽屉标题'}>
|
||||
// 添加其他节点
|
||||
</Action.Drawer>
|
||||
</Action>
|
||||
|
||||
// 气泡
|
||||
<Action title={'按钮标题'}>
|
||||
<Action.Popover title={'气泡标题'}>
|
||||
// 添加其他节点
|
||||
</Action.Popover>
|
||||
</Action>
|
||||
|
||||
// 指定容器
|
||||
<Action title={'按钮标题'}>
|
||||
<Action.Container>
|
||||
// 添加其他节点
|
||||
</Action.Container>
|
||||
</Action>
|
||||
|
||||
////////// 操作分组 //////////
|
||||
|
||||
// 下拉操作
|
||||
<Action.Dropdown>
|
||||
<Action/>
|
||||
<Action title={'按钮标题'}>
|
||||
<Action.Modal title={'对话框标题'}>
|
||||
// 添加其他节点
|
||||
</Action.Modal>
|
||||
</Action>
|
||||
</Action.Dropdown>
|
||||
</pre>
|
||||
|
||||
操作有三类：
|
||||
|
||||
- 常规操作：Action
|
||||
|
||||
@ -11,12 +11,29 @@ group:
|
||||
|
||||
# AddNew - 新增
|
||||
|
||||
包括两部分
|
||||
## 组件节点树
|
||||
|
||||
- AddNew.BlockItem 新增区块项
|
||||
- AddNew.FormItem 新增表单项
|
||||
<pre lang="tsx">
|
||||
// 简单场景，只支持上下拖拽布局
|
||||
<DragAndDrop>
|
||||
// 常规区块
|
||||
<AddNew.BlockItem/>
|
||||
// 或表单控件
|
||||
<AddNew.BlockItem/>
|
||||
</DragAndDrop>
|
||||
|
||||
支持常规布局也支持 Grid 布局
|
||||
// 栅格布局，支持行列等复杂的拖拽操作
|
||||
<Grid>
|
||||
<Grid.Row>
|
||||
<Grid.Col>
|
||||
// 常规区块
|
||||
<AddNew.BlockItem/>
|
||||
// 或表单控件
|
||||
<AddNew.BlockItem/>
|
||||
</Grid.Col>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</pre>
|
||||
|
||||
## 代码演示
|
||||
|
||||
|
||||
@ -11,7 +11,15 @@ group:
|
||||
|
||||
# Cascader - 级联选择
|
||||
|
||||
## 省市区级联
|
||||
## 组件节点树
|
||||
|
||||
<pre lang="tsx">
|
||||
<Cascader/>
|
||||
</pre>
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 省市区级联
|
||||
|
||||
```tsx
|
||||
/**
|
||||
|
||||
@ -11,6 +11,15 @@ group:
|
||||
|
||||
# Checkbox - 多选框
|
||||
|
||||
## 组件节点树
|
||||
|
||||
<pre lang="tsx">
|
||||
// 勾选
|
||||
<Checkbox/>
|
||||
// 多选框
|
||||
<Checkbox.Group/>
|
||||
</pre>
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 勾选
|
||||
|
||||
@ -11,6 +11,16 @@ group:
|
||||
|
||||
# ColorSelect - 颜色选择器
|
||||
|
||||
## 组件节点树
|
||||
|
||||
<pre lang="tsx">
|
||||
<ColorSelect/>
|
||||
</pre>
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 颜色选择器
|
||||
|
||||
```tsx
|
||||
/**
|
||||
* title: 颜色选择器
|
||||
|
||||
@ -11,6 +11,14 @@ group:
|
||||
|
||||
# DatabaseField - 数据表字段
|
||||
|
||||
## 组件节点树
|
||||
|
||||
<pre lang="tsx">
|
||||
<DatabaseField/>
|
||||
</pre>
|
||||
|
||||
## 代码演示
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { createForm } from '@formily/core';
|
||||
|
||||
@ -11,6 +11,12 @@ group:
|
||||
|
||||
# DatePicker - 日期选择器
|
||||
|
||||
## 组件节点树
|
||||
|
||||
<pre lang="tsx">
|
||||
<DatePicker/>
|
||||
</pre>
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 日期选择器
|
||||
|
||||
@ -9,6 +9,23 @@ group:
|
||||
path: /client/schemas
|
||||
---
|
||||
|
||||
# Filter - 筛选器
|
||||
|
||||
## 组件节点树
|
||||
|
||||
<pre lang="tsx">
|
||||
<Filter>
|
||||
<Filter.Column title={'字段1'} operations={[]}>
|
||||
<Input/>
|
||||
</Filter.Column>
|
||||
<Filter.Column title={'字段2'}>
|
||||
<Input/>
|
||||
</Filter.Column>
|
||||
</Filter>
|
||||
</pre>
|
||||
|
||||
## 代码演示
|
||||
|
||||
<!-- <Filter>
|
||||
<Filter.Column title={'字段1'} operations={[]}>
|
||||
<Input/>
|
||||
|
||||
@ -11,6 +11,16 @@ group:
|
||||
|
||||
# Form - 表单
|
||||
|
||||
## 组件节点树
|
||||
|
||||
<pre lang="tsx">
|
||||
<Form>
|
||||
<Input/>
|
||||
<Select/>
|
||||
// 添加其他节点
|
||||
</Form>
|
||||
</pre>
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 常规表单
|
||||
|
||||
@ -13,6 +13,21 @@ group:
|
||||
|
||||
基于行（Row）和列（Col）来定义区块（Block）的外部框架。
|
||||
|
||||
## 组件节点树
|
||||
|
||||
<pre lang="tsx">
|
||||
<Grid>
|
||||
<Grid.Row>
|
||||
<Grid.Col>
|
||||
// 添加其他节点
|
||||
</Grid.Col>
|
||||
<Grid.Col>
|
||||
// 添加其他节点
|
||||
</Grid.Col>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
</pre>
|
||||
|
||||
## 列宽说明
|
||||
|
||||
最大支持四列，如果要支持越多列，需要处理的比例也越多。
|
||||
|
||||
@ -11,6 +11,14 @@ group:
|
||||
|
||||
# IconPicker - 图标选择器
|
||||
|
||||
## 节点树
|
||||
|
||||
<pre lang="tsx">
|
||||
<IconPicker/>
|
||||
</pre>
|
||||
|
||||
## 代码演示
|
||||
|
||||
```tsx
|
||||
/**
|
||||
* title: 图标
|
||||
|
||||
@ -11,6 +11,14 @@ group:
|
||||
|
||||
# InputNumber - 数字框
|
||||
|
||||
## 节点树
|
||||
|
||||
<pre lang="tsx">
|
||||
<InputNumber/>
|
||||
</pre>
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 数字框
|
||||
|
||||
```tsx
|
||||
|
||||
@ -13,6 +13,13 @@ group:
|
||||
|
||||
输入框是非常常用的控件，参数可以组合成许多字段，如单行文本、多行文本、手机号、邮箱、网址等。
|
||||
|
||||
## 节点树
|
||||
|
||||
<pre lang="tsx">
|
||||
<Input/>
|
||||
<Input.TextArea/>
|
||||
</pre>
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 单行文本
|
||||
|
||||
@ -11,6 +11,12 @@ group:
|
||||
|
||||
# Markdown 编辑器
|
||||
|
||||
## 节点树
|
||||
|
||||
<pre lang="tsx">
|
||||
<Markdown/>
|
||||
</pre>
|
||||
|
||||
## 代码演示
|
||||
|
||||
### Markdown 编辑器
|
||||
|
||||
@ -13,6 +13,36 @@ group:
|
||||
|
||||
需要 antd v4.16+ 支持，在此之前的 Menu.Item 不支持 Fragment 包裹。
|
||||
|
||||
## 组件树
|
||||
|
||||
<pre lang="tsx">
|
||||
<Menu>
|
||||
// 菜单分组
|
||||
<Menu.ItemGroup>
|
||||
<Menu.Item/>
|
||||
</Menu.ItemGroup>
|
||||
// 子菜单
|
||||
<Menu.SubMenu>
|
||||
<Menu.Item/>
|
||||
</Menu.SubMenu>
|
||||
// 菜单项
|
||||
<Menu.Item/>
|
||||
// 分割线
|
||||
<Menu.Divider/>
|
||||
|
||||
// 其他一些基于 Menu.Item 的延伸
|
||||
|
||||
// 外链
|
||||
<Menu.URL/>
|
||||
// 内链
|
||||
<Menu.Link/>
|
||||
// 操作，用法与 Action 相同
|
||||
<Menu.Action/>
|
||||
// 新增菜单项
|
||||
<Menu.AddNew/>
|
||||
</Menu>
|
||||
</pre>
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 横向菜单
|
||||
|
||||
@ -52,8 +52,6 @@ import ReactDOM from 'react-dom';
|
||||
import { useMount } from 'ahooks';
|
||||
import { useDesignable, SchemaRenderer } from '..';
|
||||
import { Router } from 'react-router';
|
||||
|
||||
import { useLifecycle } from 'beautiful-react-hooks';
|
||||
import { Action, useDefaultAction } from '../action';
|
||||
|
||||
export type MenuType = React.FC<MenuProps & { hideSubMenu?: boolean }> & {
|
||||
@ -67,30 +65,18 @@ export type MenuType = React.FC<MenuProps & { hideSubMenu?: boolean }> & {
|
||||
Url?: React.FC<MenuItemProps & { url: string }>;
|
||||
};
|
||||
|
||||
export const MenuContainerContext = createContext({
|
||||
sideMenuRef: null,
|
||||
});
|
||||
|
||||
export const MenuContext = createContext({
|
||||
mode: null,
|
||||
designableBar: null,
|
||||
});
|
||||
|
||||
function Blank() {
|
||||
return null;
|
||||
}
|
||||
|
||||
function useDesignableBar() {
|
||||
const { designableBar } = useContext(MenuContext);
|
||||
|
||||
const options = useContext(SchemaOptionsContext);
|
||||
const DesignableBar = designableBar
|
||||
? get(options.components, designableBar)
|
||||
: null;
|
||||
|
||||
return {
|
||||
DesignableBar: DesignableBar || Blank,
|
||||
};
|
||||
return DesignableBar || (() => null);
|
||||
}
|
||||
|
||||
export const Menu: MenuType = observer((props: any) => {
|
||||
@ -103,7 +89,6 @@ export const Menu: MenuType = observer((props: any) => {
|
||||
...others
|
||||
} = props;
|
||||
let defaultSelectedKey = defaultSelectedKeys ? defaultSelectedKeys[0] : null;
|
||||
// const schema = useFieldSchema();
|
||||
const { schema, schema: designableSchema, refresh } = useDesignable();
|
||||
const designableBar = schema['x-designable-bar'];
|
||||
const history = useHistory();
|
||||
@ -183,7 +168,7 @@ export const Menu: MenuType = observer((props: any) => {
|
||||
renderSideMenu(defaultSelectedKey);
|
||||
});
|
||||
const isEmpty = !Object.keys(designableSchema.properties || {}).length;
|
||||
console.log({ designableSchema })
|
||||
console.log({ designableSchema });
|
||||
return (
|
||||
<MenuContext.Provider
|
||||
value={{
|
||||
@ -235,9 +220,7 @@ export const Menu: MenuType = observer((props: any) => {
|
||||
});
|
||||
|
||||
const AddNewAction = () => {
|
||||
const fieldSchema = useFieldSchema();
|
||||
const { schema, insertBefore } = useDesignable();
|
||||
console.log('AddNewAction', schema, fieldSchema);
|
||||
return (
|
||||
<Dropdown
|
||||
overlayStyle={{
|
||||
@ -254,13 +237,22 @@ const AddNewAction = () => {
|
||||
key: uid(),
|
||||
'x-component': 'Menu.Item',
|
||||
});
|
||||
console.log('s.s.s.s.s.s', s)
|
||||
console.log('s.s.s.s.s.s', s);
|
||||
}}
|
||||
style={{ minWidth: 150 }}
|
||||
>
|
||||
<MenuOutlined /> 新建菜单
|
||||
</AntdMenu.Item>
|
||||
<AntdMenu.Item>
|
||||
<AntdMenu.Item
|
||||
onClick={() => {
|
||||
const s = insertBefore({
|
||||
type: 'void',
|
||||
key: uid(),
|
||||
title: uid(),
|
||||
'x-component': 'Menu.SubMenu',
|
||||
});
|
||||
}}
|
||||
>
|
||||
<GroupOutlined /> 新建分组
|
||||
</AntdMenu.Item>
|
||||
<AntdMenu.Item>
|
||||
@ -286,9 +278,8 @@ Menu.AddNew = observer((props) => {
|
||||
});
|
||||
|
||||
Menu.Url = observer((props) => {
|
||||
const field = useField();
|
||||
const schema = useFieldSchema();
|
||||
const { DesignableBar } = useDesignableBar();
|
||||
const DesignableBar = useDesignableBar();
|
||||
const { schema } = useDesignable();
|
||||
return (
|
||||
<AntdMenu.Item
|
||||
{...props}
|
||||
@ -300,7 +291,7 @@ Menu.Url = observer((props) => {
|
||||
}}
|
||||
icon={props.icon ? <Icon type={props.icon as string} /> : undefined}
|
||||
>
|
||||
{field.title}
|
||||
{schema.title}
|
||||
<DesignableBar />
|
||||
</AntdMenu.Item>
|
||||
);
|
||||
@ -308,9 +299,8 @@ Menu.Url = observer((props) => {
|
||||
|
||||
Menu.Link = observer((props) => {
|
||||
const history = useHistory();
|
||||
const field = useField();
|
||||
const schema = useFieldSchema();
|
||||
const { DesignableBar } = useDesignableBar();
|
||||
const DesignableBar = useDesignableBar();
|
||||
const { schema } = useDesignable();
|
||||
return (
|
||||
<AntdMenu.Item
|
||||
{...props}
|
||||
@ -322,7 +312,7 @@ Menu.Link = observer((props) => {
|
||||
}}
|
||||
icon={props.icon ? <Icon type={props.icon as string} /> : undefined}
|
||||
>
|
||||
{field.title}
|
||||
{schema.title}
|
||||
<DesignableBar />
|
||||
</AntdMenu.Item>
|
||||
);
|
||||
@ -331,9 +321,8 @@ Menu.Link = observer((props) => {
|
||||
Menu.Item = observer((props: any) => {
|
||||
const { useAction = useDefaultAction, ...others } = props;
|
||||
const { run } = useAction();
|
||||
const field = useField();
|
||||
const schema = useFieldSchema();
|
||||
const { DesignableBar } = useDesignableBar();
|
||||
const DesignableBar = useDesignableBar();
|
||||
const { schema } = useDesignable();
|
||||
return (
|
||||
<AntdMenu.Item
|
||||
{...others}
|
||||
@ -346,7 +335,7 @@ Menu.Item = observer((props: any) => {
|
||||
key={schema.name}
|
||||
icon={props.icon ? <Icon type={props.icon as string} /> : undefined}
|
||||
>
|
||||
{field.title}
|
||||
{schema.title}
|
||||
<DesignableBar />
|
||||
</AntdMenu.Item>
|
||||
);
|
||||
@ -354,8 +343,8 @@ Menu.Item = observer((props: any) => {
|
||||
|
||||
Menu.Action = observer((props: any) => {
|
||||
const { icon, ...others } = props;
|
||||
const schema = useFieldSchema();
|
||||
const { DesignableBar } = useDesignableBar();
|
||||
// const DesignableBar = useDesignableBar();
|
||||
const { schema } = useDesignable();
|
||||
return (
|
||||
<Action
|
||||
// @ts-ignore
|
||||
@ -365,15 +354,12 @@ Menu.Action = observer((props: any) => {
|
||||
ButtonComponent={AntdMenu.Item}
|
||||
{...others}
|
||||
/>
|
||||
// <Action {...others}/>
|
||||
// <DesignableBar />
|
||||
// </AntdMenu.Item>
|
||||
);
|
||||
});
|
||||
|
||||
Menu.SubMenu = observer((props) => {
|
||||
const { DesignableBar } = useDesignableBar();
|
||||
const schema = useFieldSchema();
|
||||
const DesignableBar = useDesignableBar();
|
||||
const { schema } = useDesignable();
|
||||
const { mode } = useContext(MenuContext);
|
||||
return mode === 'mix' ? (
|
||||
<Menu.Item {...props} />
|
||||
@ -411,15 +397,10 @@ Menu.SubMenu = observer((props) => {
|
||||
|
||||
Menu.Divider = observer(AntdMenu.Divider);
|
||||
|
||||
function useDesigner() {
|
||||
const field = useField();
|
||||
}
|
||||
|
||||
Menu.DesignableBar = (props) => {
|
||||
const field = useField();
|
||||
const fieldSchema = useFieldSchema();
|
||||
const [visible, setVisible] = useState(false);
|
||||
const { schema, remove, refresh, insertAfter } = useDesignable();
|
||||
const { schema, remove, refresh, insertAfter, appendChild } = useDesignable();
|
||||
return (
|
||||
<div className={cls('designable-bar', { active: visible })}>
|
||||
<div
|
||||
@ -443,29 +424,52 @@ Menu.DesignableBar = (props) => {
|
||||
<AntdMenu.Item
|
||||
onClick={() => {
|
||||
const title = uid();
|
||||
field.title = title;
|
||||
field.componentProps['icon'] = 'DeleteOutlined';
|
||||
schema['x-component-props'] =
|
||||
schema['x-component-props'] || {};
|
||||
schema['x-component-props']['icon'] = 'DeleteOutlined';
|
||||
schema.title = title;
|
||||
fieldSchema.title = title;
|
||||
fieldSchema['x-component-props'] =
|
||||
fieldSchema['x-component-props'] || {};
|
||||
fieldSchema['x-component-props']['icon'] = 'DeleteOutlined';
|
||||
refresh();
|
||||
}}
|
||||
>
|
||||
修改标题
|
||||
</AntdMenu.Item>
|
||||
<AntdMenu.Item onClick={() => {
|
||||
const s = insertAfter({
|
||||
type: 'void',
|
||||
key: uid(),
|
||||
title: uid(),
|
||||
'x-component': 'Menu.SubMenu',
|
||||
});
|
||||
}}>插入</AntdMenu.Item>
|
||||
<AntdMenu.Item
|
||||
onClick={() => {
|
||||
const s = insertAfter({
|
||||
type: 'void',
|
||||
key: uid(),
|
||||
title: uid(),
|
||||
'x-component': 'Menu.SubMenu',
|
||||
});
|
||||
}}
|
||||
>
|
||||
新建分组
|
||||
</AntdMenu.Item>
|
||||
<AntdMenu.Item
|
||||
onClick={() => {
|
||||
const s = insertAfter({
|
||||
type: 'void',
|
||||
key: uid(),
|
||||
title: uid(),
|
||||
'x-component': 'Menu.Item',
|
||||
});
|
||||
}}
|
||||
>
|
||||
新建菜单
|
||||
</AntdMenu.Item>
|
||||
<AntdMenu.Item
|
||||
onClick={() => {
|
||||
const s = appendChild({
|
||||
type: 'void',
|
||||
key: uid(),
|
||||
title: uid(),
|
||||
'x-component': 'Menu.Item',
|
||||
});
|
||||
}}
|
||||
>
|
||||
在菜单组里新增
|
||||
</AntdMenu.Item>
|
||||
<AntdMenu.Item
|
||||
onClick={() => {
|
||||
Modal.confirm({
|
||||
|
||||
@ -11,6 +11,13 @@ group:
|
||||
|
||||
# Password - 密码
|
||||
|
||||
## 节点树
|
||||
|
||||
<pre lang="tsx">
|
||||
// 单选框
|
||||
<Password/>
|
||||
</pre>
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 密码框
|
||||
|
||||
@ -11,6 +11,15 @@ group:
|
||||
|
||||
# Radio - 单选框
|
||||
|
||||
## 节点树
|
||||
|
||||
<pre lang="tsx">
|
||||
// 单选框
|
||||
<Radio/>
|
||||
// 单选框分组
|
||||
<Radio.Group/>
|
||||
</pre>
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 单选框
|
||||
|
||||
@ -11,6 +11,31 @@ group:
|
||||
|
||||
# Select - 选择器
|
||||
|
||||
## 节点树
|
||||
|
||||
<pre lang="tsx">
|
||||
// 常规选择器
|
||||
<Select/>
|
||||
// 选项值为对象类型
|
||||
<Select.Object>
|
||||
// 抽屉选择器
|
||||
<Select.Drawer>
|
||||
// 可选项
|
||||
<Select.Options>
|
||||
<Form>
|
||||
<Table>
|
||||
<Action/>
|
||||
</Table>
|
||||
</Form>
|
||||
</Select.Options>
|
||||
// 选中项详情
|
||||
<Select.OptionTag>
|
||||
<Form>
|
||||
// 添加其他节点
|
||||
</Form>
|
||||
</Select.OptionTag>
|
||||
</Select.Drawer>
|
||||
</pre>
|
||||
|
||||
## Select
|
||||
|
||||
|
||||
@ -11,10 +11,48 @@ group:
|
||||
|
||||
# Table - 表格
|
||||
|
||||
- 远程数据、远程分页、远程过滤
|
||||
- 远程数据、本地分页、远程过滤
|
||||
- 远程数据、本地分页、本地过滤
|
||||
- 本地数据、本地分页、本地过滤
|
||||
## 组件节点树
|
||||
|
||||
<pre lang="tsx">
|
||||
<Table>
|
||||
// 顶部操作栏
|
||||
<Table.ActionBar align={'top'}>
|
||||
<Action title={'筛选'}>
|
||||
<Action.Popover>
|
||||
<Form>
|
||||
// 此处省略 Filter 节点细节
|
||||
<Filter/>
|
||||
<Action/>
|
||||
</Form>
|
||||
</Action.Popover>
|
||||
</Action>
|
||||
<Action align={'right'} title={'删除'}/>
|
||||
</Table.ActionBar>
|
||||
// 底部操作栏
|
||||
<Table.ActionBar align={'bottom'}>
|
||||
<Table.Pagination/>
|
||||
</Table.ActionBar>
|
||||
// 表格列
|
||||
<Table.Column title={'拖拽排序'}>
|
||||
<Table.SortHandle/>
|
||||
</Table.Column>
|
||||
<Table.Column title={'序号'}>
|
||||
<Table.Index/>
|
||||
</Table.Column>
|
||||
<Table.Column title={'字段1'}>
|
||||
<Input/>
|
||||
</Table.Column>
|
||||
<Table.Column title={'字段2'}>
|
||||
<Select/>
|
||||
</Table.Column>
|
||||
<Table.Column title={'操作'}>
|
||||
<Action/>
|
||||
<Action/>
|
||||
<Action/>
|
||||
</Table.Column>
|
||||
</Table>
|
||||
</pre>
|
||||
|
||||
## 代码演示
|
||||
|
||||
<code src="./demos/demo1.tsx"/>
|
||||
|
||||
@ -11,6 +11,19 @@ group:
|
||||
|
||||
# Tabs - 标签页
|
||||
|
||||
## 组件节点树
|
||||
|
||||
<pre lang="tsx">
|
||||
<Tabs>
|
||||
<Tabs.TabPane title={'标签 1'}>
|
||||
// 添加其他节点
|
||||
</Tabs.TabPane>
|
||||
<Tabs.TabPane title={'标签 2'}>
|
||||
// 添加其他节点
|
||||
</Tabs.TabPane>
|
||||
</Tabs>
|
||||
</pre>
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基本使用
|
||||
|
||||
@ -11,6 +11,12 @@ group:
|
||||
|
||||
# TimePicker - 时间选择器
|
||||
|
||||
## 节点树
|
||||
|
||||
<pre lang="tsx">
|
||||
<TimePicker/>
|
||||
</pre>
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 日期选择器
|
||||
|
||||
@ -11,6 +11,12 @@ group:
|
||||
|
||||
# Upload - 上传
|
||||
|
||||
## 节点树
|
||||
|
||||
<pre lang="tsx">
|
||||
<Upload/>
|
||||
</pre>
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 上传
|
||||
|
||||
Loading…
Reference in New Issue
Block a user