astryx-vue

侧边导航

@astryxdesign/core v0.7.1 · SideNav

使用方法 ​

SideNav 是页面一侧的导航地标。里面按 SideNavSection、SideNavHeading、SideNavItem 组织。collapsible 打开后，栏可以收成只剩图标的窄条，SideNavCollapseButton 在侧栏顶部靠右。收起后，没有图标的项不会渲染；有下级的项改成从侧面弹出的菜单。SideNavItem 的 actions 插槽和主控件并排，不放进链接里面，侧栏收起后不再渲染。

用 v-model:is-collapsed 受控。collapsible 也可以传对象，关掉内置按钮，或给一个快捷键，例如 mod+\\。resizable 打开后，结束边上可以拖宽度，默认从 260px 起，范围是 180px 到 480px。收起后把手会藏起来。拖到 160px 以下、并且侧栏可以收起时，栏会收成图标条。

vue
<script setup lang="ts">
import { SideNav, SideNavItem, SideNavSection } from '@astryx-vue/core/SideNav'
import { ref } from 'vue'

const collapsed = ref(false)
</script>

<template>
  <SideNav v-model:is-collapsed="collapsed" collapsible>
    <SideNavSection title="工作区">
      <SideNavItem href="/home" icon-class="i-carbon-home" label="首页" />
    </SideNavSection>
  </SideNav>
</template>

解剖

部分说明
产品图标和名称导航顶部的品牌区。
导航项可导航链接的分区和分组。
收起和展开开关收起或展开侧边导航的开关。

最佳实践 ​

指引实践
推荐会收起的项都带图标，否则收起后这一项会消失。
推荐一项既要跳转又有下级时写上 href。点文字跳转，点箭头才收起。
推荐需要用户自己调栏宽时打开 resizable。收起状态仍用 v-model:is-collapsed，不要在 collapsible 和 resizable 里各写一套。

示例 ​

尾部内容

每一行末尾可以是菜单、数量、徽章或辅助文字。

嵌套项

设置项展开后是一组可以折叠的子项。

带菜单的标题

标题是账户切换器，显示产品名和当前账户。

拖拽宽度

拖结束边上的把手改变栏宽。拖得很窄时侧栏会收起，把手随之隐藏。