# @eduzz/ui-layout 中文文档

规范地址：https://npmcn.com/package/%40eduzz/ui-layout/

版本：5\.0\.1
npm 元数据更新时间：2026-10-16T19:10:40.085Z
中文译文更新时间：2026-11-14T07:56:07.687Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40eduzz/ui-layout
原文对照：https://npmcn.com/package/%40eduzz/ui-layout/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：1.9 MB，362 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：6 个
- peer 依赖：react \>=18，react-dom \>=18
- 首次发布：2023-06-29T19:03:36.744Z
- 最新版本发布：2026-10-16T19:10:39.821Z
- 近 30 天下载量：2117（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：172（近 12 个月 53 个）

## 中文简介

维基百科中的相关条目: 维基百科中的相关条目: 维基语录链接:名人名言

## 安装

```sh
npm install @eduzz/ui-layout
```

也可以使用：`pnpm add @eduzz/ui-layout`、`yarn add @eduzz/ui-layout`、`bun add @eduzz/ui-layout`

## README

# Eduzz UI: Eduzz 版式

维基百科中的相关条目: 维基百科中的相关条目: 维基语录链接:名人名言

-   [布局 (Topbar、 侧边栏、 内容)](https://npmcn.com/package/%40eduzz/ui-layout/#readme-layout)
-   [使用主题](https://npmcn.com/package/%40eduzz/ui-layout/#readme-usetheme)
-   [应用程序装入器](https://npmcn.com/package/%40eduzz/ui-layout/#readme-app-loader)
-   [更改日志](https://npmcn.com/package/%40eduzz/ui-layout/CHANGELOG.md)

# 版式

(原始内容存档于2018-03-26). Estrutura padrão das aplica'es.

## 进口

```ts
import Layout from '@eduzz/ui-layout';

// ou
import Layout from '@eduzz/ui-layout';
import Sidebar from '@eduzz/ui-layout/Sidebar';
import Topbar from '@eduzz/ui-layout/Topbar';
import Content from '@eduzz/ui-layout/Content';
```

## Estrutura 基地

```jsx
<Layout>
  <Layout.Topbar />
  <Layout.Sidebar />
  <Layout.Content />
</Layout>
```

## 德斯特鲁兰多

简写为escrita do código, você pode desestruturar os 组件.

```jsx
import Layout from '@eduzz/ui-layout';

const { Sidebar, Topbar, Content } = Layout;
const { Item, Group, GroupWithGroupSwitcher } = Sidebar;

function CustomLayout() {
  return (
    <Layout>
      <Topbar {...topbarProps}>
        {...}
      </Topbar>

      <Sidebar {...sidebarProps}>
        {...}
      </Sidebar>

      <Content>
        {...}
      </Content>
    </Layout>
  );
}

export default CustomLayout;
```

## 实例

```jsx
import { NavLink, useLocation } from 'react-router-dom';

const { Sidebar, Topbar, Content } = Layout;
const { Item, Group, GroupWithGroupSwitcher } = Sidebar;

function MyComponent() {
  const location = useLocation();

  return (
    <Layout>
      <Topbar
        currentApplication='orbita'
        user={{
          name: 'Houston User',
          belt: 'Black Belt',
          avatar: 'https://picsum.photos/200',
          tag: 'unity'
        }}
      >
        <Topbar.UnitySupportChat token='...token gerado pelo servidor' />

        <Topbar.Action icon={<NotificationOutline size={25} />} label='Notificações' />
        <Topbar.Action icon={<InfoChatOutline size={25} />} />

        <Topbar.UserMenu>
          <Topbar.UserMenuItem>Meus Dados</Topbar.UserMenuItem>
          <Topbar.UserMenuItem>Minhas Compras</Topbar.UserMenuItem>

          <Topbar.UserMenuGroup label='Contas:'>
            <Topbar.UserMenuItem href='http://google.com' target='_blank'>
              John Doe
            </Topbar.UserMenuItem>
            <Topbar.UserMenuItem disabled>John Doe 2</Topbar.UserMenuItem>
          </Topbar.UserMenuGroup>

          <Topbar.UserMenuDivider />

          <Topbar.UserMenuItem>Sair</Topbar.UserMenuItem>
        </Topbar.UserMenu>
      </Topbar>

      <Sidebar currentLocation={location.pathname}>
        <Item href='/agendamento'>Resumo</Item>

        <GroupWithGroupSwitcher
            label='Integrações'
            options={[
              {
                id: 'whatsapp',
                label: 'Whatsapp',
                icon: <WhatsAppOutlined />,
                items: [
                  <Item key={'option-1-item-1'} id='sidebar-option-1-item-1'>
                    Templates
                  </Item>,
                  <Item key={'option-1-item-2'} id='sidebar-option-1-item-2'>
                    Configurações
                  </Item>
                ]
              },
              {
                id: 'email',
                label: 'Email',
                icon: <MailOutlined />,
                items: [
                  <Item key={'option-2-item-1'} id='sidebar-option-2-item-1'>
                    Layout
                  </Item>,
                  <Item key={'option-2-item-2'} id='sidebar-option-2-item-2'>
                    Templates
                  </Item>,
                  <Item key={'option-2-item-3'} id='sidebar-option-2-item-3'>
                    Configurações
                  </Item>
                ]
              }
            ]}
          />

        <Group label='Agendamento'>
          <Item as={NavLink} to='/agendamento'>
            Evento
          </Item>
          <Item as={NavLink} to='/agendamento'>
            MasterMind
          </Item>
          <Item as={NavLink} to='/agendamento'>
            Lançamento
          </Item>
        </Group>

        <Item disabled>Marketplace</Item>
      </Sidebar>

      <Content>{/*Your content here*/}</Content>
    </Layout>
  );
}
```

## 道具

### 布局道具

| 道具 | 倾斜 | 俄克里奥 | 几内亚 | 赤道几内亚 |
| --- | --- | --- | --- | --- |
| 模式 | `'light' | 'dark'` | `false` | `'light'` | Modo (Dark ou 灯光模式) |
| 持续模式 | `boolean` | `false` | `false` | Faz o modo (Dark ou Light mode) 持续无饼干 `eduzz-theme` |
| 接受 ModeBySearchParam 软件 | `boolean` | `false` | `false` | 阿塞塔·雷瑟尔 `?eduzzMode=dark` na URL por por exemplo, para definir o `mode` |
| 模式变化 | `(newMode: 'light' | 'dark') => void` | `false` | \- 说吧 | (原始内容存档于2018-10-25) (英语). Função a ser excutada toda vez que houver uma mudança de modo. |

### 顶条道具

| 道具 | 倾斜 | 俄克里奥 | 几内亚 | 赤道几内亚 |
| --- | --- | --- | --- | --- |
| 标志 | `url` | `false` | \- 说吧 | (原始内容存档于2018-09-26). Url para o logo pararao. |
| 移动 | `url` | `false` | \- 说吧 | (原始内容存档于2017-09-21). Url para o logo na versão movile. |
| 图标 | `url` | `false` | \- 说吧 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}哦! {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}哦. |
| 图标 | `url` | `false` | \- 说吧 | (原始内容存档于2017-09-21). Url para o logo na versão movic no tema dark. |
| 当前应用程序 | `string` | `false` | \- 说吧 | Aplicação que está sendo usada, para Marcar no menu de apps. 互联网档案馆的存檔,存档日期2013-12-21., p. |
| 用户 | `object` | `false` | \- 说吧 | 用户. |
| 禁用附录 | `boolean` | `false` | `false` | (原始内容存档于2018-07-29). Se vordadeiro esconde o menu de apps. |
| 禁用Logo | `boolean` | `false` | `false` | Verdadeiro esconde 一个标志. |
| 启动 | `ReactNode` | `false` | \- 说吧 | Elemento que será addionado antes da 标志 |

### 顶巴. 动作道具

| 道具 | 倾斜 | 俄克里奥 | 几内亚 | 赤道几内亚 |
| --- | --- | --- | --- | --- |
| 图标 | `ReactNode` | `true` | \- 说吧 | 图标、塔曼荷理想25 |
| 标签 | `string` | `false` | \- 说吧 |  |
| 活动 | `boolean` | `false` | `false` | 镇压者/阿提沃 |
| 点击 | `function` | `false` | \- 说吧 |  |

### 顶巴. 用户Menu 项目道具

| 道具 | 倾斜 | 俄克里奥 | 几内亚 | 赤道几内亚 |
| --- | --- | --- | --- | --- |
| 图标 | `ReactNode` | `true` | \- 说吧 | 图标、塔曼荷理想25 |
| 儿童 | `string` | `false` | \- 说吧 | 跳动瑟·马弦 |
| 已禁用 | `boolean` | `false` | \- 说吧 |  |
| 点击 | `function` | `false` | \- 说吧 |  |

### 顶巴. 用户MenuGroup 道具

| 道具 | 倾斜 | 俄克里奥 | 几内亚 | 赤道几内亚 |
| --- | --- | --- | --- | --- |
| 标签 | `string` | `true` | \- 说吧 |  |
| 儿童 | `ReactNode` | `true` | \- 说吧 |  |

### 顶巴. 团结支持聊天道具

| 道具 | 倾斜 | 俄克里奥 | 几内亚 | 赤道几内亚 |
| --- | --- | --- | --- | --- |
| 符号 | `string` | `false` | \- 说吧 | Token gerado pelo servidor para uso do LiveHelper (英语: |

### 顶巴. 模式开关道具

| 道具 | 倾斜 | 俄克里奥 | 几内亚 | 赤道几内亚 |
| --- | --- | --- | --- | --- |
| 工具提示 | `string` | `false` | `'Tema'` | Texto para o tooltip do botão. (原始内容存档于2019-09-28). 模式 |
| 徽标点 | `boolean` | `false` | `false` | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}嗯... {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}徽章... |

### 侧边栏道具

| 道具 | 倾斜 | 俄克里奥 | 几内亚 | 赤道几内亚 |
| --- | --- | --- | --- | --- |
| 当前位置 | `string` | `false` | \- 说吧 | (原始内容存档于2018-10-21) (中文(简体) ). Caminho de localização atual (pathname). |

### 边栏. 项目道具

| 道具 | 倾斜 | 俄克里奥 | 几内亚 | 赤道几内亚 |
| --- | --- | --- | --- | --- |
| 作为 | `React.ElementType` | `false` | \- 说吧 | 组件 que 输入项 . |
| `any` | `any` | `false` | \- 说吧 | Qualquer proc que o 质量 `as` 专辑 |
| 活动 | `boolean` | `false` | `false` | 欧拉我们 `currentLocation` (原始内容存档于2013-10-10). fornecido para tentar ver se está ativo ou não |
| 选项卡索引 | `number` | `false` | \- 说吧 |  |
| 已禁用 | `boolean` | `false` | \- 说吧 |  |
| 点击 | `function` | `false` | \- 说吧 |  |

### 边栏. 组道具

| 道具 | 倾斜 | 俄克里奥 | 几内亚 | 赤道几内亚 |
| --- | --- | --- | --- | --- |
| 标签 | `React.ReactNode` | `false` | \- 说吧 | \- 说吧 |
| 开始扩展 | `boolean` | `false` | `true` | Grupo deve iniciar 扩展 por paderão |
| 选项卡索引 | `number` | `false` | \- 说吧 |  |

### 边栏. 组与 GroupSwitcher 道具

| 道具 | 倾斜 | 俄克里奥 | 几内亚 | 赤道几内亚 |
| --- | --- | --- | --- | --- |
| 编号 | `string` | `false` | \- 说吧 | (HTML) " 身份认证 " 组织 `<li>`) (中文(简体) ). |
| 标签 | `ReactNode` | `false` | \- 说吧 | Label ou título do grupo, exibido acima das op-es do seletor. 中国植物物种信息数据库. |
| 选项 | `SidebarGroupWithGroupSwitcherOption[]` | `true` | \- 说吧 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}没有格鲁波 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 Cada opção 定义 um conjunto de itens e atributos. 中国植物物种信息数据库. |
| 类Name | `string` | `false` | \- 说吧 | CSS特殊组件. |
| 默认选项化 | `string` | `false` | \- 说吧 | (原始内容存档于2013-10-12). Valor paderão selecionado, caso não seja inforado, será utilizada a primira opção como paderão |
| 更改选项 | `(option: SidebarGroupWithGroupSwitcherOption) => void` | `false` | \- 说吧 | Função que será chamada como callback ao cherserar a opção 互联网档案馆的存檔,存档日期2013-12-02 |

### 边列组与组切换器选项

| 道具 | 倾斜 | 俄克里奥 | 几内亚 | 赤道几内亚 |
| --- | --- | --- | --- | --- |
| 编号 | `string` | `true` | \- 说吧 | (原始内容存档于2018-07-29). Identificador único da opção. |
| 标签 | `string` | `true` | \- 说吧 | (原始内容存档于2018-09-28). Texto que expresenta o rótulo da opção. (原始内容存档于2017-10-29) (英语). Pode Ser um nome ou título descritivo. |
| 图标 | `ReactNode` | `false` | \- 说吧 | 电磁相机 等离子相机 等离子相机. |
| 项目 | `ReactNode[]` | `true` | \- 说吧 | 儿童节日(儿童节日). |

### 内容道具

| 道具 | 倾斜 | 俄克里奥 | 几内亚 | 赤道几内亚 |
| --- | --- | --- | --- | --- |
| 禁用绘图 | `boolean` | `false` | \- 说吧 | 删除 o 粘贴 |

## 使用主题

Hook para ler e cherar o modo do tema (美国英语:`light` 编号 : `dark`) (中文(简体) ). {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}我们一起吃吧 `Layout`。 。 。 .

```tsx
import { useTheme } from '@eduzz/ui-layout';

function ThemeToggle() {
  const { theme, toggle, setTheme } = useTheme();

  return (
    <>
      <button onClick={toggle}>Tema atual: {theme}</button>
      <button onClick={() => setTheme('dark')}>Dark</button>
    </>
  );
}
```

# 应用程序装入器

(原始内容存档于2018-03-26) (英语). Longer de aplicação paderão.

## 进口

```js
import AppLoader, { useAppLoader } from '@eduzz/ui-layout';
```

## 实例

谈什么 `createRoot` e/ 使用懒惰的aparecer o 加载器 antes da aplicação。 (原始内容存档于2018-06-26) (英语). Cologue o minimo de importing nese arquivo para carregar o mais survo possível.

```jsx
import { lazy } from 'react';
import { createRoot } from 'react-dom/client';
import AppLoader from '@eduzz/ui-layout'; 

const App = lazy(() => import('./App'));

createRoot(document.getElementById('app') as HTMLElement).render(
  <AppLoader>
    <App />
  </AppLoader>
);

// App.tsx
import { useEffect } from 'react';
import { useAppLoader } from '@eduzz/ui-layout';

function App() {
  const appLoader = useAppLoader();

  useEffect(() => {
    // Faça o que precisar ser feito e entao chame o `hide`
    appLoader.hide();
    // Caso queira aparecer novamente
    appLoader.show();
    // Se algo acontecer pode mostrar uma mensagem de erro
    appLoader.error(new Error(), () => console.log('Tente novamente'));
  }, []);

  return <div />
}
```

## 常见问题

### @eduzz/ui-layout 是什么？

维基百科中的相关条目: 维基百科中的相关条目: 维基语录链接:名人名言

### 如何安装 @eduzz/ui-layout？

在项目目录运行 npm install @eduzz/ui-layout，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18）、react-dom（\>=18）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @eduzz/ui-layout 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @eduzz/ui-layout 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @eduzz/ui-layout 可以商用吗？

@eduzz/ui-layout 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @eduzz/ui-layout 的下载量有多少？

根据 npm 官方下载统计，@eduzz/ui-layout 在 2026/10/13 – 2026/11/11 这 30 天内被下载 2,117 次，日均约 71 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @eduzz/ui-layout 还在维护吗？

最新版本 5\.0\.1 发布于 2026/10/17（28 天前）；至今共发布 172 个版本，其中过去 12 个月发布了 53 个；首次发布于 2023/06/30。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。