hogwarts-ui 官方网站

Appearance

Aside-v3 侧边栏 ​

基础用法 ​

点击查看示例代码
vue
<template>
  <h-aside-v3 :h_data="h_data"></h-aside-v3>
</template>

<script setup>
const h_data = {
  component: 'h-aside-v3',
  background: 'https://ceshiren.com/uploads/default/original/3X/c/1/c164bba6bb1cafa07c52400b896ce2257551f635.jpeg',
  theme: 'dark',
  items: [{
    component: 'h-menu-v2',
    items: [{
        identifier: 'asidev3',
        name: '测试管理',
        link: '/project/21',
        icon: 'fa fa-lg mr-1 fa-user'
      },
      {
        identifier: 'demo21',
        name: '测试管理',
        link: '/project/21',
        icon: 'fa fa-lg mr-1 fa-apple',
        items: [{
          identifier: 'demo21',
          name: '测试管理1',
          link: '/project/21',
        }, {
          identifier: 'demo21',
          name: '测试管理2',
          link: '/project/21',
        }, {
          identifier: 'demo21',
          name: '测试管理3',
          link: '/project/21',
        }, ]
      },
      {
        identifier: 'demo21',
        name: '测试管理',
        link: '/project/21',
        icon: 'fa fa-lg mr-1 fa-close'
      },
      {
        identifier: 'demo21',
        name: '测试管理',
        link: '/project/21',
        icon: 'fa fa-lg mr-1 fa-bars'
      },
      {
        identifier: 'demo21',
        name: '测试管理',
        link: '/project/21',
        icon: 'fa fa-lg mr-1 fa-book'
      },
    ]
  }]
}
</script>
<template>
  <h-aside-v3 :h_data="h_data"></h-aside-v3>
</template>

<script setup>
const h_data = {
  component: 'h-aside-v3',
  background: 'https://ceshiren.com/uploads/default/original/3X/c/1/c164bba6bb1cafa07c52400b896ce2257551f635.jpeg',
  theme: 'dark',
  items: [{
    component: 'h-menu-v2',
    items: [{
        identifier: 'asidev3',
        name: '测试管理',
        link: '/project/21',
        icon: 'fa fa-lg mr-1 fa-user'
      },
      {
        identifier: 'demo21',
        name: '测试管理',
        link: '/project/21',
        icon: 'fa fa-lg mr-1 fa-apple',
        items: [{
          identifier: 'demo21',
          name: '测试管理1',
          link: '/project/21',
        }, {
          identifier: 'demo21',
          name: '测试管理2',
          link: '/project/21',
        }, {
          identifier: 'demo21',
          name: '测试管理3',
          link: '/project/21',
        }, ]
      },
      {
        identifier: 'demo21',
        name: '测试管理',
        link: '/project/21',
        icon: 'fa fa-lg mr-1 fa-close'
      },
      {
        identifier: 'demo21',
        name: '测试管理',
        link: '/project/21',
        icon: 'fa fa-lg mr-1 fa-bars'
      },
      {
        identifier: 'demo21',
        name: '测试管理',
        link: '/project/21',
        icon: 'fa fa-lg mr-1 fa-book'
      },
    ]
  }]
}
</script>