Layout Container

🌏 Translated with the assistance of DeepSeek and ChatGPT

You can use it to build the basic structure of a page—amazing, almost like magic! It includes the following parts:

• Container: The outer container;
• Header: The header area;
• Footer: The footer area;
• Main: The main content area;
• Aside: The sidebar area.

Common Page Layouts

Header

Main

Footer

<template>
	<px-container>
		<px-header>Header</px-header>
		<px-main>Main</px-main>
		<px-footer>Footer</px-footer>
	</px-container>
</template>

<style lang="css" scoped>
.px-container {
	height: 350px;
}

.px-header,
.px-footer,
.px-aside,
.px-main {
	display: flex;
	align-items: center;
	justify-content: center;
}
.px-header,
.px-footer {
	background: rgba(79, 184, 164, 1);
}
.px-aside {
	background: rgba(0, 168, 145, 1);
}
</style>

Header

Aside Left

Main

Footer

<template>
	<px-container>
		<px-header>Header</px-header>
		<px-container>
			<px-aside width="128px" side="left">Aside Left</px-aside>
			<px-container>
				<px-main>Main</px-main>
				<px-footer>Footer</px-footer>
			</px-container>
		</px-container>
	</px-container>
</template>

<style lang="css" scoped>
.px-container:not(.px-container .px-container) {
	height: 350px;
}

.px-header,
.px-footer,
.px-aside,
.px-main {
	display: flex;
	align-items: center;
	justify-content: center;
}
.px-header,
.px-footer {
	background: rgba(79, 184, 164, 1);
}
.px-aside {
	background: rgba(0, 168, 145, 1);
}
</style>

Header

Aside

Aside

Main

Footer

<template>
	<px-container>
		<px-header>Header</px-header>
		<px-container>
			<px-aside width="64px">Aside</px-aside>
			<px-aside width="128px">Aside</px-aside>
			<px-container>
				<px-main>Main</px-main>
				<px-footer>Footer</px-footer>
			</px-container>
		</px-container>
	</px-container>
</template>

<style lang="css" scoped>
.px-container:not(.px-container .px-container) {
	height: 350px;
}

.px-header,
.px-footer,
.px-aside,
.px-main {
	display: flex;
	align-items: center;
	justify-content: center;
}
.px-header,
.px-footer {
	background: rgba(79, 184, 164, 1);
}
.px-aside {
	background: rgba(0, 168, 145, 1);
}
</style>

Header

Aside Left

Main

Aside Right

Footer

<template>
	<px-container>
		<px-header>Header</px-header>
		<px-container>
			<px-aside width="96px">Aside Left</px-aside>
			<px-main>Main</px-main>
			<px-aside width="96px">Aside Right</px-aside>
		</px-container>
		<px-footer>Footer</px-footer>
	</px-container>
</template>

<style lang="css" scoped>
.px-container:not(.px-container .px-container) {
	height: 350px;
}

.px-header,
.px-footer,
.px-aside,
.px-main {
	display: flex;
	align-items: center;
	justify-content: center;
}
.px-header,
.px-footer {
	background: rgba(79, 184, 164, 1);
}
.px-aside {
	background: rgba(0, 168, 145, 1);
}
</style>

Layout Borders

Header, Footer, and Aside can display borders using the bordered property. The Aside component's side property is used to indicate the sidebar position, which changes where the border appears.

Header

Aside Left

Main

Aside Right

Footer

<template>
	<px-container>
		<px-header bordered>Header</px-header>
		<px-container>
			<px-aside bordered width="96px" side="left">Aside Left</px-aside>
			<px-main>Main</px-main>
			<px-aside bordered width="96px" side="right">Aside Right</px-aside>
		</px-container>
		<px-footer bordered>Footer</px-footer>
	</px-container>
</template>

<style lang="css" scoped>
.px-container:not(.px-container .px-container) {
	height: 350px;
}

.px-header,
.px-footer,
.px-aside,
.px-main {
	display: flex;
	align-items: center;
	justify-content: center;
}
.px-header,
.px-footer {
	background: rgba(79, 184, 164, 1);
}
.px-aside {
	background: rgba(0, 168, 145, 1);
}
</style>

Emphasized Layout

Header, Footer, and Aside can enable dark mode using the dark property.

Header

Aside

Aside

Main

Footer

<template>
	<px-container>
		<px-header bordered dark>Header</px-header>
		<px-container>
			<px-aside bordered dark side="left" width="64px">Aside</px-aside>
			<px-aside bordered dark side="left" width="128px">Aside</px-aside>
			<px-container>
				<px-main>Main</px-main>
				<px-footer bordered dark>Footer</px-footer>
			</px-container>
		</px-container>
	</px-container>
</template>

<style lang="css" scoped>
.px-container:not(.px-container .px-container) {
	height: 350px;
}

.px-header,
.px-footer,
.px-aside,
.px-main {
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>

API

ContainerProps

Attribute	Type	Optional	Default	Description	Version
direction	'horizontal' | 'vertical'	True		The direction in which child elements are arranged. If there is an Aside child component, the default is 'vertical', otherwise 'horizontal'.	0.0.0-beta

ContainerSlots

Slot	Parameter	Description	Version
default		Used to pass in child layout container components.	0.0.0-beta

HeaderProps

Attribute	Type	Optional	Default	Description	Version
minHeight	string | number	True	64	Minimum height of the Header component.	0.0.0-beta
bordered	boolean	True	false	Whether the Header component displays a border.	0.0.0-beta
dark	boolean	True	false	Whether the Header component uses dark mode.	0.0.0-beta

HeaderSlots

Slot	Parameter	Description	Version
default		Content of the header area.	0.0.0-beta

FooterProps

Attribute	Type	Optional	Default	Description	Version
minHeight	string | number	True	64	Minimum height of the Footer component.	0.0.0-beta
bordered	boolean	True	false	Whether the Footer component displays a border.	0.0.0-beta
dark	boolean	True	false	Whether the Footer component uses dark mode.	0.0.0-beta

FooterSlots

Slot	Parameter	Description	Version
default		Content of the footer area.	0.0.0-beta

AsideProps

Attribute	Type	Optional	Default	Description	Version
width	string | number	True	300	Width of the Aside component.	0.0.0-beta
bordered	boolean	True	false	Whether the Aside component displays a border.	0.0.0-beta
side	'left' | 'right'	True	'left'	Property used to indicate the sidebar position, which changes where the border appears. If set to 'left', the border appears on the right; if set to 'right', the border appears on the left.	0.0.0-beta
dark	boolean	True	false	Whether the Aside component uses dark mode.	0.0.0-beta

AsideSlots

Slot	Parameter	Description	Version
default		Content of the sidebar area.	0.0.0-beta

MainSlots

Slot	Parameter	Description	Version
default		Content of the main area.	0.0.0-beta