@aliretail/react-materials-components
Version:
59 lines (53 loc) • 1.55 kB
Markdown
---
title: Card - 卡片
order: 01
---
# 卡片
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { FormComponents } from '@aliretail/react-materials-components';
const {
Card,
setup,
SchemaForm,
SchemaMarkupField: Field,
} = FormComponents;
import Printer from '@formily/printer';
setup();
const App = () => {
return (
<Printer>
<SchemaForm
onChange={console.log}
>
<Field
type="object"
name="group1"
x-component="card"
x-component-props={{
title: '卡片标题',
contentHeight: 400,
}}
>
<Field type="object" x-component="cardContent" x-component-props={{ title: '子卡片标题' }}>
<Field title="label1" name="name1" x-component="Input" />
<Field title="label2" name="name2" x-component="Input" />
</Field>
<Field type="object" x-component="cardContent" x-component-props={{ title: '子卡片标题' }}>
<Field title="label3" name="name3" x-component="Input" />
<Field title="label4" name="name4" x-component="Input" />
<Field title="label5" name="name5" x-component="Input" colSpan={4} />
</Field>
</Field>
<Card
title="JSX 使用卡片"
>
<Field title="label6" name="name6" x-component="Input" />
</Card>
</SchemaForm>
</Printer>
)
}
ReactDOM.render(<App />, mountNode);
```