All files / src/blank/_example BlankCustomExample.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 74 75 76 77 78 79                  1x     1x                                                                                                             1x                      
import React from "react";
import { Button } from "@tencent/tea-component/lib/button";
import { Blank } from "@tencent/tea-component/lib/blank";
import { Card } from "@tencent/tea-component/lib/card";
import { Layout } from "@tencent/tea-component/lib/layout";
import { ExternalLink } from "@tencent/tea-component/lib/link";
import { Alert } from "@tencent/tea-component/lib/alert";
import { List } from "@tencent/tea-component/lib/list";
 
const { Body, Content } = Layout;
 
function BlankCustomExample() {
  return (
    <Layout>
      <Body>
        <Content>
          <Content.Body>
            <Card full>
              <Blank
                theme={{
                  image: {
                    background:
                      "//imgcache.qq.com/open_proj/proj_qcloud_v2/bee-v2/css/img/gif/cloud-dev-bg.png",
                    gif:
                      "//imgcache.qq.com/open_proj/proj_qcloud_v2/bee-v2/css/img/gif/cloud-dev-open.gif",
                  },
                }}
                description="提供什么服务,达到什么目的,文字不超过两行。提供什么服务,达到什么目的,文字不超过两行"
                operation={
                  <>
                    <Button type="primary">前往访问管理</Button>
                    <Button>了解访问管理</Button>
                  </>
                }
                extra={
                  <>
                    <ExternalLink>查看接入流程</ExternalLink>
                    <ExternalLink>查看计价</ExternalLink>
                  </>
                }
              >
                <Alert type="success">成功信息提示语</Alert>
                <Blank.Steps
                  steps={["步骤一内容;", "步骤二内容内容;", "步骤三内容"]}
                />
                <List type="bullet">
                  <List.Item>
                    操作提示一操作提示一操作提示一操作提示一操作提示一
                  </List.Item>
                  <List.Item>
                    操作提示二操作提示二操作提示二操作提示二操作提示二提示二{" "}
                    <ExternalLink>操作提示二</ExternalLink>
                  </List.Item>
                  <List.Item>
                    更多问题,请 <ExternalLink>联系我们</ExternalLink>
                  </List.Item>
                </List>
              </Blank>
            </Card>
          </Content.Body>
        </Content>
      </Body>
    </Layout>
  );
}
 
export default function Demo() {
  return (
    <section
      style={{
        height: 640,
        border: "1px solid #ddd",
      }}
    >
      <BlankCustomExample />
    </section>
  );
}