All files / src/blank/_example BlankExample.jsx

80% Statements 4/5
100% Branches 0/0
66.67% Functions 2/3
80% Lines 4/5

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                1x           1x   1x                                                                                     1x                      
import React, { useState } 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 { Radio } from "@tencent/tea-component/lib/radio";
 
const { Body, Content } = Layout;
 
function BlankExample() {
  /**
   * @type [any, any]
   */
  const [theme, setTheme] = useState("permission");
 
  return (
    <Layout>
      <Body>
        <Content>
          <Content.Header title="场景切换">
            <Radio.Group
              value={theme}
              onChange={value => setTheme(value)}
              layout="inline"
            >
              <Radio name="error">报错</Radio>
              <Radio name="open">开通</Radio>
              <Radio name="arrears">欠费</Radio>
              <Radio name="permission">权限</Radio>
            </Radio.Group>
          </Content.Header>
          <Content.Body>
            <Card full>
              <Blank
                theme={theme}
                description="提供什么服务,达到什么目的,文字不超过两行。提供什么服务,达到什么目的,文字不超过两行"
                operation={
                  <>
                    <Button type="primary">前往访问管理</Button>
                    <Button>了解访问管理</Button>
                  </>
                }
                extra={
                  <>
                    <ExternalLink>查看接入流程</ExternalLink>
                    <ExternalLink>查看计价</ExternalLink>
                  </>
                }
              />
            </Card>
          </Content.Body>
        </Content>
      </Body>
    </Layout>
  );
}
 
export default function Demo() {
  return (
    <section
      style={{
        height: 540,
        border: "1px solid #ddd",
      }}
    >
      <BlankExample />
    </section>
  );
}