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
Navigation components
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-navbar-search
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 |
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-md-src | String | A breakpoint and pixel-density specific version of img-src | - |
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: 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 component here. | No sidebar |
Name | Type | Description | Default |
title | String | Sidebar title shown only in mobile view. | - |
locales | Object | An object that associate locales with urls. Should be identical to the object provided to v-language-selector. | {} |
slot: mobile-footer | Slot | Insert content to be shown in sidebar footer on mobile. | No mobile footer |
Name | Type | Description | Default |
badge-count | String | Use to show a badge count after the item, e.g. to indicate unread messages. | - |
href | String | Specifies the URL the link goes to. | - |
target | String | Specifies where to open the linked document. | - |
title | String | HTML title attribute. | - |
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