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