时间戳

首页 > 解决方案 > 如何更改vuesax中侧边栏的背景颜色并使其占据屏幕高度？

vue.js - 如何更改vuesax中侧边栏的背景颜色并使其占据屏幕高度？

问题描述

如何在vuesax中更改侧边栏的背景颜色并使其占据整个屏幕的高度？我阅读了文档，但没有看到有关如何执行此操作的具体示例。

标签： vue.js

解决方案

首先你需要运行这个命令。（npm i stylus stylus-loader --save-dev）然后在您使用侧边栏的 vue 组件中将以下代码放在脚本标记之后。

    <style lang="stylus">
       .parentx-static
          overflow hidden
          height 100%
          position fixed

       .sidebarx
         height 100%

       .vs-sidebar.vs-sidebar-staticPosition
         background-color #181818

       .header-sidebar
          background-color: #000000;
          margin-left: -5%;
          margin-top: -8%;
          display flex
          align-items center
          justify-content center
          flex-direction column
          width 114%
          h4
           display flex
           align-items center
           justify-content center
           width 100%
           > button
             margin-left 10px
        .footer-sidebar
          display flex
          align-items center
          justify-content space-between
          width 100%
          > button
            border 0px solid rgba(0,0,0,0) !important
            border-left 1px solid rgba(0,0,0,.07) !important
            border-radius 0px !important
    </style>

如果您包含单独的 css 文件，您也可以将 css 放在单独的文件中。 注意：只接受 RGB 和 HEX 颜色。欲了解更多信息，请参阅下面的链接。 链接： https ://lusaxweb.github.io/vuesax/theme/#colors-defaults

在这里你可以看到一些默认的侧边栏。 https://lusaxweb.github.io/vuesax/components/sideBar.html#default

推荐阅读