test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-29 18:48:45 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

补充文档

Browse Source
This commit is contained in:
2betop 2020-12-10 14:09:24 +08:00
parent ebd93005b7
commit 4a2e0bb153
12 changed files with 338 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
docs/concepts/data-mapping.md
View File

@ -1443,3 +1443,31 @@ ${xxx|filter1|filter2|...}
1. 会先执行`split`过滤器，将字符串`a,b,c`，拆分成数组`["a", "b", "c"]`；
2. 然后将该数据传给下一个过滤器`first`，执行该过滤器，获取数组第一个元素，为`"a"`
3. 输出`"a"`
## 自定义过滤器
amis npm 包里面暴露了 `registerFilter` 方法，通过它可以添加自己的过滤器逻辑。
如：
```ts
import {registerFilter} from 'amis';
registerFilter('count', (input: string) =>
typeof input === 'string' ? input.length : 0
);
```
注册后可以通过 `${xxx|count}` 来返回字符串的长度。
如果你的过滤器还要支持参数，可以参考这个栗子。
```ts
import {registerFilter} from 'amis';
registerFilter('my-replace', (input: string, search: string, repalceWith) =>
typeof input === 'string' ? input.replace(search, repalceWith) : input
);
```
用法为 `${xxxx|my-replace:aaaa:bbbb}`

3
scripts/md-parser.js
View File

@ -161,7 +161,8 @@ module.exports = function (content, file) {
] = `<!--amis-preview-start--><div class="amis-doc"><div class="preview">${code}</div><pre><code class="lang-html">${prism.highlight(
code
.replace(/"data:(\w+\/\w+);.*?"/g, '"data:$1; ..."')
.replace(/<svg([^>]*)>[\s\S]*?<\/svg>/g, '<svg$1>...</svg>'),
.replace(/<svg([^>]*)>[\s\S]*?<\/svg>/g, '<svg$1>...</svg>')
.replace(/class="([^"]*?)\.\.\.([^"]*?)"/g, 'class="$1..."'),
prism.languages[lang],
lang
)}</code></pre></div><!--amis-preview-end-->`;

9
scss/_variables.scss
View File

@ -179,15 +179,6 @@ $light: map-get($colors, 'light');
$dark: map-get($colors, 'dark');
$spacing: (
xs: px2rem(5px),
sm: px2rem(10px),
default: px2rem(15px),
md: px2rem(20px),
lg: px2rem(30px),
xl: px2rem(40px),
xxl: px2rem(50px),
//
// 上面是原来设定
//
// 下面是参考 tailwind
//

11
scss/utilities/layout/_box-sizing.scss
View File

@ -12,6 +12,8 @@ Box Sizing 相关样式，主要区别在于设置宽高的时候，是否包含
| box-border | box-sizing: border-box; |
| box-content | box-sizing: content-box; |
## 用法
比如这个栗子：左侧是 box-border 类型，整体高宽 128px。而右侧只是内容区域是 128px + 边框(2 * 4px) + padding （2 * 16px） 一共160px。
```html
@ -26,7 +28,14 @@ Box Sizing 相关样式，主要区别在于设置宽高的时候，是否包含
</div>
```
不支持 [「响应式设计前缀」](../../../docs/css-utilities/responsive-design.md) 和[「状态前缀」](../../../docs/css-utilities/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
## 响应式设计
不支持 [「响应式设计前缀」](../../../docs/css-utilities/responsive-design.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
## 状态前缀
不支持[「状态前缀」](../../../docs/css-utilities/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
*/
@mixin make-box-sizing($prefix: '.') {

25
scss/utilities/layout/_clear.scss
View File

@ -4,14 +4,29 @@
title: Clear
---
Utilities for controlling the wrapping of content around an element.
清除浮动相关样式。
| Class | Properties |
| ----------- | ------------- |
| clear-right | clear: right; |
| clear-left | clear: left; |
| clear-none | clear: none; |
| clear-both | clear: both; |
## 用法
请前往以下链接查看属性含义。
https://www.w3school.com.cn/cssref/pr_class_clear.asp
| Class | Properties |
| ----------- | ------------------------ |
| box-border | box-sizing: border-box; |
| box-content | box-sizing: content-box; |
# 响应式设计
支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/css-utilities/responsive-design.md)。
## 状态前缀
不支持[「状态前缀」](../../../docs/css-utilities/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
*/

6
scss/utilities/layout/_display.scss
View File

@ -28,11 +28,17 @@ title: Display
| contents | display: contents; |
| hidden | display: hidden; |
## 用法
css 相关的知识点就不介绍了，请参考：
https://www.w3school.com.cn/cssref/pr_class_display.asp
https://tailwindcss.com/docs/display
# 响应式设计
支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/css-utilities/responsive-design.md)。
## 状态前缀
不支持[「状态前缀」](../../../docs/css-utilities/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。

1
scss/utilities/layout/_float.scss
View File

@ -44,6 +44,7 @@ title: Floats
<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/css-utilities/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
*/

30
scss/utilities/layout/_overflow.scss
View File

@ -4,12 +4,36 @@
title: Overflow
---
Utilities for controlling how an element handles content that is too large for the container.
内容超出相关样式。
| Class | Properties |
| ----------- | ------------------------ |
| box-border | box-sizing: border-box; |
| box-content | box-sizing: content-box; |
| 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/css-utilities/responsive-design.md)。
## 状态前缀
不支持[「状态前缀」](../../../docs/css-utilities/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
*/

24
scss/utilities/layout/_position.scss
View File

@ -4,13 +4,29 @@
title: Position
---
Utilities for controlling how an element is positioned in the DOM.
定位相关样式。
| Class | Properties |
| ----------- | ------------------------ |
| box-border | box-sizing: border-box; |
| box-content | box-sizing: content-box; |
| 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/css-utilities/responsive-design.md)。
## 状态前缀
不支持[「状态前缀」](../../../docs/css-utilities/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
*/
@ -26,7 +42,7 @@ Utilities for controlling how an element is positioned in the DOM.
)
{
#{$prefix + $name} {
display: $value;
position: $value;
}
}
}

203
scss/utilities/layout/_top-right-bottom-left.scss
View File

@ -4,13 +4,152 @@
title: Top / Right / Bottom / Left
---
Utilities for controlling the placement of positioned elements.
用来控制位置的样式集。
| Class | Properties |
| ----------- | ------------------------ |
| box-border | box-sizing: border-box; |
| box-content | box-sizing: content-box; |
| 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/css-utilities/responsive-design.md)。
## 状态前缀
不支持[「状态前缀」](../../../docs/css-utilities/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
*/
@ -28,16 +167,23 @@ Utilities for controlling the placement of positioned elements.
@mixin make-single-positions($direction, $map: $inset, $prefix: '.') {
@each $name, $value in $map {
@include make-single-position($direction, $direction, $name, $value);
@include make-single-position(
$direction,
$direction,
$name,
$value,
$prefix
);
}
@each $name, $value in $map {
@if (type-of($value) == 'number') {
@include make-single-position(
#{$direction + '-n'},
#{'-' + $direction},
$direction,
$name,
($value * -1)
($value * -1),
$prefix
);
}
}
@ -55,7 +201,7 @@ Utilities for controlling the placement of positioned elements.
@each $name, $value in $map {
@if (type-of($value) == 'number') {
#{$prefix}#{selector-escape('inset-n-' + $name) } {
#{$prefix}#{selector-escape('-inset-' + $name) } {
top: $value * -1;
right: $value * -1;
bottom: $value * -1;
@ -75,7 +221,7 @@ Utilities for controlling the placement of positioned elements.
@each $name, $value in $map {
@if (type-of($value) == 'number') {
#{$prefix}#{selector-escape('inset-n-' + $name) } {
#{$prefix}#{selector-escape('-inset-x-' + $name) } {
right: $value * -1;
left: $value * -1;
}
@ -93,7 +239,7 @@ Utilities for controlling the placement of positioned elements.
@each $name, $value in $map {
@if (type-of($value) == 'number') {
#{$prefix}#{selector-escape('inset-y-' + $name) } {
#{$prefix}#{selector-escape('-inset-y-' + $name) } {
top: $value * -1;
bottom: $value * -1;
}
@ -109,3 +255,38 @@ Utilities for controlling the placement of positioned elements.
@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 + ':')
);
}
}

20
scss/utilities/layout/_visibility.scss
View File

@ -4,13 +4,23 @@
title: Visibility
---
Utilities for controlling the visibility of an element.
显示与隐藏。
| Class | Properties |
| ----------- | ------------------------ |
| box-border | box-sizing: border-box; |
| box-content | box-sizing: content-box; |
| Class | Properties |
| --------- | -------------------- |
| visible | visibility: visible; |
| invisible | visibility: hidden; |
## 用法
# 响应式设计
支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/css-utilities/responsive-design.md)。
## 状态前缀
不支持[「状态前缀」](../../../docs/css-utilities/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
*/

19
scss/utilities/layout/_z-index.scss
View File

@ -10,9 +10,24 @@ Utilities for controlling the stack order of an element.
| Class | Properties |
| ----------- | ------------------------ |
| box-border | box-sizing: border-box; |
| box-content | box-sizing: content-box; |
| 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 |
## 用法
# 响应式设计
支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/css-utilities/responsive-design.md)。
## 状态前缀
不支持[「状态前缀」](../../../docs/css-utilities/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
*/