mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-16 01:40:53 +08:00
c591ab4381
* 尝试使用 vite 跑开发环境 * 尝试使用 vite 跑开发环境 * 尝试使用 vite 跑开发环境 * 尝试使用 vite 跑开发环境 * 样式文档调整 * 修复有多个 __inline 时的报错 * scirpt 调整 * feat:chart接入事件动作 (#5669) * chore: input-group 没有 name 不应该报 warning (#5667) * chore: 处理编译TS Warning，调整TableStore中label解析的顺序 (#5670) * feat: timeline时间轴支持自定义图标 (#5668) * fix:折叠器Collapse自定义图标&inputNumber对含后缀生效 * 修改 * 正则修改 * 正则修改 * 正则修改 * feat:将默认px替换为rem 2px===0.125rem * feat:timeline时间轴支持自定义图标 Co-authored-by: xujiahao01 <xujiahao01@baidu.com> * fix: 调整echarts-stat使用方式，兼容vite打包异步非esm模块 (#5672) * feat: chart 支持配置加载 geojson 及百度地图 (#5674) * feat: chart 支持配置 geoURL 及 geoName * 增加百度地图配置 * chore: 修复 coverage 运行报错 (#5678) * chore: coverage 执行换成 v8 解决内存问题 (#5679) * 尝试使用 vite 跑开发环境 * amis-formula 也添加 esm 模块 * 代码合并有问题,做些调整 Co-authored-by: hsm-lv <80095014+hsm-lv@users.noreply.github.com> Co-authored-by: 吴多益 <wuduoyi@baidu.com> Co-authored-by: RUNZE LU <36724300+lurunze1226@users.noreply.github.com> Co-authored-by: 徐佳豪 <1440054388@qq.com> Co-authored-by: xujiahao01 <xujiahao01@baidu.com> Co-authored-by: 刘丹 <365533093@qq.com>
6.8 KiB
6.8 KiB
| 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端」设置样式，更多说明请前往「响应式设计」。