naive-ui/demo/documentation/components/layout/enUS/index.md

Layout

Layout is for layout.

The component is a bit complicated to use. But like a manual gear car, it worths a shot.

Demos

basic
border
absolute
scrollbar
collapse
trigger-button
show-sider-content
scroll-to

Props

Layout, Layout Content Props

Name	Type	Default	Description
position	'static' | 'absolute'	'static'	static position will make it css position set to static. absolute position will make it css position set to absolute and left, right, top, bottom to 0. absolute position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it display as you expect.
theme	'light' | 'dark' | null	null
themed-style	{ [themeName: string]: Object }	null
use-native-scrollbar	boolean	true	Whether to use native scrollbar on itself. If set to false, layout will use a naive-ui style scrollbar for content

Layout Footer Props

Name	Type	Default	Description
bordered	boolean	false
position	'static' | 'absolute'	'static'	static position will make it css position set to static. absolute position will make it css position set to absolute and left, right, top to 0. absolute position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it display as you expect.
theme	'light' | 'dark' | null	null

Layout Header Props

Name	Type	Default	Description
bordered	boolean	false
position	'static' | 'absolute'	'static'	static position will make it css position set to static. absolute position will make it css position set to absolute and left, right, bottom to 0. absolute position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to ma ke as you expect.
theme	'light' | 'dark' | null	null

Layout Sider Props

Name	Type	Default	Description
bordered	boolean	false
collapse-mode	'transform' | 'width'	'transform'	If set to 'width', the sider's content width will be actually collapsed. If set to 'transform', the sider will only move it's position and won't change its content width. 'transform' collapse mode only work with sider in 'absolute' position.
collapsed	boolean	false
collapsed-width	number	48
position	'static' | 'absolute'	'static'	static position will make it css position set to static. absolute position will make it css position set to absolute and left, top, bottom to 0. absolute position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it as you expect. Make sure its adjacent n-layout or n-layout-content position set to 'absolute' when its position is 'absolute'.
show-content	boolean	true	If set to false, sider content will be invisible.
show-trigger	boolean | 'bar' | 'arrow-circle'	false	Whether to show the built-in trigger button on sider.
theme	'light' | 'dark' | null	null
use-native-scrollbar	boolean	true	Whether to use native scrollbar on itself. If set to false, sider will use a naive-ui style scrollbar for content
width	number	272

Slots

Layout, Layout Content, Layout Sider, Layout Header, Layout Footer Slots

Name	Parameters	Description
default	()

Events

Layout Sider Events

Name	Parameters	Description
collapse	()
expand	()

Methods

Layout, Layout Content, Layout Sider Methods

Name	Type	Description
scrollTo	((xCoord: number, yCoord: number) => void) | (options: { left?: number, top?: number, behavior: 'smooth' | 'auto' }) => void	Scroll to somewhere.