All files / src/drawer/_example DrawerExample.jsx

50% Statements 6/12
100% Branches 0/0
14.29% Functions 1/7
50% Lines 6/12

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 83                1x 1x 1x 1x   1x   1x                                                                                                                                      
import React, { useState } from "react";
import { Button } from "@tencent/tea-component/lib/button";
import { Drawer } from "@tencent/tea-component/lib/drawer";
import { Segment } from "@tencent/tea-component/lib/segment";
import { Form } from "@tencent/tea-component/lib/form";
import { Switch } from "@tencent/tea-component/lib/switch";
 
export default function DrawerExample() {
  const [size, setSize] = useState("m");
  const [placement, setPlacement] = useState("right");
  const [disableAnimation, setDisableAnimation] = useState(false);
  const [disableOuterClick, setDisableOuterClick] = useState(true);
 
  const [visible, setVisable] = useState(false);
 
  return (
    <>
      <Form>
        <Form.Item label="size">
          <Segment
            value={size}
            onChange={size => setSize(size)}
            options={[{ value: "m" }, { value: "l" }]}
          />
        </Form.Item>
        <Form.Item label="placement">
          <Segment
            value={placement}
            onChange={placement => setPlacement(placement)}
            options={[{ value: "left" }, { value: "right" }]}
          />
        </Form.Item>
        <Form.Item label="禁用动效">
          <Switch
            value={disableAnimation}
            onChange={disableAnimation => setDisableAnimation(disableAnimation)}
          />
        </Form.Item>
        <Form.Item label="禁用点击外部区域关闭">
          <Switch
            value={disableOuterClick}
            onChange={disableOuterClick =>
              setDisableOuterClick(disableOuterClick)
            }
          />
        </Form.Item>
      </Form>
      <Form.Action>
        <Button
          type="primary"
          style={{ margin: 32 }}
          onClick={() => setVisable(true)}
        >
          展开
        </Button>
      </Form.Action>
 
      <Drawer
        // @ts-ignore
        size={size}
        // @ts-ignore
        placement={placement}
        disableAnimation={disableAnimation}
        outerClickClosable={!disableOuterClick}
        visible={visible}
        title="标题"
        subtitle="说明文字"
        footer={<Button type="primary">操作按钮</Button>}
        onClose={() => setVisable(false)}
      >
        <p style={{ padding: "20px 0" }}>
          可以根据实际需求,选则是否需要头尾结构
        </p>
        <img
          src="http://ue.qzone.qq.com/200x400"
          style={{ width: "100%", verticalAlign: "top" }}
          alt=""
        />
      </Drawer>
    </>
  );
}