All files / src/layout/_example LayoutContentWithTabsExample.jsx

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

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              1x     1x               1x                                                                                           1x                      
import React from "react";
import { Layout } from "@tencent/tea-component/lib/layout";
import { Card } from "@tencent/tea-component/lib/card";
import { Text } from "@tencent/tea-component/lib/text";
import { ExternalLink } from "@tencent/tea-component/lib/link";
import { Tabs, TabPanel } from "@tencent/tea-component/lib/tabs";
 
const { Body, Content } = Layout;
 
function LayoutContentWithTabsExample() {
  const tabs = [
    { id: "basic", label: "基本信息" },
    { id: "network", label: "弹性网卡" },
    { id: "monitor", label: "监控信息" },
    { id: "sg", label: "安全组", disabled: true },
    { id: "oplog", label: "操作日志" },
  ];
 
  return (
    <Layout>
      <Body>
        <Content>
          <Content.Header
            showBackButton
            onBackButtonClick={console.log}
            title="内容标题"
            subtitle={
              <>
                说明文字 <Text theme="label">带颜色说明文字</Text>
              </>
            }
            operation={<ExternalLink weak>内容帮助</ExternalLink>}
          />
          <Content.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>
          </Content.Body>
        </Content>
      </Body>
    </Layout>
  );
}
 
export default function Demo() {
  return (
    <section
      style={{
        height: 360,
        border: "1px solid #ddd",
      }}
    >
      <LayoutContentWithTabsExample />
    </section>
  );
}