ant-design/4bf5152c-async.af98e885.js

(("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd=("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd||[]).push([["4bf5152c"],{"4bf5152c":function(e,t,a){"use strict";a.d(t,"__esModule",{value:!0}),a.d(t,"default",{enumerable:!0,get:function(){return p;}});var n=a("777fffbe"),i=a("f19d2b93"),s=n._(a("b622e337")),r=n._(a("5437c7d5")),l=n._(a("97c488ea")),o=n._(a("c96b0d01")),d=a("5b220c3d"),u=a("9c86e52a"),c=a("8a2761c9"),p=function(){return(0,i.jsx)(u.DumiPage,{children:(0,i.jsx)(d.Suspense,{fallback:(0,i.jsx)(o.default,{}),children:(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)("div",{className:"markdown",children:[(0,i.jsxs)("p",{children:[(0,i.jsx)(l.default,{href:"https://github.com/refinedev/refine",sourceType:"a",children:c.texts[0].value}),c.texts[1].value]}),(0,i.jsx)("p",{children:c.texts[2].value}),(0,i.jsx)("p",{children:c.texts[3].value}),(0,i.jsxs)("h2",{id:"install-and-initialization",children:[(0,i.jsx)(l.default,{"aria-hidden":"true",tabIndex:"-1",href:"#install-and-initialization",sourceType:"a",children:(0,i.jsx)("span",{className:"icon icon-link"})}),"Install and Initialization"]}),(0,i.jsx)("p",{children:c.texts[4].value}),(0,i.jsxs)("p",{children:[c.texts[5].value,(0,i.jsx)("code",{children:c.texts[6].value}),c.texts[7].value,(0,i.jsx)("code",{children:c.texts[8].value}),c.texts[9].value]}),(0,i.jsxs)("p",{children:[c.texts[10].value,(0,i.jsx)(l.default,{href:"https://github.com/yarnpkg/yarn/",sourceType:"a",children:c.texts[11].value}),c.texts[12].value,(0,i.jsx)(l.default,{href:"https://pnpm.io/",sourceType:"a",children:c.texts[13].value}),c.texts[14].value]})]}),(0,i.jsx)(r.default,{npm:"$ npm create refine-app@latest -- --preset refine-antd",yarn:"$ yarn create refine-app@latest -- --preset refine-antd",pnpm:"$ pnpm create refine-app@latest -- --preset refine-antd"}),(0,i.jsxs)("div",{className:"markdown",children:[(0,i.jsxs)("p",{children:[c.texts[15].value,(0,i.jsx)("code",{children:c.texts[16].value}),c.texts[17].value]}),(0,i.jsx)("p",{children:c.texts[18].value}),(0,i.jsx)(s.default,{lang:"bash",children:c.texts[19].value}),(0,i.jsx)("p",{children:c.texts[20].value}),(0,i.jsxs)("p",{children:[c.texts[21].value,(0,i.jsx)(l.default,{href:"http://localhost:5173/",sourceType:"a",children:c.texts[22].value}),c.texts[23].value]}),(0,i.jsx)("p",{children:(0,i.jsx)("img",{src:"https://refine.ams3.cdn.digitaloceanspaces.com/example-readmes/antd-list-example.png",alt:"Refine Ant Design example"})}),(0,i.jsxs)("h2",{id:"inspection-the-code",children:[(0,i.jsx)(l.default,{"aria-hidden":"true",tabIndex:"-1",href:"#inspection-the-code",sourceType:"a",children:(0,i.jsx)("span",{className:"icon icon-link"})}),"Inspection the code"]}),(0,i.jsx)("p",{children:c.texts[24].value}),(0,i.jsx)(s.default,{lang:"tsx",children:c.texts[25].value}),(0,i.jsx)("p",{children:c.texts[26].value}),(0,i.jsx)("p",{children:c.texts[27].value}),(0,i.jsxs)("h2",{id:"how-to-add-ant-design-to-an-existing-refine-project",children:[(0,i.jsx)(l.default,{"aria-hidden":"true",tabIndex:"-1",href:"#how-to-add-ant-design-to-an-existing-refine-project",sourceType:"a",children:(0,i.jsx)("span",{className:"icon icon-link"})}),"How to Add Ant Design to an Existing Refine Project"]}),(0,i.jsxs)("p",{children:[c.texts[28].value,(0,i.jsx)(l.default,{href:"https://refine.dev/docs/ui-integrations/ant-design/introduction/",sourceType:"a",children:c.texts[29].value}),c.texts[30].value]}),(0,i.jsxs)("p",{children:[c.texts[31].value,(0,i.jsx)("code",{children:c.texts[32].value}),c.texts[33].value]}),(0,i.jsxs)("p",{children:[c.texts[34].value,(0,i.jsx)(l.default,{href:"https://refine.dev/tutorial/ui-libraries/intro/ant-design/react-router/",sourceType:"a",children:c.texts[35].value}),c.texts[36].value]})]})]})})});};},"8a2761c9":function(e,t,a){"use strict";a.d(t,"__esModule",{value:!0}),a.d(t,"texts",{enumerable:!0,get:function(){return n;}}),a("4540096b");let n=[{value:"Refine",paraId:0},{value:" is a React meta-framework designed for CRUD-heavy web applications. Its core hooks and components streamline development by offering solutions for authentication, access control, routing, networking, state management, and i18n.",paraId:0},{value:"It supports Ant Design with an integration package that includes ready-to-use components and hooks to connect Refine to Ant Design.",paraId:1},{value:"This article will guide you through bootstrapping a fully-functional CRUD application example using Refine and Ant Design.",paraId:2},{value:"Refine integrates easily with platforms like Vite, Next.js, Remix, React Native, and Electron through a simple routing interface without additional setup.",paraId:3,tocIndex:0},{value:"In this guide, we'll use Vite and the ",paraId:4,tocIndex:0},{value:"refine-antd",paraId:4,tocIndex:0},{value:" preset from the ",paraId:4,tocIndex:0},{value:"create refine-app",paraId:4,tocIndex:0},{value:" CLI for a quick start to create a new Refine project with Ant Design using predefined options.",paraId:4,tocIndex:0},{value:"Before all start, you may need install ",paraId:5,tocIndex:0},{value:"yarn",paraId:5,tocIndex:0},{value:" or ",paraId:5,tocIndex:0},{value:"pnpm",paraId:5,tocIndex:0},{value:".",paraId:5,tocIndex:0},{value:"Using the ",paraId:6},{value:"refine-antd",paraId:6},{value:" preset eliminates the need for extra dependencies and add example pages built with Ant Design for a quick start.",paraId:6},{value:"After the initialization is complete, we enter the project and start.",paraId:7},{value:"$ cd antd-demo\n$ npm run dev\n",paraId:8},{value:"Once initialization is complete, all Ant Design configurations are done automatically, allowing you to start using Ant Design components in your Refine app.",paraId:9},{value:"Open the browser at ",paraId:10},{value:"http://localhost:5173/",paraId:10},{value:" and you will see example CRUD app with Ant Design components.",paraId:10},{value:"Let take a look at Ant Design usage in the one of the example component generated by the CLI command.",paraId:11,tocIndex:1},{value:"import { Create, useForm } from '@refinedev/antd';\nimport { Form, Input } from 'antd';\n\nexport const CategoryCreate = () => {\n  const { formProps, saveButtonProps } = useForm();\n\n  return (\n    <Create saveButtonProps={saveButtonProps}>\n      <Form {...formProps} layout=\"vertical\">\n        <Form.Item label={'Title'} name={['title']} rules={[{ required: true }]}>\n          <Input />\n        </Form.Item>\n      </Form>\n    </Create>\n  );\n};\n",paraId:12,tocIndex:1},{value:"While Refine's integration offers a set of components and hooks, it is not a replacement for the Ant Design package, you will be able to use all the features of Ant Design in the same way you would use it in a regular React application.",paraId:13,tocIndex:1},{value:"Refine's integration only provides components and hooks for an easier usage of Ant Design components in combination with Refine's features and functionalities.",paraId:14,tocIndex:1},{value:"You can follow the ",paraId:15,tocIndex:2},{value:"Refine Ant Design official guide",paraId:15,tocIndex:2},{value:" to add Ant Design to an existing Refine project.",paraId:15,tocIndex:2},{value:"To bootstrap a Refine app with various integration options like Next.js and Remix, use ",paraId:16,tocIndex:2},{value:"npm create refine-app@latest",paraId:16,tocIndex:2},{value:" and select Ant Design as the UI framework from the CLI.",paraId:16,tocIndex:2},{value:"For more detailed tutorials and guides with Ant Design, visit the ",paraId:17,tocIndex:2},{value:"Refine documentation",paraId:17,tocIndex:2},{value:".",paraId:17,tocIndex:2}];}}]);