amis-rpc-design/libs/amis/packages/amis-ui/scss/helper/layout/_top-right-bottom-left.md
2023-10-07 19:42:30 +08:00

6.8 KiB
Raw Blame History

title
Top / Right / Bottom / Left

用来控制位置的样式集。

Class Properties
inset-0 top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
-inset-0 top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
inset-y-0 top: 0px;
bottom: 0px;
inset-x-0 right: 0px;
left: 0px;
-inset-y-0 top: 0px;
bottom: 0px;
-inset-x-0 right: 0px;
left: 0px;
top-0 top: 0px;
right-0 right: 0px;
bottom-0 bottom: 0px;
left-0 left: 0px;
-top-0 top: 0px;
-right-0 right: 0px;
-bottom-0 bottom: 0px;
-left-0 left: 0px;
inset-0.5 top: 0.125rem;
right: 0.125rem;
bottom: 0.125rem;
left: 0.125rem;
-inset-0.5 top: -0.125rem;
right: -0.125rem;
bottom: -0.125rem;
left: -0.125rem;
inset-y-0.5 top: 0.125rem;
bottom: 0.125rem;
inset-x-0.5 right: 0.125rem;
left: 0.125rem;
-inset-y-0.5 top: -0.125rem;
bottom: -0.125rem;
-inset-x-0.5 right: -0.125rem;
left: -0.125rem;
top-0.5 top: 0.125rem;
right-0.5 right: 0.125rem;
bottom-0.5 bottom: 0.125rem;
left-0.5 left: 0.125rem;
-top-0.5 top: -0.125rem;
-right-0.5 right: -0.125rem;
-bottom-0.5 bottom: -0.125rem;
-left-0.5 left: -0.125rem;

按以下尺寸表依次类推

尺寸 大小
0 0
0.5 0.125rem;
1 0.25rem
1.5 0.375rem
1.5 0.375rem
2 0.5rem
2.5 0.625rem
3 0.75rem
3.5 0.875rem
4 1rem
5 1.25rem
6 1.5rem
7 1.75rem
8 2rem
9 2.25rem
10 2.5rem
11 2.75rem
12 3rem
14 3.5rem
16 4rem
20 5rem
24 6rem
28 7rem
32 8rem
36 9rem
40 10rem
44 11rem
48 12rem
52 13rem
56 14rem
60 15rem
64 16rem
68 17rem
72 18rem
76 19rem
80 20rem
96 24rem
auto auto
1/2 50%
1/3 33.333333%
2/3 66.666667%
1/4 25%;
2/4 50%;
3/4 75%;
full 100%;
px 0.0625rem(1px)

用法

结合 relative 和 absolute 定位 和位置样式 {top|right|bottom|left|inset}-xxx,可以很方便的实现各种组件布局。

<div class="grid grid-cols-4 m:grid-cols-2 gap-4">

<!-- Span top edge -->
<div class="relative h-32 w-32 ... bg-blue-500">
  <div class="absolute inset-x-0 top-0 h-16 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">1</div>
</div>

<!-- Span right edge -->
<div class="relative h-32 w-32 ... bg-blue-500">
  <div class="absolute inset-y-0 right-0 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">2</div>
</div>

<!-- Span bottom edge -->
<div class="relative h-32 w-32 ... bg-blue-500">
  <div class="absolute inset-x-0 bottom-0 h-16 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">3</div>
</div>

<!-- Span left edge -->
<div class="relative h-32 w-32 ... bg-blue-500">
  <div class="absolute inset-y-0 left-0 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">4</div>
</div>

<!-- Fill entire parent -->
<div class="relative h-32 w-32 ... bg-blue-500">
  <div class="absolute inset-0 bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">5</div>
</div>

<!-- Pin to top left corner -->
<div class="relative h-32 w-32 ... bg-blue-500">
  <div class="absolute left-0 top-0 h-16 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">6</div>
</div>

<!-- Pin to top right corner -->
<div class="relative h-32 w-32 ... bg-blue-500">
  <div class="absolute top-0 right-0 h-16 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">7</div>
</div>

<!-- Pin to bottom right corner -->
<div class="relative h-32 w-32 ... bg-blue-500">
  <div class="absolute bottom-0 right-0 h-16 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">8</div>
</div>

<!-- Pin to bottom left corner -->
<div class="relative h-32 w-32 ... bg-blue-500">
  <div class="absolute bottom-0 left-0 h-16 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">9</div>
</div>

</div>

响应式设计

支持通过添加设备前缀 m: 或者 pc: 来分别针对「手机端」或者「pc端」设置样式更多说明请前往「响应式设计」

状态前缀

不支持「状态前缀」,有需求请提 issue