Container for the content of a page, including the search bar, page header, actions and the actual content.
Usage
<sw-page style="height: 550px; border: 1px solid #D8DDE6;">
<template slot="search-bar">
<sw-search-bar>
</sw-search-bar>
</template>
<template slot="smart-bar-header">
<h2>Lorem ipsum page</h2>
</template>
<template slot="smart-bar-actions">
<sw-button variant="primary">
Action
</sw-button>
</template>
<template slot="side-content">
<sw-card-view>
<sw-card>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</sw-card>
</sw-card-view>
</template>
<template slot="content">
<sw-card-view>
<sw-card title="Card1" large></sw-card>
<sw-card title="Card2" large></sw-card>
</sw-card-view>
</template>
</sw-page>
Component properties
| Property name | Type | Default |
|---|
| showSmartBar |
Boolean
|
true
|
| showSearchBar |
Boolean
|
true
|
Methods
| Method name | Parameters |
|---|
| createdComponent |
No parameters
|
| mountedComponent |
No parameters
|
| updatedComponent |
No parameters
|
| beforeDestroyComponent |
No parameters
|
| readScreenWidth |
No parameters
|
| setSidebarOffset |
sidebarWidth
|
| removeSidebarOffset |
No parameters
|
| setScrollbarOffset |
No parameters
|
| initPage |
No parameters
|
Imports
- ./sw-page.html.twig
- ./sw-page.scss
SASS variables
| Variable name | Value |
|---|
| $sw-page-smart-bar-border-color |
$color-steam-cloud ($color-gray-300)
|
| $sw-page-separator-color |
$color-steam-cloud ($color-gray-300)
|
| $sw-page-divider-background-color |
$color-steam-cloud ($color-gray-300)
|
| $sw-page-smart-bar-background-color |
$color-white (#FFF)
|
| $sw-page-smart-bar-headline-color |
$color-kashmir ($color-darkgray-200)
|
| $sw-page-side-content-default-width |
440px
|
| $sw-page-smart-bar-headline-font-size |
18px
|
| $sw-page-smart-bar-headline-font-weight |
600
|
Twig blocks
- sw_page_slot_search_bar
- sw_page_notification_center
- sw_page_top_bar_actions
- sw_page_search_bar
- sw_page_smart_bar_divider
- sw_page_slot_smart_bar_back
- sw_page_smart_bar_back_btn
- sw_page_slot_smart_bar_header
- sw_page_smart_bar_content_header
- sw_page_slot_language_switch
- sw_page_smart_bar_content_language_switch
- sw_page_slot_smart_bar_actions
- sw_page_smart_bar_content_actions
- sw_page_smart_bar_content
- sw_page_smart_bar
- sw_page_head_area
- sw_page_slot_side_content
- sw_page_slot_content
- sw_page_sidebar_slot
- sw_page_content_sidebar
- sw_page_content
- sw_page
Slots
- search-bar
- smart-bar-back
- smart-bar-header
- language-switch
- smart-bar-actions
- side-content
- content
- sidebar