All files / src/navmenu/_example NavMenuExample.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 49 50 51 52 53 54 55 56              1x                                     1x                                                          
import React from "react";
import { NavMenu } from "@tencent/tea-component/lib/navmenu";
import { List } from "@tencent/tea-component/lib/list";
import { Icon } from "@tencent/tea-component/lib/icon";
import { Badge } from "@tencent/tea-component/lib/badge";
 
export default function NavMenuExample() {
  return (
    <NavMenu
      left={
        <>
          <NavMenu.Item type="logo">
            <img
              src="https://via.placeholder.com/32.png?text=LOGO"
              alt="logo"
            />
          </NavMenu.Item>
          <NavMenu.Item>总览</NavMenu.Item>
          <NavMenu.Item>云服务器</NavMenu.Item>
        </>
      }
      right={
        <>
          <NavMenu.Item
            type="dropdown"
            overlay={close => (
              <List type="option">
                <List.Item onClick={close}>账号信息</List.Item>
                <List.Item className="tea-nav__list-line" onClick={close}>
                  安全设置
                </List.Item>
                <List.Item onClick={close}>退出</List.Item>
              </List>
            )}
          >
            用户名
          </NavMenu.Item>
          <NavMenu.Item type="dropdown" overlay={<div />}>
            费用
          </NavMenu.Item>
          <NavMenu.Item>工单</NavMenu.Item>
          <NavMenu.Item type="icon" selected>
            <Icon type="news" />
            <Badge dark theme="danger">
              7
            </Badge>
          </NavMenu.Item>
          <NavMenu.Item type="icon">
            <Icon type="help" />
          </NavMenu.Item>
        </>
      }
    />
  );
}