Skip to content

Commit

Permalink
Usage (#11)
Browse files Browse the repository at this point in the history 
* change title

* add usage section
  • Loading branch information
@justjavac
justjavac committed Jul 12, 2023
1 parent 7be0a60 commit 9374cf5
Showing 1 changed file with 144 additions and 81 deletions.
225 changes: 144 additions & 81 deletions example/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,101 +18,164 @@ const { Title, Paragraph } = Typography;

function App() {
return (
<>
<Typography style={{ marginTop: 40 }}>
<Title style={{ textAlign: "center" }}>
DevTools for Ant Design Forms
</Title>
<Paragraph style={{ textAlign: "center" }}>
A Powerfull DevTools to help debug Ant Design Forms.
</Paragraph>
</Typography>
<Paragraph style={{ textAlign: "center" }}>
<Image
width={600}
src="/screen.png"
alt="DevTools for Ant Design Forms"
preview={false}
style={{
boxShadow: "6px 6px 16px 6px rgba(0, 0, 0, 0.08)",
borderRadius: 8,
}}
/>
</Paragraph>
<Divider style={{ marginTop: 40 }}>Example</Divider>
<Form
name="userinfo"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
style={{ maxWidth: 600, margin: "auto" }}
initialValues={{
username: "",
firstname: "",
lastname: "",
remember: true,
}}
onFinish={console.log}
onFinishFailed={console.error}
autoComplete="off"
>
<Form.Item
label="Username"
name="username"
rules={[{ required: true, message: "Please input your username!" }]}
>
<Input />
</Form.Item>

<Form.Item
label="Firstname"
name="firstname"
rules={[{ required: true, message: "Please input your firstname!" }]}
>
<Input />
</Form.Item>
<div>
<section style={{ maxWidth: 600, margin: "auto" }}>
<Typography style={{ marginTop: 64 }}>
<Title style={{ textAlign: "center" }}>
DevTools for Ant Design Forms
</Title>
<Paragraph style={{ textAlign: "center" }}>
A Powerfull DevTools to help debug Ant Design Forms.
</Paragraph>
<Paragraph style={{ textAlign: "center", marginTop: 32 }}>
<Image
width={600}
src="/screen.png"
alt="DevTools for Ant Design Forms"
preview={false}
style={{
boxShadow: "rgba(0, 0, 0, 0.1) 0px 2px 10px 2px",
borderRadius: 8,
}}
/>
</Paragraph>
</Typography>
<Divider style={{ marginTop: 80 }}>Usage</Divider>
<Paragraph>
<ol>
<li>
Install <code>antd-form-devtools</code> as a dev dependency
package.
<pre style={{ padding: "0.8em" }}>
<code>npm install antd-form-devtools -D</code>
</pre>
</li>
<li>
Integrate with your React App is as simple as import a Component
into your App/Form render and pass control prop into it.
<pre style={{ padding: "1em" }}>
<code>
{`import React from 'react';\n`}
{`import { Button, Form, Input, InputNumber } from 'antd';\n`}
<div style={{ backgroundColor: "rgb(5, 145, 255)" }}>
{`import { DevTool } from 'antd-form-devtools';`}
</div>

<Form.Item
label="Lastname"
name="lastname"
rules={[{ required: true, message: "Please input your lastname!" }]}
>
{`\n\nconst App = () => {
return (
<>
<Form name="userinfo" onFinish={console.log}>
<Form.Item label="Username" name="username">
<Input />
</Form.Item>
<Form.Item name="gender" label="Gender" rules={[{ required: true }]}>
<Select placeholder="Select a gender" allowClear>
<Select.Option value="male">male</Select.Option>
<Select.Option value="female">female</Select.Option>
<Select.Option value="other">other</Select.Option>
</Select>
</Form.Item>

<Form.Item
label="Age"
name="age"
rules={[{ required: true, message: "Please input your age!" }]}
>
<Form.Item label="Age" name="age">
<InputNumber min="0" max="100" />
</Form.Item>
<Form.Item
name="remember"
valuePropName="checked"
wrapperCol={{ offset: 8, span: 16 }}
>
<Checkbox>Remember me</Checkbox>
</Form.Item>

<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
<DevTool />
</Form>
`}
<div
style={{ backgroundColor: "rgb(5, 145, 255)" }}
>{` <DevTool />`}</div>
{`
</Form>
</>
);
};
export default App;`}
</code>
</pre>
</li>
</ol>
</Paragraph>
<Divider style={{ marginTop: 80 }}>Example</Divider>
<Form
name="userinfo"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
initialValues={{
username: "",
firstname: "",
lastname: "",
remember: true,
}}
onFinish={console.log}
onFinishFailed={console.error}
autoComplete="off"
>
<Form.Item
label="Username"
name="username"
rules={[{ required: true, message: "Please input your username!" }]}
>
<Input />
</Form.Item>

<Form.Item
label="Firstname"
name="firstname"
rules={[
{ required: true, message: "Please input your firstname!" },
]}
>
<Input />
</Form.Item>

<Form.Item
label="Lastname"
name="lastname"
rules={[{ required: true, message: "Please input your lastname!" }]}
>
<Input />
</Form.Item>

<Form.Item name="gender" label="Gender" rules={[{ required: true }]}>
<Select placeholder="Select a gender" allowClear>
<Select.Option value="male">male</Select.Option>
<Select.Option value="female">female</Select.Option>
<Select.Option value="other">other</Select.Option>
</Select>
</Form.Item>

<Form.Item
label="Age"
name="age"
rules={[{ required: true, message: "Please input your age!" }]}
>
<InputNumber min="0" max="100" />
</Form.Item>

<Form.Item
name="remember"
valuePropName="checked"
wrapperCol={{ offset: 8, span: 16 }}
>
<Checkbox>Remember me</Checkbox>
</Form.Item>

<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>

<DevTool />
</Form>
</section>
<footer style={{ textAlign: "center", margin: 32 }}>
<Divider />
DevTools for Ant Design Forms ©2023 Created by @justjavac.
</footer>
</div>
);
}

export default App;

0 comments on commit 9374cf5

Please sign in to comment.