293 lines
9.8 KiB
SCSS
293 lines
9.8 KiB
SCSS
|
/*!markdown
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
title: Top / Right / Bottom / Left
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
用来控制位置的样式集。
|
|||
|
|
|
|||
|
|
| Class | Properties |
|
|||
|
|
| ------------ | --------------------------------------------------------------------------------- |
|
|||
|
|
| inset-0 | top: 0px;<br/>right: 0px;<br/>bottom: 0px;<br/>left: 0px; |
|
|||
|
|
| -inset-0 | top: 0px;<br/>right: 0px;<br/>bottom: 0px;<br/>left: 0px; |
|
|||
|
|
| inset-y-0 | top: 0px;<br/>bottom: 0px; |
|
|||
|
|
| inset-x-0 | right: 0px;<br/>left: 0px; |
|
|||
|
|
| -inset-y-0 | top: 0px;<br/>bottom: 0px; |
|
|||
|
|
| -inset-x-0 | right: 0px;<br/>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;<br/>right: 0.125rem;<br/>bottom: 0.125rem;<br/>left: 0.125rem; |
|
|||
|
|
| -inset-0.5 | top: -0.125rem;<br/>right: -0.125rem;<br/>bottom: -0.125rem;<br/>left: -0.125rem; |
|
|||
|
|
| inset-y-0.5 | top: 0.125rem;<br/>bottom: 0.125rem; |
|
|||
|
|
| inset-x-0.5 | right: 0.125rem;<br/>left: 0.125rem; |
|
|||
|
|
| -inset-y-0.5 | top: -0.125rem;<br/>bottom: -0.125rem; |
|
|||
|
|
| -inset-x-0.5 | right: -0.125rem;<br/>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`，可以很方便的实现各种组件布局。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<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端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。
|
|||
|
|
|
|||
|
|
## 状态前缀
|
|||
|
|
|
|||
|
|
不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
|
|||
|
|
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
@mixin make-single-position(
|
|||
|
|
$selector,
|
|||
|
|
$direction,
|
|||
|
|
$name,
|
|||
|
|
$value,
|
|||
|
|
$prefix: '.'
|
|||
|
|
) {
|
|||
|
|
#{$prefix}#{'' + selector-escape($selector + '-' + $name) } {
|
|||
|
|
#{$direction}: $value;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@mixin make-single-positions($direction, $map: $inset, $prefix: '.') {
|
|||
|
|
@each $name, $value in $map {
|
|||
|
|
@include make-single-position(
|
|||
|
|
$direction,
|
|||
|
|
$direction,
|
|||
|
|
$name,
|
|||
|
|
$value,
|
|||
|
|
$prefix
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@each $name, $value in $map {
|
|||
|
|
@if (type-of($value) == 'number') {
|
|||
|
|
@include make-single-position(
|
|||
|
|
#{'-' + $direction},
|
|||
|
|
$direction,
|
|||
|
|
$name,
|
|||
|
|
($value * -1),
|
|||
|
|
$prefix
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@mixin make-inset-positions($map: $inset, $prefix: '.') {
|
|||
|
|
@each $name, $value in $map {
|
|||
|
|
#{$prefix}#{selector-escape('inset-' + $name) } {
|
|||
|
|
top: $value;
|
|||
|
|
right: $value;
|
|||
|
|
bottom: $value;
|
|||
|
|
left: $value;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@each $name, $value in $map {
|
|||
|
|
@if (type-of($value) == 'number') {
|
|||
|
|
#{$prefix}#{selector-escape('-inset-' + $name) } {
|
|||
|
|
top: $value * -1;
|
|||
|
|
right: $value * -1;
|
|||
|
|
bottom: $value * -1;
|
|||
|
|
left: $value * -1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@mixin make-inset-x-positions($map: $inset, $prefix: '.') {
|
|||
|
|
@each $name, $value in $map {
|
|||
|
|
#{$prefix}#{selector-escape('inset-x-' + $name) } {
|
|||
|
|
right: $value;
|
|||
|
|
left: $value;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@each $name, $value in $map {
|
|||
|
|
@if (type-of($value) == 'number') {
|
|||
|
|
#{$prefix}#{selector-escape('-inset-x-' + $name) } {
|
|||
|
|
right: $value * -1;
|
|||
|
|
left: $value * -1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@mixin make-inset-y-positions($map: $inset, $prefix: '.') {
|
|||
|
|
@each $name, $value in $map {
|
|||
|
|
#{$prefix}#{selector-escape('inset-y-' + $name) } {
|
|||
|
|
top: $value;
|
|||
|
|
bottom: $value;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@each $name, $value in $map {
|
|||
|
|
@if (type-of($value) == 'number') {
|
|||
|
|
#{$prefix}#{selector-escape('-inset-y-' + $name) } {
|
|||
|
|
top: $value * -1;
|
|||
|
|
bottom: $value * -1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@include make-single-positions('top');
|
|||
|
|
@include make-single-positions('right');
|
|||
|
|
@include make-single-positions('bottom');
|
|||
|
|
@include make-single-positions('left');
|
|||
|
|
|
|||
|
|
@include make-inset-positions();
|
|||
|
|
@include make-inset-x-positions();
|
|||
|
|
@include make-inset-y-positions();
|
|||
|
|
|
|||
|
|
@each $deivce in map-keys($devices) {
|
|||
|
|
@include media-device($deivce) {
|
|||
|
|
@include make-single-positions(
|
|||
|
|
'top',
|
|||
|
|
$inset,
|
|||
|
|
'.' + selector-escape($deivce + ':')
|
|||
|
|
);
|
|||
|
|
@include make-single-positions(
|
|||
|
|
'right',
|
|||
|
|
$inset,
|
|||
|
|
'.' + selector-escape($deivce + ':')
|
|||
|
|
);
|
|||
|
|
@include make-single-positions(
|
|||
|
|
'bottom',
|
|||
|
|
$inset,
|
|||
|
|
'.' + selector-escape($deivce + ':')
|
|||
|
|
);
|
|||
|
|
@include make-single-positions(
|
|||
|
|
'left',
|
|||
|
|
$inset,
|
|||
|
|
'.' + selector-escape($deivce + ':')
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
@include make-inset-positions($inset, '.' + selector-escape($deivce + ':'));
|
|||
|
|
@include make-inset-x-positions(
|
|||
|
|
$inset,
|
|||
|
|
'.' + selector-escape($deivce + ':')
|
|||
|
|
);
|
|||
|
|
@include make-inset-y-positions(
|
|||
|
|
$inset,
|
|||
|
|
'.' + selector-escape($deivce + ':')
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|