3F Design v1.107.0

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
Name Type Description Default
href String Specifies the URL of the page the link goes to. -
target String Specifies where to open the linked document. -
title String HTML title Attribute. -

API: v-language-selector

Name Type Description Default
locales Object An object that associate locales with urls {}
Name Type Description Default
url String URL called asynchronously to fetch search results based on the user's search query. The supplied url must contain a {query} placeholder. -
label String Names the object property used to display a search result. -
option-id String Names the object property used to identify individual search results. The property must thus be unique across all results. -
popular-topics Array Data used to display popular search topics []
placeholder String Placeholder text shown when the search input field is empty. -
@select Event Event triggered when a selection has been made. The selected value can be found in the $event object. -
@search-result Event Event triggered when a search with results has completed. The query value can be found in the $event object. -
@search-no-result Event Same as @search-result but without results. -

API: v-navbar-navigation-item

Name Type Description Default
href String Specifies the URL of the page the link goes to. -
target String Specifies where to open the linked document. -
title String HTML title Attribute. -
active Boolean Specifies if item is active. false

API: v-navbar-menu-item

Name Type Description Default
icon String Specifies which icon to show. Should only be used on top-level. -
href String Specifies the URL of the page the link goes to. -
target String Specifies where to open the linked document. -
title String HTML title Attribute. -
active Boolean Specifies if item is active. false
slot: items Slot Insert child v-navbar-menu-item components here. Will be shown in dropdown. -

Notice

The v-app attribute and the css class app is required to bootstrap your application. The v-layout component acts as an application wrapper and needs to be a direct descendant of v-app.

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
slot: sidebar Slot Insert v-sidebar components for secondary navigation here No sidebar

Navigation and other common layout components are documented separately:

<v-footer-contact
  img-src="/assets/3f-manden.png"
  :tabs="[{id: 'tab-1-title', title: 'Tab 1 title'}, {id: 'tab-2-title', title: 'Tab 2 title'}, {id: 'tab-3-title', title: 'Tab 3 title'}, {id: 'tab-4-title', title: 'Tab 4 title'}]">
  <template v-slot:tab-1>Tab 1 content</template>
  <template v-slot:tab-2>Tab 2 content</template>
  <template v-slot:tab-3>Tab 3 content</template>
  <template v-slot:tab-4>Tab 4 content</template>
</v-footer-contact>
1
2
3
4
5
6
7
8

API

Name Type Description Default
img-src String Adds an image to the element.

Valid value: Image URL		 -
tabs Array Use to specify tab ids and titles -
slot:tab-1-4 Slot Use these slots to specify tab content -

API

Name Type Description Default
slot:col-1-5 Slot Use these slots to specify column content -

API

Name Type Description Default
slot:social Slot Place social media icons here -
slot:address Slot Insert address content here -
slot:language-selector Slot Insert language-selector-component component here -

← Navigation →