All files / src/bubble/_example BubbleExample.jsx

100% Statements 1/1
100% Branches 0/0
100% Functions 1/1
100% Lines 1/1

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              1x                                                                        
import React from "react";
import { Bubble } from "@tencent/tea-component/lib/bubble";
import { Icon } from "@tencent/tea-component/lib/icon";
import { Button } from "@tencent/tea-component/lib/button";
import { Text } from "@tencent/tea-component/lib/text";
 
export default function BubbleExample() {
  return (
    <>
      <section>
        <Text theme="label" verticalAlign="middle">
          为图标添加解释:
        </Text>
        <Text verticalAlign="middle" style={{ marginRight: 5 }}>
          CNAME
        </Text>
        <Bubble content="此域名是加速域名 CNAME 到 CDN 节点上的地址">
          <Icon type="info" />
        </Bubble>
      </section>
 
      <section>
        <Text theme="label" verticalAlign="middle">
          为按钮添加解释:
        </Text>
        <Bubble content="请选择你要删除的云主机">
          <Button disabled>删除</Button>
        </Bubble>
      </section>
 
      <section>
        <Text theme="label" verticalAlign="middle">
          为操作添加解释:
        </Text>
        <Bubble content="运行中的主机无法删除">
          <Button type="text" disabled>
            删除
          </Button>
        </Bubble>
      </section>
    </>
  );
}