3F Design v1.58.1

Page layout

Example

This is an example of the default application markup for 3F Design. Have a look at the markup before continuing.

Required application markup

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

TIP

The v-cloak attribute hides your application during initial rendering.

Components

v-layout

This root component acts as an application wrapper, which currently exists mostly for future proofing. This component will allow us to pass options globally should we decide to introduce it. v-layout needs to be a direct descendant of v-app.

v-header

API

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

Valid value: Image URL		 -
img-align String Sets the image alignment.

Valid value: Any background-position property		 center
auto-height Boolean Will make the header height automatically adjust to the content. false
slot: navbar Slot Insert v-navbar component here. -

v-navbar

Wrapper component for header navigation.

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-navbar-menu-language

Name Type Description Default
locales Object An object that associate locales with urls {}

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

If a url provided as href contains the query parameter SC_LOCKED the item will be styled as locked.

v-content

Wrapper component for page content.

API

Name Type Description Default
full-width Boolean Specifies whether or not content should take up full width. false
slot: sidebar Slot Insert v-sidebar component here. No sidebar

Article example

← Grid →