Sidebar

GITHUB

This is the sidebar part of Framevuerk.


Code:

  

    HTML
    
  

  <fvMain>
    <fvSidebar v-model="sidebar">
        <!-- Sidebar Content -->
    </fvSidebar>
    <fvContent>
        <!-- Your Contents Container -->
    </fvContent>
</fvMain>
  

  

    Javascript
    
  

  export default {
    data () {
        return {
            sidebar: false
        }
    }
}

Examples:

View Source
I am pinned Sidebar
Line #1
Line #2
Line #3
Line #4
Line #5
Line #6
Line #7
Line #8
Line #9
Line #10
Line #11
Line #12
Line #13
Line #14
Line #15
Line #16
Line #17
Line #18
Line #19
Line #20

Notes:

  • You should put fvSidebar directly into fvMain before or after your fvContent component for style matching.
  • You can set custom color for background via sidebar-bg-color key in your variables.
  • You can control sidebar width by setting static value to width prop in css or use fvGrid classes, something like fv-col-md-4.
  • You can pass value by v-model prop to allow component to close itself on unpinned state.

API:

NameTypeDefaultDescription
value*
Boolean
---
Sidebar visibility.
pin
true or false or null
null
Is fvSidebar pinned to fvMain? if it's null, it will calcutate automatic by parent size.
NameParamsDescription
input
newVisibilityState
Fired when component request to change value(visibility state) prop.
pinChange
newPinState
Fired when internal pin state changes.
open
---
Fired when sidebar opened.
close
---
Fired when sidebar closed.
NameDescription
default
---