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 and has a dedicated navigation slot. v-layout
needs to be a direct descendant of v-app
.
API: v-layout
Name | Type | Description | Default |
slot: navigation | Slot | Insert v-navbar component here. | - |
v-navbar
API: v-navbar-logo
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 | {} |
API: v-search
Name | Type | Description | Default |
popular-topics | Array | Data used to display popular search topics | [] |
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 |
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-hero
API
Name | Type | Description | Default |
img-src | String | Adds an image to the hero.
Valid value: Image URL | - |
img-align | String | Sets the image alignment.
Valid value: Any background-position property | center |
auto-height | Boolean | Will make the hero height automatically adjust to the content. | false |
small | Boolean | Small size | false |
v-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 |
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 | - |
Article example