All files / src/layout/_example LayoutWithInnerSiderExample.jsx

76.92% Statements 10/13
100% Branches 0/0
57.14% Functions 4/7
72.73% Lines 8/11

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 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123                1x   1x           1x 1x   5x         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 LayoutWithInnerSiderExample() {
  const [selected, setSelected] = useState("overview");
  const [subSelected, setSubSelected] = useState("overview");
 
  const getMenuItemProps = id => ({
    selected: selected === id,
    onClick: () => setSelected(id),
  });
 
  const getSubMenuItemProps = id => ({
    selected: subSelected === id,
    onClick: () => setSubSelected(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
            collapsable
            theme="dark"
            title="产品名称"
            icon="https://via.placeholder.com/32.png?text=icon"
          >
            <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.Group title="菜单分组">
              <Menu.SubMenu title="一级菜单" icon={icon}>
                <Menu.Item title="二级菜单" {...getMenuItemProps("3-1")} />
                <Menu.Item title="二级菜单" {...getMenuItemProps("3-2")} />
              </Menu.SubMenu>
            </Menu.Group>
          </Menu>
        </Sider>
        <Sider>
          <Menu
            back={{
              title: "产品名称产品名称产品名称产品名称产品名称产品名称",
              tooltip: "产品名称产品名称产品名称产品名称产品名称产品名称",
              onClick: () => console.log("back"),
            }}
          >
            <Menu.Item title="一级菜单" {...getSubMenuItemProps("s-1")} />
            <Menu.SubMenu defaultOpened title="一级菜单">
              <Menu.Item title="二级菜单" {...getSubMenuItemProps("s-2-1")} />
              <Menu.Item title="二级菜单" {...getSubMenuItemProps("s-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",
      }}
    >
      <LayoutWithInnerSiderExample />
    </section>
  );
}