All files / src/bubble/_example BubblePlacementExample.jsx

100% Statements 3/3
100% Branches 0/0
100% Functions 2/2
100% Lines 3/3

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