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:

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.