TPower DesignAppearance
内间距
用于控制元素填充的工具
| Class | 属性Properties |
|---|---|
| p-spacing-extra-tight | padding: 4px; |
| px-spacing-extra-tight | padding-left: 4px; padding-right: 4px; |
| py-spacing-extra-tight | padding-top: 4px; padding-bottom: 4px; |
| pt-spacing-extra-tight | padding-top: 4px; |
| pl-spacing-extra-tight | padding-left: 4px; |
| pb-spacing-extra-tight | padding-bottom: 4px; |
| pr-spacing-extra-tight | padding-right: 4px; |
| p-spacing-tight | padding: 8px; |
| px-spacing-tight | padding-left: 8px; padding-right: 8px; |
| py-spacing-tight | padding-top: 8px; padding-bottom: 8px; |
| pl-spacing-tight | padding-left: 8px; |
| pb-spacing-tight | padding-bottom: 8px; |
| pr-spacing-tight | padding-right: 8px; |
| p-spacing-base-tight | padding: 12px; |
| px-spacing-base-tight | padding-left: 12px; padding-right: 12px; |
| py-spacing-base-tight | padding-top: 12px; padding-bottom: 12px; |
| pt-spacing-base-tight | padding-top: 12px; |
| pl-spacing-base-tight | padding-left: 12px; |
| pb-spacing-base-tight | padding-bottom: 12px; |
| pr-spacing-base-tight | padding-right: 12px; |
p-spacing-base 默认 | padding: 16px; |
| px-spacing-base | padding-left: 16px; padding-right: 16px; |
| py-spacing-base | padding-top: 16px; padding-bottom: 16px; |
| pt-spacing-base | padding-top: 16px; |
| pl-spacing-base | padding-left: 16px; |
| pb-spacing-base | padding-bottom: 16px; |
| pr-spacing-base | padding-right: 16px; |
| p-spacing-loose | padding: 24px; |
| px-spacing-loose | padding-left: 24px; padding-right: 24px; |
| py-spacing-loose | padding-top: 24px; padding-bottom: 24px; |
| pt-spacing-loose | padding-top: 24px; |
| pl-spacing-loose | padding-left: 24px; |
| pb-spacing-loose | padding-bottom: 24px; |
| pr-spacing-loose | padding-right: 24px; |
| p-spacing-extra-loose | padding: 32px; |
| px-spacing-extra-loose | padding-left: 32px; padding-right: 32px; |
| py-spacing-extra-loose | padding-top: 32px; padding-bottom: 32px; |
| pt-spacing-extra-loose | padding-top: 32px; |
| pl-spacing-extra-loose | padding-left: 32px; |
| pb-spacing-extra-loose | padding-bottom: 32px; |
| pr-spacing-extra-loose | padding-right: 32px; |
| p-spacing-super-loose | padding: 40px; |
| px-spacing-super-loose | padding-left: 40px; padding-right: 40px; |
| py-spacing-super-loose | padding-top: 40px; padding-bottom: 40px; |
| pt-spacing-super-loose | padding-top: 40px; |
| pl-spacing-super-loose | padding-left: 40px; |
| pb-spacing-super-loose | padding-bottom: 40px; |
| pr-spacing-super-loose | padding-right: 40px; |
基本用法
使用 pt-*、pr-*、pb-* 和 pl-* 工具来控制元素一侧的填充。
例如，pt-spacing-extra-tight 将在元素的顶部添加 4px 的填充，pr-spacing-loose 将在元素的右侧添加 24px 的填充.
向单边添加填充
pt-spacing-tight
顶部8px
pr-spacing-loose
右侧24px
pb-spacing-base
底部16px
pl-spacing-base-tight
左侧12px
html
<!-- 上内边距 -->
<div class="pt-spacing-tight"></div>
<!-- 右内边距 -->
<div class="pr-spacing-loose"></div>
<!-- 下内边距 -->
<div class="pb-spacing-base"></div>
<!-- 左内边距 -->
<div class="pl-spacing-base-tight"></div>
水平垂直填充
px-spacing-extra-loose
px-spacing-extra-loose
html
<div class='px-spacing-extra-loose'></div>
<div class='py-spacing-super-loose'></div>
四侧填充
使用 p-* 工具来控制元素所有侧面的填充。
p-spacing-extra-tight
html
<div class="p-spacing-extra-tight"></div>
外间距
| Class | 属性Properties |
|---|---|
| m-spacing-extra-tight | margin: 4px; |
| mt-spacing-extra-tight | margin-top: 4px; |
| mr-spacing-extra-tight | margin-right: 4px; |
| mb-spacing-extra-tight | margin-bottom: 4px; |
| ml-spacing-extra-tight | margin-left: 4px; |
| mx-spacing-extra-tight | margin-left: 4px; margin-right: 4px; |
| my-spacing-extra-tight | margin-top: 4px; margin-bottom: 4px; |
| m-spacing-tight | margin: 8px; |
| mt-spacing-tight | margin-top: 8px; |
| mr-spacing-tight | margin-right: 8px; |
| mb-spacing-tight | margin-bottom: 8px; |
| ml-spacing-tight | margin-left: 8px; |
| mx-spacing-tight | margin-left: 8px; margin-right: 8px; |
| my-spacing-tight | margin-top: 8px; margin-bottom: 8px; |
| m-spacing-base-tight | margin: 12px; |
| mt-spacing-base-tight | margin-top: 12px; |
| mr-spacing-base-tight | margin-right: 12px; |
| mb-spacing-base-tight | margin-bottom: 12px; |
| ml-spacing-base-tight | margin-left: 12px; |
| mx-spacing-base-tight | margin-left: 12px; margin-right: 12px; |
| my-spacing-base-tight | margin-top: 12px; margin-bottom: 12px; |
m-spacing-base 默认 | margin: 16px; |
| mt-spacing-base | margin-top: 16px; |
| mr-spacing-base | margin-right: 16px; |
| mb-spacing-base | margin-bottom: 16px; |
| ml-spacing-base | margin-left: 16px; |
| mx-spacing-base | margin-left: 16px; margin-right: 16px; |
| my-spacing-base | margin-top: 16px; margin-bottom: 16px; |
| m-spacing-loose | margin: 24px; |
| mt-spacing-loose | margin-top: 24px; |
| mr-spacing-loose | margin-right: 24px; |
| mb-spacing-loose | margin-bottom: 24px; |
| ml-spacing-loose | margin-left: 24px; |
| mx-spacing-loose | margin-left: 24px; margin-right: 24px; |
| my-spacing-loose | margin-top: 24px; margin-bottom: 24px; |
| m-spacing-extra-loose | margin: 32px; |
| mt-spacing-extra-loose | margin-top: 32px; |
| mr-spacing-extra-loose | margin-right: 32px; |
| mb-spacing-extra-loose | margin-bottom: 32px; |
| ml-spacing-extra-loose | margin-left: 32px; |
| mx-spacing-extra-loose | margin-left: 32px; margin-right: 32px; |
| my-spacing-extra-loose | margin-top: 32px; margin-bottom: 32px; |
| m-spacing-super-loose | margin: 40px; |
| mt-spacing-super-loose | margin-top: 40px; |
| mr-spacing-super-loose | margin-right: 40px; |
| mb-spacing-super-loose | margin-bottom: 40px; |
| ml-spacing-super-loose | margin-left: 40px; |
| mx-spacing-super-loose | margin-left: 40px; margin-right: 40px; |
| my-spacing-super-loose | margin-top: 40px; margin-bottom: 40px; |
基本用法
使用 mt-*、mr-*、mb-* 和 ml-*工具来控制元素一侧的边距。 例如，mt-spacing-extra-tight 将在元素的顶部添加 4px 的边距，mr-spacing-loose 将在元素的右侧添加 24px 的边距。
单边加边距
mt-spacing-tight
mr-spacing-loose
mb-spacing-base
mt-spacing-tight
html
<!-- 上外边距 -->
<div class="mt-spacing-tight"></div>
<!-- 右外边距 -->
<div class="mr-spacing-loose"></div>
<!-- 下外边距 -->
<div class="mb-spacing-base"></div>
<!-- 左外边距 -->
<div class="ml-spacing-base-tight"></div>
水平垂直边距
mx-spacing-extra-loose
my-spacing-super-loose
html
<!-- 水平外边距 (左右各32px) -->
<div class="mx-spacing-extra-loose"></div>
<!-- 垂直外边距 (上下各40px) -->
<div class="my-spacing-super-loose"></div>
四侧边距
使用 m-* 工具来控制元素所有侧面的边距。
m-spacing-extra-tight
html
<!-- 四侧外边距 (所有方向4px) -->
<div class="m-spacing-extra-tight"></div>