Page

<sw-page>

ready
Container for the content of a page, including the search bar, page header, actions and the actual content.

Usage

Loading...
<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