mirror of
https://github.com/smartxworks/sunmao-ui.git
synced 2025-01-30 17:09:35 +08:00
feat: add divider demo & add new properties to collapse
This commit is contained in:
parent
8e8eebb9c7
commit
1ae52e24ca
@ -31,6 +31,8 @@ const exampleProperties: Static<typeof CollapsePropsSpec> = {
|
||||
accordion: false,
|
||||
expandIconPosition: 'left',
|
||||
bordered: false,
|
||||
destroyOnHide: false,
|
||||
lazyLoad: true,
|
||||
};
|
||||
|
||||
const options = {
|
||||
@ -95,4 +97,3 @@ export const Collapse = implementRuntimeComponent(options)(props => {
|
||||
</BaseCollapse>
|
||||
);
|
||||
});
|
||||
|
||||
|
@ -203,10 +203,10 @@ export const Table = implementRuntimeComponent({
|
||||
events: [],
|
||||
},
|
||||
})(props => {
|
||||
const { getElement, app, mergeState, customStyle, services, data, component } = props;
|
||||
const { getElement, app, mergeState, customStyle, services, component } = props;
|
||||
|
||||
const ref = useRef<TableInstance | null>(null);
|
||||
const { pagination, rowClick, ...cProps } = getComponentProps(props);
|
||||
const { pagination, rowClick, data, ...cProps } = getComponentProps(props);
|
||||
|
||||
const rowSelectionType = rowSelectionTypeMap[cProps.rowSelectionType];
|
||||
|
||||
|
@ -5,6 +5,7 @@ import { TreeDemoPage } from './pages/tree';
|
||||
import { TableDemoPage } from './pages/table';
|
||||
import { LayoutDemoPage } from './pages/layout';
|
||||
import { TabDemoPage } from './pages/tab';
|
||||
import { DividerDemoPage } from './pages/divider';
|
||||
|
||||
const { Sider, Content, Header } = Layout;
|
||||
const ContentMap: Record<string, React.FC> = {
|
||||
@ -13,6 +14,7 @@ const ContentMap: Record<string, React.FC> = {
|
||||
Table: TableDemoPage,
|
||||
Layout: LayoutDemoPage,
|
||||
Tab: TabDemoPage,
|
||||
Divider:DividerDemoPage
|
||||
};
|
||||
|
||||
export const ExampleIndexPage: React.FC = () => {
|
||||
|
377
packages/arco-lib/src/examples/pages/divider/basicUsage.ts
Normal file
377
packages/arco-lib/src/examples/pages/divider/basicUsage.ts
Normal file
@ -0,0 +1,377 @@
|
||||
import { Application } from '@sunmao-ui/core';
|
||||
|
||||
const basicUsage: Application = {
|
||||
"version": "sunmao/v1",
|
||||
"kind": "Application",
|
||||
"metadata": {
|
||||
"name": "some App"
|
||||
},
|
||||
"spec": {
|
||||
"components": [
|
||||
{
|
||||
"id": "stack21",
|
||||
"type": "core/v1/stack",
|
||||
"properties": {
|
||||
"spacing": 12,
|
||||
"direction": "vertical",
|
||||
"align": "start",
|
||||
"wrap": "",
|
||||
"justify": ""
|
||||
},
|
||||
"traits": []
|
||||
},
|
||||
{
|
||||
"id": "text25",
|
||||
"type": "core/v1/text",
|
||||
"properties": {
|
||||
"value": {
|
||||
"raw": "**Vertical**",
|
||||
"format": "md"
|
||||
}
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "stack21",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "stack22",
|
||||
"type": "core/v1/stack",
|
||||
"properties": {
|
||||
"spacing": 0,
|
||||
"direction": "horizontal",
|
||||
"align": "center",
|
||||
"wrap": "",
|
||||
"justify": "flex-start"
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "stack21",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "core/v1/style",
|
||||
"properties": {
|
||||
"styles": [
|
||||
{
|
||||
"styleSlot": "content",
|
||||
"style": "border:1px solid #ddd;\npadding:10px;"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "text23",
|
||||
"type": "core/v1/text",
|
||||
"properties": {
|
||||
"value": {
|
||||
"raw": "item 1",
|
||||
"format": "plain"
|
||||
}
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "stack22",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "divider24",
|
||||
"type": "arco/v1/divider",
|
||||
"properties": {
|
||||
"type": "vertical",
|
||||
"orientation": "center"
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "stack22",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "text23_copy5",
|
||||
"type": "core/v1/text",
|
||||
"properties": {
|
||||
"value": {
|
||||
"raw": "item 2",
|
||||
"format": "plain"
|
||||
}
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "stack22",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "divider24_copy7",
|
||||
"type": "arco/v1/divider",
|
||||
"properties": {
|
||||
"type": "vertical",
|
||||
"orientation": "center"
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "stack22",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "text23_copy6",
|
||||
"type": "core/v1/text",
|
||||
"properties": {
|
||||
"value": {
|
||||
"raw": "item 3",
|
||||
"format": "plain"
|
||||
}
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "stack22",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "text25_copy8",
|
||||
"type": "core/v1/text",
|
||||
"properties": {
|
||||
"value": {
|
||||
"raw": "**horizontal**",
|
||||
"format": "md"
|
||||
}
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "stack21",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "stack18",
|
||||
"type": "core/v1/stack",
|
||||
"properties": {
|
||||
"spacing": 0,
|
||||
"direction": "vertical",
|
||||
"align": "start",
|
||||
"wrap": "",
|
||||
"justify": ""
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "stack21",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "core/v1/style",
|
||||
"properties": {
|
||||
"styles": [
|
||||
{
|
||||
"styleSlot": "content",
|
||||
"style": "border:1px solid #ddd;\npadding:10px;"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "text19",
|
||||
"type": "core/v1/text",
|
||||
"properties": {
|
||||
"value": {
|
||||
"raw": "A design is a plan or specification for the construction of an object.",
|
||||
"format": "plain"
|
||||
}
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "stack18",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "divider20",
|
||||
"type": "arco/v1/divider",
|
||||
"properties": {
|
||||
"type": "horizontal",
|
||||
"orientation": "center"
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "stack18",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "text19_copy0",
|
||||
"type": "core/v1/text",
|
||||
"properties": {
|
||||
"value": {
|
||||
"raw": "A design is a plan or specification for the construction of an object.",
|
||||
"format": "plain"
|
||||
}
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "stack18",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "divider20_copy3",
|
||||
"type": "arco/v1/divider",
|
||||
"properties": {
|
||||
"type": "horizontal",
|
||||
"orientation": "center"
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "stack18",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "text19_copy1",
|
||||
"type": "core/v1/text",
|
||||
"properties": {
|
||||
"value": {
|
||||
"raw": "A design is a plan or specification for the construction of an object.",
|
||||
"format": "plain"
|
||||
}
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "stack18",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "divider20_copy4",
|
||||
"type": "arco/v1/divider",
|
||||
"properties": {
|
||||
"type": "horizontal",
|
||||
"orientation": "center"
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "stack18",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "text19_copy2",
|
||||
"type": "core/v1/text",
|
||||
"properties": {
|
||||
"value": {
|
||||
"raw": "A design is a plan or specification for the construction of an object.",
|
||||
"format": "plain"
|
||||
}
|
||||
},
|
||||
"traits": [
|
||||
{
|
||||
"type": "core/v1/slot",
|
||||
"properties": {
|
||||
"container": {
|
||||
"id": "stack18",
|
||||
"slot": "content"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default basicUsage;
|
13
packages/arco-lib/src/examples/pages/divider/index.tsx
Normal file
13
packages/arco-lib/src/examples/pages/divider/index.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import { Divider, Typography } from '@arco-design/web-react';
|
||||
import { DemoWrapper } from '../../DemoWrapper';
|
||||
import basicUsage from './basicUsage';
|
||||
|
||||
export const DividerDemoPage: React.FC = () => {
|
||||
return (
|
||||
<div>
|
||||
<Typography.Title heading={3}>Basic Usage</Typography.Title>
|
||||
<DemoWrapper application={basicUsage} />
|
||||
<Divider />
|
||||
</div>
|
||||
);
|
||||
};
|
@ -22,6 +22,9 @@ export const CollapseItemPropsSpec = {
|
||||
title: 'Show Expand Icon',
|
||||
category: Category.Basic,
|
||||
}),
|
||||
destroyOnHide:Type.Optional(Type.Boolean({
|
||||
title:'Destroy On Hide'
|
||||
}))
|
||||
};
|
||||
|
||||
export const CollapsePropsSpec = {
|
||||
@ -47,6 +50,13 @@ export const CollapsePropsSpec = {
|
||||
widgetOptions: {
|
||||
displayedKeys: ['header'],
|
||||
}
|
||||
}),
|
||||
lazyLoad:Type.Boolean({
|
||||
title:'Lazy Load',
|
||||
description:'If true, invisible panels will not be rendered on mount'
|
||||
}),
|
||||
destroyOnHide:Type.Boolean({
|
||||
title:'Destroy On Hide'
|
||||
})
|
||||
};
|
||||
|
||||
|
@ -48,7 +48,6 @@ export const getComponentProps = <
|
||||
services,
|
||||
app,
|
||||
gridCallbacks,
|
||||
data,
|
||||
customStyle,
|
||||
callbackMap,
|
||||
effects,
|
||||
|
Loading…
Reference in New Issue
Block a user