Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 1x | import React from "react"; import { Form } from "@tencent/tea-component/lib/form"; import { Input } from "@tencent/tea-component/lib/input"; import { RadioGroup, Radio } from "@tencent/tea-component/lib/radio"; import { CheckboxGroup, Checkbox } from "@tencent/tea-component/lib/checkbox"; import { InputNumber } from "@tencent/tea-component/lib/inputnumber"; import { Card } from "@tencent/tea-component/lib/card"; import { Switch } from "@tencent/tea-component/lib/switch"; import { InputAdornment } from "@tencent/tea-component/lib/inputadornment"; export default function FormValidationExample() { return ( <div className="example-stage"> <Card> <Card.Body> <Form.Title>表单验证</Form.Title> <Form> <Form.Item label="姓名" required status="success"> <Input placeholder="你是谁" /> </Form.Item> <Form.Item label="性别" status="error" message="请选择性别"> <RadioGroup> <Radio name="male">男</Radio> <Radio name="female">女</Radio> </RadioGroup> </Form.Item> <Form.Item label="年龄" status="validating"> <InputNumber defaultValue={18} min={12} max={100} disabled /> </Form.Item> <Form.Item label="兴趣" message="选择一项或多项爱好"> <CheckboxGroup> <Checkbox name="code">编程</Checkbox> <Checkbox name="web">抠图</Checkbox> <Checkbox name="jinli">超越</Checkbox> </CheckboxGroup> </Form.Item> </Form> <hr /> <Form.Title>为控件单独使用</Form.Title> <Form.Control status="error" message="设置失败"> <Switch>自动重启</Switch> </Form.Control> <Form.Control status="error" message="不能设置超过 200M" style={{ marginTop: 20 }} > <InputAdornment after="Mbps" appearance="pure"> <InputNumber defaultValue={300} /> </InputAdornment> </Form.Control> </Card.Body> </Card> </div> ); } |