• BSA Lab.
      home

  • apps
    Welcome
  • dashboard
    Layout
  • web
    Components
    keyboard_arrow_down
    • Lists
      list
    • Cards
      payment
    • Carousels
      recent_actors
    • Expansion panels
      view_day
    • Dialogs
      message
    • Tabs
      tab
    • Steppers
      directions_walk
    • Data tables
      view_module
    • Date/Time Pickers
      today
    • Text fields
      format_indent_increase
    • Forms
      assignment
  • alarm
    Warnings
    keyboard_arrow_down
    • Error-404
      alarm_add
    • Error-500
      alarm_on
    • Maintenance
      build
Vuetify / Components-layout
  • Documentation

  • Vuetify.js Quick-Start
  • Nuxt.js Guide
  • Vue.js Guide
Layout - PreDefined
The layout system is the heart of every application.
#1 Container
The "v-container" can be used for a center focused page, or given the "fluid" prop to extend its full width.
12
6
4
3
2
1
#2 Grid
The "v-layout" is used for separating sections and contains the "v-flex". The structure of your layout will be as follows, "v-layout" » "v-flex".
12
6
6
4
4
4
3
3
3
3
2
2
2
2
2
2
1
1
1
1
1
1
1
1
1
1
1
1
#3 Offset
Offsets are useful for compensating for elements that may not be visible yet, or to control the position of content. Just as with breakpoints, you can set an offset for any available sizes.
xs10 offset-xs1
xs7 offset-xs5
xs5
xs5 offset-xs2
#4 Order
You can control the ordering of grid items. As with offsets, you can set different orders for different sizes
#1
#2
#1
#2
#3
#1
#2
#3
#4
#5 Direction and Align
Designate the direction and alignment in a variety of ways.
one
two
three
one
two
three
#6 Row and column based on breakpoint
Dynamically change your layout based upon resolution. (resize your screen and watch the layout change on small breakpoints)
one
two
three
© 2017 "BSA Lab." - All Rights Reserved