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 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | 1x 1x 1x | import React, { useState } 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 { Segment } from "@tencent/tea-component/lib/segment"; import { Button } from "@tencent/tea-component/lib/button"; import { Switch } from "@tencent/tea-component/lib/switch"; export default function FormLayoutExample() { /** @type {any} */ const [layout, setLayout] = useState("default"); const [hideLabel, setHideLabel] = useState(false); return ( <div className="example-stage"> <Card> <Card.Body> <Form.Title>布局选项</Form.Title> <Form hideLabel={hideLabel}> <Form.Item label="布局类型"> <Segment value={layout} onChange={layout => setLayout(layout)} options={[ { value: "default", text: "默认", tooltip: "default" }, { value: "fixed", text: "定宽", tooltip: "fixed" }, { value: "vertical", text: "垂直", tooltip: "vertical" }, { value: "inline", text: "内联", tooltip: "inline" }, { value: "inline-vertical", text: "内联垂直", tooltip: "inline-vertical", }, ]} /> </Form.Item> <Form.Item label="隐藏 Label"> <Switch value={hideLabel} onChange={value => setHideLabel(value)} /> </Form.Item> </Form> <hr /> <Form.Title>布局效果</Form.Title> <Form layout={layout} hideLabel={hideLabel}> <Form.Item label="姓名" required> <Input placeholder="你是谁" /> </Form.Item> <Form.Item label="性别"> <RadioGroup> <Radio name="male">男</Radio> <Radio name="female">女</Radio> </RadioGroup> </Form.Item> <Form.Item label="年龄"> <InputNumber defaultValue={18} min={12} max={100} /> </Form.Item> <Form.Item label="兴趣"> <CheckboxGroup> <Checkbox name="code">编程</Checkbox> <Checkbox name="web">抠图</Checkbox> <Checkbox name="jinli">超越</Checkbox> </CheckboxGroup> </Form.Item> <Form.Item label="自我介绍"> <Input multiline placeholder="介绍下自己" /> </Form.Item> </Form> <Form.Action> <Button type="primary">保存</Button> <Button>取消</Button> </Form.Action> </Card.Body> </Card> </div> ); } |