Skip to content

coderben2017/sider-container

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

弹性侧边栏

可伸缩的弹性侧边栏vue组件,效果类似阿里云控制台

效果演示

参数列表

参数名 含义 数据类型 默认值 示例
siderWidth 侧边栏宽度(单位:px) Number 200 300

使用

<template>
  <sider-container :sider-width="300" style="height: 100vh"><!-- 实际业务中,height根据页面布局来确定 -->
    <template slot="sider">
      <!-- 这里填充侧边栏内容(如菜单) -->
    </template>
    <template slot="content">
      <!-- 这里填充页面内容 -->
    </template>
  </sider-container>
</template>

<script>
  import SiderContainer from 'sider-container'

  export default {
    components: {
      SiderContainer
    }
  }
</script>

使用示例

example.vue

注意事项

  • sider区域和content区域均未设置内容溢出规则,请根据设计图自行添加。

About

可伸缩的弹性侧边栏组件,效果类似阿里云控制台

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy