Sidebar

<sw-sidebar>

ready

Usage

Loading...
<sw-sidebar slot="sidebar">
    <sw-sidebar-item title="Refresh" icon="default-arrow-360-left"></sw-sidebar-item>
</sw-sidebar>

Component properties

Property name Type Default
propagateWidth Boolean false

Methods

Method name Parameters
createdComponent No parameters
mountedComponent No parameters
destroyedComponent No parameters
_isItemRegistered itemToCheck
_isAnyItemActive No parameters
closeSidebar No parameters
registerSidebarItem item
setItemActive clickedItem

Imports

  • ./sw-sidebar.html.twig
  • ./sw-sidebar.scss

SASS variables

Variable name Value
$sw-sidebar-color-background $color-white (#FFF)
$sw-sidebar-color-border $color-steam-cloud ($color-gray-300)
$sw-sidebar-item-width 400px
$sw-sidebar-navigation-width 64px
$sw-sidebar-transition cubic-bezier(.50, .32, .01, 1) .3s

Twig blocks

  • sw_sidebar_navigation_item
  • sw_sidebar_navigation_list
  • sw_sidebar_navigation
  • sw_sidebar_default_slot
  • sw_sidebar_content
  • sw_sidebar

Slots

  • default