amis-ui 1.0.0-beta.0

package/scss/helper/layout/_float.scss

@@ -0,0 +1,71 @@
+/*!markdown
+
+---
+title: Floats
+---
+
+浮动相关样式。
+
+| Class       | Properties    |
+| ----------- | ------------- |
+| float-right | float: right; |
+| float-left  | float: left;  |
+| float-none  | float: none;  |
+
+## 左浮
+
+```html
+<img class="w-32 m-4 pc:float-left ..." src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAMAAAAKE/YAAAAAP1BMVEXp7vG6vsHo7fC3ur7s8fXr8PO1uLy8wMO5vcDL0NLN0dXl6u3T19vHy86+wsXO0tbQ1djc4eTh5ejBxcjZ3eD/ULOKAAACiklEQVR42u3a2YrjMBCF4arSVrYTL3Le/1lHXqbdPTZDWheRDOcLAZGrnyLgRSIAAAAAAAAAAAAAAAAAAAAAAAAAAAD4IrmoGBHKVSxbyFEm56hMtRBN7TNPO1GRaiFpvDd5vG+lQLUQNT6EwDlCYD+4AtF2Ug4mkzKb+PFqITf6oP3wyDEEZTPaz0dT63s/2DxPw6YtFT2S7Lr0eZtrSkYP64pShrXWyZsVhaNHt6xScjdNUSy9lyG2fLTYbpyZw/NFJDeJFhdnb4wab1ohuUc0dbPnwMxB/WhFbhFtR8+boBwvSkSktmiS2fDu8oohzoqQ1BQtLgY9oht3HutrXKvrjX4SyekexTys1DVp6vojeimRf5t1ra5p0lvBTvVlz83MW3VV0TF1bfwsJOfmv9UVRYt9eN2a++gumo/qeqJJ3Ks3i+dl81FNUk90ipDX0I4TfW+WvflndT3R6WsTJ/9r3qvriSb569x8VPNaXU/0149y0XxU+4cjqSpaZK8+mq+rK4pOofE5WZFT86m6omjbzT4s1UfzZXVFf4+1uTc82aWZTeArGkzoXC3R25w1LNX2lZqVr2lfPnpZHc3MqTpOejSfmAqiHcn35kRDCk8qnnSKPpo3qqx1R6fV3swHrX/SazP/UHl0Wrml+VbRTmhpvlu0i6o3jA6IPlQTHWqJZqNv4ypumFJ0z+FtPc8VRJNI9zvln1wytrhrenLZ3GGjqHWW3O/tm5+Ftpm5Gdrht9qh2V6CCH2Y2KgmsM9imFWj+3w00eiVQx5eN8Lo44RkVJOLR5IyR2tcHJs8Y7SlDjGJtS6PteWOi53d4WQe3a8YAAAAAAAAAAAAAAAAAAAAAAAAAACgNn8AGA09DkR51CoAAAAASUVORK5CYII=">
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.</p>
+```
+
+## 右浮
+
+```html
+<img class="w-32 m-4 pc:float-right ..." src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAMAAAAKE/YAAAAAP1BMVEXp7vG6vsHo7fC3ur7s8fXr8PO1uLy8wMO5vcDL0NLN0dXl6u3T19vHy86+wsXO0tbQ1djc4eTh5ejBxcjZ3eD/ULOKAAACiklEQVR42u3a2YrjMBCF4arSVrYTL3Le/1lHXqbdPTZDWheRDOcLAZGrnyLgRSIAAAAAAAAAAAAAAAAAAAAAAAAAAAD4IrmoGBHKVSxbyFEm56hMtRBN7TNPO1GRaiFpvDd5vG+lQLUQNT6EwDlCYD+4AtF2Ug4mkzKb+PFqITf6oP3wyDEEZTPaz0dT63s/2DxPw6YtFT2S7Lr0eZtrSkYP64pShrXWyZsVhaNHt6xScjdNUSy9lyG2fLTYbpyZw/NFJDeJFhdnb4wab1ohuUc0dbPnwMxB/WhFbhFtR8+boBwvSkSktmiS2fDu8oohzoqQ1BQtLgY9oht3HutrXKvrjX4SyekexTys1DVp6vojeimRf5t1ra5p0lvBTvVlz83MW3VV0TF1bfwsJOfmv9UVRYt9eN2a++gumo/qeqJJ3Ks3i+dl81FNUk90ipDX0I4TfW+WvflndT3R6WsTJ/9r3qvriSb569x8VPNaXU/0149y0XxU+4cjqSpaZK8+mq+rK4pOofE5WZFT86m6omjbzT4s1UfzZXVFf4+1uTc82aWZTeArGkzoXC3R25w1LNX2lZqVr2lfPnpZHc3MqTpOejSfmAqiHcn35kRDCk8qnnSKPpo3qqx1R6fV3swHrX/SazP/UHl0Wrml+VbRTmhpvlu0i6o3jA6IPlQTHWqJZqNv4ypumFJ0z+FtPc8VRJNI9zvln1wytrhrenLZ3GGjqHWW3O/tm5+Ftpm5Gdrht9qh2V6CCH2Y2KgmsM9imFWj+3w00eiVQx5eN8Lo44RkVJOLR5IyR2tcHJs8Y7SlDjGJtS6PteWOi53d4WQe3a8YAAAAAAAAAAAAAAAAAAAAAAAAAACgNn8AGA09DkR51CoAAAAASUVORK5CYII=">
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.</p>
+```
+
+## 不浮动
+
+```html
+<img class="w-32 m-4 pc:float-none ..." src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAMAAAAKE/YAAAAAP1BMVEXp7vG6vsHo7fC3ur7s8fXr8PO1uLy8wMO5vcDL0NLN0dXl6u3T19vHy86+wsXO0tbQ1djc4eTh5ejBxcjZ3eD/ULOKAAACiklEQVR42u3a2YrjMBCF4arSVrYTL3Le/1lHXqbdPTZDWheRDOcLAZGrnyLgRSIAAAAAAAAAAAAAAAAAAAAAAAAAAAD4IrmoGBHKVSxbyFEm56hMtRBN7TNPO1GRaiFpvDd5vG+lQLUQNT6EwDlCYD+4AtF2Ug4mkzKb+PFqITf6oP3wyDEEZTPaz0dT63s/2DxPw6YtFT2S7Lr0eZtrSkYP64pShrXWyZsVhaNHt6xScjdNUSy9lyG2fLTYbpyZw/NFJDeJFhdnb4wab1ohuUc0dbPnwMxB/WhFbhFtR8+boBwvSkSktmiS2fDu8oohzoqQ1BQtLgY9oht3HutrXKvrjX4SyekexTys1DVp6vojeimRf5t1ra5p0lvBTvVlz83MW3VV0TF1bfwsJOfmv9UVRYt9eN2a++gumo/qeqJJ3Ks3i+dl81FNUk90ipDX0I4TfW+WvflndT3R6WsTJ/9r3qvriSb569x8VPNaXU/0149y0XxU+4cjqSpaZK8+mq+rK4pOofE5WZFT86m6omjbzT4s1UfzZXVFf4+1uTc82aWZTeArGkzoXC3R25w1LNX2lZqVr2lfPnpZHc3MqTpOejSfmAqiHcn35kRDCk8qnnSKPpo3qqx1R6fV3swHrX/SazP/UHl0Wrml+VbRTmhpvlu0i6o3jA6IPlQTHWqJZqNv4ypumFJ0z+FtPc8VRJNI9zvln1wytrhrenLZ3GGjqHWW3O/tm5+Ftpm5Gdrht9qh2V6CCH2Y2KgmsM9imFWj+3w00eiVQx5eN8Lo44RkVJOLR5IyR2tcHJs8Y7SlDjGJtS6PteWOi53d4WQe3a8YAAAAAAAAAAAAAAAAAAAAAAAAAACgNn8AGA09DkR51CoAAAAASUVORK5CYII=">
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.</p>
+```
+
+
+
+## 响应式设计
+
+支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。
+
+```html
+<img class="w-32 m-4 pc:float-right ..." src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAMAAAAKE/YAAAAAP1BMVEXp7vG6vsHo7fC3ur7s8fXr8PO1uLy8wMO5vcDL0NLN0dXl6u3T19vHy86+wsXO0tbQ1djc4eTh5ejBxcjZ3eD/ULOKAAACiklEQVR42u3a2YrjMBCF4arSVrYTL3Le/1lHXqbdPTZDWheRDOcLAZGrnyLgRSIAAAAAAAAAAAAAAAAAAAAAAAAAAAD4IrmoGBHKVSxbyFEm56hMtRBN7TNPO1GRaiFpvDd5vG+lQLUQNT6EwDlCYD+4AtF2Ug4mkzKb+PFqITf6oP3wyDEEZTPaz0dT63s/2DxPw6YtFT2S7Lr0eZtrSkYP64pShrXWyZsVhaNHt6xScjdNUSy9lyG2fLTYbpyZw/NFJDeJFhdnb4wab1ohuUc0dbPnwMxB/WhFbhFtR8+boBwvSkSktmiS2fDu8oohzoqQ1BQtLgY9oht3HutrXKvrjX4SyekexTys1DVp6vojeimRf5t1ra5p0lvBTvVlz83MW3VV0TF1bfwsJOfmv9UVRYt9eN2a++gumo/qeqJJ3Ks3i+dl81FNUk90ipDX0I4TfW+WvflndT3R6WsTJ/9r3qvriSb569x8VPNaXU/0149y0XxU+4cjqSpaZK8+mq+rK4pOofE5WZFT86m6omjbzT4s1UfzZXVFf4+1uTc82aWZTeArGkzoXC3R25w1LNX2lZqVr2lfPnpZHc3MqTpOejSfmAqiHcn35kRDCk8qnnSKPpo3qqx1R6fV3swHrX/SazP/UHl0Wrml+VbRTmhpvlu0i6o3jA6IPlQTHWqJZqNv4ypumFJ0z+FtPc8VRJNI9zvln1wytrhrenLZ3GGjqHWW3O/tm5+Ftpm5Gdrht9qh2V6CCH2Y2KgmsM9imFWj+3w00eiVQx5eN8Lo44RkVJOLR5IyR2tcHJs8Y7SlDjGJtS6PteWOi53d4WQe3a8YAAAAAAAAAAAAAAAAAAAAAAAAAACgNn8AGA09DkR51CoAAAAASUVORK5CYII=">
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis et lorem sit amet vehicula. Etiam vel nibh nec nisi euismod mollis ultrices condimentum velit. Proin velit libero, interdum ac rhoncus sit amet, pellentesque ac turpis. Quisque ac luctus turpis, vel efficitur ante. Cras convallis risus vel vehicula dapibus. Donec eget neque fringilla, faucibus mi quis, porttitor magna. Cras pellentesque leo est, et luctus neque rutrum eu. Aliquam consequat velit sed sem posuere, vitae sollicitudin mi consequat. Mauris eget ipsum sed dui rutrum fringilla. Donec varius vehicula magna sit amet auctor. Ut congue vehicula lectus in blandit. Vivamus suscipit eleifend turpis, nec sodales sem vulputate a. Curabitur pulvinar libero viverra, efficitur odio eu, finibus justo. Etiam eu vehicula felis.</p>
+```
+
+## 状态前缀
+
+不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
+*/
+
+@mixin make-float($prefix: '.') {
+  #{$prefix}float-right {
+    float: right;
+  }
+
+  #{$prefix}float-left {
+    float: left;
+  }
+
+  #{$prefix}float-none {
+    float: none;
+  }
+}
+
+@include make-float();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-float('.' + selector-escape($deivce + ':'));
+  }
+}

package/scss/helper/layout/_overflow.scss

@@ -0,0 +1,85 @@
+/*!markdown
+
+---
+title: Overflow
+---
+
+内容超出相关样式。
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| overflow-auto  | overflow: auto;  |
+| overflow-hidden  | overflow: hidden;  |
+| overflow-visible  | overflow: visible;  |
+| overflow-scroll  | overflow: scroll;  |
+| overflow-x-auto  | overflow-x: auto;  |
+| overflow-y-auto  | overflow-y: auto;  |
+| overflow-x-hidden  | overflow-x: hidden;  |
+| overflow-y-hidden  | overflow-y: hidden;  |
+| overflow-x-visible  | overflow-x: visible;  |
+| overflow-y-visible  | overflow-y: visible;  |
+| overflow-x-scroll  | overflow-x: scroll;  |
+| overflow-y-scroll  | overflow-y: scroll;  |
+
+## 用法
+
+请前往一下文档查看属性含义。
+
+https://www.w3school.com.cn/cssref/pr_pos_overflow.asp
+
+# 响应式设计
+
+支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。
+
+## 状态前缀
+
+不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
+
+
+*/
+
+@mixin make-overflow($prefix: '.') {
+  #{$prefix}overflow-auto {
+    overflow: auto;
+  }
+  #{$prefix}overflow-hidden {
+    overflow: hidden;
+  }
+  #{$prefix}overflow-visible {
+    overflow: visible;
+  }
+  #{$prefix}overflow-scroll {
+    overflow: scroll;
+  }
+  #{$prefix}overflow-x-auto {
+    overflow-x: auto;
+  }
+  #{$prefix}overflow-y-auto {
+    overflow-y: auto;
+  }
+  #{$prefix}overflow-x-hidden {
+    overflow-x: hidden;
+  }
+  #{$prefix}overflow-y-hidden {
+    overflow-y: hidden;
+  }
+  #{$prefix}overflow-x-visible {
+    overflow-x: visible;
+  }
+  #{$prefix}overflow-y-visible {
+    overflow-y: visible;
+  }
+  #{$prefix}overflow-x-scroll {
+    overflow-x: scroll;
+  }
+  #{$prefix}overflow-y-scroll {
+    overflow-y: scroll;
+  }
+}
+
+@include make-overflow();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-overflow('.' + selector-escape($deivce + ':'));
+  }
+}

package/scss/helper/layout/_position.scss

@@ -0,0 +1,55 @@
+/*!markdown
+
+---
+title: Position
+---
+
+定位相关样式。
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| static  | position: static; |
+| fixed  | position: fixed; |
+| absolute  | position: absolute; |
+| relative  | position: relative; |
+| sticky  | position: sticky; |
+
+## 用法
+
+请前往一下文档查看属性含义。
+
+https://www.w3school.com.cn/cssref/pr_class_position.asp
+
+# 响应式设计
+
+支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。
+
+## 状态前缀
+
+不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
+
+*/
+
+@mixin make-position($prefix: '.') {
+  @each $name,
+    $value
+      in (
+        static: static,
+        fixed: fixed,
+        absolute: absolute,
+        relative: relative,
+        sticky: sticky
+      )
+  {
+    #{$prefix + $name} {
+      position: $value;
+    }
+  }
+}
+
+@include make-position();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-position('.' + selector-escape($deivce + ':'));
+  }
+}

package/scss/helper/layout/_top-right-bottom-left.scss

@@ -0,0 +1,292 @@
+/*!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 + ':')
+    );
+  }
+}

package/scss/helper/layout/_visibility.scss

@@ -0,0 +1,42 @@
+/*!markdown
+
+---
+title: Visibility
+---
+
+显示与隐藏。
+
+| Class     | Properties           |
+| --------- | -------------------- |
+| visible   | visibility: visible; |
+| invisible | visibility: hidden;  |
+
+## 用法
+
+
+# 响应式设计
+
+支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。
+
+## 状态前缀
+
+不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
+
+*/
+
+@mixin make-visibility($prefix: '.') {
+  #{$prefix}visible {
+    visibility: visible;
+  }
+
+  #{$prefix}invisible {
+    visibility: hidden;
+  }
+}
+
+@include make-visibility();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-visibility('.' + selector-escape($deivce + ':'));
+  }
+}

package/scss/helper/layout/_z-index.scss

@@ -0,0 +1,67 @@
+/*!markdown
+
+---
+title: Z-Index
+---
+
+Utilities for controlling the stack order of an element.
+
+
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| z-0  | z-index: 0  |
+| z-10  | z-index: 10  |
+| z-20  | z-index: 20  |
+| z-30  | z-index: 30  |
+| z-40  | z-index: 40  |
+| z-50  | z-index: 50  |
+| z-auto  | z-index: auto  |
+
+## 用法
+
+```html
+<div class="flex ... justify-center relative h-28 text-center transform translate-x-12">
+  <div class="z-40 ... relative w-20 h-20 bg-purple-500 border-r border-opacity-50 border-purple-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">5</div>
+  <div class="z-30 ... relative w-20 h-20 -left-6 top-2 bg-purple-500 border-r border-opacity-50 border-purple-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">4</div>
+  <div class="z-20 ... relative w-20 h-20 -left-12 top-4 bg-purple-500 border-r border-opacity-50 border-purple-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">3</div>
+  <div class="z-10 ... relative w-20 h-20 -left-18 top-6 bg-purple-500 border-r border-opacity-50 border-purple-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">2</div>
+  <div class="z-0 ... relative w-20 h-20 -left-24 top-8 bg-purple-500 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">1</div>
+</div>
+```
+
+# 响应式设计
+
+支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。
+
+## 状态前缀
+
+不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
+
+*/
+
+@mixin make-z-index($prefix: '.') {
+  @each $name,
+    $value
+      in (
+        '0': 0,
+        '10': 10,
+        '20': 20,
+        '30': 30,
+        '40': 40,
+        '50': 50,
+        'auto': auto
+      )
+  {
+    #{$prefix + 'z-' + $name} {
+      z-index: $value;
+    }
+  }
+}
+
+@include make-z-index();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-z-index('.' + selector-escape($deivce + ':'));
+  }
+}