All files / src/contentview/_example ContentViewExample.jsx

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

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              2x                                                         2x                      
import React from "react";
import { ContentView } from "@tencent/tea-component/lib/contentview";
import { Card } from "@tencent/tea-component/lib/card";
import { Text } from "@tencent/tea-component/lib/text";
import { ExternalLink } from "@tencent/tea-component/lib/link";
 
export default function ContentViewExample() {
  return (
    <MockLayout>
      <ContentView>
        <ContentView.Header
          showBackButton
          onBackButtonClick={console.log}
          title="内容标题"
          subtitle={
            <>
              说明文字 <Text theme="label">带颜色说明文字</Text>
            </>
          }
          operation={<ExternalLink weak>内容帮助</ExternalLink>}
        />
        <ContentView.Body>
          {/* 内容区域一般使用 Card 组件显示内容 */}
          <Card>
            <Card.Body>内容卡片</Card.Body>
          </Card>
        </ContentView.Body>
      </ContentView>
    </MockLayout>
  );
}
 
/**
 * 模拟控制台布局,在控制台使用的时候无需这部分,只要保留 ContentView 即可
 */
function MockLayout({ children }) {
  return (
    <div style={{ height: 340 }}>
      <header style={{ height: 40, background: "#262626" }} />
      <aside
        style={{ float: "left", height: 300, width: 200, background: "#333" }}
      />
      <main style={{ marginLeft: 200, height: 300 }}>{children}</main>
      <div style={{ clear: "left" }} />
    </div>
  );
}