logoNamu Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
1.0.0
  • 组件总览
  • 通用
    • Button按钮
    • FloatButton悬浮按钮New
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Grid栅格
    • Layout布局
    • Space间距
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • ColorPicker颜色选择器New
    • DatePicker日期选择框
    • Form表单
    • Input输入框
    • InputNumber数字输入框
    • Mentions提及
    • Radio单选框
    • Rate评分
    • Select选择器
    • Slider滑动输入条
    • Switch开关
    • TimePicker时间选择框
    • Transfer穿梭框
    • TreeSelect树选择
    • Upload上传
  • 数据展示
    • Avatar头像
    • Badge徽标数
    • Calendar日历
    • Card卡片
    • Carousel走马灯
    • Collapse折叠面板
    • Descriptions描述列表
    • Empty空状态
    • Image图片
    • List列表
    • Popover气泡卡片
    • QRCode二维码New
    • Segmented分段控制器
    • Statistic统计数值
    • Table表格
    • Tabs标签页
    • Tag标签
    • Timeline时间轴
    • Tooltip文字提示
    • Tour漫游式引导New
    • Tree树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
    • Watermark水印New
  • 其他
    • Affix固钉
    • App包裹组件New
    • ConfigProvider全局化配置
设计规则
尺寸
交互
视觉
组件概述
代码演示
基本结构
上中下布局
顶部-侧边布局
顶部-侧边布局-通栏
侧边布局
自定义触发器
响应式布局
固定头部
固定侧边栏
API
Layout
Layout.Sider
Design Token

Layout
布局

    • Grid栅格Space间距

    相关资源

    Namu Design Charts
    Namu Design Pro
    Namu Design Pro Components
    Namu Design Mobile
    Namu Design Mini
    Namu Design Landing-首页模板集
    Scaffolds-脚手架市场
    Umi-React 应用开发框架
    dumi-组件/文档研发工具
    qiankun-微前端框架
    ahooks-React Hooks 库
    Ant Motion-设计动效
    国内镜像站点 🇨🇳

    社区

    Awesome Namu Design
    Medium
    Twitter
    yuqueNamu Design 语雀专栏
    Namu Design 知乎专栏
    体验科技专栏
    seeconfSEE Conf-蚂蚁体验科技大会
    加入我们

    帮助

    GitHub
    更新日志
    常见问题
    报告 Bug
    议题
    讨论区
    StackOverflow
    SegmentFault

    Ant XTech更多产品

    yuque语雀-构建你的数字花园
    AntVAntV-数据可视化解决方案
    EggEgg-企业级 Node.js 框架
    kitchenKitchen-Sketch 工具集
    xtech蚂蚁体验科技
    主题编辑器
    Made with ❤ by
    蚂蚁集团和 Namu Design 开源社区

    协助进行页面级整体布局。

    设计规则

    尺寸

    一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。

    • 顶部导航（大部分系统）：一级导航高度 64px，二级导航 48px。
    • 顶部导航（展示类页面）：一级导航高度 80px，二级导航 56px。
    • 顶部导航高度的范围计算公式为：48+8n。
    • 侧边导航宽度的范围计算公式：200+8n。

    交互

    • 一级导航和末级的导航需要在可视化的层面被强调出来；
    • 当前项应该在呈现上优先级最高；
    • 当导航收起的时候，当前项的样式自动赋予给它的上一个层级；
    • 左侧导航栏的收放交互同时支持手风琴和全展开的样式，根据业务的要求进行适当的选择。

    视觉

    导航样式上需要根据信息层级合理的选择样式：

    • 大色块强调

      建议用于底色为深色系时，当前页面父级的导航项。

    • 高亮火柴棍

      当导航栏底色为浅色系时使用，可用于当前页面对应导航项，建议尽量在导航路径的最终项使用。

    • 字体高亮变色

      从可视化层面，字体高亮的视觉强化力度低于大色块，通常在当前项的上一级使用。

    • 字体放大

      12px、14px 是导航的标准字号，14 号字体用在一、二级导航中。字号可以考虑导航项的等级做相应选择。

    组件概述

    • Layout：布局容器，其下可嵌套 Header Sider Content Footer 或 Layout 本身，可以放在任何父容器中。
    • Header：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
    • Sider：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 Layout 中。
    • Content：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
    • Footer：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。

    注意：采用 flex 布局实现，请注意浏览器兼容性问题。

    代码演示

    Header
    Content
    Footer
    Header
    Sider
    Content
    Footer
    Header
    Content
    Sider
    Footer
    Sider
    Header
    Content
    Footer
    基本结构

    典型的页面布局。

    expand codeexpand code
    • nav 1
    • nav 2
    • nav 3
    • nav 4
    • nav 5
    • nav 6
    • nav 7
    • nav 8
    • nav 9
    • nav 10
    • nav 11
    • nav 12
    • nav 13
    • nav 14
    • nav 15
    1. Home
    2. /
    3. List
    4. /
    5. App
    Content
    Namu Design ©2023 Created by Ant UED
    上中下布局

    最基本的『上-中-下』布局。

    一般主导航放置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器影响；上下级的结构符合用户上下浏览的习惯，也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不适合那些一级导航项很多的信息结构。

    expand codeexpand code
    • nav 1
    • nav 2
    • nav 3
    1. Home
    2. /
    3. List
    4. /
    5. App
    • subnav 1
      • option1
      • option2
      • option3
      • option4
    • subnav 2
    • subnav 3
    Content
    Namu Design ©2023 Created by Ant UED
    顶部-侧边布局

    拥有顶部导航及侧边栏的页面，多用于展示类网站。

    expand codeexpand code
    • nav 1
    • nav 2
    • nav 3
    • subnav 1
      • option1
      • option2
      • option3
      • option4
    • subnav 2
    • subnav 3
    1. Home
    2. /
    3. List
    4. /
    5. App
    Content
    顶部-侧边布局-通栏

    同样拥有顶部导航及侧边栏，区别是两边未留边距，多用于应用型的网站。

    expand codeexpand code
    侧边布局

    侧边两列式布局。页面横向空间有限时，侧边导航可收起。

    侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部分。

    🛎️ 想要 3 分钟实现？试试 ProLayout！

    expand codeexpand code
    • nav 1
    • nav 2
    • nav 3
    Content
    自定义触发器

    要使用自定义触发器，可以设置 trigger={null} 来隐藏默认设定。

    expand codeexpand code
    • nav 1
    • nav 2
    • nav 3
    • nav 4
    content
    Namu Design ©2023 Created by Ant UED
    响应式布局

    Layout.Sider 支持响应式布局。

    说明：配置 breakpoint 属性即生效，视窗宽度小于 breakpoint 时 Sider 缩小为 collapsedWidth 宽度，若将 collapsedWidth 设置为 0，会出现特殊 trigger。

    expand codeexpand code
    固定头部

    一般用于固定顶部导航，方便页面切换。

    expand codeexpand code
    固定侧边栏

    当内容较长时，使用固定侧边栏可以提供更好的体验。

    expand codeexpand code

    API

    <Layout>
      <Header>header</Header>
      <Layout>
        <Sider>left sidebar</Sider>
        <Content>main content</Content>
        <Sider>right sidebar</Sider>
      </Layout>
      <Footer>footer</Footer>
    </Layout>

    Layout

    通用属性参考：通用属性

    布局容器。

    参数说明类型默认值
    className容器 classNamestring-
    hasSider表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动boolean-
    style指定样式CSSProperties-

    Layout.Sider

    侧边栏。

    参数说明类型默认值
    breakpoint触发响应式布局的断点xs | sm | md | lg | xl | xxl-
    className容器 classNamestring-
    collapsed当前收起状态boolean-
    collapsedWidth收缩宽度，设置为 0 会出现特殊 triggernumber80
    collapsible是否可收起booleanfalse
    defaultCollapsed是否默认收起booleanfalse
    reverseArrow翻转折叠提示箭头的方向，当 Sider 在右边时可以使用booleanfalse
    style指定样式CSSProperties-
    theme主题颜色light | darkdark
    trigger自定义 trigger，设置为 null 时隐藏 triggerReactNode-
    width宽度number | string200
    zeroWidthTriggerStyle指定当 collapsedWidth 为 0 时出现的特殊 trigger 的样式object-
    onBreakpoint触发响应式布局断点时的回调(broken) => {}-
    onCollapse展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发(collapsed, type) => {}-

    breakpoint width

    {
      xs: '480px',
      sm: '576px',
      md: '768px',
      lg: '992px',
      xl: '1200px',
      xxl: '1600px',
    }

    Design Token

    组件 Token

    全局 Token