Layout

The top-most structural component in any view and acts as the main wrapper for smaller items within it. The Layout component defines the main layout structure of a page by providing standard sizing and spacing for the different content areas.


                                                        
                                                        
                                                              <w-layout>
                                                              <w-layout-sidebar>
                                                                <div>Sidebar</div>
                                                              </w-layout-sidebar>
                                                              <w-layout-main :full-width="true">
                                                                <w-layout-main-header>
                                                                  <div>Header</div>
                                                                </w-layout-main-header>
                                                                <w-layout-main-content>
                                                                  <div>Main Content</div>
                                                                </w-layout-main-content>
                                                              </w-layout-main>
                                                            </w-layout>

Props

LayoutMain

Name	Description	Type	Default	Values
full-width	Main content stretches to the edges and have full width	boolean	false	false, true

Slots

Layout

Name	Description
default	Default content slot

LayoutSidebar

Name	Description
default	Default content slot for layout sidebar section

LayoutMain

Name	Description
default	Default content slot for layout main section

LayoutMainHeader

Name	Description
default	Header inner content

LayoutMainContent

Name	Description
default	Default content slot for "layout main content" section