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 | 1x 12x 1x | import React from "react"; import { Bubble } from "@tencent/tea-component/lib/bubble"; import { Button } from "@tencent/tea-component/lib/button"; export default function BubblePlacementExample() { const bubbleAt = placement => ( <td style={{ padding: 5 }}> <Bubble placement={placement} content={ <> 我的定位是 {placement} <br /> 我的定位是 {placement} <br /> 我的定位是 {placement} </> } > <Button type="weak">👻</Button> </Bubble> </td> ); return ( <table style={{ margin: "auto" }}> <tbody> <tr> <td /> {bubbleAt("top-start")} {bubbleAt("top")} {bubbleAt("top-end")} <td /> </tr> <tr> {bubbleAt("left-start")} <td colSpan={3} rowSpan={3} style={{ textAlign: "center", border: "1px solid #999", background: "#f0f0f0", }} > 如果显示区域不足, <br /> 会自动更改弹出位置 <br /> 可以尝试调整窗口尺寸 </td> {bubbleAt("right-start")} </tr> <tr> {bubbleAt("left")} {bubbleAt("right")} </tr> <tr> {bubbleAt("left-end")} {bubbleAt("right-end")} </tr> <tr> <td /> {bubbleAt("bottom-start")} {bubbleAt("bottom")} {bubbleAt("bottom-end")} <td /> </tr> </tbody> </table> ); } |