Pixelium Design

中文

English

中文

English

Appearance

布局容器 Container ​

你可以用它来搭建页面基本结构，太棒了，简直像魔法一样！它包括以下几个部分

  • Container：外层容器；
  • Header：页头区域；
  • Footer：页脚区域；
  • Main：主体内容区域；
  • Aside：侧边栏区域。

常见页面布局 ​

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
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
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
Main
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>

布局边框 ​

Header、Footer、Aside 可以用 bordered 属性设置展示边框，Aside 组件 side 属性用于标记侧边栏位置，从而修改边框展示的位置。

Header
Main
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>

强调布局 ​

Header、Footer、Aside 可以用 dark 属性开启深色模式。

Header
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 ​

属性类型可选默认值描述版本
direction'horizontal' | 'vertical'是子元素排列方向，如果有 Aside 子组件，默认为 'vertical'，否则为 'horizontal'。0.0.0-beta

ContainerSlots ​

插槽参数描述版本
default用于传入子布局容器组件。0.0.0-beta

HeaderProps ​

属性类型可选默认值描述版本
minHeightstring | number是64Header 组件最小高度。0.0.0-beta
borderedboolean是falseHeader 组件是否展示边框。0.0.0-beta
darkboolean是falseHeader 组件是否为深色模式。0.0.0-beta

HeaderSlots ​

插槽参数描述版本
default页头区域的内容。0.0.0-beta

FooterProps ​

属性类型可选默认值描述版本
minHeightstring | number是64Footer 组件最小高度。0.0.0-beta
borderedboolean是falseFooter 组件是否展示边框。0.0.0-beta
darkboolean是falseFooter 组件是否为深色模式。0.0.0-beta

FooterSlots ​

插槽参数描述版本
default页脚区域的内容。0.0.0-beta

AsideProps ​

属性类型可选默认值描述版本
widthstring | number是300Aside 组件宽度。0.0.0-beta
borderedboolean是falseAside 组件是否展示边框。0.0.0-beta
side'left' | 'right'是'left'属性用于标记侧边栏位置，从而修改边框展示的位置，为 'left' 则边框出现在右侧，为 'right' 则出现在左侧。0.0.0-beta
darkboolean是falseAside 组件是否为深色模式。0.0.0-beta

AsideSlots ​

插槽参数描述版本
default侧边栏区域的内容。0.0.0-beta

MainSlots ​

插槽参数描述版本
default主体区域的内容。0.0.0-beta