All files / src/contentview/_example ContentViewWithTabsExample.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 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96                2x               2x                                                                                             2x                                                                
import React from "react";
import { Tabs, TabPanel } from "@tencent/tea-component/lib/tabs";
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 ContentViewWithTabsExample() {
  const tabs = [
    { id: "basic", label: "基本信息" },
    { id: "network", label: "弹性网卡" },
    { id: "monitor", label: "监控信息" },
    { id: "sg", label: "安全组", disabled: true },
    { id: "oplog", label: "操作日志" },
  ];
 
  return (
    <MockLayout>
      <ContentView>
        <ContentView.Header
          showBackButton
          onBackButtonClick={console.log}
          title="内容标题"
          subtitle={
            <>
              说明文字 <Text theme="label">带颜色说明文字</Text>
            </>
          }
          operation={<ExternalLink weak>内容帮助</ExternalLink>}
        />
        <ContentView.Body>
          <Tabs ceiling animated={false} tabs={tabs}>
            <TabPanel id="basic">
              <Card>
                <Card.Body>基本信息</Card.Body>
              </Card>
            </TabPanel>
            <TabPanel id="network">
              <Card>
                <Card.Body>弹性网卡</Card.Body>
              </Card>
            </TabPanel>
            <TabPanel id="monitor">
              <Card>
                <Card.Body>监控信息</Card.Body>
              </Card>
            </TabPanel>
            <TabPanel id="oplog">
              <Card>
                <Card.Body>操作日志</Card.Body>
              </Card>
            </TabPanel>
          </Tabs>
        </ContentView.Body>
      </ContentView>
    </MockLayout>
  );
}
 
/**
 * 模拟控制台布局,在控制台使用的时候无需这部分,只要保留 ContentView 即可
 */
function MockLayout({ children }) {
  return (
    <div style={{ height: 340, position: "relative" }}>
      <header style={{ height: 40, background: "#262626" }} />
      <div
        className="container"
        style={{
          position: "absolute",
          top: 40,
          right: 0,
          bottom: 0,
          left: 0,
        }}
      >
        <aside
          style={{ float: "left", height: 300, width: 200, background: "#333" }}
        />
        <main
          style={{
            position: "absolute",
            top: 0,
            right: 0,
            bottom: 0,
            left: 200,
          }}
        >
          {children}
        </main>
      </div>
      <div style={{ clear: "left" }} />
    </div>
  );
}