跳到主要内容
Swizzle Ready

Create

<Create> provides us a layout to display the page. It does not contain any logic but adds extra functionalities like action buttons and giving titles to the page.

We'll show what <Create> does using properties with examples.

http://localhost:3000/posts/create
import {
    Create,
    Form,
    Input,
    Select,
    useForm,
    useSelect,
} from "@pankod/refine-antd";

const PostCreate: React.FC = () => {
    const { formProps, saveButtonProps } = useForm<IPost>();

    const { selectProps: categorySelectProps } = useSelect<ICategory>({
        resource: "categories",
    });

    return (
        <Create saveButtonProps={saveButtonProps}>
            <Form {...formProps} layout="vertical">
                <Form.Item
                    label="Title"
                    name="title"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="Category"
                    name={["category", "id"]}
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Select {...categorySelectProps} />
                </Form.Item>
                <Form.Item
                    label="Status"
                    name="status"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Select
                        options={[
                            {
                                label: "Published",
                                value: "published",
                            },
                            {
                                label: "Draft",
                                value: "draft",
                            },
                            {
                                label: "Rejected",
                                value: "rejected",
                            },
                        ]}
                    />
                </Form.Item>
            </Form>
        </Create>
    );
};
Swizzle

You can swizzle this component to customize it with the refine CLI

Properties​

title​

It allows adding title inside the <Create> component. if you don't pass title props it uses "Create" prefix and singular resource name by default. For example, for the /posts/create resource, it will be "Create post".

http://localhost:3000/posts/create
import { Create } from "@pankod/refine-antd";

const PostCreate: React.FC = () => {
    return (
        <Create title="Custom Title">
            <p>Rest of your page here</p>
        </Create>
    );
};

saveButtonProps​

<Create> component has a default button that submits the form. If you want to customize this button you can use the saveButtonProps property like the code below.

Refer to the <SaveButton> documentation for detailed usage. →

http://localhost:3000/posts/create
import { Create } from "@pankod/refine-antd";

const PostCreate: React.FC = () => {
    return (
        <Create saveButtonProps={{ size: "small" }}>
            <p>Rest of your page here</p>
        </Create>
    );
};

resource​

The <Create> component reads the resource information from the route by default. This default behavior will not work on custom pages. If you want to use the <Create> component in a custom page, you can use the resource prop.

Refer to the custom pages documentation for detailed usage. →

http://localhost:3000/custom
import { Refine } from "@pankod/refine-core";
import { Create } from "@pankod/refine-antd";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";

const CustomPage: React.FC = () => {
    return (
        <Create resource="posts">
            <p>Rest of your page here</p>
        </Create>
    );
};

const App: React.FC = () => {
    return (
        <Refine
            routerProvider={{
                ...routerProvider,
                routes: [
                    {
                        element: <CustomPage />,
                        path: "/custom",
                    },
                ],
            }}
            dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
            resources={[{ name: "posts" }]}
        />
    );
};

goBack​

To customize the back button or to disable it, you can use the goBack property.

http://localhost:3000/posts/create
import { Create, Icons } from "@pankod/refine-antd";

const PostCreate: React.FC = () => {
    return (
        <Create goBack={<Icons.SmileOutlined />}>
            <p>Rest of your page here</p>
        </Create>
    );
};

isLoading​

To toggle the loading state of the <Create/> component, you can use the isLoading property.

http://localhost:3000/posts/create
import { Create } from "@pankod/refine-antd";

const PostCreate: React.FC = () => {
    return (
        <Create isLoading={true}>
            <p>Rest of your page here</p>
        </Create>
    );
};

To customize or disable the breadcrumb, you can use the breadcrumb property. By default it uses the Breadcrumb component from @pankod/refine-antd package.

Refer to the Breadcrumb documentation for detailed usage. →

提示

This feature can be managed globally via the <Refine> component's options

http://localhost:3000/posts/create
import { Create, Breadcrumb } from "@pankod/refine-antd";

const PostCreate: React.FC = () => {
    return (
        <Create
            breadcrumb={
                <div
                    style={{
                        padding: "3px 6px",
                        border: "2px dashed cornflowerblue",
                    }}
                >
                    <Breadcrumb />
                </div>
            }
        >
            <p>Rest of your page here</p>
        </Create>
    );
};

wrapperProps​

If you want to customize the wrapper of the <Create/> component, you can use the wrapperProps property. For @pankod/refine-antd wrapper elements are simple <div/>s and wrapperProps can get every attribute that <div/> can get.

http://localhost:3000/posts/create
import { Create } from "@pankod/refine-antd";

const PostCreate: React.FC = () => {
    return (
        <Create
            wrapperProps={{
                style: {
                    backgroundColor: "cornflowerblue",
                    padding: "16px",
                },
            }}
        >
            <p>Rest of your page here</p>
        </Create>
    );
};

headerProps​

If you want to customize the header of the <Create/> component, you can use the headerProps property.

Refer to the PageHeader documentation from Ant Design for detailed usage. →

http://localhost:3000/posts/create
import { Create } from "@pankod/refine-antd";

const PostCreate: React.FC = () => {
    return (
        <Create
            headerProps={{
                subTitle: "This is a subtitle",
                style: {
                    backgroundColor: "cornflowerblue",
                    padding: "16px",
                },
            }}
        >
            <p>Rest of your page here</p>
        </Create>
    );
};

contentProps​

If you want to customize the content of the <Create/> component, you can use the contentProps property.

Refer to the Card documentation from Ant Design for detailed usage. →

http://localhost:3000/posts/create
import { Create } from "@pankod/refine-antd";

const PostCreate: React.FC = () => {
    return (
        <Create
            contentProps={{
                style: {
                    backgroundColor: "cornflowerblue",
                    padding: "16px",
                },
            }}
        >
            <p>Rest of your page here</p>
        </Create>
    );
};

headerButtons​

You can customize the buttons at the header by using the headerButtons property. It accepts React.ReactNode or a render function ({ defaultButtons }) => React.ReactNode which you can use to keep the existing buttons and add your own.

http://localhost:3000/posts/create
import { Create, Button } from "@pankod/refine-antd";

const PostCreate: React.FC = () => {
    return (
        <Create
            headerButtons={({ defaultButtons }) => (
                <>
                    {defaultButtons}
                    <Button type="primary">Custom Button</Button>
                </>
            )}
        >
            <p>Rest of your page here</p>
        </Create>
    );
};

headerButtonProps​

You can customize the wrapper element of the buttons at the header by using the headerButtonProps property.

Refer to the Space documentation from Ant Design for detailed usage. →

http://localhost:3000/posts/create
import { Create, Button } from "@pankod/refine-antd";

const PostCreate: React.FC = () => {
    return (
        <Create
            headerButtonProps={{
                style: {
                    backgroundColor: "cornflowerblue",
                    padding: "16px",
                },
            }}
            headerButtons={<Button type="primary">Custom Button</Button>}
        >
            <p>Rest of your page here</p>
        </Create>
    );
};

footerButtons​

You can customize the buttons at the footer by using the footerButtons property. It accepts React.ReactNode or a render function ({ defaultButtons }) => React.ReactNode which you can use to keep the existing buttons and add your own.

http://localhost:3000/posts/create
import { Create, Button } from "@pankod/refine-antd";

const PostCreate: React.FC = () => {
    return (
        <Create
            footerButtons={({ defaultButtons }) => (
                <>
                    {defaultButtons}
                    <Button type="primary">Custom Button</Button>
                </>
            )}
        >
            <p>Rest of your page here</p>
        </Create>
    );
};

footerButtonProps​

You can customize the wrapper element of the buttons at the footer by using the footerButtonProps property.

Refer to the Space documentation from Ant Design for detailed usage. →

http://localhost:3000/posts/create
import { Create, Button } from "@pankod/refine-antd";

const PostCreate: React.FC = () => {
    return (
        <Create
            footerButtonProps={{
                style: {
                    float: "right",
                    marginRight: 24,
                    backgroundColor: "cornflowerblue",
                    padding: "16px",
                },
            }}
        >
            <p>Rest of your page here</p>
        </Create>
    );
};

actionButtons​

Deprecated

Use headerButtons or footerButtons instead.

<Create> uses the Ant Design <Card> component. The action property of the <Card> component shows <SaveButton> and <DeleteButton> based on your resource definition in the resources property you pass to <Refine>. If you want to use other things instead of these buttons, you can use the actionButton property like the code below.

import { Create, Button } from "@pankod/refine-antd";

export const CreatePage: React.FC = () => {
    return (
        <Create
            actionButtons={
                <>
                    <Button type="primary">Custom Button 1</Button>
                    <Button size="small">Custom Button 2</Button>
                </>
            }
        >
            ...
        </Create>
    );
};

pageHeaderProps​

Deprecated

Use headerProps, wrapperProps or contentProps instead.

<Create> uses the Ant Design <PageHeader> components so you can customize with the props of pageHeaderProps.

By default, the breadcrumb property of the <PageHeader> component shows <Breadcrumb> component.

Refer to the <PageHeader> documentation for detailed usage. →

import { Create, Breadcrumb } from "@pankod/refine-antd";

export const CreatePage: React.FC = () => {
    return (
        <Create
            pageHeaderProps={{
                onBack: () => console.log("Hello, refine"),
                subTitle: "Subtitle",
                breadcrumb: <Breadcrumb breadcrumbProps={{ separator: "-" }} />,
            }}
        >
            ...
        </Create>
    );
};

API Reference​

Props​

最后由 TomsProject 于 更新