3F Design v1.136.3

# Page layout

Below is an example of the 3F Design page layout. Have a look at the markup under the Code tab.

# Required markup

To enable the page layout use the following required application markup:

<div class="app" v-app v-cloak>
  <v-layout>
    <template #navigation>
      <!-- Navigation components here -->
    </template>

    <v-content>
      <!-- Page content here -->
    </v-content>

    <!-- Footer components here -->
  </v-layout>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13

# Page content

All page specific content should be placed in the v-content component, which also has a #sidebar slot available to hold secondary navigation.

# API: v-content

Name Type Description Default
full-width Boolean Specifies whether or not content should take up full width. false
hide-sidebar Boolean Specifies whether or not sidebar should be hidden. false
slot: sidebar Slot Insert v-sidebar components for secondary navigation here No sidebar

Navigation and other common layout components are documented separately:

← Navigation →