All files / src/dropdown/_example DropdownExample.jsx

42.86% Statements 3/7
100% Branches 0/0
33.33% Functions 2/6
42.86% Lines 3/7

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            1x 5x                       1x                                                                                                        
import React from "react";
import { Dropdown } from "@tencent/tea-component/lib/dropdown";
import { List } from "@tencent/tea-component/lib/list";
import { Button } from "@tencent/tea-component/lib/button";
 
export default function DropdownExample() {
  const menu = close => (
    <List type="option">
      <List.Item onClick={close}>预付费</List.Item>
      <List.Item onClick={close}>后付费</List.Item>
      <List.SubMenu label="更多">
        <List type="option">
          <List.Item disabled>订阅</List.Item>
          <List.Item onClick={close}>朋友代付</List.Item>
        </List>
      </List.SubMenu>
    </List>
  );
 
  return (
    <>
      <Dropdown
        trigger="hover"
        clickClose={false}
        style={{ marginRight: 10 }}
        button="Hover me"
        onOpen={() => console.log("open")}
        onClose={() => console.log("close")}
      >
        {menu}
      </Dropdown>
      <Dropdown
        clickClose={false}
        style={{ marginRight: 10 }}
        button="按钮样式"
        appearance="button"
        onOpen={() => console.log("open")}
        onClose={() => console.log("close")}
      >
        {menu}
      </Dropdown>
      <Dropdown
        clickClose={false}
        style={{ marginRight: 10 }}
        button="链接样式"
        appearance="link"
        placement="top"
      >
        {menu}
      </Dropdown>
      <Dropdown
        clickClose={false}
        style={{ marginRight: 10 }}
        button="筛选"
        appearance="filter"
      >
        {menu}
      </Dropdown>
      <Dropdown
        clickClose={false}
        style={{ marginRight: 10 }}
        button={<Button type="icon" icon="more" />}
        appearance="pure"
      >
        {menu}
      </Dropdown>
 
      <br />
    </>
  );
}