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

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