All files / src/layout/_example LayoutWithLightSiderExample.jsx

77.78% Statements 7/9
100% Branches 0/0
60% Functions 3/5
75% Lines 6/8

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 97 98                1x   1x           1x   3x         1x                                                                                                                             1x                      
import React, { useState } 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 { Menu } from "@tencent/tea-component/lib/menu";
import { NavMenu } from "@tencent/tea-component/lib/navmenu";
 
const { Header, Body, Sider, Content } = Layout;
 
const icon = /** @type {[string, string]} */ ([
  `https://via.placeholder.com/16.png?text=icon`,
  `https://via.placeholder.com/16/006eff/444444`,
]);
 
function LayoutWithLightSiderExample() {
  const [selected, setSelected] = useState("overview");
 
  const getMenuItemProps = id => ({
    selected: selected === id,
    onClick: () => setSelected(id),
  });
 
  return (
    <Layout>
      <Header>
        <NavMenu
          left={
            <>
              <NavMenu.Item type="logo">
                <img
                  src="https://via.placeholder.com/32.png?text=LOGO"
                  alt="logo"
                />
              </NavMenu.Item>
              <NavMenu.Item>总览</NavMenu.Item>
            </>
          }
        />
      </Header>
      <Body>
        <Sider>
          <Menu
            back={{
              title: "产品名称产品名称产品名称",
              description: "数据测试",
              tooltip: "产品名称产品名称产品名称 - 数据测试勿删",
              onClick: () => console.log("back"),
            }}
            collapsable
          >
            <Menu.Item
              icon={icon}
              title="一级菜单"
              {...getMenuItemProps("1")}
            />
 
            <Menu.SubMenu defaultOpened title="一级菜单" icon={icon}>
              <Menu.Item title="二级菜单" {...getMenuItemProps("2-1")} />
              <Menu.Item title="二级菜单" {...getMenuItemProps("2-2")} />
            </Menu.SubMenu>
          </Menu>
        </Sider>
        <Content>
          <Content.Header
            title="内容标题"
            subtitle={
              <>
                说明文字 <Text theme="label">带颜色说明文字</Text>
              </>
            }
            operation={<ExternalLink weak>内容帮助</ExternalLink>}
          />
          <Content.Body>
            {/* 内容区域一般使用 Card 组件显示内容 */}
            <Card>
              <Card.Body>内容卡片</Card.Body>
            </Card>
          </Content.Body>
        </Content>
      </Body>
    </Layout>
  );
}
 
export default function Demo() {
  return (
    <section
      style={{
        height: 600,
        border: "1px solid #ddd",
      }}
    >
      <LayoutWithLightSiderExample />
    </section>
  );
}