Cuttlefish Docs
  • 简体中文

    • spz-nested-menu 侧边菜单

    支持布局: fill

    何时使用

    导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。

    该组件常用于顶侧边导航，顶部导航一般用 spz-menu 组件。

    代码演示

    基本用法

    属性名说明
    spz-nested-submenu标识当前菜单是一个子菜单，当它可见，会带有 open 属性
    spz-nested-submenu-open标识当前菜单有一个子菜单
    spz-nested-submenu-close标识返回上一层菜单按钮
    child-open标识当前菜单是否被可见。如果有子菜单可见，spz-nested-menu 元素会带有该属性；如果带有 spz-nested-submenu 元素的子菜单可见，该元素也会带有该属性
    open标识当前子菜单可见
    <div class="nested-menu-wrapper">
  <h3>Nested menu</h3>
  <div class="nested-menu-inner-wrapper">
    <spz-nested-menu layout="fill" side="right">
      <ul>
        <li>Navigation 1</li>
        <li>
          <div spz-nested-submenu-open>Navigation 2 (Has next submenu)</div>
          <ul spz-nested-submenu>
            <li spz-nested-submenu-close>Back</li>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>
              <div spz-nested-submenu-open>Item 4 (Has next submenu)</div>
              <ul spz-nested-submenu>
                <li spz-nested-submenu-close>Back</li>
                <li>Option 1</li>
                <li>Option 2</li>
                <li>Option 3</li>
              </ul>
            </li>
          </ul>
        </li>
        <li>Navigation 3</li>
        <li>Navigation 4</li>
        <li>Navigation 5</li>
      </ul>
    </spz-nested-menu>
  </div>
</div>

    属性

    属性名说明类型默认值是否必须
    side菜单切换的动效方向"left" | "right"-是

    方法

    reset

    重置菜单到初始化状态，不需要参数。

    AI 摘要（LLM Ready）

    • 组件标识：spz-nested-menu
    • 用途一句话：为页面和功能提供导航的侧边菜单。
    • 可识别属性条目：1
    • 可识别方法小节：1
    • 可识别事件小节：0
    • 关键属性名（Top）：side
    • 关键方法名（Top）：reset
    • 关键事件名（Top）：无（待补充）
    • 阅读顺序建议：先看「何时使用」与「代码演示」，再核对属性/方法/事件。
    • 关联文档：/guide/actions-and-events/ 、/guide/layouts/