All files / src/form/_example FormLayoutExample.jsx

60% Statements 3/5
100% Branches 0/0
33.33% Functions 1/3
60% Lines 3/5

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>
  );
}