mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-03 20:39:07 +08:00
Merge branch 'master' of https://github.com/2betop/amis
This commit is contained in:
liaoxuezhi
commit
80e3477aea
2
.github/workflows/gh-pages.yml
vendored
2
.github/workflows/gh-pages.yml
vendored
@ -39,6 +39,8 @@ jobs:
|
||||
CLEAN: true # Automatically remove deleted files from the deploy branch
|
||||
SINGLE_COMMIT: true
|
||||
- name: Generate coverage report
|
||||
env:
|
||||
NODE_OPTIONS: "--max-old-space-size=8192"
|
||||
run: |
|
||||
npm run coverage
|
||||
- uses: codecov/codecov-action@v2
|
||||
|
||||
@ -44,9 +44,6 @@
|
||||
# 安装项目 npm 依赖，在 node 12 下会有报错但不影响正常使用。
|
||||
npm i --legacy-peer-deps
|
||||
|
||||
# 因为需要 require 一个 formula/lib/doc.md 文件，所以需要先生成一下
|
||||
npm run build --workspace amis-formula
|
||||
|
||||
# 启动项目，等编译结束后通过 http://127.0.0.1:8888/examples/pages/simple 访问。
|
||||
npm start
|
||||
```
|
||||
|
||||
@ -431,7 +431,185 @@ ECharts 中有些配置项可以写函数，比如 formatter 和 sort，但在 J
|
||||
window.echarts = amisRequire('echarts');
|
||||
```
|
||||
|
||||
然后通过 script 标签引入这两个文件。
|
||||
然后通过 script 标签引入这两个文件，或者用下面的新版方法
|
||||
|
||||
## 地图配置
|
||||
|
||||
> 2.4.1 及以上版本
|
||||
|
||||
新增了 `mapURL` 及 `mapName` 两个配置项
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "chart",
|
||||
"mapURL": "/api/map/HK",
|
||||
"mapName": "HK",
|
||||
"height": 600,
|
||||
"config": {
|
||||
"title": {
|
||||
"text": "Population Density of Hong Kong （2011）",
|
||||
"subtext": "Data from Wikipedia"
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "item",
|
||||
"formatter": "{b}<br/>{c} (p / km2)"
|
||||
},
|
||||
"toolbox": {
|
||||
"show": true,
|
||||
"orient": "vertical",
|
||||
"left": "right",
|
||||
"top": "center",
|
||||
"feature": {
|
||||
"dataView": {
|
||||
"readOnly": false
|
||||
},
|
||||
"restore": {},
|
||||
"saveAsImage": {}
|
||||
}
|
||||
},
|
||||
"visualMap": {
|
||||
"min": 800,
|
||||
"max": 50000,
|
||||
"text": [
|
||||
"High",
|
||||
"Low"
|
||||
],
|
||||
"realtime": false,
|
||||
"calculable": true,
|
||||
"inRange": {
|
||||
"color": [
|
||||
"lightskyblue",
|
||||
"yellow",
|
||||
"orangered"
|
||||
]
|
||||
}
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"name": "香港18区人口密度",
|
||||
"type": "map",
|
||||
"map": "HK",
|
||||
"label": {
|
||||
"show": true
|
||||
},
|
||||
"data": [
|
||||
{
|
||||
"name": "中西区",
|
||||
"value": 20057.34
|
||||
},
|
||||
{
|
||||
"name": "湾仔",
|
||||
"value": 15477.48
|
||||
},
|
||||
{
|
||||
"name": "东区",
|
||||
"value": 31686.1
|
||||
},
|
||||
{
|
||||
"name": "南区",
|
||||
"value": 6992.6
|
||||
},
|
||||
{
|
||||
"name": "油尖旺",
|
||||
"value": 44045.49
|
||||
},
|
||||
{
|
||||
"name": "深水埗",
|
||||
"value": 40689.64
|
||||
},
|
||||
{
|
||||
"name": "九龙城",
|
||||
"value": 37659.78
|
||||
},
|
||||
{
|
||||
"name": "黄大仙",
|
||||
"value": 45180.97
|
||||
},
|
||||
{
|
||||
"name": "观塘",
|
||||
"value": 55204.26
|
||||
},
|
||||
{
|
||||
"name": "葵青",
|
||||
"value": 21900.9
|
||||
},
|
||||
{
|
||||
"name": "荃湾",
|
||||
"value": 4918.26
|
||||
},
|
||||
{
|
||||
"name": "屯门",
|
||||
"value": 5881.84
|
||||
},
|
||||
{
|
||||
"name": "元朗",
|
||||
"value": 4178.01
|
||||
},
|
||||
{
|
||||
"name": "北区",
|
||||
"value": 2227.92
|
||||
},
|
||||
{
|
||||
"name": "大埔",
|
||||
"value": 2180.98
|
||||
},
|
||||
{
|
||||
"name": "沙田",
|
||||
"value": 9172.94
|
||||
},
|
||||
{
|
||||
"name": "西贡",
|
||||
"value": 3368
|
||||
},
|
||||
{
|
||||
"name": "离岛",
|
||||
"value": 806.98
|
||||
}
|
||||
],
|
||||
"nameMap": {
|
||||
"Central and Western": "中西区",
|
||||
"Eastern": "东区",
|
||||
"Islands": "离岛",
|
||||
"Kowloon City": "九龙城",
|
||||
"Kwai Tsing": "葵青",
|
||||
"Kwun Tong": "观塘",
|
||||
"North": "北区",
|
||||
"Sai Kung": "西贡",
|
||||
"Sha Tin": "沙田",
|
||||
"Sham Shui Po": "深水埗",
|
||||
"Southern": "南区",
|
||||
"Tai Po": "大埔",
|
||||
"Tsuen Wan": "荃湾",
|
||||
"Tuen Mun": "屯门",
|
||||
"Wan Chai": "湾仔",
|
||||
"Wong Tai Sin": "黄大仙",
|
||||
"Yau Tsim Mong": "油尖旺",
|
||||
"Yuen Long": "元朗"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 加载百度地图
|
||||
|
||||
配置 `loadBaiduMap` 后会加载百度地图，需要配置 `ak`
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "chart",
|
||||
"loadBaiduMap": true,
|
||||
"ak": "LiZT5dVbGTsPI91tFGcOlSpe5FDehpf7",
|
||||
"config": {
|
||||
"bmap": {
|
||||
"center": [116.414, 39.915],
|
||||
"zoom": 14,
|
||||
"roam": true
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 动态处理 echart 配置
|
||||
|
||||
@ -477,10 +655,23 @@ echarts 的 config 一般是静态配置的，支持简单的数据映射。如
|
||||
| replaceChartOption | `boolean` | `false` | 每次更新是完全覆盖配置项还是追加？ |
|
||||
| trackExpression | `string` | | 当这个表达式的值有变化时更新图表 |
|
||||
| dataFilter | `string` | | 自定义 echart config 转换，函数签名：function(config, echarts, data) {return config;} 配置时直接写函数体。其中 config 是当前 echart 配置，echarts 就是 echarts 对象，data 为上下文数据。 |
|
||||
| mapURL | [api](../../docs/types/api) | | 地图 geo json 地址 |
|
||||
| mapName | string | | 地图名称 |
|
||||
| loadBaiduMap | boolean | | 加载百度地图 |
|
||||
|
||||
## 事件表
|
||||
|
||||
> 2.4.1 及以上版本
|
||||
|
||||
当前组件会对外派发`click`、`mouseover`、`legendselectchanged`事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。事件参数提供通用的字段，可以查看[ECharst 事件与行为文档](https://echarts.apache.org/handbook/zh/concepts/event/)。
|
||||
|
||||
## 动作表
|
||||
|
||||
当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。
|
||||
|
||||
| 动作名称 | 动作配置 | 说明 |
|
||||
| -------- | -------------------------- | ------------------------------------------ |
|
||||
| reload | - | 刷新（重新加载） |
|
||||
| setValue | `value: object` 更新的数据 | 更新数据，等于更新图表所依赖数据域中的变量 |
|
||||
|
||||
2.4.1 及以上版本，除了以上动作，还支持直接触发[ECharts 组件行为](https://echarts.apache.org/handbook/zh/concepts/event/#%E4%BB%A3%E7%A0%81%E8%A7%A6%E5%8F%91-echarts-%E4%B8%AD%E7%BB%84%E4%BB%B6%E7%9A%84%E8%A1%8C%E4%B8%BA)，即通过`actionType`指定行为名称，行为配置通过`args: {动作配置项名称: xxx}`来配置具体的参数。
|
||||
|
||||
@ -104,40 +104,7 @@ language 支持从上下文获取数据
|
||||
|
||||
## 自定义语言高亮
|
||||
|
||||
还可以通过 `customLang` 参数来自定义高亮，比如下面这个示例
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "code",
|
||||
"customLang": {
|
||||
"name": "myLog",
|
||||
"tokens": [
|
||||
{
|
||||
"name": "custom-error",
|
||||
"regex": "\\[error.*",
|
||||
"color": "#ff0000",
|
||||
"fontStyle": "bold"
|
||||
},
|
||||
{
|
||||
"name": "custom-notice",
|
||||
"regex": "\\[notice.*",
|
||||
"color": "#FFA500"
|
||||
},
|
||||
{
|
||||
"name": "custom-info",
|
||||
"regex": "\\[info.*",
|
||||
"color": "#808080"
|
||||
},
|
||||
{
|
||||
"name": "custom-date",
|
||||
"regex": "\\[[a-zA-Z 0-9:]+\\]",
|
||||
"color": "#008800"
|
||||
}
|
||||
]
|
||||
},
|
||||
"value": "[Sun Mar 7 16:02:00 2021] [notice] Apache/1.3.29 (Unix) configured -- resuming normal operations\n[Sun Mar 7 16:02:00 2021] [info] Server built: Feb 27 2021 13:56:37\n[Sun Mar 7 16:02:00 2021] [notice] Accept mutex: sysvsem (Default: sysvsem)\n[Sun Mar 7 17:21:44 2021] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection\n[Sun Mar 7 17:23:53 2021] statistics: Use of uninitialized value in concatenation (.) or string at /home/httpd line 528.\n[Sun Mar 7 17:23:53 2021] statistics: Can't create file /home/httpd/twiki/data/Main/WebStatistics.txt - Permission denied\n[Sun Mar 7 17:27:37 2021] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection\n[Sun Mar 7 17:31:39 2021] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection\n[Sun Mar 7 21:16:17 2021] [error] [client xx.xx.xx.xx] File does not exist: /home/httpd/twiki/view/Main/WebHome"
|
||||
}
|
||||
```
|
||||
还可以通过 `customLang` 参数来自定义高亮，详情参考[示例](../../../examples/code)。
|
||||
|
||||
`customLang` 中主要是 `tokens` 设置，这里是语言词法配置，它有 4 个配置项：
|
||||
|
||||
|
||||
@ -912,6 +912,7 @@ leftOptions 动态加载，默认 source 接口是返回 options 部分，而 le
|
||||
"selectMode": "associated",
|
||||
"leftMode": "tree",
|
||||
"source": "/api/mock2/form/departUser",
|
||||
"searchApi": '/api/mock2/form/departUserSearch?term=${term}',
|
||||
"deferApi": "/api/mock2/form/departUser?ref=${ref}&dep=${value}"
|
||||
}
|
||||
]
|
||||
|
||||
@ -20,7 +20,9 @@ order: 51
|
||||
}
|
||||
```
|
||||
|
||||
## src 也可以从上下文获取
|
||||
## src 使用动态数据
|
||||
|
||||
### 数据域变量
|
||||
|
||||
> 1.1.6
|
||||
|
||||
@ -49,6 +51,12 @@ order: 51
|
||||
- sandbox
|
||||
- referrerpolicy
|
||||
|
||||
## 支持 base64 格式
|
||||
|
||||
> 2.4.0 及以上版本
|
||||
|
||||
`src`属性支持传入符合 base64 编码标准的 [MIME 类型](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)字符串，具体效果参考[示例](../../../examples/iframe)
|
||||
|
||||
## 如何和 iframe 通信
|
||||
|
||||
#### amis 向 iframe 通信
|
||||
@ -100,7 +108,7 @@ window.addEventListener('message', e => {
|
||||
}
|
||||
```
|
||||
|
||||
上面 `events` 对象中配置了`detail`事件，该行为会触发 amis 弹框行为，并在弹框中渲染`"iframe 传给 amis 的 id 是：${iframeId}"`这段模板。
|
||||
上面 `events` 对象中配置了`detail`事件，该行为会触发 amis 弹框行为，并在弹框中渲染`"iframe 传给 amis 的 id 是：${iframeId}"`这段模板。`detail`支持多种动作配置，具体配置参考[Action](./action.md)的 actionType 部分。
|
||||
|
||||
那么要如何触发该事件和传递数据呢？
|
||||
|
||||
|
||||
@ -80,6 +80,18 @@ order: 9
|
||||
}
|
||||
```
|
||||
|
||||
### 运行日志
|
||||
|
||||
可以在浏览器控制台查看运行日志，类似如下
|
||||
|
||||
```
|
||||
run action ajax
|
||||
[ajax] action args, data {api: {…}, messages: {…}}
|
||||
[ajax] action end event {context: {…}, type: 'click', prevented: false, stoped: false, preventDefault: ƒ, …}
|
||||
```
|
||||
|
||||
代表运行了 ajax 动作，第二行是传递的参数和数据，第三行是执行完动作之后的 `event` 值，可以用做后续动作的参数。
|
||||
|
||||
## 事件与动作
|
||||
|
||||
事件包含`渲染器事件`和`广播事件`，监听这些事件时，可以通过`event.data`来获取事件对象的数据。
|
||||
@ -1405,6 +1417,7 @@ order: 9
|
||||
- 数据类型支持范围：`基础类型`、`对象类型`、`数组类型`，数据类型取决于目标组件所需数据值类型
|
||||
- 目标组件支持范围：`form`、`dialog`、`drawer`、`wizard`、`service`、`page`、`app`、`chart`，以及数据`输入类`组件
|
||||
- < 2.3.2 及以下版本，虽然更新数据可以实现对组件数据域的更新，但如果更新数据动作的数据值来自前面的异步动作（例如 发送 http 请求、自定义 JS（异步）），则后面的动作只能通过事件变量`${event.data.xxx}`来获取异步动作产生的数据，无法通过当前数据域`${xxx}`直接获取更新后的数据。
|
||||
- 它的值通常都是对象形式，比如 form 传递的值应该是类似 `{"user": "amis"}`，这时就会更新表单里的 `user` 字段值为 `amis`
|
||||
|
||||
```schema
|
||||
{
|
||||
|
||||
68
examples/app/index-vite.html
Normal file
68
examples/app/index-vite.html
Normal file
@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>amis app 模式</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<link
|
||||
type="image/x-icon"
|
||||
rel="shortcut icon"
|
||||
href="../static/favicon.png"
|
||||
/>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1"
|
||||
/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
||||
<link rel="stylesheet" href="../static/iconfont.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="../../node_modules/@fortawesome/fontawesome-free/css/all.css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="../../node_modules/@fortawesome/fontawesome-free/css/v4-shims.css"
|
||||
/>
|
||||
<style>
|
||||
.app-wrapper,
|
||||
.schema-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<script type="module">
|
||||
let theme = localStorage.getItem('amis-theme') || 'cxd';
|
||||
if (theme === 'default') {
|
||||
theme = 'cxd';
|
||||
}
|
||||
|
||||
['ang', 'cxd', 'dark', 'antd'].forEach(key => {
|
||||
const link = document.createElement('link');
|
||||
link.setAttribute('rel', 'stylesheet');
|
||||
link.setAttribute('title', key);
|
||||
if (theme !== key) {
|
||||
link.setAttribute('disabled', 'disabled');
|
||||
}
|
||||
link.setAttribute(
|
||||
'href',
|
||||
new URL(
|
||||
`../../packages/amis-ui/scss/themes/${key}.scss`,
|
||||
import.meta.url
|
||||
).href
|
||||
);
|
||||
document.head.appendChild(link);
|
||||
});
|
||||
</script>
|
||||
<link rel="stylesheet" href="../../packages/amis-ui/scss/helper.scss" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root" class="app-wrapper"></div>
|
||||
<script type="module">
|
||||
import {bootstrap} from './index.jsx';
|
||||
const initialState = {};
|
||||
bootstrap(document.getElementById('root'), initialState);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -16,7 +16,8 @@ export default {
|
||||
name: 'Trident',
|
||||
version: '4/2'
|
||||
},
|
||||
date: '1591326307'
|
||||
date: '1591326307',
|
||||
city: '310100'
|
||||
},
|
||||
{
|
||||
link: 'https://www.microsoft.com/',
|
||||
@ -188,6 +189,11 @@ export default {
|
||||
name: 'date',
|
||||
label: 'Date',
|
||||
type: 'date'
|
||||
},
|
||||
{
|
||||
name: 'city',
|
||||
label: 'city',
|
||||
type: 'input-city'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -142,8 +142,7 @@ export default {
|
||||
type: 'chart',
|
||||
name: 'chart1',
|
||||
initFetch: false,
|
||||
api:
|
||||
'/api/mock2/chart/chart?name=$name&starttime=${starttime}&endtime=${endtime}'
|
||||
api: '/api/mock2/chart/chart?name=$name&starttime=${starttime}&endtime=${endtime}'
|
||||
},
|
||||
{
|
||||
type: 'chart',
|
||||
@ -154,6 +153,106 @@ export default {
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'chart',
|
||||
mapURL: '/api/map/HK',
|
||||
mapName: 'HK',
|
||||
height: 600,
|
||||
config: {
|
||||
title: {
|
||||
text: 'Population Density of Hong Kong （2011）',
|
||||
subtext: 'Data from Wikipedia'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}<br/>{c} (p / km2)'
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
top: 'center',
|
||||
feature: {
|
||||
dataView: {readOnly: false},
|
||||
restore: {},
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
visualMap: {
|
||||
min: 800,
|
||||
max: 50000,
|
||||
text: ['High', 'Low'],
|
||||
realtime: false,
|
||||
calculable: true,
|
||||
inRange: {
|
||||
color: ['lightskyblue', 'yellow', 'orangered']
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '香港18区人口密度',
|
||||
type: 'map',
|
||||
map: 'HK',
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
data: [
|
||||
{name: '中西区', value: 20057.34},
|
||||
{name: '湾仔', value: 15477.48},
|
||||
{name: '东区', value: 31686.1},
|
||||
{name: '南区', value: 6992.6},
|
||||
{name: '油尖旺', value: 44045.49},
|
||||
{name: '深水埗', value: 40689.64},
|
||||
{name: '九龙城', value: 37659.78},
|
||||
{name: '黄大仙', value: 45180.97},
|
||||
{name: '观塘', value: 55204.26},
|
||||
{name: '葵青', value: 21900.9},
|
||||
{name: '荃湾', value: 4918.26},
|
||||
{name: '屯门', value: 5881.84},
|
||||
{name: '元朗', value: 4178.01},
|
||||
{name: '北区', value: 2227.92},
|
||||
{name: '大埔', value: 2180.98},
|
||||
{name: '沙田', value: 9172.94},
|
||||
{name: '西贡', value: 3368},
|
||||
{name: '离岛', value: 806.98}
|
||||
],
|
||||
// 自定义名称映射
|
||||
nameMap: {
|
||||
'Central and Western': '中西区',
|
||||
'Eastern': '东区',
|
||||
'Islands': '离岛',
|
||||
'Kowloon City': '九龙城',
|
||||
'Kwai Tsing': '葵青',
|
||||
'Kwun Tong': '观塘',
|
||||
'North': '北区',
|
||||
'Sai Kung': '西贡',
|
||||
'Sha Tin': '沙田',
|
||||
'Sham Shui Po': '深水埗',
|
||||
'Southern': '南区',
|
||||
'Tai Po': '大埔',
|
||||
'Tsuen Wan': '荃湾',
|
||||
'Tuen Mun': '屯门',
|
||||
'Wan Chai': '湾仔',
|
||||
'Wong Tai Sin': '黄大仙',
|
||||
'Yau Tsim Mong': '油尖旺',
|
||||
'Yuen Long': '元朗'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'chart',
|
||||
loadBaiduMap: true,
|
||||
ak: 'LiZT5dVbGTsPI91tFGcOlSpe5FDehpf7',
|
||||
config: {
|
||||
bmap: {
|
||||
center: [116.414, 39.915],
|
||||
zoom: 14,
|
||||
roam: true
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
42
examples/components/Code.jsx
Normal file
42
examples/components/Code.jsx
Normal file
@ -0,0 +1,42 @@
|
||||
export default {
|
||||
type: 'page',
|
||||
title: 'Code组件自定义语言高亮',
|
||||
body: [
|
||||
{
|
||||
type: 'code',
|
||||
customLang: {
|
||||
name: 'myLog',
|
||||
tokens: [
|
||||
{
|
||||
name: 'custom-error',
|
||||
regex: '\\[error.*',
|
||||
color: '#ff0000',
|
||||
fontStyle: 'bold'
|
||||
},
|
||||
{
|
||||
name: 'custom-notice',
|
||||
regex: '\\[notice.*',
|
||||
color: '#FFA500'
|
||||
},
|
||||
{
|
||||
name: 'custom-info',
|
||||
regex: '\\[info.*',
|
||||
color: '#808080'
|
||||
},
|
||||
{
|
||||
name: 'custom-date',
|
||||
regex: '\\[[a-zA-Z 0-9:]+\\]',
|
||||
color: '#008800'
|
||||
}
|
||||
]
|
||||
},
|
||||
value:
|
||||
"[Sun Mar 7 16:02:00 2021] [notice] Apache/1.3.29 (Unix) configured -- resuming normal operations\n[Sun Mar 7 16:02:00 2021] [info] Server built: Feb 27 2021 13:56:37\n[Sun Mar 7 16:02:00 2021] [notice] Accept mutex: sysvsem (Default: sysvsem)\n[Sun Mar 7 17:21:44 2021] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection\n[Sun Mar 7 17:23:53 2021] statistics: Use of uninitialized value in concatenation (.) or string at /home/httpd line 528.\n[Sun Mar 7 17:23:53 2021] statistics: Can't create file /home/httpd/twiki/data/Main/WebStatistics.txt - Permission denied\n[Sun Mar 7 17:27:37 2021] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection\n[Sun Mar 7 17:31:39 2021] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection\n[Sun Mar 7 21:16:17 2021] [error] [client xx.xx.xx.xx] File does not exist: /home/httpd/twiki/view/Main/WebHome"
|
||||
},
|
||||
{
|
||||
type: 'markdown',
|
||||
value:
|
||||
'`customLang` 中主要是 `tokens` 设置，这里是语言词法配置，它有 4 个配置项：\n- `name`：词法名称\n- `regex`：词法的正则匹配，注意因为是在字符串中，这里正则中如果遇到 `\\` 需要写成 `\\\\`\n- `regexFlags`: 可选，正则的标志参数\n- `color`：颜色\n- `fontStyle`: 可选，字体样式，比如 `bold` 代表加粗'
|
||||
}
|
||||
]
|
||||
};
|
||||
@ -51,7 +51,9 @@ export const cssDocs = [
|
||||
label: 'Box Sizing',
|
||||
path: '/zh-CN/style/layout/box-sizing',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/layout/_box-sizing.scss').then(wrapDoc)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/layout/_box-sizing.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
},
|
||||
|
||||
@ -59,7 +61,9 @@ export const cssDocs = [
|
||||
label: 'Display',
|
||||
path: '/zh-CN/style/layout/display',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/layout/_display.scss').then(wrapDoc)
|
||||
import('../../packages/amis-ui/scss/helper/layout/_display.md').then(
|
||||
wrapDoc
|
||||
)
|
||||
)
|
||||
},
|
||||
|
||||
@ -67,7 +71,9 @@ export const cssDocs = [
|
||||
label: 'Floats',
|
||||
path: '/zh-CN/style/layout/floats',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/layout/_float.scss').then(wrapDoc)
|
||||
import('../../packages/amis-ui/scss/helper/layout/_float.md').then(
|
||||
wrapDoc
|
||||
)
|
||||
)
|
||||
},
|
||||
|
||||
@ -75,7 +81,9 @@ export const cssDocs = [
|
||||
label: 'Clear',
|
||||
path: '/zh-CN/style/layout/clear',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/layout/_clear.scss').then(wrapDoc)
|
||||
import('../../packages/amis-ui/scss/helper/layout/_clear.md').then(
|
||||
wrapDoc
|
||||
)
|
||||
)
|
||||
},
|
||||
|
||||
@ -83,7 +91,9 @@ export const cssDocs = [
|
||||
label: 'Overflow',
|
||||
path: '/zh-CN/style/layout/overflow',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/layout/_overflow.scss').then(wrapDoc)
|
||||
import('../../packages/amis-ui/scss/helper/layout/_overflow.md').then(
|
||||
wrapDoc
|
||||
)
|
||||
)
|
||||
},
|
||||
|
||||
@ -91,7 +101,9 @@ export const cssDocs = [
|
||||
label: 'Position',
|
||||
path: '/zh-CN/style/layout/position',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/layout/_position.scss').then(wrapDoc)
|
||||
import('../../packages/amis-ui/scss/helper/layout/_position.md').then(
|
||||
wrapDoc
|
||||
)
|
||||
)
|
||||
},
|
||||
|
||||
@ -99,9 +111,9 @@ export const cssDocs = [
|
||||
label: 'Top / Right / Bottom / Left',
|
||||
path: '/zh-CN/style/layout/top-right-bottom-left',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/layout/_top-right-bottom-left.scss').then(
|
||||
wrapDoc
|
||||
)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/layout/_top-right-bottom-left.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
},
|
||||
|
||||
@ -109,7 +121,9 @@ export const cssDocs = [
|
||||
label: 'Visibility',
|
||||
path: '/zh-CN/style/layout/visibility',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/layout/_visibility.scss').then(wrapDoc)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/layout/_visibility.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
},
|
||||
|
||||
@ -117,7 +131,9 @@ export const cssDocs = [
|
||||
label: 'Z-Index',
|
||||
path: '/zh-CN/style/layout/z-index',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/layout/_z-index.scss').then(wrapDoc)
|
||||
import('../../packages/amis-ui/scss/helper/layout/_z-index.md').then(
|
||||
wrapDoc
|
||||
)
|
||||
)
|
||||
}
|
||||
]
|
||||
@ -130,7 +146,9 @@ export const cssDocs = [
|
||||
label: 'Flex Direction',
|
||||
path: '/zh-CN/style/flex/direction',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/flex/_direction.scss').then(wrapDoc)
|
||||
import('../../packages/amis-ui/scss/helper/flex/_direction.md').then(
|
||||
wrapDoc
|
||||
)
|
||||
)
|
||||
},
|
||||
|
||||
@ -138,7 +156,9 @@ export const cssDocs = [
|
||||
label: 'Flex Wrap',
|
||||
path: '/zh-CN/style/flex/wrap',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/flex/_wrap.scss').then(wrapDoc)
|
||||
import('../../packages/amis-ui/scss/helper/flex/_wrap.md').then(
|
||||
wrapDoc
|
||||
)
|
||||
)
|
||||
},
|
||||
|
||||
@ -146,7 +166,9 @@ export const cssDocs = [
|
||||
label: 'Flex',
|
||||
path: '/zh-CN/style/flex/flex',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/flex/_flex.scss').then(wrapDoc)
|
||||
import('../../packages/amis-ui/scss/helper/flex/_flex.md').then(
|
||||
wrapDoc
|
||||
)
|
||||
)
|
||||
},
|
||||
|
||||
@ -154,7 +176,9 @@ export const cssDocs = [
|
||||
label: 'Flex Grow',
|
||||
path: '/zh-CN/style/flex/grow',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/flex/_grow.scss').then(wrapDoc)
|
||||
import('../../packages/amis-ui/scss/helper/flex/_grow.md').then(
|
||||
wrapDoc
|
||||
)
|
||||
)
|
||||
},
|
||||
|
||||
@ -162,7 +186,9 @@ export const cssDocs = [
|
||||
label: 'Flex Shrink',
|
||||
path: '/zh-CN/style/flex/shrink',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/flex/_shrink.scss').then(wrapDoc)
|
||||
import('../../packages/amis-ui/scss/helper/flex/_shrink.md').then(
|
||||
wrapDoc
|
||||
)
|
||||
)
|
||||
},
|
||||
|
||||
@ -170,7 +196,9 @@ export const cssDocs = [
|
||||
label: 'Flex Order',
|
||||
path: '/zh-CN/style/flex/order',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/flex/_order.scss').then(wrapDoc)
|
||||
import('../../packages/amis-ui/scss/helper/flex/_order.md').then(
|
||||
wrapDoc
|
||||
)
|
||||
)
|
||||
}
|
||||
]
|
||||
@ -183,58 +211,72 @@ export const cssDocs = [
|
||||
label: 'Grid Template Columns',
|
||||
path: '/zh-CN/style/grid/columns',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/grid/_columns.scss').then(wrapDoc)
|
||||
import('../../packages/amis-ui/scss/helper/grid/_columns.md').then(
|
||||
wrapDoc
|
||||
)
|
||||
)
|
||||
},
|
||||
{
|
||||
label: 'Grid Column Start / End',
|
||||
path: '/zh-CN/style/grid/column-start-end',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/grid/_column-start-end.scss').then(
|
||||
wrapDoc
|
||||
)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/grid/_column-start-end.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
},
|
||||
{
|
||||
label: 'Grid Template Rows',
|
||||
path: '/zh-CN/style/grid/rows',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/grid/_rows.scss').then(wrapDoc)
|
||||
import('../../packages/amis-ui/scss/helper/grid/_rows.md').then(
|
||||
wrapDoc
|
||||
)
|
||||
)
|
||||
},
|
||||
{
|
||||
label: 'Grid Row Start / End',
|
||||
path: '/zh-CN/style/grid/row-start-end',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/grid/_row-start-end.scss').then(wrapDoc)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/grid/_row-start-end.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
},
|
||||
{
|
||||
label: 'Grid Auto Flow',
|
||||
path: '/zh-CN/style/grid/auto-flow',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/grid/_auto-flow.scss').then(wrapDoc)
|
||||
import('../../packages/amis-ui/scss/helper/grid/_auto-flow.md').then(
|
||||
wrapDoc
|
||||
)
|
||||
)
|
||||
},
|
||||
{
|
||||
label: 'Grid Auto Columns',
|
||||
path: '/zh-CN/style/grid/auto-columns',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/grid/_auto-columns.scss').then(wrapDoc)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/grid/_auto-columns.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
},
|
||||
{
|
||||
label: 'Grid Auto Rows',
|
||||
path: '/zh-CN/style/grid/auto-rows',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/grid/_auto-rows.scss').then(wrapDoc)
|
||||
import('../../packages/amis-ui/scss/helper/grid/_auto-rows.md').then(
|
||||
wrapDoc
|
||||
)
|
||||
)
|
||||
},
|
||||
{
|
||||
label: 'Gap',
|
||||
path: '/zh-CN/style/grid/gap',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/grid/_gap.scss').then(wrapDoc)
|
||||
import('../../packages/amis-ui/scss/helper/grid/_gap.md').then(
|
||||
wrapDoc
|
||||
)
|
||||
)
|
||||
}
|
||||
]
|
||||
@ -247,7 +289,7 @@ export const cssDocs = [
|
||||
path: '/zh-CN/style/box-alignment/justify-content',
|
||||
component: React.lazy(() =>
|
||||
import(
|
||||
'amis-ui/scss/helper/box-alignment/_justify-content.scss'
|
||||
'../../packages/amis-ui/scss/helper/box-alignment/_justify-content.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
},
|
||||
@ -256,9 +298,9 @@ export const cssDocs = [
|
||||
label: 'Justify Items',
|
||||
path: '/zh-CN/style/box-alignment/justify-items',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/box-alignment/_justify-items.scss').then(
|
||||
wrapDoc
|
||||
)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/box-alignment/_justify-items.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
},
|
||||
|
||||
@ -266,9 +308,9 @@ export const cssDocs = [
|
||||
label: 'Justify Self',
|
||||
path: '/zh-CN/style/box-alignment/justify-self',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/box-alignment/_justify-self.scss').then(
|
||||
wrapDoc
|
||||
)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/box-alignment/_justify-self.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
},
|
||||
|
||||
@ -276,9 +318,9 @@ export const cssDocs = [
|
||||
label: 'Align Content',
|
||||
path: '/zh-CN/style/box-alignment/align-content',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/box-alignment/_align-content.scss').then(
|
||||
wrapDoc
|
||||
)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/box-alignment/_align-content.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
},
|
||||
|
||||
@ -286,9 +328,9 @@ export const cssDocs = [
|
||||
label: 'Align Items',
|
||||
path: '/zh-CN/style/box-alignment/align-items',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/box-alignment/_align-items.scss').then(
|
||||
wrapDoc
|
||||
)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/box-alignment/_align-items.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
},
|
||||
|
||||
@ -296,9 +338,9 @@ export const cssDocs = [
|
||||
label: 'Align Self',
|
||||
path: '/zh-CN/style/box-alignment/align-self',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/box-alignment/_align-self.scss').then(
|
||||
wrapDoc
|
||||
)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/box-alignment/_align-self.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
},
|
||||
|
||||
@ -306,9 +348,9 @@ export const cssDocs = [
|
||||
label: 'Place Content',
|
||||
path: '/zh-CN/style/box-alignment/place-content',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/box-alignment/_place-content.scss').then(
|
||||
wrapDoc
|
||||
)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/box-alignment/_place-content.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
},
|
||||
|
||||
@ -316,9 +358,9 @@ export const cssDocs = [
|
||||
label: 'Place Items',
|
||||
path: '/zh-CN/style/box-alignment/place-items',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/box-alignment/_place-items.scss').then(
|
||||
wrapDoc
|
||||
)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/box-alignment/_place-items.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
},
|
||||
|
||||
@ -326,9 +368,9 @@ export const cssDocs = [
|
||||
label: 'Place Self',
|
||||
path: '/zh-CN/style/box-alignment/place-self',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/box-alignment/_place-self.scss').then(
|
||||
wrapDoc
|
||||
)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/box-alignment/_place-self.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
}
|
||||
]
|
||||
@ -341,7 +383,9 @@ export const cssDocs = [
|
||||
label: 'Padding',
|
||||
path: '/zh-CN/style/spacing/padding',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/spacing/_padding.scss').then(wrapDoc)
|
||||
import('../../packages/amis-ui/scss/helper/spacing/_padding.md').then(
|
||||
wrapDoc
|
||||
)
|
||||
)
|
||||
},
|
||||
|
||||
@ -349,7 +393,9 @@ export const cssDocs = [
|
||||
label: 'Margin',
|
||||
path: '/zh-CN/style/spacing/margin',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/spacing/_margin.scss').then(wrapDoc)
|
||||
import('../../packages/amis-ui/scss/helper/spacing/_margin.md').then(
|
||||
wrapDoc
|
||||
)
|
||||
)
|
||||
},
|
||||
|
||||
@ -357,9 +403,9 @@ export const cssDocs = [
|
||||
label: 'Space Between',
|
||||
path: '/zh-CN/style/spacing/space-between',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/spacing/_space-between.scss').then(
|
||||
wrapDoc
|
||||
)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/spacing/_space-between.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
}
|
||||
]
|
||||
@ -372,14 +418,18 @@ export const cssDocs = [
|
||||
label: 'Width',
|
||||
path: '/zh-CN/style/sizing/width',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/sizing/_width.scss').then(wrapDoc)
|
||||
import('../../packages/amis-ui/scss/helper/sizing/_width.md').then(
|
||||
wrapDoc
|
||||
)
|
||||
)
|
||||
},
|
||||
{
|
||||
label: 'Height',
|
||||
path: '/zh-CN/style/sizing/height',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/sizing/_height.scss').then(wrapDoc)
|
||||
import('../../packages/amis-ui/scss/helper/sizing/_height.md').then(
|
||||
wrapDoc
|
||||
)
|
||||
)
|
||||
}
|
||||
]
|
||||
@ -392,9 +442,9 @@ export const cssDocs = [
|
||||
label: 'Font Family',
|
||||
path: '/zh-CN/style/typography/font-family',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/typography/_font-family.scss').then(
|
||||
wrapDoc
|
||||
)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/typography/_font-family.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
},
|
||||
|
||||
@ -402,7 +452,9 @@ export const cssDocs = [
|
||||
label: 'Font Size',
|
||||
path: '/zh-CN/style/typography/font-size',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/typography/_font-size.scss').then(wrapDoc)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/typography/_font-size.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
},
|
||||
|
||||
@ -410,9 +462,9 @@ export const cssDocs = [
|
||||
label: 'Font style',
|
||||
path: '/zh-CN/style/typography/font-style',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/typography/_font-style.scss').then(
|
||||
wrapDoc
|
||||
)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/typography/_font-style.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
},
|
||||
|
||||
@ -420,9 +472,9 @@ export const cssDocs = [
|
||||
label: 'Font Weight',
|
||||
path: '/zh-CN/style/typography/font-weight',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/typography/_font-weight.scss').then(
|
||||
wrapDoc
|
||||
)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/typography/_font-weight.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
},
|
||||
|
||||
@ -430,9 +482,9 @@ export const cssDocs = [
|
||||
label: 'Letter Spacing',
|
||||
path: '/zh-CN/style/typography/letter-spacing',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/typography/_letter-spacing.scss').then(
|
||||
wrapDoc
|
||||
)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/typography/_letter-spacing.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
},
|
||||
|
||||
@ -440,9 +492,9 @@ export const cssDocs = [
|
||||
label: 'Line Height',
|
||||
path: '/zh-CN/style/typography/line-height',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/typography/_line-height.scss').then(
|
||||
wrapDoc
|
||||
)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/typography/_line-height.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
},
|
||||
|
||||
@ -450,9 +502,9 @@ export const cssDocs = [
|
||||
label: 'List Style Type',
|
||||
path: '/zh-CN/style/typography/list-style-type',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/typography/_list-style-type.scss').then(
|
||||
wrapDoc
|
||||
)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/typography/_list-style-type.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
},
|
||||
|
||||
@ -460,9 +512,9 @@ export const cssDocs = [
|
||||
label: 'Text Alignment',
|
||||
path: '/zh-CN/style/typography/text-align',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/typography/_text-align.scss').then(
|
||||
wrapDoc
|
||||
)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/typography/_text-align.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
},
|
||||
|
||||
@ -470,9 +522,9 @@ export const cssDocs = [
|
||||
label: 'Text Color',
|
||||
path: '/zh-CN/style/typography/text-color',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/typography/_text-color.scss').then(
|
||||
wrapDoc
|
||||
)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/typography/_text-color.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
},
|
||||
|
||||
@ -480,9 +532,9 @@ export const cssDocs = [
|
||||
label: 'Text Decoration',
|
||||
path: '/zh-CN/style/typography/text-decoration',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/typography/_text-decoration.scss').then(
|
||||
wrapDoc
|
||||
)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/typography/_text-decoration.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
},
|
||||
|
||||
@ -490,9 +542,9 @@ export const cssDocs = [
|
||||
label: 'Text Transform',
|
||||
path: '/zh-CN/style/typography/text-transform',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/typography/_text-transform.scss').then(
|
||||
wrapDoc
|
||||
)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/typography/_text-transform.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
},
|
||||
|
||||
@ -500,9 +552,9 @@ export const cssDocs = [
|
||||
label: 'Vertical Alignment',
|
||||
path: '/zh-CN/style/typography/vertical-align',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/typography/_vertical-align.scss').then(
|
||||
wrapDoc
|
||||
)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/typography/_vertical-align.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
},
|
||||
|
||||
@ -510,9 +562,9 @@ export const cssDocs = [
|
||||
label: 'Whitespace',
|
||||
path: '/zh-CN/style/typography/whitespace',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/typography/_whitespace.scss').then(
|
||||
wrapDoc
|
||||
)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/typography/_whitespace.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
},
|
||||
|
||||
@ -520,9 +572,9 @@ export const cssDocs = [
|
||||
label: 'Word Break',
|
||||
path: '/zh-CN/style/typography/word-break',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/typography/_word-break.scss').then(
|
||||
wrapDoc
|
||||
)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/typography/_word-break.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
}
|
||||
]
|
||||
@ -535,9 +587,9 @@ export const cssDocs = [
|
||||
label: 'Background Color',
|
||||
path: '/zh-CN/style/background/background-color',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/background/_background-color.scss').then(
|
||||
wrapDoc
|
||||
)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/background/_background-color.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
}
|
||||
]
|
||||
@ -550,7 +602,9 @@ export const cssDocs = [
|
||||
label: 'Border Radius',
|
||||
path: '/zh-CN/style/border/border-radius',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/border/_border-radius.scss').then(wrapDoc)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/border/_border-radius.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
},
|
||||
|
||||
@ -558,7 +612,9 @@ export const cssDocs = [
|
||||
label: 'Border Width',
|
||||
path: '/zh-CN/style/border/border-width',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/border/_border-width.scss').then(wrapDoc)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/border/_border-width.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
},
|
||||
|
||||
@ -566,7 +622,9 @@ export const cssDocs = [
|
||||
label: 'Border Color',
|
||||
path: '/zh-CN/style/border/border-color',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/border/_border-color.scss').then(wrapDoc)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/border/_border-color.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
},
|
||||
|
||||
@ -574,7 +632,9 @@ export const cssDocs = [
|
||||
label: 'Border Style',
|
||||
path: '/zh-CN/style/border/border-style',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/border/_border-style.scss').then(wrapDoc)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/border/_border-style.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
}
|
||||
]
|
||||
@ -587,7 +647,9 @@ export const cssDocs = [
|
||||
label: 'Box Shadow',
|
||||
path: '/zh-CN/style/effect/box-shadow',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/effect/_box-shadow.scss').then(wrapDoc)
|
||||
import(
|
||||
'../../packages/amis-ui/scss/helper/effect/_box-shadow.md'
|
||||
).then(wrapDoc)
|
||||
)
|
||||
},
|
||||
|
||||
@ -595,7 +657,9 @@ export const cssDocs = [
|
||||
label: 'Opacity',
|
||||
path: '/zh-CN/style/effect/opacity',
|
||||
component: React.lazy(() =>
|
||||
import('amis-ui/scss/helper/effect/_opacity.scss').then(wrapDoc)
|
||||
import('../../packages/amis-ui/scss/helper/effect/_opacity.md').then(
|
||||
wrapDoc
|
||||
)
|
||||
)
|
||||
}
|
||||
]
|
||||
|
||||
@ -0,0 +1,98 @@
|
||||
export default {
|
||||
type: 'page',
|
||||
title: 'chart组件事件',
|
||||
body: [
|
||||
{
|
||||
type: 'button',
|
||||
label: '显示提示框',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
componentId: 'chart01',
|
||||
actionType: 'showTip',
|
||||
args: {
|
||||
type: 'showTip',
|
||||
seriesIndex: 0,
|
||||
name: '',
|
||||
dataIndex: 8
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'chart',
|
||||
id: 'chart01',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'dialog',
|
||||
dialog: {
|
||||
title: '详情',
|
||||
body: [
|
||||
{
|
||||
type: 'tpl',
|
||||
tpl: '<span>当前选中值 ${value|json}<span>'
|
||||
},
|
||||
{
|
||||
type: 'chart',
|
||||
api: '/api/mock2/chart/chart1'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
config: {
|
||||
title: {
|
||||
text: '极坐标双数值轴'
|
||||
},
|
||||
legend: {
|
||||
data: ['line']
|
||||
},
|
||||
polar: {
|
||||
center: ['50%', '54%']
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
}
|
||||
},
|
||||
angleAxis: {
|
||||
type: 'value',
|
||||
startAngle: 0
|
||||
},
|
||||
radiusAxis: {
|
||||
min: 0
|
||||
},
|
||||
series: [
|
||||
{
|
||||
coordinateSystem: 'polar',
|
||||
name: 'line',
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
data: [
|
||||
[0, 0],
|
||||
[0.03487823687206265, 1],
|
||||
[0.06958655048003272, 2],
|
||||
[0.10395584540887964, 3],
|
||||
[0.13781867790849958, 4],
|
||||
[0.17101007166283433, 5],
|
||||
[0.2033683215379001, 6],
|
||||
[0.2347357813929454, 7],
|
||||
[0.26495963211660245, 8],
|
||||
[0.2938926261462365, 9],
|
||||
[0.3213938048432697, 10]
|
||||
]
|
||||
}
|
||||
],
|
||||
animationDuration: 2000
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
@ -176,16 +176,6 @@ export default {
|
||||
}
|
||||
]
|
||||
},
|
||||
submitSucc: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'toast',
|
||||
args: {
|
||||
msg: '提交成功：${event.data|json}'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
submitSucc: {
|
||||
actions: [
|
||||
{
|
||||
@ -254,7 +244,7 @@ export default {
|
||||
{
|
||||
type: 'form',
|
||||
debug: true,
|
||||
title: "表单：提交表单无target，无api，只触发提交成功事件",
|
||||
title: '表单：提交表单无target，无api，只触发提交成功事件',
|
||||
body: [
|
||||
{
|
||||
type: 'input-text',
|
||||
@ -284,7 +274,7 @@ export default {
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
@ -87,6 +87,7 @@ import ServiceEventSchema from './EventAction/cmpt-event-action/ServiceEvent';
|
||||
import CarouselEventSchema from './EventAction/cmpt-event-action/CarouselEvent';
|
||||
import TableEventSchema from './EventAction/cmpt-event-action/TableEvent';
|
||||
import ListEventSchema from './EventAction/cmpt-event-action/ListEvent';
|
||||
import ChartEventSchema from './EventAction/cmpt-event-action/ChartEvent';
|
||||
import ReloadFormActionSchema from './EventAction/reload-action/ReloadForm';
|
||||
import ReloadSelectActionSchema from './EventAction/reload-action/ReloadSelect';
|
||||
import ReloadChartActionSchema from './EventAction/reload-action/ReloadChart';
|
||||
@ -121,6 +122,7 @@ import Tab1Schema from './Tabs/Tab1';
|
||||
import Tab2Schema from './Tabs/Tab2';
|
||||
import Tab3Schema from './Tabs/Tab3';
|
||||
import Loading from './Loading';
|
||||
import CodeSchema from './Code';
|
||||
|
||||
import {Switch} from 'react-router-dom';
|
||||
import {navigations2route} from './App';
|
||||
@ -726,6 +728,11 @@ export const examples = [
|
||||
label: '列表展示类组件',
|
||||
path: 'examples/event/list',
|
||||
component: makeSchemaRenderer(ListEventSchema)
|
||||
},
|
||||
{
|
||||
label: 'chart组件',
|
||||
path: 'examples/event/chart',
|
||||
component: makeSchemaRenderer(ChartEventSchema)
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -771,6 +778,13 @@ export const examples = [
|
||||
component: makeSchemaRenderer(ThemeSchema)
|
||||
},
|
||||
|
||||
{
|
||||
label: '代码高亮',
|
||||
icon: 'fa fa-code',
|
||||
path: '/examples/code',
|
||||
component: makeSchemaRenderer(CodeSchema)
|
||||
},
|
||||
|
||||
{
|
||||
label: '向导',
|
||||
icon: 'fa fa-desktop',
|
||||
|
||||
@ -117,8 +117,7 @@ export default {
|
||||
imageCaption: 'jfe fjkda fejfkda fejk fdajf dajfe jfkda',
|
||||
popOver: {
|
||||
title: '查看大图',
|
||||
body:
|
||||
'<div class="w-xxl"><img class="w-full" src="${image}"/></div>'
|
||||
body: '<div class="w-xxl"><img class="w-full" src="${image}"/></div>'
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -157,6 +157,7 @@ class Preview extends React.Component {
|
||||
}
|
||||
|
||||
export default function (doc) {
|
||||
doc = doc.default || doc;
|
||||
return class extends React.Component {
|
||||
popoverDom = null;
|
||||
|
||||
|
||||
@ -2,7 +2,6 @@ import React from 'react';
|
||||
import {render, toast, Button, LazyComponent, Drawer} from 'amis';
|
||||
import axios from 'axios';
|
||||
import Portal from 'react-overlays/Portal';
|
||||
import {toast} from 'amis';
|
||||
import {normalizeLink} from 'amis-core';
|
||||
import {withRouter} from 'react-router';
|
||||
import copy from 'copy-to-clipboard';
|
||||
|
||||
File diff suppressed because one or more lines are too long
21
fis-conf.js
21
fis-conf.js
@ -137,7 +137,7 @@ fis.match('monaco-editor/min/**.js', {
|
||||
ignoreDependencies: true
|
||||
});
|
||||
|
||||
fis.match('/docs/**.md', {
|
||||
fis.match('{/docs,/packages/amis-ui/scss/helper}/**.md', {
|
||||
rExt: 'js',
|
||||
ignoreDependencies: true,
|
||||
parser: [
|
||||
@ -223,7 +223,7 @@ fis.match('*.html:jsx', {
|
||||
|
||||
// 这些用了 esm
|
||||
fis.match(
|
||||
'{echarts/extension/**.js,zrender/**.js,markdown-it-html5-media/**.js}',
|
||||
'{echarts/extension/**.js,zrender/**.js,markdown-it-html5-media/**.js,react-hook-form/**.js,qrcode.react/**.js,axios/**.js}',
|
||||
{
|
||||
parser: fis.plugin('typescript', {
|
||||
sourceMap: false,
|
||||
@ -288,6 +288,15 @@ if (fis.project.currentMedia() === 'dev') {
|
||||
}
|
||||
}
|
||||
});
|
||||
fis.on('compile:end', function (file) {
|
||||
if (file.subpath === '/packages/amis-core/src/index.tsx') {
|
||||
file.setContent(
|
||||
file
|
||||
.getContent()
|
||||
.replace(/__buildVersion/g, JSON.stringify(package.version))
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
fis.hook('node_modules', {
|
||||
@ -363,6 +372,12 @@ if (fis.project.currentMedia() === 'publish-sdk') {
|
||||
file.subpath === '/examples/loader.ts'
|
||||
) {
|
||||
file.setContent(file.getContent().replace(/@version/g, package.version));
|
||||
} else if (file.subpath === '/packages/amis-core/src/index.tsx') {
|
||||
file.setContent(
|
||||
file
|
||||
.getContent()
|
||||
.replace(/__buildVersion/g, JSON.stringify(package.version))
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
@ -625,7 +640,7 @@ if (fis.project.currentMedia() === 'publish-sdk') {
|
||||
rExt: '.css'
|
||||
});
|
||||
|
||||
ghPages.match('/docs/**.md', {
|
||||
ghPages.match('{/docs,/packages/amis-ui/scss/helper}/**.md', {
|
||||
rExt: 'js',
|
||||
isMod: true,
|
||||
useHash: true,
|
||||
|
||||
112
index.html
Normal file
112
index.html
Normal file
@ -0,0 +1,112 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>amis - 低代码前端框架</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<link
|
||||
type="image/x-icon"
|
||||
rel="shortcut icon"
|
||||
href="./examples/static/favicon.png"
|
||||
/>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1"
|
||||
/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
||||
<link rel="stylesheet" href="./examples/static/iconfont.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="./node_modules/@fortawesome/fontawesome-free/css/all.css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="./node_modules/@fortawesome/fontawesome-free/css/v4-shims.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="./node_modules/prismjs/themes/prism.css" />
|
||||
<link rel="stylesheet" href="./examples/doc.css" />
|
||||
|
||||
<link rel="stylesheet" href="./examples/style.scss" />
|
||||
<style>
|
||||
.app-wrapper,
|
||||
.schema-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<script type="module">
|
||||
let theme = localStorage.getItem('amis-theme') || 'cxd';
|
||||
if (theme === 'default') {
|
||||
theme = 'cxd';
|
||||
}
|
||||
|
||||
['ang', 'cxd', 'dark', 'antd'].forEach(key => {
|
||||
const link = document.createElement('link');
|
||||
link.setAttribute('rel', 'stylesheet');
|
||||
link.setAttribute('title', key);
|
||||
if (theme !== key) {
|
||||
link.setAttribute('disabled', 'disabled');
|
||||
}
|
||||
link.setAttribute(
|
||||
'href',
|
||||
new URL(`./packages/amis-ui/scss/themes/${key}.scss`, import.meta.url)
|
||||
.href
|
||||
);
|
||||
document.head.appendChild(link);
|
||||
});
|
||||
</script>
|
||||
<link rel="stylesheet" href="./packages/amis-ui/scss/helper.scss" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root" class="app-wrapper"></div>
|
||||
<script type="text/javascript">
|
||||
if (location.hostname !== 'localhost') {
|
||||
var _hmt = _hmt || [];
|
||||
|
||||
// 百度统计
|
||||
(function () {
|
||||
var hm = document.createElement('script');
|
||||
hm.src =
|
||||
'https://hm.baidu.com/hm.js?286766a21abb57abefedbd5257a26dc8';
|
||||
var s = document.getElementsByTagName('script')[0];
|
||||
s.parentNode.insertBefore(hm, s);
|
||||
})();
|
||||
}
|
||||
</script>
|
||||
<script type="module">
|
||||
import {bootstrap} from './examples/index.jsx';
|
||||
|
||||
import * as monaco from 'monaco-editor';
|
||||
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
|
||||
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
|
||||
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
|
||||
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
|
||||
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
|
||||
|
||||
self.MonacoEnvironment = {
|
||||
getWorker(_, label) {
|
||||
if (label === 'json') {
|
||||
return new jsonWorker();
|
||||
}
|
||||
if (label === 'css' || label === 'scss' || label === 'less') {
|
||||
return new cssWorker();
|
||||
}
|
||||
if (label === 'html' || label === 'handlebars' || label === 'razor') {
|
||||
return new htmlWorker();
|
||||
}
|
||||
if (label === 'typescript' || label === 'javascript') {
|
||||
return new tsWorker();
|
||||
}
|
||||
return new editorWorker();
|
||||
}
|
||||
};
|
||||
|
||||
window.enableAMISDebug = true;
|
||||
|
||||
const initialState = {};
|
||||
bootstrap(document.getElementById('root'), initialState);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -2,5 +2,5 @@
|
||||
"packages": [
|
||||
"packages/*"
|
||||
],
|
||||
"version": "2.3.2-beta.1"
|
||||
"version": "2.4.0"
|
||||
}
|
||||
|
||||
74
mock/cfc/mock/form/departUserSearch.js
Normal file
74
mock/cfc/mock/form/departUserSearch.js
Normal file
@ -0,0 +1,74 @@
|
||||
// 与departUser.js中的users一致
|
||||
const users = [
|
||||
{
|
||||
label: '用户 1',
|
||||
value: 'user1'
|
||||
},
|
||||
{
|
||||
label: '用户 2',
|
||||
value: 'user2'
|
||||
},
|
||||
{
|
||||
label: '用户 a',
|
||||
value: 'usera'
|
||||
},
|
||||
{
|
||||
label: '用户 b',
|
||||
value: 'userb'
|
||||
},
|
||||
{
|
||||
label: '用户 x',
|
||||
value: 'userx'
|
||||
},
|
||||
{
|
||||
label: '用户 y',
|
||||
value: 'usery'
|
||||
},
|
||||
{
|
||||
label: '用户 I',
|
||||
value: 'useri'
|
||||
},
|
||||
{
|
||||
label: '用户 II',
|
||||
value: 'userii'
|
||||
},
|
||||
{
|
||||
label: '用户一',
|
||||
value: 'useryi'
|
||||
},
|
||||
{
|
||||
label: '用户二',
|
||||
value: 'userer'
|
||||
},
|
||||
{
|
||||
label: '用户k',
|
||||
value: 'userk'
|
||||
},
|
||||
{
|
||||
label: '用户j',
|
||||
value: 'userj'
|
||||
}
|
||||
];
|
||||
|
||||
module.exports = function (req, res) {
|
||||
// 关键词为term
|
||||
if (req.query.term) {
|
||||
const result = users.find(item => item.value === req.query.term);
|
||||
|
||||
res.json({
|
||||
status: 0,
|
||||
msg: '',
|
||||
data: {
|
||||
options: result ? [result] : []
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
res.json({
|
||||
status: 0,
|
||||
msg: '',
|
||||
data: {
|
||||
options: users
|
||||
}
|
||||
});
|
||||
};
|
||||
41
mock/cfc/mock/map/HK.json
Normal file
41
mock/cfc/mock/map/HK.json
Normal file
File diff suppressed because one or more lines are too long
35
package.json
35
package.json
@ -7,30 +7,36 @@
|
||||
"packages/amis"
|
||||
],
|
||||
"scripts": {
|
||||
"serve": "fis3 server start --www ./public --port 8888 --no-daemon --no-browse",
|
||||
"start": "concurrently --restart-tries -1 npm:serve npm:dev",
|
||||
"stop": "fis3 server stop",
|
||||
"dev": "fis3 release -cwd ./public",
|
||||
"fis3-serve": "fis3 server start --www ./public --port 8888 --no-daemon --no-browse",
|
||||
"fis3": "concurrently --restart-tries -1 npm:fis3-serve npm:fis3-dev",
|
||||
"fis3-stop": "fis3 server stop",
|
||||
"start": "vite",
|
||||
"fis3-dev": "fis3 release -cwd ./public",
|
||||
"deploy-gh-page": "sh ./deploy-gh-pages.sh",
|
||||
"build": "npm run build --workspaces",
|
||||
"test": "npm test --workspaces",
|
||||
"update-snapshot": "npm run update-snapshot --workspaces",
|
||||
"prepare": "husky install",
|
||||
"coverage": "jest --coverage",
|
||||
"coverage": "jest --coverage --collectCoverage=v8",
|
||||
"version": "lerna version",
|
||||
"release": "npm run build --workspaces && lerna publish from-package --registry=https://registry.npmjs.org --ignore-scripts",
|
||||
"revision": "ts-node ./scripts/generate-revision.ts",
|
||||
"publish-to-internal": "sh ./publish-to-internal.sh"
|
||||
},
|
||||
"dependencies": {
|
||||
"marked": "^4.0.16",
|
||||
"postcss": "^8.4.14",
|
||||
"prismjs": "^1.28.0",
|
||||
"qs": "6.9.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-replace": "^5.0.1",
|
||||
"@types/express": "^4.17.14",
|
||||
"@types/jest": "^28.1.0",
|
||||
"@types/js-yaml": "^4.0.5",
|
||||
"@types/marked": "^4.0.7",
|
||||
"@types/prismjs": "^1.26.0",
|
||||
"@vitejs/plugin-react": "^2.2.0",
|
||||
"echarts": "5.4.0",
|
||||
"express": "^4.18.2",
|
||||
"fis-optimizer-terser": "^1.0.1",
|
||||
"fis-parser-sass": "^1.2.0",
|
||||
"fis-parser-svgr": "^1.0.0",
|
||||
@ -48,11 +54,24 @@
|
||||
"husky": "^8.0.0",
|
||||
"jest": "^29.0.3",
|
||||
"jest-environment-jsdom": "^29.0.3",
|
||||
"js-yaml": "^4.1.0",
|
||||
"lerna": "^5.5.2",
|
||||
"magic-string": "^0.26.7",
|
||||
"marked": "^4.2.1",
|
||||
"plugin-react-i18n": "^0.0.20",
|
||||
"prismjs": "^1.29.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"rollup-pluginutils": "^2.8.2",
|
||||
"setprototypeof": "^1.2.0",
|
||||
"ts-jest": "^29.0.2",
|
||||
"zrender": "^5.3.2"
|
||||
"vite": "^3.2.2",
|
||||
"vite-plugin-monaco-editor": "^1.1.0",
|
||||
"vite-plugin-svgr": "^2.2.2",
|
||||
"zrender": "^5.3.2",
|
||||
"monaco-editor": "0.30.1",
|
||||
"react-overlays": "5.1.1",
|
||||
"copy-to-clipboard": "3.3.1"
|
||||
},
|
||||
"jest": {
|
||||
"verbose": true,
|
||||
|
||||
@ -12,6 +12,8 @@ Object.defineProperty(window, 'DragEvent', {
|
||||
value: class DragEvent {}
|
||||
});
|
||||
|
||||
global.__buildVersion = '';
|
||||
|
||||
global.beforeAll(() => {
|
||||
console.warn = msg => {
|
||||
// warning 先关了，实在太吵。
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "amis-core",
|
||||
"version": "2.3.2-beta.1",
|
||||
"version": "2.4.0",
|
||||
"description": "amis-core",
|
||||
"main": "lib/index.js",
|
||||
"module": "esm/index.js",
|
||||
@ -11,6 +11,7 @@
|
||||
"@rollup/plugin-commonjs": "^22.0.2",
|
||||
"@rollup/plugin-json": "^4.1.0",
|
||||
"@rollup/plugin-node-resolve": "^14.1.0",
|
||||
"@rollup/plugin-replace": "^5.0.1",
|
||||
"@rollup/plugin-typescript": "^8.3.4",
|
||||
"@testing-library/jest-dom": "^5.16.4",
|
||||
"@types/file-saver": "^2.0.1",
|
||||
@ -18,6 +19,7 @@
|
||||
"@types/jest": "^28.1.0",
|
||||
"@types/react": "^17.0.39",
|
||||
"@types/react-dom": "^17.0.11",
|
||||
"immutable": "^4.1.0",
|
||||
"jest": "^29.0.3",
|
||||
"jest-environment-jsdom": "^29.0.3",
|
||||
"moment-timezone": "^0.5.34",
|
||||
@ -36,14 +38,14 @@
|
||||
"test": "jest",
|
||||
"update-snapshot": "jest --updateSnapshot",
|
||||
"coverage": "jest --coverage",
|
||||
"clean-dist": "rimraf lib/* esm/*"
|
||||
"clean-dist": "rimraf lib/** esm/**"
|
||||
},
|
||||
"files": [
|
||||
"lib",
|
||||
"esm"
|
||||
],
|
||||
"dependencies": {
|
||||
"amis-formula": "^2.3.2-beta.1",
|
||||
"amis-formula": "*",
|
||||
"classnames": "2.3.1",
|
||||
"file-saver": "^2.0.2",
|
||||
"hoist-non-react-statics": "^3.3.2",
|
||||
|
||||
@ -5,6 +5,7 @@ import resolve from '@rollup/plugin-node-resolve';
|
||||
import typescript from '@rollup/plugin-typescript';
|
||||
import license from 'rollup-plugin-license';
|
||||
import autoExternal from 'rollup-plugin-auto-external';
|
||||
import replace from '@rollup/plugin-replace';
|
||||
import {
|
||||
name,
|
||||
version,
|
||||
@ -21,13 +22,21 @@ const settings = {
|
||||
globals: {}
|
||||
};
|
||||
|
||||
const external = id =>
|
||||
new RegExp(
|
||||
const external = id => {
|
||||
const result = new RegExp(
|
||||
`^(?:${Object.keys(dependencies)
|
||||
.concat([
|
||||
'react',
|
||||
'react-dom',
|
||||
'react-overlays',
|
||||
'warning',
|
||||
'tslib',
|
||||
'dom-helpers',
|
||||
'@restart/hooks',
|
||||
'entities',
|
||||
'linkify-it',
|
||||
'markdown-it',
|
||||
'prop-types',
|
||||
'markdown-it-html5-media',
|
||||
'mdurl',
|
||||
'uc.micro'
|
||||
@ -37,8 +46,24 @@ const external = id =>
|
||||
)
|
||||
.join('|')})`
|
||||
).test(id);
|
||||
|
||||
if (!result && ~id.indexOf('node_modules')) {
|
||||
console.log(id);
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
const input = './src/index.tsx';
|
||||
|
||||
/** 获取子包编译后的入口路径，需要使用相对路径 */
|
||||
const getCompiledEntryPath = (repo, format) =>
|
||||
path.join(
|
||||
'..',
|
||||
repo,
|
||||
repo === 'amis-formula' || format === 'cjs' ? 'lib' : 'esm',
|
||||
'index.js'
|
||||
);
|
||||
|
||||
export default [
|
||||
{
|
||||
input,
|
||||
@ -87,8 +112,7 @@ function transpileDynamicImportForCJS(options) {
|
||||
|
||||
return {
|
||||
left: 'Promise.resolve().then(function() {return new Promise(function(fullfill) {require([',
|
||||
right:
|
||||
'], function(mod) {fullfill(tslib.__importStar(mod))})})})'
|
||||
right: '], function(mod) {fullfill(tslib.__importStar(mod))})})})'
|
||||
};
|
||||
|
||||
// return {
|
||||
@ -103,6 +127,13 @@ function transpileDynamicImportForCJS(options) {
|
||||
}
|
||||
|
||||
function getPlugins(format = 'esm') {
|
||||
const overridePaths = ['amis-formula'].reduce(
|
||||
(prev, current) => ({
|
||||
...prev,
|
||||
[current]: [getCompiledEntryPath(current, format)]
|
||||
}),
|
||||
{}
|
||||
);
|
||||
const typeScriptOptions = {
|
||||
typescript: require('typescript'),
|
||||
sourceMap: false,
|
||||
@ -112,13 +143,16 @@ function getPlugins(format = 'esm') {
|
||||
? {
|
||||
compilerOptions: {
|
||||
rootDir: './src',
|
||||
outDir: path.dirname(module)
|
||||
outDir: path.dirname(module),
|
||||
/** 覆盖继承自顶层tsconfig的paths配置，编译时应该去掉，避免报错@rollup/plugin-typescript TS6305 */
|
||||
paths: overridePaths
|
||||
}
|
||||
}
|
||||
: {
|
||||
compilerOptions: {
|
||||
rootDir: './src',
|
||||
outDir: path.dirname(main)
|
||||
outDir: path.dirname(main),
|
||||
paths: overridePaths
|
||||
}
|
||||
})
|
||||
};
|
||||
@ -131,6 +165,10 @@ function getPlugins(format = 'esm') {
|
||||
jsnext: true,
|
||||
main: true
|
||||
}),
|
||||
replace({
|
||||
preventAssignment: true,
|
||||
__buildVersion: version
|
||||
}),
|
||||
typescript(typeScriptOptions),
|
||||
commonjs({
|
||||
sourceMap: false
|
||||
|
||||
@ -235,6 +235,8 @@ export const runAction = async (
|
||||
? actionData
|
||||
: event.data;
|
||||
|
||||
console.group?.(`run action ${actionConfig.actionType}`);
|
||||
console.debug(`[${actionConfig.actionType}] action args, data`, args, data);
|
||||
await actionInstrance.run(
|
||||
{
|
||||
...actionConfig,
|
||||
@ -245,7 +247,8 @@ export const runAction = async (
|
||||
event,
|
||||
mergeData
|
||||
);
|
||||
|
||||
console.debug(`[${actionConfig.actionType}] action end event`, event);
|
||||
console.groupEnd?.();
|
||||
// 阻止原有动作执行
|
||||
preventDefault && event.preventDefault();
|
||||
// 阻止后续动作执行
|
||||
|
||||
@ -92,6 +92,9 @@ import {FormRenderer} from './renderers/Form';
|
||||
import type {FormHorizontal} from './renderers/Form';
|
||||
import {enableDebug, promisify, replaceText, wrapFetcher} from './utils/index';
|
||||
|
||||
// @ts-ignore
|
||||
export const version = '__buildVersion';
|
||||
|
||||
export {
|
||||
clearStoresCache,
|
||||
updateEnv,
|
||||
@ -222,7 +225,7 @@ export function render(
|
||||
}
|
||||
|
||||
// 默认将开启移动端原生 UI
|
||||
if (typeof options.useMobileUI) {
|
||||
if (options.useMobileUI !== false) {
|
||||
props.useMobileUI = true;
|
||||
}
|
||||
|
||||
|
||||
@ -1958,6 +1958,10 @@ export class FormRenderer extends Form {
|
||||
}
|
||||
|
||||
setData(values: object, replace?: boolean) {
|
||||
return super.setValues(values);
|
||||
const {onChange, store} = this.props;
|
||||
super.setValues(values);
|
||||
// 触发表单change
|
||||
onChange &&
|
||||
onChange(store.data, difference(store.data, store.pristine), this.props);
|
||||
}
|
||||
}
|
||||
|
||||
@ -159,7 +159,8 @@ export function wrapControl<
|
||||
type.endsWith('select') ||
|
||||
type === 'switch' ||
|
||||
type === 'textarea' ||
|
||||
type === 'radios')
|
||||
type === 'radios') &&
|
||||
type !== 'input-group'
|
||||
) {
|
||||
console.warn('name is required', this.props.$schema);
|
||||
}
|
||||
|
||||
@ -7,7 +7,11 @@ import {
|
||||
Instance
|
||||
} from 'mobx-state-tree';
|
||||
import {iRendererStore} from './iRenderer';
|
||||
import {resolveVariable, resolveVariableAndFilter} from '../utils/tpl-builtin';
|
||||
import {
|
||||
resolveVariable,
|
||||
resolveVariableAndFilter,
|
||||
isPureVariable
|
||||
} from '../utils/tpl-builtin';
|
||||
import isEqual from 'lodash/isEqual';
|
||||
import find from 'lodash/find';
|
||||
import sortBy from 'lodash/sortBy';
|
||||
@ -198,6 +202,40 @@ export const Row = types
|
||||
return table && table.itemDraggableOn
|
||||
? evalExpression(table.itemDraggableOn, (self as IRow).locals)
|
||||
: true;
|
||||
},
|
||||
|
||||
/**
|
||||
* 判断当前行点击后是否应该继续触发check
|
||||
* 用于限制checkOnItemClick触发的check事件
|
||||
*/
|
||||
get isCheckAvaiableOnClick(): boolean {
|
||||
const table = getParent(self, self.depth * 2) as ITableStore;
|
||||
const keepItemSelectionOnPageChange =
|
||||
table?.keepItemSelectionOnPageChange;
|
||||
const selectionUpperLimit = table?.maxKeepItemSelectionLength;
|
||||
|
||||
// 如果未做配置，或者配置不合法直接通过检查
|
||||
if (
|
||||
!keepItemSelectionOnPageChange ||
|
||||
!Number.isInteger(selectionUpperLimit)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// 使用内置ID，不会重复
|
||||
const selectedIds = (table?.selectedRows ?? []).map(
|
||||
(item: IRow) => item.id
|
||||
);
|
||||
// 此时syncSelected还没有触发，所以需要比较点击之后的数量
|
||||
const selectedCount = selectedIds.includes(self.id)
|
||||
? selectedIds.length - 1
|
||||
: selectedIds.length + 1;
|
||||
|
||||
if (selectedCount > selectionUpperLimit) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
}))
|
||||
.actions(self => ({
|
||||
@ -677,7 +715,8 @@ export const TableStore = iRendererStore
|
||||
return getHovedRow();
|
||||
},
|
||||
|
||||
get disabledHeadCheckbox() {
|
||||
/** 已选择item是否达到数量上限 */
|
||||
get isSelectionThresholdReached() {
|
||||
const selectedLength = self.data?.selectedItems?.length;
|
||||
const maxLength = self.maxKeepItemSelectionLength;
|
||||
|
||||
@ -685,7 +724,7 @@ export const TableStore = iRendererStore
|
||||
return false;
|
||||
}
|
||||
|
||||
return maxLength === selectedLength;
|
||||
return maxLength <= selectedLength;
|
||||
},
|
||||
|
||||
get firstToggledColumnIndex() {
|
||||
@ -823,7 +862,11 @@ export const TableStore = iRendererStore
|
||||
toggled: item.toggled !== false,
|
||||
breakpoint: item.breakpoint,
|
||||
isPrimary: index === PARTITION_INDEX,
|
||||
className: item.className || ''
|
||||
className: item.className || '',
|
||||
/** 提前映射变量，方便后续view中使用 */
|
||||
label: isPureVariable(item.label)
|
||||
? resolveVariableAndFilter(item.label, self.data)
|
||||
: item.label
|
||||
}));
|
||||
|
||||
self.columns.replace(columns as any);
|
||||
@ -868,7 +911,11 @@ export const TableStore = iRendererStore
|
||||
pristine: item.pristine || item,
|
||||
toggled: item.toggled !== false,
|
||||
breakpoint: item.breakpoint,
|
||||
isPrimary: index === PARTITION_INDEX
|
||||
isPrimary: index === PARTITION_INDEX,
|
||||
/** 提前映射变量，方便后续view中使用 */
|
||||
label: isPureVariable(item.label)
|
||||
? resolveVariableAndFilter(item.label, self.data)
|
||||
: item.label
|
||||
}));
|
||||
|
||||
self.columns.replace(columns as any);
|
||||
|
||||
@ -199,7 +199,10 @@ export function buildApi(
|
||||
api.url = api.url.substring(0, idx) + '?' + qsstringify(params);
|
||||
} else {
|
||||
api.query = data;
|
||||
api.url += '?' + qsstringify(data);
|
||||
const query = qsstringify(data);
|
||||
if (query) {
|
||||
api.url = `${api.url}?${query}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -213,7 +216,10 @@ export function buildApi(
|
||||
api.url = api.url.substring(0, idx) + '?' + qsstringify(params);
|
||||
} else {
|
||||
api.query = api.data;
|
||||
api.url += '?' + qsstringify(api.data);
|
||||
const query = qsstringify(api.data);
|
||||
if (query) {
|
||||
api.url = `${api.url}?${query}`;
|
||||
}
|
||||
}
|
||||
delete api.data;
|
||||
}
|
||||
@ -381,8 +387,13 @@ export function responseAdaptor(ret: fetcherResult, api: ApiObject) {
|
||||
export function wrapFetcher(
|
||||
fn: (config: fetcherConfig) => Promise<fetcherResult>,
|
||||
tracker?: (eventTrack: EventTrack, data: any) => void
|
||||
): (api: Api, data: object, options?: object) => Promise<Payload | void> {
|
||||
return function (api, data, options) {
|
||||
) {
|
||||
// 避免重复处理
|
||||
if ((fn as any)._wrappedFetcher) {
|
||||
return fn as any;
|
||||
}
|
||||
|
||||
const wrappedFetcher = function (api: Api, data: object, options?: object) {
|
||||
api = buildApi(api, data, options) as ApiObject;
|
||||
|
||||
if (api.requestAdaptor) {
|
||||
@ -454,6 +465,10 @@ export function wrapFetcher(
|
||||
}
|
||||
return wrapAdaptor(fn(api), api);
|
||||
};
|
||||
|
||||
(wrappedFetcher as any)._wrappedFetcher = true;
|
||||
|
||||
return wrappedFetcher;
|
||||
}
|
||||
|
||||
export function wrapAdaptor(promise: Promise<fetcherResult>, api: ApiObject) {
|
||||
|
||||
@ -479,6 +479,10 @@ export function promisify<T extends Function>(
|
||||
): (...args: Array<any>) => Promise<any> & {
|
||||
raw: T;
|
||||
} {
|
||||
// 避免重复处理
|
||||
if ((fn as any)._promisified) {
|
||||
return fn as any;
|
||||
}
|
||||
let promisified = function () {
|
||||
try {
|
||||
const ret = fn.apply(null, arguments);
|
||||
@ -498,6 +502,7 @@ export function promisify<T extends Function>(
|
||||
}
|
||||
};
|
||||
(promisified as any).raw = fn;
|
||||
(promisified as any)._promisified = true;
|
||||
return promisified;
|
||||
}
|
||||
|
||||
|
||||
1
packages/amis-formula/.gitignore
vendored
1
packages/amis-formula/.gitignore
vendored
@ -1,2 +1,3 @@
|
||||
/coverage
|
||||
/lib
|
||||
/esm
|
||||
|
||||
@ -1,19 +1,30 @@
|
||||
{
|
||||
"name": "amis-formula",
|
||||
"version": "2.3.2-beta.1",
|
||||
"version": "2.4.0",
|
||||
"description": "负责 amis 里面的表达式实现，内置公式，编辑器等",
|
||||
"main": "lib/index.js",
|
||||
"module": "esm/index.js",
|
||||
"types": "lib/index.d.ts",
|
||||
"scripts": {
|
||||
"build": "npm run clean-dist && NODE_ENV=production rollup -c && npm run genDoc && npm run declaration ",
|
||||
"build": "npm run clean-dist && npm run genDoc && NODE_ENV=production rollup -c && cp src/doc.md lib/doc.md && cp src/doc.md esm/doc.md",
|
||||
"lib": "npm run clean-dist && NODE_ENV=production IS_LIB=1 rollup -c",
|
||||
"clean-dist": "rimraf lib/*",
|
||||
"clean-dist": "rimraf lib/**",
|
||||
"declaration": "tsc --project tsconfig-for-declaration.json --allowJs --declaration --emitDeclarationOnly --declarationDir ./lib --rootDir ./src",
|
||||
"test": "jest",
|
||||
"update-snapshot": "jest --updateSnapshot",
|
||||
"coverage": "jest --coverage",
|
||||
"genDoc": "ts-node ./scripts/genDoc.ts"
|
||||
},
|
||||
"exports": {
|
||||
".": {
|
||||
"require": "./lib/index.js",
|
||||
"import": "./esm/index.js"
|
||||
},
|
||||
"./lib/*": {
|
||||
"require": "./lib/*.js",
|
||||
"import": "./esm/*.js"
|
||||
}
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/aisuda/amis-tpl.git"
|
||||
@ -25,7 +36,8 @@
|
||||
"formula"
|
||||
],
|
||||
"files": [
|
||||
"lib"
|
||||
"lib",
|
||||
"esm"
|
||||
],
|
||||
"author": "fex",
|
||||
"license": "MIT",
|
||||
|
||||
@ -3,11 +3,16 @@ import commonjs from '@rollup/plugin-commonjs';
|
||||
import json from '@rollup/plugin-json';
|
||||
import resolve from '@rollup/plugin-node-resolve';
|
||||
import typescript from '@rollup/plugin-typescript';
|
||||
import {terser} from 'rollup-plugin-terser';
|
||||
import license from 'rollup-plugin-license';
|
||||
import {name, version, main, author, dependencies} from './package.json';
|
||||
|
||||
const isForLib = process.env.IS_LIB || false;
|
||||
import {
|
||||
name,
|
||||
version,
|
||||
main,
|
||||
module,
|
||||
author,
|
||||
dependencies
|
||||
} from './package.json';
|
||||
import path from 'path';
|
||||
|
||||
const settings = {
|
||||
globals: {}
|
||||
@ -23,52 +28,79 @@ const external = id =>
|
||||
.join('|')})`
|
||||
).test(id);
|
||||
|
||||
export default {
|
||||
input: isForLib ? './scripts/lib.ts' : './src/index.ts',
|
||||
output: [
|
||||
{
|
||||
file: isForLib ? 'lib/formula.js' : main,
|
||||
name: isForLib ? 'formula' : main,
|
||||
...settings,
|
||||
format: isForLib ? 'iife' : 'cjs',
|
||||
plugins: [isForLib && terser()],
|
||||
strict: !isForLib,
|
||||
footer: isForLib
|
||||
? `var evaluate = formula.evaluate;
|
||||
var momentFormat = formula.momentFormat;
|
||||
var parse = formula.parse;`
|
||||
: ''
|
||||
}
|
||||
],
|
||||
external: isForLib ? [] : external,
|
||||
export default [
|
||||
{
|
||||
input: ['./src/index.ts', './src/doc.ts'],
|
||||
output: [
|
||||
{
|
||||
...settings,
|
||||
dir: path.dirname(main),
|
||||
format: 'cjs',
|
||||
exports: 'named',
|
||||
preserveModulesRoot: './src',
|
||||
preserveModules: true // Keep directory structure and files
|
||||
}
|
||||
],
|
||||
external: external,
|
||||
plugins: getPlugins('cjs')
|
||||
},
|
||||
{
|
||||
input: ['./src/index.ts', './src/doc.ts'],
|
||||
output: [
|
||||
{
|
||||
...settings,
|
||||
dir: path.dirname(module),
|
||||
format: 'esm',
|
||||
exports: 'named',
|
||||
preserveModulesRoot: './src',
|
||||
preserveModules: true // Keep directory structure and files
|
||||
}
|
||||
],
|
||||
external: external,
|
||||
plugins: getPlugins('esm')
|
||||
}
|
||||
];
|
||||
|
||||
plugins: [
|
||||
function getPlugins(format = 'esm') {
|
||||
const typeScriptOptions = {
|
||||
typescript: require('typescript'),
|
||||
sourceMap: false,
|
||||
outputToFilesystem: true,
|
||||
|
||||
...(format === 'esm'
|
||||
? {
|
||||
compilerOptions: {
|
||||
rootDir: './src',
|
||||
outDir: path.dirname(module)
|
||||
}
|
||||
}
|
||||
: {
|
||||
compilerOptions: {
|
||||
rootDir: './src',
|
||||
outDir: path.dirname(main)
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
return [
|
||||
json(),
|
||||
resolve({
|
||||
jsnext: true,
|
||||
main: true,
|
||||
browser: true
|
||||
}),
|
||||
typescript({
|
||||
typescript: require('typescript'),
|
||||
sourceMap: false,
|
||||
outputToFilesystem: true
|
||||
typescript(typeScriptOptions),
|
||||
commonjs({
|
||||
include: 'node_modules/**',
|
||||
extensions: ['.js'],
|
||||
ignoreGlobal: false,
|
||||
sourceMap: false
|
||||
}),
|
||||
commonjs(
|
||||
isForLib
|
||||
? {}
|
||||
: {
|
||||
include: 'node_modules/**',
|
||||
extensions: ['.js'],
|
||||
ignoreGlobal: false,
|
||||
sourceMap: false
|
||||
}
|
||||
),
|
||||
license({
|
||||
banner: `
|
||||
${name} v${version}
|
||||
Copyright 2021<%= moment().format('YYYY') > 2021 ? '-' + moment().format('YYYY') : null %> ${author}
|
||||
`
|
||||
})
|
||||
]
|
||||
};
|
||||
];
|
||||
}
|
||||
|
||||
@ -4,8 +4,8 @@ import doctrine from 'doctrine';
|
||||
|
||||
const workDir = path.resolve(path.dirname(__dirname));
|
||||
const jsFile = path.join(workDir, 'src/evalutor.ts');
|
||||
const outputFile = path.join(workDir, 'lib/doc.js');
|
||||
const outputMD = path.join(workDir, 'lib/doc.md');
|
||||
const outputFile = path.join(workDir, 'src/doc.ts');
|
||||
const outputMD = path.join(workDir, 'src/doc.md');
|
||||
|
||||
function getFormulaComments(contents: string) {
|
||||
const comments: Array<{
|
||||
@ -89,37 +89,29 @@ async function main(...params: Array<any>) {
|
||||
|
||||
fs.writeFileSync(
|
||||
outputFile,
|
||||
`/**\n * 公式文档\n */\nexports.doc = ${JSON.stringify(
|
||||
result,
|
||||
null,
|
||||
2
|
||||
)}`.replace(/\"(\w+)\"\:/g, (_, key) => `${key}:`),
|
||||
'utf8'
|
||||
);
|
||||
console.log(`公式文档生成 > ${outputFile}`);
|
||||
fs.writeFileSync(
|
||||
outputFile.replace(/\.js$/, '.d.ts'),
|
||||
// 可以通过以下命令生成
|
||||
// tsc --declaration --emitDeclarationOnly --allowJs doc.js
|
||||
[
|
||||
`export var doc: {`,
|
||||
`/**\n * 公式文档 请运行 \`npm run genDoc\` 自动生成\n */\nexport const doc: ${[
|
||||
`{`,
|
||||
` name: string;`,
|
||||
` description: string;`,
|
||||
` example: string;`,
|
||||
` params: {`,
|
||||
` type: string;`,
|
||||
` name: string;`,
|
||||
` description: string;`,
|
||||
` type: string;`,
|
||||
` name: string;`,
|
||||
` description: string | null;`,
|
||||
` }[];`,
|
||||
` returns: {`,
|
||||
` type: string;`,
|
||||
` description: string;`,
|
||||
` type: string;`,
|
||||
` description: string | null;`,
|
||||
` };`,
|
||||
` namespace: string;`,
|
||||
`}[];`
|
||||
].join('\n'),
|
||||
`}[]`
|
||||
].join('\n')} = ${JSON.stringify(result, null, 2).replace(
|
||||
/\"(\w+)\"\:/g,
|
||||
(_, key) => `${key}:`
|
||||
)};`,
|
||||
'utf8'
|
||||
);
|
||||
console.log(`公式文档生成 > ${outputFile}`);
|
||||
|
||||
const grouped: any = {};
|
||||
result.forEach((item: any) => {
|
||||
|
||||
935
packages/amis-formula/src/doc.md
Normal file
935
packages/amis-formula/src/doc.md
Normal file
@ -0,0 +1,935 @@
|
||||
## 逻辑函数
|
||||
|
||||
### IF
|
||||
|
||||
用法：`IF(condition, consequent, alternate)`
|
||||
|
||||
* `condition:expression` 条件表达式.
|
||||
* `consequent:any` 条件判断通过的返回结果
|
||||
* `alternate:any` 条件判断不通过的返回结果
|
||||
|
||||
返回：`any` 根据条件返回不同的结果
|
||||
|
||||
示例：IF(A, B, C)
|
||||
|
||||
如果满足条件A，则返回B，否则返回C，支持多层嵌套IF函数。
|
||||
|
||||
也可以用表达式如：A ? B : C
|
||||
|
||||
### AND
|
||||
|
||||
用法：`AND(expression1, expression2, ...expressionN)`
|
||||
|
||||
* `conditions:...expression` 条件表达式.
|
||||
|
||||
返回：`boolean`
|
||||
|
||||
条件全部符合，返回 true，否则返回 false
|
||||
|
||||
示例：AND(语文成绩>80, 数学成绩>80)
|
||||
|
||||
语文成绩和数学成绩都大于 80，则返回 true，否则返回 false
|
||||
|
||||
也可以直接用表达式如：语文成绩>80 && 数学成绩>80
|
||||
|
||||
### OR
|
||||
|
||||
用法：`OR(expression1, expression2, ...expressionN)`
|
||||
|
||||
* `conditions:...expression` 条件表达式.
|
||||
|
||||
返回：`boolean`
|
||||
|
||||
条件任意一个满足条件，返回 true，否则返回 false
|
||||
|
||||
示例：OR(语文成绩>80, 数学成绩>80)
|
||||
|
||||
语文成绩和数学成绩任意一个大于 80，则返回 true，否则返回 false
|
||||
|
||||
也可以直接用表达式如：语文成绩>80 || 数学成绩>80
|
||||
|
||||
### XOR
|
||||
|
||||
用法：`XOR(condition1, condition2)`
|
||||
|
||||
* `condition1:expression` 条件表达式1
|
||||
* `condition2:expression` 条件表达式2
|
||||
|
||||
返回：`boolean`
|
||||
|
||||
异或处理，多个表达式组中存在奇数个真时认为真。
|
||||
|
||||
### IFS
|
||||
|
||||
用法：`IFS(condition1, result1, condition2, result2,...conditionN, resultN)`
|
||||
|
||||
* `args:...any` 条件，返回值集合
|
||||
|
||||
返回：`any` 第一个满足条件的结果，没有命中的返回 false。
|
||||
|
||||
判断函数集合，相当于多个 else if 合并成一个。
|
||||
|
||||
示例：IFS(语文成绩 > 80, "优秀", 语文成绩 > 60, "良", "继续努力")
|
||||
|
||||
如果语文成绩大于 80，则返回优秀，否则判断大于 60 分，则返回良，否则返回继续努力。
|
||||
|
||||
## 数学函数
|
||||
|
||||
### ABS
|
||||
|
||||
用法：`ABS(num)`
|
||||
|
||||
* `num:number` 数值
|
||||
|
||||
返回：`number` 传入数值的绝对值
|
||||
|
||||
返回传入数字的绝对值
|
||||
|
||||
### MAX
|
||||
|
||||
用法：`MAX(num1, num2, ...numN)`
|
||||
|
||||
* `num:...number` 数值
|
||||
|
||||
返回：`number` 所有传入值中最大的那个
|
||||
|
||||
获取最大值，如果只有一个参数且是数组，则计算这个数组内的值
|
||||
|
||||
### MIN
|
||||
|
||||
用法：`MIN(num1, num2, ...numN)`
|
||||
|
||||
* `num:...number` 数值
|
||||
|
||||
返回：`number` 所有传入值中最小的那个
|
||||
|
||||
获取最小值，如果只有一个参数且是数组，则计算这个数组内的值
|
||||
|
||||
### SUM
|
||||
|
||||
用法：`SUM(num1, num2, ...numN)`
|
||||
|
||||
* `num:...number` 数值
|
||||
|
||||
返回：`number` 所有传入数值的总和
|
||||
|
||||
求和，如果只有一个参数且是数组，则计算这个数组内的值
|
||||
|
||||
### INT
|
||||
|
||||
用法：`INT(num)`
|
||||
|
||||
* `num:number` 数值
|
||||
|
||||
返回：`number` 数值对应的整形
|
||||
|
||||
将数值向下取整为最接近的整数
|
||||
|
||||
### MOD
|
||||
|
||||
用法：`MOD(num, divisor)`
|
||||
|
||||
* `num:number` 被除数
|
||||
* `divisor:number` 除数
|
||||
|
||||
返回：`number` 两数相除的余数
|
||||
|
||||
返回两数相除的余数，参数 number 是被除数，divisor 是除数
|
||||
|
||||
### PI
|
||||
|
||||
用法：`PI()`
|
||||
|
||||
圆周率 3.1415...
|
||||
|
||||
### ROUND
|
||||
|
||||
用法：`ROUND(num[, numDigits = 2])`
|
||||
|
||||
* `num:number` 要处理的数字
|
||||
* `numDigits:number` 小数位数
|
||||
|
||||
返回：`number` 传入数值四舍五入后的结果
|
||||
|
||||
将数字四舍五入到指定的位数，可以设置小数位。
|
||||
|
||||
### FLOOR
|
||||
|
||||
用法：`FLOOR(num[, numDigits=2])`
|
||||
|
||||
* `num:number` 要处理的数字
|
||||
* `numDigits:number` 小数位数
|
||||
|
||||
返回：`number` 传入数值向下取整后的结果
|
||||
|
||||
将数字向下取整到指定的位数，可以设置小数位。
|
||||
|
||||
### CEIL
|
||||
|
||||
用法：`CEIL(num[, numDigits=2])`
|
||||
|
||||
* `num:number` 要处理的数字
|
||||
* `numDigits:number` 小数位数
|
||||
|
||||
返回：`number` 传入数值向上取整后的结果
|
||||
|
||||
将数字向上取整到指定的位数，可以设置小数位。
|
||||
|
||||
### SQRT
|
||||
|
||||
用法：`SQRT(num)`
|
||||
|
||||
* `num:number` 要处理的数字
|
||||
|
||||
返回：`number` 开平方的结果
|
||||
|
||||
开平方，参数 number 为非负数
|
||||
|
||||
### AVG
|
||||
|
||||
用法：`AVG(num1, num2, ...numN)`
|
||||
|
||||
* `num:...number` 要处理的数字
|
||||
|
||||
返回：`number` 所有数值的平均值
|
||||
|
||||
返回所有参数的平均值，如果只有一个参数且是数组，则计算这个数组内的值
|
||||
|
||||
### DEVSQ
|
||||
|
||||
用法：`DEVSQ(num1, num2, ...numN)`
|
||||
|
||||
* `num:...number` 要处理的数字
|
||||
|
||||
返回：`number` 所有数值的平均值
|
||||
|
||||
返回数据点与数据均值点之差（数据偏差）的平方和，如果只有一个参数且是数组，则计算这个数组内的值
|
||||
|
||||
### AVEDEV
|
||||
|
||||
用法：`AVEDEV(num1, num2, ...numN)`
|
||||
|
||||
* `num:...number` 要处理的数字
|
||||
|
||||
返回：`number` 所有数值的平均值
|
||||
|
||||
数据点到其算术平均值的绝对偏差的平均值
|
||||
|
||||
### HARMEAN
|
||||
|
||||
用法：`HARMEAN(num1, num2, ...numN)`
|
||||
|
||||
* `num:...number` 要处理的数字
|
||||
|
||||
返回：`number` 所有数值的平均值
|
||||
|
||||
数据点的调和平均值，如果只有一个参数且是数组，则计算这个数组内的值
|
||||
|
||||
### LARGE
|
||||
|
||||
用法：`LARGE(array, k)`
|
||||
|
||||
* `nums:array` 要处理的数字
|
||||
* `k:number` 第几大
|
||||
|
||||
返回：`number` 所有数值的平均值
|
||||
|
||||
数据集中第 k 个最大值
|
||||
|
||||
### UPPERMONEY
|
||||
|
||||
用法：`UPPERMONEY(num)`
|
||||
|
||||
* `num:number` 要处理的数字
|
||||
|
||||
返回：`string` 数值中文大写字符
|
||||
|
||||
将数值转为中文大写金额
|
||||
|
||||
### RAND
|
||||
|
||||
用法：`RAND()`
|
||||
|
||||
返回大于等于 0 且小于 1 的均匀分布随机实数。每一次触发计算都会变化。
|
||||
|
||||
示例：`RAND()*100`
|
||||
|
||||
返回 0-100 之间的随机数
|
||||
|
||||
### LAST
|
||||
|
||||
用法：`LAST(array)`
|
||||
|
||||
* `arr:...number` 要处理的数组
|
||||
|
||||
返回：`any` 最后一个值
|
||||
|
||||
取数据最后一个
|
||||
|
||||
## 文本函数
|
||||
|
||||
### LEFT
|
||||
|
||||
用法：`LEFT(text, len)`
|
||||
|
||||
* `text:string` 要处理的文本
|
||||
* `len:number` 要处理的长度
|
||||
|
||||
返回：`string` 对应字符串
|
||||
|
||||
返回传入文本左侧的指定长度字符串。
|
||||
|
||||
### RIGHT
|
||||
|
||||
用法：`RIGHT(text, len)`
|
||||
|
||||
* `text:string` 要处理的文本
|
||||
* `len:number` 要处理的长度
|
||||
|
||||
返回：`string` 对应字符串
|
||||
|
||||
返回传入文本右侧的指定长度字符串。
|
||||
|
||||
### LEN
|
||||
|
||||
用法：`LEN(text)`
|
||||
|
||||
* `text:string` 要处理的文本
|
||||
|
||||
返回：`number` 长度
|
||||
|
||||
计算文本的长度
|
||||
|
||||
### LENGTH
|
||||
|
||||
用法：`LENGTH(textArr)`
|
||||
|
||||
* `textArr:Array<string>` 要处理的文本集合
|
||||
|
||||
返回：`Array<number>` 长度集合
|
||||
|
||||
计算文本集合中所有文本的长度
|
||||
|
||||
### ISEMPTY
|
||||
|
||||
用法：`ISEMPTY(text)`
|
||||
|
||||
* `text:string` 要处理的文本
|
||||
|
||||
返回：`boolean` 判断结果
|
||||
|
||||
判断文本是否为空
|
||||
|
||||
### CONCATENATE
|
||||
|
||||
用法：`CONCATENATE(text1, text2, ...textN)`
|
||||
|
||||
* `text:...string` 文本集合
|
||||
|
||||
返回：`string` 连接后的文本
|
||||
|
||||
将多个传入值连接成文本
|
||||
|
||||
### CHAR
|
||||
|
||||
用法：`CHAR(code)`
|
||||
|
||||
* `code:number` 编码值
|
||||
|
||||
返回：`string` 指定位置的字符
|
||||
|
||||
返回计算机字符集的数字代码所对应的字符。
|
||||
|
||||
`CHAR(97)` 等价于 "a"
|
||||
|
||||
### LOWER
|
||||
|
||||
用法：`LOWER(text)`
|
||||
|
||||
* `text:string` 文本
|
||||
|
||||
返回：`string` 结果文本
|
||||
|
||||
将传入文本转成小写
|
||||
|
||||
### UPPER
|
||||
|
||||
用法：`UPPER(text)`
|
||||
|
||||
* `text:string` 文本
|
||||
|
||||
返回：`string` 结果文本
|
||||
|
||||
将传入文本转成大写
|
||||
|
||||
### UPPERFIRST
|
||||
|
||||
用法：`UPPERFIRST(text)`
|
||||
|
||||
* `text:string` 文本
|
||||
|
||||
返回：`string` 结果文本
|
||||
|
||||
将传入文本首字母转成大写
|
||||
|
||||
### PADSTART
|
||||
|
||||
用法：`PADSTART(text)`
|
||||
|
||||
* `text:string` 文本
|
||||
* `num:number` 目标长度
|
||||
* `pad:string` 用于补齐的文本
|
||||
|
||||
返回：`string` 结果文本
|
||||
|
||||
向前补齐文本长度
|
||||
|
||||
示例 `PADSTART("6", 2, "0")`
|
||||
|
||||
返回 `06`
|
||||
|
||||
### CAPITALIZE
|
||||
|
||||
用法：`CAPITALIZE(text)`
|
||||
|
||||
* `text:string` 文本
|
||||
|
||||
返回：`string` 结果文本
|
||||
|
||||
将文本转成标题
|
||||
|
||||
示例 `CAPITALIZE("star")`
|
||||
|
||||
返回 `Star`
|
||||
|
||||
### ESCAPE
|
||||
|
||||
用法：`ESCAPE(text)`
|
||||
|
||||
* `text:string` 文本
|
||||
|
||||
返回：`string` 结果文本
|
||||
|
||||
对文本进行 HTML 转义
|
||||
|
||||
示例 `ESCAPE("<star>&")`
|
||||
|
||||
返回 `<start>&`
|
||||
|
||||
### TRUNCATE
|
||||
|
||||
用法：`TRUNCATE(text, 6)`
|
||||
|
||||
* `text:string` 文本
|
||||
* `text:number` 最长长度
|
||||
|
||||
返回：`string` 结果文本
|
||||
|
||||
对文本长度进行截断
|
||||
|
||||
示例 `TRUNCATE("amis.baidu.com", 6)`
|
||||
|
||||
返回 `amis...`
|
||||
|
||||
### BEFORELAST
|
||||
|
||||
用法：`BEFORELAST(text, '.')`
|
||||
|
||||
* `text:string` 文本
|
||||
* `delimiter:string` 结束文本
|
||||
|
||||
返回：`string` 判断结果
|
||||
|
||||
取在某个分隔符之前的所有字符串
|
||||
|
||||
### SPLIT
|
||||
|
||||
用法：`SPLIT(text, ',')`
|
||||
|
||||
* `text:string` 文本
|
||||
* `delimiter:string` 文本片段
|
||||
|
||||
返回：`Array<string>` 文本集
|
||||
|
||||
将文本根据指定片段分割成数组
|
||||
|
||||
示例：`SPLIT("a,b,c", ",")`
|
||||
|
||||
返回 `["a", "b", "c"]`
|
||||
|
||||
### TRIM
|
||||
|
||||
用法：`TRIM(text)`
|
||||
|
||||
* `text:string` 文本
|
||||
|
||||
返回：`string` 处理后的文本
|
||||
|
||||
将文本去除前后空格
|
||||
|
||||
### STRIPTAG
|
||||
|
||||
用法：`STRIPTAG(text)`
|
||||
|
||||
* `text:string` 文本
|
||||
|
||||
返回：`string` 处理后的文本
|
||||
|
||||
去除文本中的 HTML 标签
|
||||
|
||||
示例：`STRIPTAG("<b>amis</b>")`
|
||||
|
||||
返回：`amis`
|
||||
|
||||
### LINEBREAK
|
||||
|
||||
用法：`LINEBREAK(text)`
|
||||
|
||||
* `text:string` 文本
|
||||
|
||||
返回：`string` 处理后的文本
|
||||
|
||||
将字符串中的换行转成 HTML `<br>`，用于简单换行的场景
|
||||
|
||||
示例：`LINEBREAK("\n")`
|
||||
|
||||
返回：`<br/>`
|
||||
|
||||
### STARTSWITH
|
||||
|
||||
用法：`STARTSWITH(text, '片段')`
|
||||
|
||||
* `text:string` 文本
|
||||
* `startString:string` 起始文本
|
||||
|
||||
返回：`string` 判断结果
|
||||
|
||||
判断字符串(text)是否以特定字符串(startString)开始，是则返回 True，否则返回 False
|
||||
|
||||
### ENDSWITH
|
||||
|
||||
用法：`ENDSWITH(text, '片段')`
|
||||
|
||||
* `text:string` 文本
|
||||
* `endString:string` 结束文本
|
||||
|
||||
返回：`string` 判断结果
|
||||
|
||||
判断字符串(text)是否以特定字符串(endString)结束，是则返回 True，否则返回 False
|
||||
|
||||
### CONTAINS
|
||||
|
||||
用法：`CONTAINS(text, searchText)`
|
||||
|
||||
* `text:string` 文本
|
||||
* `searchText:string` 搜索文本
|
||||
|
||||
返回：`string` 判断结果
|
||||
|
||||
判断参数 1 中的文本是否包含参数 2 中的文本。
|
||||
|
||||
### REPLACE
|
||||
|
||||
用法：`REPLACE(text, search, replace)`
|
||||
|
||||
* `text:string` 要处理的文本
|
||||
* `search:string` 要被替换的文本
|
||||
* `replace:string` 要替换的文本
|
||||
|
||||
返回：`string` 处理结果
|
||||
|
||||
对文本进行全量替换。
|
||||
|
||||
### SEARCH
|
||||
|
||||
用法：`SEARCH(text, search, 0)`
|
||||
|
||||
* `text:string` 要处理的文本
|
||||
* `search:string` 用来搜索的文本
|
||||
* `start:number` 起始位置
|
||||
|
||||
返回：`number` 命中的位置
|
||||
|
||||
对文本进行搜索，返回命中的位置
|
||||
|
||||
### MID
|
||||
|
||||
用法：`MID(text, from, len)`
|
||||
|
||||
* `text:string` 要处理的文本
|
||||
* `from:number` 起始位置
|
||||
* `len:number` 处理长度
|
||||
|
||||
返回：`number` 命中的位置
|
||||
|
||||
返回文本字符串中从指定位置开始的特定数目的字符
|
||||
|
||||
### BASENAME
|
||||
|
||||
用法：`BASENAME(text)`
|
||||
|
||||
* `text:string` 要处理的文本
|
||||
|
||||
返回：`string` 文件名
|
||||
|
||||
返回路径中的文件名
|
||||
|
||||
示例：`/home/amis/a.json`
|
||||
|
||||
返回：a.json`
|
||||
|
||||
## 日期函数
|
||||
|
||||
### DATE
|
||||
|
||||
用法：`DATE('2021-12-06 08:20:00')`
|
||||
|
||||
创建日期对象，可以通过特定格式的字符串，或者数值。
|
||||
|
||||
需要注意的是，其中月份的数值是从0开始的，也就是说，
|
||||
如果是12月份，你应该传入数值11。
|
||||
|
||||
### TIMESTAMP
|
||||
|
||||
用法：`TIMESTAMP(date, 'x')`
|
||||
|
||||
* `date:date` 日期对象
|
||||
* `format:string` 时间戳格式，带毫秒传入 'x'。默认为 'X' 不带毫秒的。
|
||||
|
||||
返回：`number` 时间戳
|
||||
|
||||
返回时间的时间戳
|
||||
|
||||
### TODAY
|
||||
|
||||
用法：`TODAY()`
|
||||
|
||||
返回今天的日期
|
||||
|
||||
### NOW
|
||||
|
||||
用法：`NOW()`
|
||||
|
||||
返回现在的日期
|
||||
|
||||
### DATETOSTR
|
||||
|
||||
用法：`DATETOSTR(date, 'YYYY-MM-DD')`
|
||||
|
||||
* `date:date` 日期对象
|
||||
* `format:string` 日期格式，默认为 "YYYY-MM-DD HH:mm:ss"
|
||||
|
||||
返回：`number` 日期字符串
|
||||
|
||||
将日期转成日期字符串
|
||||
|
||||
### STARTOF
|
||||
|
||||
用法：`STARTOF(date[unit = "day"])`
|
||||
|
||||
* `date:date` 日期对象
|
||||
* `unit:string` 比如可以传入 'day'、'month'、'year' 或者 `week` 等等
|
||||
|
||||
返回：`date` 新的日期对象
|
||||
|
||||
返回日期的指定范围的开端
|
||||
|
||||
### ENDOF
|
||||
|
||||
用法：`ENDOF(date[unit = "day"])`
|
||||
|
||||
* `date:date` 日期对象
|
||||
* `unit:string` 比如可以传入 'day'、'month'、'year' 或者 `week` 等等
|
||||
|
||||
返回：`date` 新的日期对象
|
||||
|
||||
返回日期的指定范围的末尾
|
||||
|
||||
### YEAR
|
||||
|
||||
用法：`YEAR(date)`
|
||||
|
||||
* `date:date` 日期对象
|
||||
|
||||
返回：`number` 数值
|
||||
|
||||
返回日期的年份
|
||||
|
||||
### MONTH
|
||||
|
||||
用法：`MONTH(date)`
|
||||
|
||||
* `date:date` 日期对象
|
||||
|
||||
返回：`number` 数值
|
||||
|
||||
返回日期的月份，这里就是自然月份。
|
||||
|
||||
### DAY
|
||||
|
||||
用法：`DAY(date)`
|
||||
|
||||
* `date:date` 日期对象
|
||||
|
||||
返回：`number` 数值
|
||||
|
||||
返回日期的天
|
||||
|
||||
### HOUR
|
||||
|
||||
用法：`HOUR(date)`
|
||||
|
||||
* `date:date` 日期对象
|
||||
|
||||
返回：`number` 数值
|
||||
|
||||
返回日期的小时
|
||||
|
||||
### MINUTE
|
||||
|
||||
用法：`MINUTE(date)`
|
||||
|
||||
* `date:date` 日期对象
|
||||
|
||||
返回：`number` 数值
|
||||
|
||||
返回日期的分
|
||||
|
||||
### SECOND
|
||||
|
||||
用法：`SECOND(date)`
|
||||
|
||||
* `date:date` 日期对象
|
||||
|
||||
返回：`number` 数值
|
||||
|
||||
返回日期的秒
|
||||
|
||||
### YEARS
|
||||
|
||||
用法：`YEARS(endDate, startDate)`
|
||||
|
||||
* `endDate:date` 日期对象
|
||||
* `startDate:date` 日期对象
|
||||
|
||||
返回：`number` 数值
|
||||
|
||||
返回两个日期相差多少年
|
||||
|
||||
### MINUTES
|
||||
|
||||
用法：`MINUTES(endDate, startDate)`
|
||||
|
||||
* `endDate:date` 日期对象
|
||||
* `startDate:date` 日期对象
|
||||
|
||||
返回：`number` 数值
|
||||
|
||||
返回两个日期相差多少分钟
|
||||
|
||||
### DAYS
|
||||
|
||||
用法：`DAYS(endDate, startDate)`
|
||||
|
||||
* `endDate:date` 日期对象
|
||||
* `startDate:date` 日期对象
|
||||
|
||||
返回：`number` 数值
|
||||
|
||||
返回两个日期相差多少天
|
||||
|
||||
### HOURS
|
||||
|
||||
用法：`HOURS(endDate, startDate)`
|
||||
|
||||
* `endDate:date` 日期对象
|
||||
* `startDate:date` 日期对象
|
||||
|
||||
返回：`number` 数值
|
||||
|
||||
返回两个日期相差多少小时
|
||||
|
||||
### DATEMODIFY
|
||||
|
||||
用法：`DATEMODIFY(date, 2, 'days')`
|
||||
|
||||
* `date:date` 日期对象
|
||||
* `num:number` 数值
|
||||
* `unit:string` 单位：支持年、月、天等等
|
||||
|
||||
返回：`date` 日期对象
|
||||
|
||||
修改日期，对日期进行加减天、月份、年等操作
|
||||
|
||||
示例：
|
||||
|
||||
DATEMODIFY(A, -2, 'month')
|
||||
|
||||
对日期 A 进行往前减2月的操作。
|
||||
|
||||
### STRTODATE
|
||||
|
||||
用法：`STRTODATE(value[, format=""])`
|
||||
|
||||
* `value:string` 日期字符
|
||||
* `format:string` 日期格式
|
||||
|
||||
返回：`date` 日期对象
|
||||
|
||||
将字符日期转成日期对象，可以指定日期格式。
|
||||
|
||||
示例：STRTODATE('2021/12/6', 'YYYY/MM/DD')
|
||||
|
||||
### ISBEFORE
|
||||
|
||||
用法：`ISBEFORE(a, b)`
|
||||
|
||||
* `a:date` 第一个日期
|
||||
* `b:date` 第二个日期
|
||||
* `unit:string` 单位，默认是 'day'， 即之比较到天
|
||||
|
||||
返回：`boolean` 判断结果
|
||||
|
||||
判断两个日期，是否第一个日期在第二个日期的前面
|
||||
|
||||
### ISAFTER
|
||||
|
||||
用法：`ISAFTER(a, b)`
|
||||
|
||||
* `a:date` 第一个日期
|
||||
* `b:date` 第二个日期
|
||||
* `unit:string` 单位，默认是 'day'， 即之比较到天
|
||||
|
||||
返回：`boolean` 判断结果
|
||||
|
||||
判断两个日期，是否第一个日期在第二个日期的后面
|
||||
|
||||
### ISSAMEORBEFORE
|
||||
|
||||
用法：`ISSAMEORBEFORE(a, b)`
|
||||
|
||||
* `a:date` 第一个日期
|
||||
* `b:date` 第二个日期
|
||||
* `unit:string` 单位，默认是 'day'， 即之比较到天
|
||||
|
||||
返回：`boolean` 判断结果
|
||||
|
||||
判断两个日期，是否第一个日期在第二个日期的前面或者相等
|
||||
|
||||
### ISSAMEORAFTER
|
||||
|
||||
用法：`ISSAMEORAFTER(a, b)`
|
||||
|
||||
* `a:date` 第一个日期
|
||||
* `b:date` 第二个日期
|
||||
* `unit:string` 单位，默认是 'day'， 即之比较到天
|
||||
|
||||
返回：`boolean` 判断结果
|
||||
|
||||
判断两个日期，是否第一个日期在第二个日期的后面或者相等
|
||||
|
||||
## 数组
|
||||
|
||||
### COUNT
|
||||
|
||||
用法：`COUNT(arr)`
|
||||
|
||||
* `arr:Array<any>` 数组
|
||||
|
||||
返回：`boolean` 结果
|
||||
|
||||
返回数组的长度
|
||||
|
||||
### ARRAYMAP
|
||||
|
||||
用法：`ARRAYMAP(arr, item => item)`
|
||||
|
||||
* `arr:Array<any>` 数组
|
||||
* `iterator:Array<any>` 箭头函数
|
||||
|
||||
返回：`boolean` 结果
|
||||
|
||||
数组做数据转换，需要搭配箭头函数一起使用，注意箭头函数只支持单表达式用法。
|
||||
|
||||
### ARRAYFILTER
|
||||
|
||||
用法：`ARRAYFILTER(arr, item => item)`
|
||||
|
||||
* `arr:Array<any>` 数组
|
||||
* `iterator:Array<any>` 箭头函数
|
||||
|
||||
返回：`boolean` 结果
|
||||
|
||||
数据做数据过滤，需要搭配箭头函数一起使用，注意箭头函数只支持单表达式用法。
|
||||
将第二个箭头函数返回为 false 的成员过滤掉。
|
||||
|
||||
### COMPACT
|
||||
|
||||
用法：`COMPACT(arr)`
|
||||
|
||||
* `arr:Array<any>` 数组
|
||||
|
||||
返回：`Array<any>` 结果
|
||||
|
||||
数组过滤掉 false、null、0 和 ""
|
||||
|
||||
示例：
|
||||
|
||||
COMPACT([0, 1, false, 2, '', 3]) 得到 [1, 2, 3]
|
||||
|
||||
### JOIN
|
||||
|
||||
用法：`JOIN(arr, string)`
|
||||
|
||||
* `arr:Array<any>` 数组
|
||||
* `separator:String` 分隔符
|
||||
|
||||
返回：`String` 结果
|
||||
|
||||
数组转成字符串
|
||||
|
||||
示例：
|
||||
|
||||
JOIN(['a', 'b', 'c'], '=') 得到 'a=b=c'
|
||||
|
||||
### CONCAT
|
||||
|
||||
用法：`CONCAT(['a', 'b', 'c'], ['1'], ['3'])`
|
||||
|
||||
* `arr:Array<any>` 数组
|
||||
|
||||
返回：`Array<any>` 结果
|
||||
|
||||
数组合并
|
||||
|
||||
示例：
|
||||
|
||||
CONCAT(['a', 'b', 'c'], ['1'], ['3']) 得到 ['a', 'b', 'c', '1', '3']
|
||||
|
||||
### UNIQ
|
||||
|
||||
用法：`UNIQ([{a: '1'}, {b: '2'}, {a: '1'}], 'x')`
|
||||
|
||||
* `arr:Array<any>` 数组
|
||||
* `field:string` 字段
|
||||
|
||||
返回：`Array<any>` 结果
|
||||
|
||||
数组去重，第二个参数「field」，可指定根据该字段去重
|
||||
|
||||
示例：
|
||||
|
||||
UNIQ([{a: '1'}, {b: '2'}, {a: '1'}]， 'id')
|
||||
|
||||
## 其他
|
||||
|
||||
### ISTYPE
|
||||
|
||||
用法：`ISTYPE([{a: '1'}, {b: '2'}, {a: '1'}], 'array')`
|
||||
|
||||
* `判断对象:string` null
|
||||
|
||||
返回：`boolean` 结果结果
|
||||
|
||||
判断是否为类型支持：string, number, array, date, plain-object。
|
||||
|
||||
1601
packages/amis-formula/src/doc.ts
Normal file
1601
packages/amis-formula/src/doc.ts
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,9 +1,7 @@
|
||||
import {Evaluator} from './evalutor';
|
||||
import {FilterMap} from './types';
|
||||
|
||||
const entityMap: {
|
||||
[propName: string]: string;
|
||||
} = {
|
||||
const entityMap: any = {
|
||||
'&': '&',
|
||||
'<': '<',
|
||||
'>': '>',
|
||||
|
||||
@ -3,12 +3,14 @@
|
||||
"compilerOptions": {
|
||||
"rootDir": "./",
|
||||
"outDir": "./dist",
|
||||
"baseUrl": "./",
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"typeRoots": [
|
||||
"../../types",
|
||||
"./node_modules/@types",
|
||||
"../../node_modules/@types"
|
||||
]
|
||||
],
|
||||
"paths": {}
|
||||
},
|
||||
"include": ["src/**/*", "scripts/**/*"],
|
||||
"references": []
|
||||
|
||||
@ -3,15 +3,16 @@
|
||||
"main": "lib/index.js",
|
||||
"module": "esm/index.js",
|
||||
"types": "lib/index.d.ts",
|
||||
"version": "2.3.2-beta.1",
|
||||
"version": "2.4.0",
|
||||
"description": "",
|
||||
"scripts": {
|
||||
"build": "npm run clean-dist && NODE_ENV=production rollup -c ",
|
||||
"dev": "rollup -c -w",
|
||||
"test": "jest",
|
||||
"gen-doc": "ts-node ./scripts/genDoc.ts",
|
||||
"update-snapshot": "jest --updateSnapshot",
|
||||
"coverage": "jest --coverage",
|
||||
"clean-dist": "rimraf lib/* esm/*"
|
||||
"clean-dist": "rimraf lib/** esm/**"
|
||||
},
|
||||
"author": "fex",
|
||||
"license": "Apache-2.0",
|
||||
@ -33,8 +34,8 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"amis-core": "^2.3.2-beta.1",
|
||||
"amis-formula": "^2.3.2-beta.1",
|
||||
"amis-core": "^2.4.0",
|
||||
"amis-formula": "^2.4.0",
|
||||
"classnames": "2.3.1",
|
||||
"codemirror": "^5.63.0",
|
||||
"downshift": "6.1.12",
|
||||
@ -93,7 +94,8 @@
|
||||
"rollup-plugin-scss": "^3.0.0",
|
||||
"sass": "^1.54.9",
|
||||
"ts-jest": "^29.0.2",
|
||||
"typescript": "^4.6.4"
|
||||
"typescript": "^4.6.4",
|
||||
"ts-node": "^10.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"amis-core": "*",
|
||||
|
||||
@ -51,6 +51,15 @@ const input = [
|
||||
'./src/components/CityDB.ts'
|
||||
];
|
||||
|
||||
/** 获取子包编译后的入口路径，需要使用相对路径 */
|
||||
const getCompiledEntryPath = (repo, format) =>
|
||||
path.join(
|
||||
'..',
|
||||
repo,
|
||||
repo === 'amis-formula' || format === 'cjs' ? 'lib' : 'esm',
|
||||
'index.js'
|
||||
);
|
||||
|
||||
export default [
|
||||
{
|
||||
input: input.concat([
|
||||
@ -137,6 +146,13 @@ function transpileDynamicImportForCJS(options) {
|
||||
}
|
||||
|
||||
function getPlugins(format = 'esm') {
|
||||
const overridePaths = ['amis-formula', 'amis-core'].reduce(
|
||||
(prev, current) => ({
|
||||
...prev,
|
||||
[current]: [getCompiledEntryPath(current, format)]
|
||||
}),
|
||||
{}
|
||||
);
|
||||
const typeScriptOptions = {
|
||||
typescript: require('typescript'),
|
||||
sourceMap: false,
|
||||
@ -145,13 +161,16 @@ function getPlugins(format = 'esm') {
|
||||
? {
|
||||
compilerOptions: {
|
||||
rootDir: './src',
|
||||
outDir: path.dirname(module)
|
||||
outDir: path.dirname(module),
|
||||
/** 覆盖继承自顶层tsconfig的paths配置，编译时应该去掉，避免报错@rollup/plugin-typescript TS6305 */
|
||||
paths: overridePaths
|
||||
}
|
||||
}
|
||||
: {
|
||||
compilerOptions: {
|
||||
rootDir: './src',
|
||||
outDir: path.dirname(main)
|
||||
outDir: path.dirname(main),
|
||||
paths: overridePaths
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
88
packages/amis-ui/scripts/GenDoc.ts
Normal file
88
packages/amis-ui/scripts/GenDoc.ts
Normal file
@ -0,0 +1,88 @@
|
||||
import path from 'path';
|
||||
import fs from 'fs';
|
||||
import {promisify} from 'util';
|
||||
|
||||
const readdir = promisify(fs.readdir);
|
||||
const statPath = promisify(fs.stat);
|
||||
|
||||
const DIR = path.join(__dirname, '../scss/helper');
|
||||
export async function main() {
|
||||
const files = await getFiles(DIR);
|
||||
|
||||
for (const relativePath of files) {
|
||||
const filepath = path.join(DIR, relativePath);
|
||||
const contents = await readFileAsync(filepath);
|
||||
const markdowns: Array<string> = [];
|
||||
|
||||
contents.replace(
|
||||
/\/\*\!markdown\n([\s\S]+?)\*\//g,
|
||||
(_: string, md: string) => {
|
||||
markdowns.push(md.trim());
|
||||
return _;
|
||||
}
|
||||
);
|
||||
|
||||
if (markdowns.length) {
|
||||
let mdFilePath = filepath.replace(/\.scss$/, '.md');
|
||||
await writeFileAsync(mdFilePath, markdowns.join('\n'));
|
||||
console.log(`write ${mdFilePath}`);
|
||||
}
|
||||
}
|
||||
|
||||
console.log('Done');
|
||||
}
|
||||
|
||||
async function getFiles(
|
||||
dir: string,
|
||||
prefix: string = '',
|
||||
ret: Array<string> = []
|
||||
) {
|
||||
const files = await readdir(dir);
|
||||
|
||||
for (let i = 0, len = files.length; i < len; i++) {
|
||||
const name = files[i];
|
||||
const filepath = path.join(dir, name);
|
||||
const stat = await statPath(filepath);
|
||||
|
||||
if (stat.isDirectory()) {
|
||||
await getFiles(filepath, prefix ? path.join(prefix, name) : name, ret);
|
||||
} else {
|
||||
ret.push(prefix ? path.join(prefix, name) : name);
|
||||
}
|
||||
}
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
function readFileAsync(filename: string): Promise<string> {
|
||||
return new Promise((resolve, reject) => {
|
||||
fs.readFile(filename, 'utf8', (err, data) => {
|
||||
if (err) {
|
||||
reject(err);
|
||||
} else {
|
||||
resolve(data);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function writeFileAsync(filename: string, content: string): Promise<void> {
|
||||
return new Promise<void>((resolve, reject) => {
|
||||
fs.writeFile(
|
||||
filename,
|
||||
content,
|
||||
{
|
||||
encoding: 'utf8'
|
||||
},
|
||||
err => {
|
||||
if (err) {
|
||||
reject(err);
|
||||
} else {
|
||||
resolve();
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
main().catch(e => console.error(e));
|
||||
@ -9,6 +9,10 @@
|
||||
white-space: nowrap;
|
||||
min-width: auto;
|
||||
|
||||
> svg.icon {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&--primary {
|
||||
@include button-variant(
|
||||
var(--button-primary-default-bg-color),
|
||||
|
||||
10
packages/amis-ui/scss/components/_code.scss
Normal file
10
packages/amis-ui/scss/components/_code.scss
Normal file
@ -0,0 +1,10 @@
|
||||
.#{$ns}Code {
|
||||
&--dark {
|
||||
background-color: #1e1e1e;
|
||||
border-radius: var(--borderRadius);
|
||||
}
|
||||
|
||||
&-pre-wrap {
|
||||
padding: var(--sizes-size-5);
|
||||
}
|
||||
}
|
||||
@ -1042,7 +1042,7 @@
|
||||
justify-content: space-between;
|
||||
|
||||
.#{$ns}Button {
|
||||
border: none;
|
||||
border-color: transparent;
|
||||
color: var(--Button--link-color);
|
||||
}
|
||||
}
|
||||
|
||||
@ -406,9 +406,9 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.#{$ns}Form--quickEdit {
|
||||
min-width: var(--Form-control-widthSm);
|
||||
}
|
||||
// .#{$ns}Form--quickEdit {
|
||||
// min-width: var(--Form-control-widthSm);
|
||||
// }
|
||||
|
||||
.#{$ns}Form--column {
|
||||
display: flex;
|
||||
|
||||
@ -53,6 +53,10 @@
|
||||
> label {
|
||||
flex-basis: px2rem(50px);
|
||||
flex-grow: 1;
|
||||
|
||||
&.is-invalid {
|
||||
color: var(--Form-selectValue-onInvalid-color);
|
||||
}
|
||||
}
|
||||
|
||||
> .#{$ns}Selections-dragbar {
|
||||
|
||||
@ -100,6 +100,10 @@
|
||||
span {
|
||||
vertical-align: middle;
|
||||
white-space: nowrap; // 避免在条件组合中折行
|
||||
|
||||
&.is-invalid {
|
||||
color: var(--Form-selectValue-onInvalid-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -289,6 +293,10 @@
|
||||
span {
|
||||
margin-left: px2rem(10px);
|
||||
vertical-align: middle;
|
||||
|
||||
&.is-invalid {
|
||||
color: var(--Form-selectValue-onInvalid-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -182,6 +182,10 @@
|
||||
max-width: unset;
|
||||
line-height: unset;
|
||||
top: unset;
|
||||
|
||||
& > span.is-invalid {
|
||||
color: var(--Form-selectValue-onInvalid-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -353,6 +357,10 @@
|
||||
font-weight: var(--transfer-base-content-font-weight);
|
||||
font-family: var(--transfer-base-content-font-family);
|
||||
|
||||
& > span.is-invalid {
|
||||
color: var(--Form-selectValue-onInvalid-color);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: var(--transfer-table-last-paddingRight);
|
||||
}
|
||||
|
||||
131
packages/amis-ui/scss/helper/background/_background-color.md
Normal file
131
packages/amis-ui/scss/helper/background/_background-color.md
Normal file
@ -0,0 +1,131 @@
|
||||
---
|
||||
title: 背景色
|
||||
---
|
||||
|
||||
| Class | Properties | Demo |
|
||||
| ----------- | ------------------------ | -------- |
|
||||
| bg-none | background: none !important | <span style="background: none !important;" class="w-24 h-6"></div> |
|
||||
| bg-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
|
||||
| bg-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
|
||||
| bg-black | background: #000 | <div style="background: #000;" class="w-24 h-6"></div> |
|
||||
| bg-white | background: #fff | <div style="background: #fff;" class="w-24 h-6"></div> |
|
||||
| bg-primary | background: #007bff | <div style="background: #007bff;" class="w-24 h-6"></div> |
|
||||
| bg-secondary | background: #6c757d | <div style="background: #6c757d;" class="w-24 h-6"></div> |
|
||||
| bg-success | background: #28a745 | <div style="background: #28a745;" class="w-24 h-6"></div> |
|
||||
| bg-info | background: #007bff | <div style="background: #007bff" class="w-24 h-6"></div> |
|
||||
| bg-warning | background: #28a745 | <div style="background: #28a745;" class="w-24 h-6"></div> |
|
||||
| bg-danger | background: #dc3545 | <div style="background: #dc3545;" class="w-24 h-6"></div> |
|
||||
| bg-light | background: #f8f9fa | <div style="background: #f8f9fa;" class="w-24 h-6"></div> |
|
||||
| bg-dark | background: #343a40 | <div style="background: #343a40;" class="w-24 h-6"></div> |
|
||||
| bg-gray-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
|
||||
| bg-gray-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
|
||||
| bg-gray-50 | background: #f9fafb | <div style="background: #f9fafb;" class="w-24 h-6"></div> |
|
||||
| bg-gray-100 | background: #f3f4f6 | <div style="background: #f3f4f6;" class="w-24 h-6"></div> |
|
||||
| bg-gray-200 | background: #e5e7eb | <div style="background: #e5e7eb;" class="w-24 h-6"></div> |
|
||||
| bg-gray-300 | background: #d1d5db | <div style="background: #d1d5db;" class="w-24 h-6"></div> |
|
||||
| bg-gray-400 | background: #9ca3af | <div style="background: #9ca3af;" class="w-24 h-6"></div> |
|
||||
| bg-gray-500 | background: #6b7280 | <div style="background: #6b7280;" class="w-24 h-6"></div> |
|
||||
| bg-gray-600 | background: #4b5563 | <div style="background: #4b5563;" class="w-24 h-6"></div> |
|
||||
| bg-gray-700 | background: #374151 | <div style="background: #374151;" class="w-24 h-6"></div> |
|
||||
| bg-gray-800 | background: #1f2937 | <div style="background: #1f2937;" class="w-24 h-6"></div> |
|
||||
| bg-gray-900 | background: #111827 | <div style="background: #111827;" class="w-24 h-6"></div> |
|
||||
| bg-red-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
|
||||
| bg-red-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
|
||||
| bg-red-50 | background: #fef2f2 | <div style="background: #fef2f2;" class="w-24 h-6"></div> |
|
||||
| bg-red-100 | background: #fee2e2 | <div style="background: #fee2e2;" class="w-24 h-6"></div> |
|
||||
| bg-red-200 | background: #fecaca | <div style="background: #fecaca;" class="w-24 h-6"></div> |
|
||||
| bg-red-300 | background: #fca5a5 | <div style="background: #fca5a5;" class="w-24 h-6"></div> |
|
||||
| bg-red-400 | background: #f87171 | <div style="background: #f87171;" class="w-24 h-6"></div> |
|
||||
| bg-red-500 | background: #ef4444 | <div style="background: #ef4444;" class="w-24 h-6"></div> |
|
||||
| bg-red-600 | background: #dc2626 | <div style="background: #dc2626;" class="w-24 h-6"></div> |
|
||||
| bg-red-700 | background: #b91c1c | <div style="background: #b91c1c;" class="w-24 h-6"></div> |
|
||||
| bg-red-800 | background: #991b1b | <div style="background: #991b1b;" class="w-24 h-6"></div> |
|
||||
| bg-red-900 | background: #7f1d1d | <div style="background: #7f1d1d;" class="w-24 h-6"></div> |
|
||||
| bg-yellow-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
|
||||
| bg-yellow-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
|
||||
| bg-yellow-50 | background: #fffbeb | <div style="background: #fffbeb;" class="w-24 h-6"></div> |
|
||||
| bg-yellow-100 | background: #fef3c7 | <div style="background: #fef3c7;" class="w-24 h-6"></div> |
|
||||
| bg-yellow-200 | background: #fde68a | <div style="background: #fde68a;" class="w-24 h-6"></div> |
|
||||
| bg-yellow-300 | background: #fcd34d | <div style="background: #fcd34d;" class="w-24 h-6"></div> |
|
||||
| bg-yellow-400 | background: #fbbf24 | <div style="background: #fbbf24;" class="w-24 h-6"></div> |
|
||||
| bg-yellow-500 | background: #f59e0b | <div style="background: #f59e0b;" class="w-24 h-6"></div> |
|
||||
| bg-yellow-600 | background: #d97706 | <div style="background: #d97706;" class="w-24 h-6"></div> |
|
||||
| bg-yellow-700 | background: #b45309 | <div style="background: #b45309;" class="w-24 h-6"></div> |
|
||||
| bg-yellow-800 | background: #92400e | <div style="background: #92400e;" class="w-24 h-6"></div> |
|
||||
| bg-yellow-900 | background: #78350f | <div style="background: #78350f;" class="w-24 h-6"></div> |
|
||||
| bg-green-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
|
||||
| bg-green-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
|
||||
| bg-green-50 | background: #ecfdf5 | <div style="background: #ecfdf5;" class="w-24 h-6"></div> |
|
||||
| bg-green-100 | background: #d1fae5 | <div style="background: #d1fae5;" class="w-24 h-6"></div> |
|
||||
| bg-green-200 | background: #a7f3d0 | <div style="background: #a7f3d0;" class="w-24 h-6"></div> |
|
||||
| bg-green-300 | background: #6ee7b7 | <div style="background: #6ee7b7;" class="w-24 h-6"></div> |
|
||||
| bg-green-400 | background: #34d399 | <div style="background: #34d399;" class="w-24 h-6"></div> |
|
||||
| bg-green-500 | background: #10b981 | <div style="background: #10b981;" class="w-24 h-6"></div> |
|
||||
| bg-green-600 | background: #059669 | <div style="background: #059669;" class="w-24 h-6"></div> |
|
||||
| bg-green-700 | background: #047857 | <div style="background: #047857;" class="w-24 h-6"></div> |
|
||||
| bg-green-800 | background: #065f46 | <div style="background: #065f46;" class="w-24 h-6"></div> |
|
||||
| bg-green-900 | background: #064e3b | <div style="background: #064e3b;" class="w-24 h-6"></div> |
|
||||
| bg-blue-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
|
||||
| bg-blue-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
|
||||
| bg-blue-50 | background: #eff6ff | <div style="background: #eff6ff;" class="w-24 h-6"></div> |
|
||||
| bg-blue-100 | background: #dbeafe | <div style="background: #dbeafe;" class="w-24 h-6"></div> |
|
||||
| bg-blue-200 | background: #bfdbfe | <div style="background: #bfdbfe;" class="w-24 h-6"></div> |
|
||||
| bg-blue-300 | background: #93c5fd | <div style="background: #93c5fd;" class="w-24 h-6"></div> |
|
||||
| bg-blue-400 | background: #60a5fa | <div style="background: #60a5fa;" class="w-24 h-6"></div> |
|
||||
| bg-blue-500 | background: #3b82f6 | <div style="background: #3b82f6;" class="w-24 h-6"></div> |
|
||||
| bg-blue-600 | background: #2563eb | <div style="background: #2563eb;" class="w-24 h-6"></div> |
|
||||
| bg-blue-700 | background: #1d4ed8 | <div style="background: #1d4ed8;" class="w-24 h-6"></div> |
|
||||
| bg-blue-800 | background: #1e40af | <div style="background: #1e40af;" class="w-24 h-6"></div> |
|
||||
| bg-blue-900 | background: #1e3a8a | <div style="background: #1e3a8a;" class="w-24 h-6"></div> |
|
||||
| bg-cyan-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
|
||||
| bg-cyan-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
|
||||
| bg-cyan-50 | background: #ecfeff | <div style="background: #ecfeff;" class="w-24 h-6"></div> |
|
||||
| bg-cyan-100 | background: #cffafe | <div style="background: #cffafe;" class="w-24 h-6"></div> |
|
||||
| bg-cyan-200 | background: #a5f3fc | <div style="background: #a5f3fc;" class="w-24 h-6"></div> |
|
||||
| bg-cyan-300 | background: #67e8f9 | <div style="background: #67e8f9;" class="w-24 h-6"></div> |
|
||||
| bg-cyan-400 | background: #22d3ee | <div style="background: #22d3ee;" class="w-24 h-6"></div> |
|
||||
| bg-cyan-500 | background: #06b6d4 | <div style="background: #06b6d4;" class="w-24 h-6"></div> |
|
||||
| bg-cyan-600 | background: #0891b2 | <div style="background: #0891b2;" class="w-24 h-6"></div> |
|
||||
| bg-cyan-700 | background: #0e7490 | <div style="background: #0e7490;" class="w-24 h-6"></div> |
|
||||
| bg-cyan-800 | background: #155e75 | <div style="background: #155e75;" class="w-24 h-6"></div> |
|
||||
| bg-cyan-900 | background: #164e63 | <div style="background: #164e63;" class="w-24 h-6"></div> |
|
||||
| bg-indigo-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
|
||||
| bg-indigo-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
|
||||
| bg-indigo-50 | background: #eef2ff | <div style="background: #eef2ff;" class="w-24 h-6"></div> |
|
||||
| bg-indigo-100 | background: #e0e7ff | <div style="background: #e0e7ff;" class="w-24 h-6"></div> |
|
||||
| bg-indigo-200 | background: #c7d2fe | <div style="background: #c7d2fe;" class="w-24 h-6"></div> |
|
||||
| bg-indigo-300 | background: #a5b4fc | <div style="background: #a5b4fc;" class="w-24 h-6"></div> |
|
||||
| bg-indigo-400 | background: #818cf8 | <div style="background: #818cf8;" class="w-24 h-6"></div> |
|
||||
| bg-indigo-500 | background: #6366f1 | <div style="background: #6366f1;" class="w-24 h-6"></div> |
|
||||
| bg-indigo-600 | background: #4f46e5 | <div style="background: #4f46e5;" class="w-24 h-6"></div> |
|
||||
| bg-indigo-700 | background: #4338ca | <div style="background: #4338ca;" class="w-24 h-6"></div> |
|
||||
| bg-indigo-800 | background: #3730a3 | <div style="background: #3730a3;" class="w-24 h-6"></div> |
|
||||
| bg-indigo-900 | background: #312e81 | <div style="background: #312e81;" class="w-24 h-6"></div> |
|
||||
| bg-purple-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
|
||||
| bg-purple-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
|
||||
| bg-purple-50 | background: #f5f3ff | <div style="background: #f5f3ff;" class="w-24 h-6"></div> |
|
||||
| bg-purple-100 | background: #ede9fe | <div style="background: #ede9fe;" class="w-24 h-6"></div> |
|
||||
| bg-purple-200 | background: #ddd6fe | <div style="background: #ddd6fe;" class="w-24 h-6"></div> |
|
||||
| bg-purple-300 | background: #c4b5fd | <div style="background: #c4b5fd;" class="w-24 h-6"></div> |
|
||||
| bg-purple-400 | background: #a78bfa | <div style="background: #a78bfa;" class="w-24 h-6"></div> |
|
||||
| bg-purple-500 | background: #8b5cf6 | <div style="background: #8b5cf6;" class="w-24 h-6"></div> |
|
||||
| bg-purple-600 | background: #7c3aed | <div style="background: #7c3aed;" class="w-24 h-6"></div> |
|
||||
| bg-purple-700 | background: #6d28d9 | <div style="background: #6d28d9;" class="w-24 h-6"></div> |
|
||||
| bg-purple-800 | background: #5b21b6 | <div style="background: #5b21b6;" class="w-24 h-6"></div> |
|
||||
| bg-purple-900 | background: #4c1d95 | <div style="background: #4c1d95;" class="w-24 h-6"></div> |
|
||||
| bg-pink-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
|
||||
| bg-pink-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
|
||||
| bg-pink-50 | background: #fdf2f8 | <div style="background: #fdf2f8;" class="w-24 h-6"></div> |
|
||||
| bg-pink-100 | background: #fce7f3 | <div style="background: #fce7f3;" class="w-24 h-6"></div> |
|
||||
| bg-pink-200 | background: #fbcfe8 | <div style="background: #fbcfe8;" class="w-24 h-6"></div> |
|
||||
| bg-pink-300 | background: #f9a8d4 | <div style="background: #f9a8d4;" class="w-24 h-6"></div> |
|
||||
| bg-pink-400 | background: #f472b6 | <div style="background: #f472b6;" class="w-24 h-6"></div> |
|
||||
| bg-pink-500 | background: #ec4899 | <div style="background: #ec4899;" class="w-24 h-6"></div> |
|
||||
| bg-pink-600 | background: #db2777 | <div style="background: #db2777;" class="w-24 h-6"></div> |
|
||||
| bg-pink-700 | background: #be185d | <div style="background: #be185d;" class="w-24 h-6"></div> |
|
||||
| bg-pink-800 | background: #9d174d | <div style="background: #9d174d;" class="w-24 h-6"></div> |
|
||||
| bg-pink-900 | background: #831843 | <div style="background: #831843;" class="w-24 h-6"></div> |
|
||||
|
||||
还有 hover、active、focus、disabled 扩展，比如 `hover:bg-black`
|
||||
|
||||
参考: [tailwindcss](https://tailwindcss.com/docs/background-color)
|
||||
109
packages/amis-ui/scss/helper/border/_border-color.md
Normal file
109
packages/amis-ui/scss/helper/border/_border-color.md
Normal file
@ -0,0 +1,109 @@
|
||||
---
|
||||
title: 边框颜色
|
||||
---
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| border-black | border-color: #000 |
|
||||
| border-white | border-color: #fff |
|
||||
| border-primary | border-color: #007bff |
|
||||
| border-secondary | border-color: #6c757d |
|
||||
| border-success | border-color: #28a745 |
|
||||
| border-info | border-color: #007bff |
|
||||
| border-warning | border-color: #28a745 |
|
||||
| border-danger | border-color: #dc3545 |
|
||||
| border-light | border-color: #f8f9fa |
|
||||
| border-dark | border-color: #343a40 |
|
||||
| border-gray-50 | border-color: #f9fafb |
|
||||
| border-gray-100 | border-color: #f3f4f6 |
|
||||
| border-gray-200 | border-color: #e5e7eb |
|
||||
| border-gray-300 | border-color: #d1d5db |
|
||||
| border-gray-400 | border-color: #9ca3af |
|
||||
| border-gray-500 | border-color: #6b7280 |
|
||||
| border-gray-600 | border-color: #4b5563 |
|
||||
| border-gray-700 | border-color: #374151 |
|
||||
| border-gray-800 | border-color: #1f2937 |
|
||||
| border-gray-900 | border-color: #111827 |
|
||||
| border-red-50 | border-color: #fef2f2 |
|
||||
| border-red-100 | border-color: #fee2e2 |
|
||||
| border-red-200 | border-color: #fecaca |
|
||||
| border-red-300 | border-color: #fca5a5 |
|
||||
| border-red-400 | border-color: #f87171 |
|
||||
| border-red-500 | border-color: #ef4444 |
|
||||
| border-red-600 | border-color: #dc2626 |
|
||||
| border-red-700 | border-color: #b91c1c |
|
||||
| border-red-800 | border-color: #991b1b |
|
||||
| border-red-900 | border-color: #7f1d1d |
|
||||
| border-yellow-50 | border-color: #fffbeb |
|
||||
| border-yellow-100 | border-color: #fef3c7 |
|
||||
| border-yellow-200 | border-color: #fde68a |
|
||||
| border-yellow-300 | border-color: #fcd34d |
|
||||
| border-yellow-400 | border-color: #fbbf24 |
|
||||
| border-yellow-500 | border-color: #f59e0b |
|
||||
| border-yellow-600 | border-color: #d97706 |
|
||||
| border-yellow-700 | border-color: #b45309 |
|
||||
| border-yellow-800 | border-color: #92400e |
|
||||
| border-yellow-900 | border-color: #78350f |
|
||||
| border-green-50 | border-color: #ecfdf5 |
|
||||
| border-green-100 | border-color: #d1fae5 |
|
||||
| border-green-200 | border-color: #a7f3d0 |
|
||||
| border-green-300 | border-color: #6ee7b7 |
|
||||
| border-green-400 | border-color: #34d399 |
|
||||
| border-green-500 | border-color: #10b981 |
|
||||
| border-green-600 | border-color: #059669 |
|
||||
| border-green-700 | border-color: #047857 |
|
||||
| border-green-800 | border-color: #065f46 |
|
||||
| border-green-900 | border-color: #064e3b |
|
||||
| border-blue-50 | border-color: #eff6ff |
|
||||
| border-blue-100 | border-color: #dbeafe |
|
||||
| border-blue-200 | border-color: #bfdbfe |
|
||||
| border-blue-300 | border-color: #93c5fd |
|
||||
| border-blue-400 | border-color: #60a5fa |
|
||||
| border-blue-500 | border-color: #3b82f6 |
|
||||
| border-blue-600 | border-color: #2563eb |
|
||||
| border-blue-700 | border-color: #1d4ed8 |
|
||||
| border-blue-800 | border-color: #1e40af |
|
||||
| border-blue-900 | border-color: #1e3a8a |
|
||||
| border-cyan-50 | border-color: #ecfeff |
|
||||
| border-cyan-100 | border-color: #cffafe |
|
||||
| border-cyan-200 | border-color: #a5f3fc |
|
||||
| border-cyan-300 | border-color: #67e8f9 |
|
||||
| border-cyan-400 | border-color: #22d3ee |
|
||||
| border-cyan-500 | border-color: #06b6d4 |
|
||||
| border-cyan-600 | border-color: #0891b2 |
|
||||
| border-cyan-700 | border-color: #0e7490 |
|
||||
| border-cyan-800 | border-color: #155e75 |
|
||||
| border-cyan-900 | border-color: #164e63 |
|
||||
| border-indigo-50 | border-color: #eef2ff |
|
||||
| border-indigo-100 | border-color: #e0e7ff |
|
||||
| border-indigo-200 | border-color: #c7d2fe |
|
||||
| border-indigo-300 | border-color: #a5b4fc |
|
||||
| border-indigo-400 | border-color: #818cf8 |
|
||||
| border-indigo-500 | border-color: #6366f1 |
|
||||
| border-indigo-600 | border-color: #4f46e5 |
|
||||
| border-indigo-700 | border-color: #4338ca |
|
||||
| border-indigo-800 | border-color: #3730a3 |
|
||||
| border-indigo-900 | border-color: #312e81 |
|
||||
| border-purple-50 | border-color: #f5f3ff |
|
||||
| border-purple-100 | border-color: #ede9fe |
|
||||
| border-purple-200 | border-color: #ddd6fe |
|
||||
| border-purple-300 | border-color: #c4b5fd |
|
||||
| border-purple-400 | border-color: #a78bfa |
|
||||
| border-purple-500 | border-color: #8b5cf6 |
|
||||
| border-purple-600 | border-color: #7c3aed |
|
||||
| border-purple-700 | border-color: #6d28d9 |
|
||||
| border-purple-800 | border-color: #5b21b6 |
|
||||
| border-purple-900 | border-color: #4c1d95 |
|
||||
| border-pink-50 | border-color: #fdf2f8 |
|
||||
| border-pink-100 | border-color: #fce7f3 |
|
||||
| border-pink-200 | border-color: #fbcfe8 |
|
||||
| border-pink-300 | border-color: #f9a8d4 |
|
||||
| border-pink-400 | border-color: #f472b6 |
|
||||
| border-pink-500 | border-color: #ec4899 |
|
||||
| border-pink-600 | border-color: #db2777 |
|
||||
| border-pink-700 | border-color: #be185d |
|
||||
| border-pink-800 | border-color: #9d174d |
|
||||
| border-pink-900 | border-color: #831843 |
|
||||
|
||||
|
||||
还有 hover、active、focus、disabled 扩展，比如 `hover:border-black`
|
||||
86
packages/amis-ui/scss/helper/border/_border-radius.md
Normal file
86
packages/amis-ui/scss/helper/border/_border-radius.md
Normal file
@ -0,0 +1,86 @@
|
||||
---
|
||||
title: 边框圆角
|
||||
---
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| rounded-none | border-radius: 0px |
|
||||
| rounded-sm | border-radius: 0.125rem |
|
||||
| rounded | border-radius: 0.25rem |
|
||||
| rounded-md | border-radius: 0.375rem |
|
||||
| rounded-lg | border-radius: 0.5rem |
|
||||
| rounded-xl | border-radius: 0.75rem |
|
||||
| rounded-2xl | border-radius: 1rem |
|
||||
| rounded-3xl | border-radius: 1.5rem |
|
||||
| rounded-full | border-radius: 9999px |
|
||||
| rounded-t-none | border-top-left-radius: 0px; border-top-right-radius: 0px |
|
||||
| rounded-t-sm | border-top-left-radius: 0.125rem; border-top-right-radius: 0.125rem |
|
||||
| rounded-t | border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem |
|
||||
| rounded-t-md | border-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem |
|
||||
| rounded-t-lg | border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem |
|
||||
| rounded-t-xl | border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem |
|
||||
| rounded-t-2xl | border-top-left-radius: 1rem; border-top-right-radius: 1rem |
|
||||
| rounded-t-3xl | border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem |
|
||||
| rounded-t-full | border-top-left-radius: 9999px; border-top-right-radius: 9999px |
|
||||
| rounded-r-none | border-top-right-radius: 0px; border-bottom-right-radius: 0px |
|
||||
| rounded-r-sm | border-top-right-radius: 0.125rem; border-bottom-right-radius: 0.125rem |
|
||||
| rounded-r | border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem |
|
||||
| rounded-r-md | border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem |
|
||||
| rounded-r-lg | border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem |
|
||||
| rounded-r-xl | border-top-right-radius: 0.75rem; border-bottom-right-radius: 0.75rem |
|
||||
| rounded-r-2xl | border-top-right-radius: 1rem; border-bottom-right-radius: 1rem |
|
||||
| rounded-r-3xl | border-top-right-radius: 1.5rem; border-bottom-right-radius: 1.5rem |
|
||||
| rounded-r-full | border-top-right-radius: 9999px; border-bottom-right-radius: 9999px |
|
||||
| rounded-b-none | border-bottom-right-radius: 0px; border-bottom-left-radius: 0px |
|
||||
| rounded-b-sm | border-bottom-right-radius: 0.125rem; border-bottom-left-radius: 0.125rem |
|
||||
| rounded-b | border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem |
|
||||
| rounded-b-md | border-bottom-right-radius: 0.375rem; border-bottom-left-radius: 0.375rem |
|
||||
| rounded-b-lg | border-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem |
|
||||
| rounded-b-xl | border-bottom-right-radius: 0.75rem; border-bottom-left-radius: 0.75rem |
|
||||
| rounded-b-2xl | border-bottom-right-radius: 1rem; border-bottom-left-radius: 1rem |
|
||||
| rounded-b-3xl | border-bottom-right-radius: 1.5rem; border-bottom-left-radius: 1.5rem |
|
||||
| rounded-b-full | border-bottom-right-radius: 9999px; border-bottom-left-radius: 9999px |
|
||||
| rounded-l-none | border-top-left-radius: 0px; border-bottom-left-radius: 0px |
|
||||
| rounded-l-sm | border-top-left-radius: 0.125rem; border-bottom-left-radius: 0.125rem |
|
||||
| rounded-l | border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem |
|
||||
| rounded-l-md | border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem |
|
||||
| rounded-l-lg | border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem |
|
||||
| rounded-l-xl | border-top-left-radius: 0.75rem; border-bottom-left-radius: 0.75rem |
|
||||
| rounded-l-2xl | border-top-left-radius: 1rem; border-bottom-left-radius: 1rem |
|
||||
| rounded-l-3xl | border-top-left-radius: 1.5rem; border-bottom-left-radius: 1.5rem |
|
||||
| rounded-l-full | border-top-left-radius: 9999px; border-bottom-left-radius: 9999px |
|
||||
| rounded-tl-none | border-top-left-radius: 0px |
|
||||
| rounded-tr-none | border-top-right-radius: 0px |
|
||||
| rounded-br-none | border-bottom-right-radius: 0px |
|
||||
| rounded-bl-none | border-bottom-left-radius: 0px |
|
||||
| rounded-tl-sm | border-top-left-radius: 0.125rem |
|
||||
| rounded-tr-sm | border-top-right-radius: 0.125rem |
|
||||
| rounded-br-sm | border-bottom-right-radius: 0.125rem |
|
||||
| rounded-bl-sm | border-bottom-left-radius: 0.125rem |
|
||||
| rounded-tl | border-top-left-radius: 0.25rem |
|
||||
| rounded-tr | border-top-right-radius: 0.25rem |
|
||||
| rounded-br | border-bottom-right-radius: 0.25rem |
|
||||
| rounded-bl | border-bottom-left-radius: 0.25rem |
|
||||
| rounded-tl-md | border-top-left-radius: 0.375rem |
|
||||
| rounded-tr-md | border-top-right-radius: 0.375rem |
|
||||
| rounded-br-md | border-bottom-right-radius: 0.375rem |
|
||||
| rounded-bl-md | border-bottom-left-radius: 0.375rem |
|
||||
| rounded-tl-lg | border-top-left-radius: 0.5rem |
|
||||
| rounded-tr-lg | border-top-right-radius: 0.5rem |
|
||||
| rounded-br-lg | border-bottom-right-radius: 0.5rem |
|
||||
| rounded-bl-lg | border-bottom-left-radius: 0.5rem |
|
||||
| rounded-tl-xl | border-top-left-radius: 0.75rem |
|
||||
| rounded-tr-xl | border-top-right-radius: 0.75rem |
|
||||
| rounded-br-xl | border-bottom-right-radius: 0.75rem |
|
||||
| rounded-bl-xl | border-bottom-left-radius: 0.75rem |
|
||||
| rounded-tl-2xl | border-top-left-radius: 1rem |
|
||||
| rounded-tr-2xl | border-top-right-radius: 1rem |
|
||||
| rounded-br-2xl | border-bottom-right-radius: 1rem |
|
||||
| rounded-bl-2xl | border-bottom-left-radius: 1rem |
|
||||
| rounded-tl-3xl | border-top-left-radius: 1.5rem |
|
||||
| rounded-tr-3xl | border-top-right-radius: 1.5rem |
|
||||
| rounded-br-3xl | border-bottom-right-radius: 1.5rem |
|
||||
| rounded-bl-3xl | border-bottom-left-radius: 1.5rem |
|
||||
| rounded-tl-full | border-top-left-radius: 9999px |
|
||||
| rounded-tr-full | border-top-right-radius: 9999px |
|
||||
| rounded-br-full | border-bottom-right-radius: 9999px |
|
||||
| rounded-bl-full | border-bottom-left-radius: 9999px |
|
||||
11
packages/amis-ui/scss/helper/border/_border-style.md
Normal file
11
packages/amis-ui/scss/helper/border/_border-style.md
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
title: 边框样式
|
||||
---
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| border-solid | border-style: solid |
|
||||
| border-dashed | border-style: dashed |
|
||||
| border-dotted | border-style: dotted |
|
||||
| border-double | border-style: double |
|
||||
| border-none | border-style: none |
|
||||
31
packages/amis-ui/scss/helper/border/_border-width.md
Normal file
31
packages/amis-ui/scss/helper/border/_border-width.md
Normal file
@ -0,0 +1,31 @@
|
||||
---
|
||||
title: 边框宽度
|
||||
---
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| border | border-width: 1px |
|
||||
| border-0 | border-width: 0px |
|
||||
| border-2 | border-width: 2px |
|
||||
| border-4 | border-width: 4px |
|
||||
| border-8 | border-width: 8px |
|
||||
| border-t | border-top-width: 1px |
|
||||
| border-r | border-right-width: 1px |
|
||||
| border-b | border-bottom-width: 1px |
|
||||
| border-l | border-left-width: 1px |
|
||||
| border-t-0 | border-top-width: 0px |
|
||||
| border-r-0 | border-right-width: 0px |
|
||||
| border-b-0 | border-bottom-width: 0px |
|
||||
| border-l-0 | border-left-width: 0px |
|
||||
| border-t-2 | border-top-width: 2px |
|
||||
| border-r-2 | border-right-width: 2px |
|
||||
| border-b-2 | border-bottom-width: 2px |
|
||||
| border-l-2 | border-left-width: 2px |
|
||||
| border-t-4 | border-top-width: 4px |
|
||||
| border-r-4 | border-right-width: 4px |
|
||||
| border-b-4 | border-bottom-width: 4px |
|
||||
| border-l-4 | border-left-width: 4px |
|
||||
| border-t-8 | border-top-width: 8px |
|
||||
| border-r-8 | border-right-width: 8px |
|
||||
| border-b-8 | border-bottom-width: 8px |
|
||||
| border-l-8 | border-left-width: 8px |
|
||||
12
packages/amis-ui/scss/helper/box-alignment/_align-content.md
Normal file
12
packages/amis-ui/scss/helper/box-alignment/_align-content.md
Normal file
@ -0,0 +1,12 @@
|
||||
---
|
||||
title: Align Content
|
||||
---
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| content-center | align-content: center |
|
||||
| content-start | align-content: flex-start |
|
||||
| content-end | align-content: flex-end |
|
||||
| content-between | align-content: space-between |
|
||||
| content-around | align-content: space-around |
|
||||
| content-evenly | align-content: space-evenly |
|
||||
11
packages/amis-ui/scss/helper/box-alignment/_align-items.md
Normal file
11
packages/amis-ui/scss/helper/box-alignment/_align-items.md
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
title: Align Items
|
||||
---
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| items-start | align-items: flex-start |
|
||||
| items-end | align-items: flex-end |
|
||||
| items-center | align-items: center |
|
||||
| items-baseline | align-items: baseline |
|
||||
| items-stretch | align-items: stretch |
|
||||
11
packages/amis-ui/scss/helper/box-alignment/_align-self.md
Normal file
11
packages/amis-ui/scss/helper/box-alignment/_align-self.md
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
title: Align Self
|
||||
---
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| self-auto | align-self: auto |
|
||||
| self-start | align-self: flex-start |
|
||||
| self-end | align-self: flex-end |
|
||||
| self-center | align-self: center |
|
||||
| self-stretch | align-self: stretch |
|
||||
@ -0,0 +1,12 @@
|
||||
---
|
||||
title: Jsutify Content
|
||||
---
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| justify-start | justify-content: flex-start |
|
||||
| justify-end | justify-content: flex-end |
|
||||
| justify-center | justify-content: center |
|
||||
| justify-between | justify-content: space-between |
|
||||
| justify-around | justify-content: space-around |
|
||||
| justify-evenly | justify-content: space-evenly |
|
||||
11
packages/amis-ui/scss/helper/box-alignment/_justify-items.md
Normal file
11
packages/amis-ui/scss/helper/box-alignment/_justify-items.md
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
title: Justify Items
|
||||
---
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| justify-items-auto | justify-items: auto |
|
||||
| justify-items-start | justify-items: start |
|
||||
| justify-items-end | justify-items: end |
|
||||
| justify-items-center | justify-items: center |
|
||||
| justify-items-stretch | justify-items: stretch |
|
||||
11
packages/amis-ui/scss/helper/box-alignment/_justify-self.md
Normal file
11
packages/amis-ui/scss/helper/box-alignment/_justify-self.md
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
title: Jsutify Self
|
||||
---
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| justify-self-auto | justify-self: auto |
|
||||
| justify-self-start | justify-self: start |
|
||||
| justify-self-end | justify-self: end |
|
||||
| justify-self-center | justify-self: center |
|
||||
| justify-self-stretch | justify-self: stretch |
|
||||
13
packages/amis-ui/scss/helper/box-alignment/_place-content.md
Normal file
13
packages/amis-ui/scss/helper/box-alignment/_place-content.md
Normal file
@ -0,0 +1,13 @@
|
||||
---
|
||||
title: Place Content
|
||||
---
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| place-content-center | place-content: center |
|
||||
| place-content-start | place-content: start |
|
||||
| place-content-end | place-content: end |
|
||||
| place-content-between | place-content: space-between |
|
||||
| place-content-around | place-content: space-around |
|
||||
| place-content-evenly | place-content: space-evenly |
|
||||
| place-content-stretch | place-content: stretch |
|
||||
11
packages/amis-ui/scss/helper/box-alignment/_place-items.md
Normal file
11
packages/amis-ui/scss/helper/box-alignment/_place-items.md
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
title: Place Items
|
||||
---
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| place-items-auto | place-items: auto |
|
||||
| place-items-start | place-items: start |
|
||||
| place-items-end | place-items: end |
|
||||
| place-items-center | place-items: center |
|
||||
| place-items-stretch | place-items: stretch |
|
||||
11
packages/amis-ui/scss/helper/box-alignment/_place-self.md
Normal file
11
packages/amis-ui/scss/helper/box-alignment/_place-self.md
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
title: Place Self
|
||||
---
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| place-self-auto | place-self: auto |
|
||||
| place-self-start | place-self: start |
|
||||
| place-self-end | place-self: end |
|
||||
| place-self-center | place-self: center |
|
||||
| place-self-stretch | place-self: stretch |
|
||||
16
packages/amis-ui/scss/helper/effect/_box-shadow.md
Normal file
16
packages/amis-ui/scss/helper/effect/_box-shadow.md
Normal file
@ -0,0 +1,16 @@
|
||||
---
|
||||
title: Box Shadow
|
||||
---
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| shadow-sm | box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) |
|
||||
| shadow | box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) |
|
||||
| shadow-md | box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) |
|
||||
| shadow-lg | box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) |
|
||||
| shadow-xl | box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) , 0 10px 10px -5px rgba(0, 0, 0, 0.04) |
|
||||
| shadow-2xl | box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) |
|
||||
| shadow-inner | box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) |
|
||||
| shadow-none | box-shadow: none |
|
||||
|
||||
还有 hover、active、focus 扩展，比如 `hover:shadow-sm`
|
||||
21
packages/amis-ui/scss/helper/effect/_opacity.md
Normal file
21
packages/amis-ui/scss/helper/effect/_opacity.md
Normal file
@ -0,0 +1,21 @@
|
||||
---
|
||||
title: Opacity
|
||||
---
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| opacity-0 | opacity: 0 |
|
||||
| opacity-5 | opacity: 0.05 |
|
||||
| opacity-10 | opacity: 0.1 |
|
||||
| opacity-20 | opacity: 0.2 |
|
||||
| opacity-25 | opacity: 0.25 |
|
||||
| opacity-30 | opacity: 0.3 |
|
||||
| opacity-40 | opacity: 0.4 |
|
||||
| opacity-50 | opacity: 0.5 |
|
||||
| opacity-60 | opacity: 0.6 |
|
||||
| opacity-70 | opacity: 0.7 |
|
||||
| opacity-75 | opacity: 0.75 |
|
||||
| opacity-80 | opacity: 0.8 |
|
||||
| opacity-90 | opacity: 0.9 |
|
||||
| opacity-95 | opacity: 0.95 |
|
||||
| opacity-100 | opacity: 1 |
|
||||
10
packages/amis-ui/scss/helper/flex/_direction.md
Normal file
10
packages/amis-ui/scss/helper/flex/_direction.md
Normal file
@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Flex Direction
|
||||
---
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| flex-row | flex-direction: row |
|
||||
| flex-row-reverse | flex-direction: row-reverse |
|
||||
| flex-col | flex-direction: column |
|
||||
| flex-col-reverse | flex-direction: column-reverse |
|
||||
10
packages/amis-ui/scss/helper/flex/_flex.md
Normal file
10
packages/amis-ui/scss/helper/flex/_flex.md
Normal file
@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Flex
|
||||
---
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| flex-1 | flex: 1 1 0% |
|
||||
| flex-auto | flex: 1 1 auto |
|
||||
| flex-initial | flex: 0 1 auto |
|
||||
| flex-none | flex: none |
|
||||
8
packages/amis-ui/scss/helper/flex/_grow.md
Normal file
8
packages/amis-ui/scss/helper/flex/_grow.md
Normal file
@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Flex Grow
|
||||
---
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| flex-grow-0 | flex-grow: 0 |
|
||||
| flex-grow | flex-grow: 1 |
|
||||
20
packages/amis-ui/scss/helper/flex/_order.md
Normal file
20
packages/amis-ui/scss/helper/flex/_order.md
Normal file
@ -0,0 +1,20 @@
|
||||
---
|
||||
title: Flex Order
|
||||
---
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| order-1 | order: 1 |
|
||||
| order-2 | order: 2 |
|
||||
| order-3 | order: 3 |
|
||||
| order-4 | order: 4 |
|
||||
| order-5 | order: 5 |
|
||||
| order-6 | order: 6 |
|
||||
| order-7 | order: 7 |
|
||||
| order-8 | order: 8 |
|
||||
| order-9 | order: 9 |
|
||||
| order-10 | order: 10 |
|
||||
| order-11 | order: 11 |
|
||||
| order-12 | order: 12 |
|
||||
| order-first | order: -9999 |
|
||||
| order-last | order: 9999 |
|
||||
8
packages/amis-ui/scss/helper/flex/_shrink.md
Normal file
8
packages/amis-ui/scss/helper/flex/_shrink.md
Normal file
@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Flex Shrink
|
||||
---
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| flex-shrink-0 | flex-shrink: 0 |
|
||||
| flex-shrink | flex-shrink: 1 |
|
||||
9
packages/amis-ui/scss/helper/flex/_wrap.md
Normal file
9
packages/amis-ui/scss/helper/flex/_wrap.md
Normal file
@ -0,0 +1,9 @@
|
||||
---
|
||||
title: Flex Wrap
|
||||
---
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| flex-wrap | flex-wrap: wrap |
|
||||
| flex-wrap-reverse | flex-wrap: wrap-reverse |
|
||||
| flex-nowrap | flex-wrap: nowrap |
|
||||
10
packages/amis-ui/scss/helper/grid/_auto-columns.md
Normal file
10
packages/amis-ui/scss/helper/grid/_auto-columns.md
Normal file
@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Grid Auto Columns
|
||||
---
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| auto-cols-auto | grid-auto-columns: auto |
|
||||
| auto-cols-min | grid-auto-columns: min-content |
|
||||
| auto-cols-max | grid-auto-columns: max-content |
|
||||
| auto-cols-fr | grid-auto-columns: minmax(0, 1fr) |
|
||||
10
packages/amis-ui/scss/helper/grid/_auto-flow.md
Normal file
10
packages/amis-ui/scss/helper/grid/_auto-flow.md
Normal file
@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Grid Auto Flow
|
||||
---
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| grid-flow-row | grid-auto-flow: row |
|
||||
| grid-flow-col | grid-auto-flow: column |
|
||||
| grid-flow-row-dense | grid-auto-flow: row dense |
|
||||
| grid-flow-col-dense | grid-auto-flow: column dense |
|
||||
10
packages/amis-ui/scss/helper/grid/_auto-rows.md
Normal file
10
packages/amis-ui/scss/helper/grid/_auto-rows.md
Normal file
@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Grid Auto Flow
|
||||
---
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| auto-rows-auto | grid-auto-rows: auto |
|
||||
| auto-rows-min | grid-auto-rows: min-content |
|
||||
| auto-rows-max | grid-auto-rows: max-content |
|
||||
| auto-rows-fr | grid-auto-rows: minmax(0, 1fr) |
|
||||
48
packages/amis-ui/scss/helper/grid/_column-start-end.md
Normal file
48
packages/amis-ui/scss/helper/grid/_column-start-end.md
Normal file
@ -0,0 +1,48 @@
|
||||
---
|
||||
title: Grid Row Start / End
|
||||
---
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| col-auto | grid-column: auto |
|
||||
| col-span-1 | grid-column: span 1/span 1 |
|
||||
| col-span-2 | grid-column: span 2/span 2 |
|
||||
| col-span-3 | grid-column: span 3/span 3 |
|
||||
| col-span-4 | grid-column: span 4/span 4 |
|
||||
| col-span-5 | grid-column: span 5/span 5 |
|
||||
| col-span-6 | grid-column: span 6/span 6 |
|
||||
| col-span-7 | grid-column: span 7/span 7 |
|
||||
| col-span-8 | grid-column: span 8/span 8 |
|
||||
| col-span-9 | grid-column: span 9/span 9 |
|
||||
| col-span-10 | grid-column: span 10/span 10 |
|
||||
| col-span-11 | grid-column: span 11/span 1 |
|
||||
| col-span-12 | grid-column: span 12/span 12 |
|
||||
| col-span-full | grid-column: 1/-1 |
|
||||
| col-start-1 | grid-column-start: 1 |
|
||||
| col-start-2 | grid-column-start: 2 |
|
||||
| col-start-3 | grid-column-start: 3 |
|
||||
| col-start-4 | grid-column-start: 4 |
|
||||
| col-start-5 | grid-column-start: 5 |
|
||||
| col-start-6 | grid-column-start: 6 |
|
||||
| col-start-7 | grid-column-start: 7 |
|
||||
| col-start-8 | grid-column-start: 8 |
|
||||
| col-start-9 | grid-column-start: 9 |
|
||||
| col-start-10 | grid-column-start: 10 |
|
||||
| col-start-11 | grid-column-start: 11 |
|
||||
| col-start-12 | grid-column-start: 12 |
|
||||
| col-start-13 | grid-column-start: 13 |
|
||||
| col-start-auto | grid-column-start: auto |
|
||||
| col-end-1 | grid-column-end: 1 |
|
||||
| col-end-2 | grid-column-end: 2 |
|
||||
| col-end-3 | grid-column-end: 3 |
|
||||
| col-end-4 | grid-column-end: 4 |
|
||||
| col-end-5 | grid-column-end: 5 |
|
||||
| col-end-6 | grid-column-end: 6 |
|
||||
| col-end-7 | grid-column-end: 7 |
|
||||
| col-end-8 | grid-column-end: 8 |
|
||||
| col-end-9 | grid-column-end: 9 |
|
||||
| col-end-10 | grid-column-end: 10 |
|
||||
| col-end-11 | grid-column-end: 11 |
|
||||
| col-end-12 | grid-column-end: 12 |
|
||||
| col-end-13 | grid-column-end: 13 |
|
||||
| col-end-auto | grid-column-end: auto |
|
||||
19
packages/amis-ui/scss/helper/grid/_columns.md
Normal file
19
packages/amis-ui/scss/helper/grid/_columns.md
Normal file
@ -0,0 +1,19 @@
|
||||
---
|
||||
title: Grid Template Columns
|
||||
---
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| grid-cols-1 | grid-template-columns: repeat(1, minmax(0, 1fr)) |
|
||||
| grid-cols-2 | grid-template-columns: repeat(2, minmax(0, 1fr)) |
|
||||
| grid-cols-3 | grid-template-columns: repeat(3, minmax(0, 1fr)) |
|
||||
| grid-cols-4 | grid-template-columns: repeat(4, minmax(0, 1fr)) |
|
||||
| grid-cols-5 | grid-template-columns: repeat(5, minmax(0, 1fr)) |
|
||||
| grid-cols-6 | grid-template-columns: repeat(6, minmax(0, 1fr)) |
|
||||
| grid-cols-7 | grid-template-columns: repeat(6, minmax(0, 1fr)) |
|
||||
| grid-cols-8 | grid-template-columns: repeat(8, minmax(0, 1fr)) |
|
||||
| grid-cols-9 | grid-template-columns: repeat(9, minmax(0, 1fr)) |
|
||||
| grid-cols-10 | grid-template-columns: repeat(10, minmax(0, 1fr)) |
|
||||
| grid-cols-11 | grid-template-columns: repeat(11, minmax(0, 1fr)) |
|
||||
| grid-cols-12 | grid-template-columns: repeat(12, minmax(0, 1fr)) |
|
||||
| grid-cols-none | grid-template-columns: none |
|
||||
117
packages/amis-ui/scss/helper/grid/_gap.md
Normal file
117
packages/amis-ui/scss/helper/grid/_gap.md
Normal file
@ -0,0 +1,117 @@
|
||||
---
|
||||
title: Gap
|
||||
---
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| gap-px | gap: 0.0625rem |
|
||||
| gap-x-px | column-gap: 0.0625rem |
|
||||
| gap-y-px | row-gap: 0.0625rem |
|
||||
| gap-0 | gap: 0 |
|
||||
| gap-x-0 | column-gap: 0 |
|
||||
| gap-y-0 | row-gap: 0 |
|
||||
| gap-none | gap: 0 |
|
||||
| gap-x-none | column-gap: 0 |
|
||||
| gap-y-none | row-gap: 0 |
|
||||
| gap-0\.5 | gap: 0.125rem |
|
||||
| gap-x-0\.5 | column-gap: 0.125rem |
|
||||
| gap-y-0\.5 | row-gap: 0.125rem |
|
||||
| gap-1 | gap: 0.25rem |
|
||||
| gap-x-1 | column-gap: 0.25rem |
|
||||
| gap-y-1 | row-gap: 0.25rem |
|
||||
| gap-1\.5 | gap: 0.375rem |
|
||||
| gap-x-1\.5 | column-gap: 0.375rem |
|
||||
| gap-y-1\.5 | row-gap: 0.375rem |
|
||||
| gap-2 | gap: 0.5rem |
|
||||
| gap-x-2 | column-gap: 0.5rem |
|
||||
| gap-y-2 | row-gap: 0.5rem |
|
||||
| gap-2\.5 | gap: 0.625rem |
|
||||
| gap-x-2\.5 | column-gap: 0.625rem |
|
||||
| gap-y-2\.5 | row-gap: 0.625rem |
|
||||
| gap-3 | gap: 0.75rem |
|
||||
| gap-x-3 | column-gap: 0.75rem |
|
||||
| gap-y-3 | row-gap: 0.75rem |
|
||||
| gap-3\.5 | gap: 0.875rem |
|
||||
| gap-x-3\.5 | column-gap: 0.875rem |
|
||||
| gap-y-3\.5 | row-gap: 0.875rem |
|
||||
| gap-4 | gap: 1rem |
|
||||
| gap-x-4 | column-gap: 1rem |
|
||||
| gap-y-4 | row-gap: 1rem |
|
||||
| gap-5 | gap: 1.25rem |
|
||||
| gap-x-5 | column-gap: 1.25rem |
|
||||
| gap-y-5 | row-gap: 1.25rem |
|
||||
| gap-6 | gap: 1.5rem |
|
||||
| gap-x-6 | column-gap: 1.5rem |
|
||||
| gap-y-6 | row-gap: 1.5rem |
|
||||
| gap-7 | gap: 1.75rem |
|
||||
| gap-x-7 | column-gap: 1.75rem |
|
||||
| gap-y-7 | row-gap: 1.75rem |
|
||||
| gap-8 | gap: 2rem |
|
||||
| gap-x-8 | column-gap: 2rem |
|
||||
| gap-y-8 | row-gap: 2rem |
|
||||
| gap-9 | gap: 2.25rem |
|
||||
| gap-x-9 | column-gap: 2.25rem |
|
||||
| gap-y-9 | row-gap: 2.25rem |
|
||||
| gap-10 | gap: 2.5rem |
|
||||
| gap-x-10 | column-gap: 2.5rem |
|
||||
| gap-y-10 | row-gap: 2.5rem |
|
||||
| gap-11 | gap: 2.75rem |
|
||||
| gap-x-11 | column-gap: 2.75rem |
|
||||
| gap-y-11 | row-gap: 2.75rem |
|
||||
| gap-12 | gap: 3rem |
|
||||
| gap-x-12 | column-gap: 3rem |
|
||||
| gap-y-12 | row-gap: 3rem |
|
||||
| gap-14 | gap: 3.5rem |
|
||||
| gap-x-14 | column-gap: 3.5rem |
|
||||
| gap-y-14 | row-gap: 3.5rem |
|
||||
| gap-16 | gap: 4rem |
|
||||
| gap-x-16 | column-gap: 4rem |
|
||||
| gap-y-16 | row-gap: 4rem |
|
||||
| gap-18 | gap: 4.5rem |
|
||||
| gap-x-18 | column-gap: 4.5rem |
|
||||
| gap-y-18 | row-gap: 4.5rem |
|
||||
| gap-20 | gap: 5rem |
|
||||
| gap-x-20 | column-gap: 5rem |
|
||||
| gap-y-20 | row-gap: 5rem |
|
||||
| gap-24 | gap: 6rem |
|
||||
| gap-x-24 | column-gap: 6rem |
|
||||
| gap-y-24 | row-gap: 6rem |
|
||||
| gap-28 | gap: 7rem |
|
||||
| gap-x-28 | column-gap: 7rem |
|
||||
| gap-y-28 | row-gap: 7rem |
|
||||
| gap-32 | gap: 8rem |
|
||||
| gap-x-32 | column-gap: 8rem |
|
||||
| gap-y-32 | row-gap: 8rem |
|
||||
| gap-36 | gap: 9rem |
|
||||
| gap-x-36 | column-gap: 9rem |
|
||||
| gap-y-36 | row-gap: 9rem |
|
||||
| gap-40 | gap: 10rem |
|
||||
| gap-x-40 | column-gap: 10rem |
|
||||
| gap-y-40 | row-gap: 10rem |
|
||||
| gap-44 | gap: 11rem |
|
||||
| gap-x-44 | column-gap: 11rem |
|
||||
| gap-y-44 | row-gap: 11rem |
|
||||
| gap-48 | gap: 12rem |
|
||||
| gap-x-48 | column-gap: 12rem |
|
||||
| gap-y-48 | row-gap: 12rem |
|
||||
| gap-52 | gap: 13rem |
|
||||
| gap-x-52 | column-gap: 13rem |
|
||||
| gap-y-52 | row-gap: 13rem |
|
||||
| gap-56 | gap: 14rem |
|
||||
| gap-x-56 | column-gap: 14rem |
|
||||
| gap-y-56 | row-gap: 14rem |
|
||||
| gap-60 | gap: 15rem |
|
||||
| gap-x-60 | column-gap: 15rem |
|
||||
| gap-y-60 | row-gap: 15rem |
|
||||
| gap-64 | gap: 16rem |
|
||||
| gap-x-64 | column-gap: 16rem |
|
||||
| gap-y-64 | row-gap: 16rem |
|
||||
| gap-72 | gap: 18rem |
|
||||
| gap-x-72 | column-gap: 18rem |
|
||||
| gap-y-72 | row-gap: 18rem |
|
||||
| gap-80 | gap: 20rem |
|
||||
| gap-x-80 | column-gap: 20rem |
|
||||
| gap-y-80 | row-gap: 20rem |
|
||||
| gap-96 | gap: 24rem |
|
||||
| gap-x-96 | column-gap: 24rem |
|
||||
| gap-y-96 | row-gap: 24rem |
|
||||
48
packages/amis-ui/scss/helper/grid/_row-start-end.md
Normal file
48
packages/amis-ui/scss/helper/grid/_row-start-end.md
Normal file
@ -0,0 +1,48 @@
|
||||
---
|
||||
title: Grid Row Start / End
|
||||
---
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| row-auto | grid-row: auto |
|
||||
| row-span-1 | grid-row: span 1/span 1 |
|
||||
| row-span-2 | grid-row: span 2/span 2 |
|
||||
| row-span-3 | grid-row: span 3/span 3 |
|
||||
| row-span-4 | grid-row: span 4/span 4 |
|
||||
| row-span-5 | grid-row: span 5/span 5 |
|
||||
| row-span-6 | grid-row: span 6/span 6 |
|
||||
| row-span-7 | grid-row: span 7/span 7 |
|
||||
| row-span-8 | grid-row: span 8/span 8 |
|
||||
| row-span-9 | grid-row: span 9/span 9 |
|
||||
| row-span-10 | grid-row: span 10/span 10 |
|
||||
| row-span-11 | grid-row: span 11/span 1 |
|
||||
| row-span-12 | grid-row: span 12/span 12 |
|
||||
| row-span-full | grid-row: 1/-1 |
|
||||
| row-start-1 | grid-row-start: 1 |
|
||||
| row-start-2 | grid-row-start: 2 |
|
||||
| row-start-3 | grid-row-start: 3 |
|
||||
| row-start-4 | grid-row-start: 4 |
|
||||
| row-start-5 | grid-row-start: 5 |
|
||||
| row-start-6 | grid-row-start: 6 |
|
||||
| row-start-7 | grid-row-start: 7 |
|
||||
| row-start-8 | grid-row-start: 8 |
|
||||
| row-start-9 | grid-row-start: 9 |
|
||||
| row-start-10 | grid-row-start: 10 |
|
||||
| row-start-11 | grid-row-start: 11 |
|
||||
| row-start-12 | grid-row-start: 12 |
|
||||
| row-start-13 | grid-row-start: 13 |
|
||||
| row-start-auto | grid-row-start: auto |
|
||||
| row-end-1 | grid-row-end: 1 |
|
||||
| row-end-2 | grid-row-end: 2 |
|
||||
| row-end-3 | grid-row-end: 3 |
|
||||
| row-end-4 | grid-row-end: 4 |
|
||||
| row-end-5 | grid-row-end: 5 |
|
||||
| row-end-6 | grid-row-end: 6 |
|
||||
| row-end-7 | grid-row-end: 7 |
|
||||
| row-end-8 | grid-row-end: 8 |
|
||||
| row-end-9 | grid-row-end: 9 |
|
||||
| row-end-10 | grid-row-end: 10 |
|
||||
| row-end-11 | grid-row-end: 11 |
|
||||
| row-end-12 | grid-row-end: 12 |
|
||||
| row-end-13 | grid-row-end: 13 |
|
||||
| row-end-auto | grid-row-end: auto |
|
||||
13
packages/amis-ui/scss/helper/grid/_rows.md
Normal file
13
packages/amis-ui/scss/helper/grid/_rows.md
Normal file
@ -0,0 +1,13 @@
|
||||
---
|
||||
title: Grid Template Rows
|
||||
---
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| grid-rows-1 | grid-template-rows: repeat(1, minmax(0, 1fr)) |
|
||||
| grid-rows-2 | grid-template-rows: repeat(2, minmax(0, 1fr)) |
|
||||
| grid-rows-3 | grid-template-rows: repeat(3, minmax(0, 1fr)) |
|
||||
| grid-rows-4 | grid-template-rows: repeat(4, minmax(0, 1fr)) |
|
||||
| grid-rows-5 | grid-template-rows: repeat(5, minmax(0, 1fr)) |
|
||||
| grid-rows-6 | grid-template-rows: repeat(6, minmax(0, 1fr)) |
|
||||
| grid-rows-none | grid-template-rows: none |
|
||||
35
packages/amis-ui/scss/helper/layout/_box-sizing.md
Normal file
35
packages/amis-ui/scss/helper/layout/_box-sizing.md
Normal file
@ -0,0 +1,35 @@
|
||||
---
|
||||
title: Box Sizing
|
||||
---
|
||||
|
||||
Box Sizing 相关样式，主要区别在于设置宽高的时候，是否包含了 padding 和 border 的大小。
|
||||
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| box-border | box-sizing: border-box; |
|
||||
| box-content | box-sizing: content-box; |
|
||||
|
||||
## 用法
|
||||
|
||||
比如这个例子：左侧是 box-border 类型，整体高宽 128px。而右侧只是内容区域是 128px + 边框(2 * 4px) + padding （2 * 16px） 一共160px。
|
||||
|
||||
```html
|
||||
<div class="flex space-x-6">
|
||||
<div class="box-border h-32 w-32 p-4 border-4 border-blue-400 bg-blue-200 rounded-md">
|
||||
<div class="h-full w-full bg-red-400"></div>
|
||||
</div>
|
||||
|
||||
<div class="box-content h-32 w-32 p-4 border-4 border-blue-400 bg-blue-200 rounded-md">
|
||||
<div class="h-full w-full bg-red-400"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## 响应式设计
|
||||
|
||||
不支持 [「响应式设计前缀」](../../../docs/style/responsive-design.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
|
||||
|
||||
## 状态前缀
|
||||
|
||||
不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
|
||||
27
packages/amis-ui/scss/helper/layout/_clear.md
Normal file
27
packages/amis-ui/scss/helper/layout/_clear.md
Normal file
@ -0,0 +1,27 @@
|
||||
---
|
||||
title: Clear
|
||||
---
|
||||
|
||||
清除浮动相关样式。
|
||||
|
||||
| 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
|
||||
|
||||
|
||||
# 响应式设计
|
||||
|
||||
支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。
|
||||
|
||||
## 状态前缀
|
||||
|
||||
不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
|
||||
41
packages/amis-ui/scss/helper/layout/_display.md
Normal file
41
packages/amis-ui/scss/helper/layout/_display.md
Normal file
@ -0,0 +1,41 @@
|
||||
---
|
||||
title: Display
|
||||
---
|
||||
|
||||
布局相关样式。
|
||||
|
||||
|
||||
| Class | Properties |
|
||||
| ------------------ | ---------------------------- |
|
||||
| block | display: block; |
|
||||
| inline-block | display: inline-block; |
|
||||
| inline | display: inline; |
|
||||
| flex | display: flex; |
|
||||
| inline-flex | display: inline-flex; |
|
||||
| table | display: table; |
|
||||
| table-cell | display: table-cell; |
|
||||
| table-column | display: table-column; |
|
||||
| table-column-group | display: table-column-group; |
|
||||
| table-footer-group | display: table-footer-group; |
|
||||
| table-header-group | display: table-header-group; |
|
||||
| table-row-group | display: table-row-group; |
|
||||
| table-row | display: table-row; |
|
||||
| flow-root | display: flow-root; |
|
||||
| grid | display: grid; |
|
||||
| inline-grid | display: inline-grid; |
|
||||
| contents | display: contents; |
|
||||
| hidden | display: none; |
|
||||
|
||||
## 用法
|
||||
css 相关的知识点就不介绍了，请参考：
|
||||
|
||||
https://www.w3school.com.cn/cssref/pr_class_display.asp
|
||||
https://tailwindcss.com/docs/display
|
||||
|
||||
# 响应式设计
|
||||
|
||||
支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。
|
||||
|
||||
## 状态前缀
|
||||
|
||||
不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
|
||||
47
packages/amis-ui/scss/helper/layout/_float.md
Normal file
47
packages/amis-ui/scss/helper/layout/_float.md
Normal file
@ -0,0 +1,47 @@
|
||||
---
|
||||
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)。
|
||||
34
packages/amis-ui/scss/helper/layout/_overflow.md
Normal file
34
packages/amis-ui/scss/helper/layout/_overflow.md
Normal file
@ -0,0 +1,34 @@
|
||||
---
|
||||
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)。
|
||||
27
packages/amis-ui/scss/helper/layout/_position.md
Normal file
27
packages/amis-ui/scss/helper/layout/_position.md
Normal file
@ -0,0 +1,27 @@
|
||||
---
|
||||
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)。
|
||||
150
packages/amis-ui/scss/helper/layout/_top-right-bottom-left.md
Normal file
150
packages/amis-ui/scss/helper/layout/_top-right-bottom-left.md
Normal file
@ -0,0 +1,150 @@
|
||||
---
|
||||
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)。
|
||||
21
packages/amis-ui/scss/helper/layout/_visibility.md
Normal file
21
packages/amis-ui/scss/helper/layout/_visibility.md
Normal file
@ -0,0 +1,21 @@
|
||||
---
|
||||
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)。
|
||||
37
packages/amis-ui/scss/helper/layout/_z-index.md
Normal file
37
packages/amis-ui/scss/helper/layout/_z-index.md
Normal file
@ -0,0 +1,37 @@
|
||||
---
|
||||
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)。
|
||||
103
packages/amis-ui/scss/helper/sizing/_height.md
Normal file
103
packages/amis-ui/scss/helper/sizing/_height.md
Normal file
@ -0,0 +1,103 @@
|
||||
---
|
||||
title: Height
|
||||
---
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| h-px | height: 0.0625rem |
|
||||
| h-0 | height: 0 |
|
||||
| h-none | height: 0 |
|
||||
| h-0\.5 | height: 0.125rem |
|
||||
| h-1 | height: 0.25rem |
|
||||
| h-1\.5 | height: 0.375rem |
|
||||
| h-2 | height: 0.5rem |
|
||||
| h-2\.5 | height: 0.625rem |
|
||||
| h-3 | height: 0.75rem |
|
||||
| h-3\.5 | height: 0.875rem |
|
||||
| h-4 | height: 1rem |
|
||||
| h-5 | height: 1.25rem |
|
||||
| h-6 | height: 1.5rem |
|
||||
| h-7 | height: 1.75rem |
|
||||
| h-8 | height: 2rem |
|
||||
| h-9 | height: 2.25rem |
|
||||
| h-10 | height: 2.5rem |
|
||||
| h-11 | height: 2.75rem |
|
||||
| h-12 | height: 3rem |
|
||||
| h-14 | height: 3.5rem |
|
||||
| h-16 | height: 4rem |
|
||||
| h-18 | height: 4.5rem |
|
||||
| h-20 | height: 5rem |
|
||||
| h-24 | height: 6rem |
|
||||
| h-28 | height: 7rem |
|
||||
| h-32 | height: 8rem |
|
||||
| h-36 | height: 9rem |
|
||||
| h-40 | height: 10rem |
|
||||
| h-44 | height: 11rem |
|
||||
| h-48 | height: 12rem |
|
||||
| h-52 | height: 13rem |
|
||||
| h-56 | height: 14rem |
|
||||
| h-60 | height: 15rem |
|
||||
| h-64 | height: 16rem |
|
||||
| h-72 | height: 18rem |
|
||||
| h-80 | height: 20rem |
|
||||
| h-96 | height: 24rem |
|
||||
| h-auto | height: auto |
|
||||
| h-1\/2 | height: 50% |
|
||||
| h-1\/3 | height: 33.333333% |
|
||||
| h-2\/3 | height: 66.666667% |
|
||||
| h-1\/4 | height: 25% |
|
||||
| h-2\/4 | height: 50% |
|
||||
| h-3\/4 | height: 75% |
|
||||
| h-1\/5 | height: 20% |
|
||||
| h-2\/5 | height: 40% |
|
||||
| h-3\/5 | height: 60% |
|
||||
| h-4\/5 | height: 80% |
|
||||
| h-1\/6 | height: 16.666667% |
|
||||
| h-2\/6 | height: 33.333333% |
|
||||
| h-3\/6 | height: 50% |
|
||||
| h-4\/6 | height: 66.666667% |
|
||||
| h-5\/6 | height: 83.333333% |
|
||||
| h-full | height: 100% |
|
||||
| h-screen | height: 100vh |
|
||||
| min-h-0 | min-height: 0px |
|
||||
| min-h-full | min-height: 100% |
|
||||
| min-h-screen | min-height: 100vh |
|
||||
| max-h-px | max-height: 0.0625rem |
|
||||
| max-h-0 | max-height: 0 |
|
||||
| max-h-none | max-height: 0 |
|
||||
| max-h-0\.5 | max-height: 0.125rem |
|
||||
| max-h-1 | max-height: 0.25rem |
|
||||
| max-h-1\.5 | max-height: 0.375rem |
|
||||
| max-h-2 | max-height: 0.5rem |
|
||||
| max-h-2\.5 | max-height: 0.625rem |
|
||||
| max-h-3 | max-height: 0.75rem |
|
||||
| max-h-3\.5 | max-height: 0.875rem |
|
||||
| max-h-4 | max-height: 1rem |
|
||||
| max-h-5 | max-height: 1.25rem |
|
||||
| max-h-6 | max-height: 1.5rem |
|
||||
| max-h-7 | max-height: 1.75rem |
|
||||
| max-h-8 | max-height: 2rem |
|
||||
| max-h-9 | max-height: 2.25rem |
|
||||
| max-h-10 | max-height: 2.5rem |
|
||||
| max-h-11 | max-height: 2.75rem |
|
||||
| max-h-12 | max-height: 3rem |
|
||||
| max-h-14 | max-height: 3.5rem |
|
||||
| max-h-16 | max-height: 4rem |
|
||||
| max-h-18 | max-height: 4.5rem |
|
||||
| max-h-20 | max-height: 5rem |
|
||||
| max-h-24 | max-height: 6rem |
|
||||
| max-h-28 | max-height: 7rem |
|
||||
| max-h-32 | max-height: 8rem |
|
||||
| max-h-36 | max-height: 9rem |
|
||||
| max-h-40 | max-height: 10rem |
|
||||
| max-h-44 | max-height: 11rem |
|
||||
| max-h-48 | max-height: 12rem |
|
||||
| max-h-52 | max-height: 13rem |
|
||||
| max-h-56 | max-height: 14rem |
|
||||
| max-h-60 | max-height: 15rem |
|
||||
| max-h-64 | max-height: 16rem |
|
||||
| max-h-72 | max-height: 18rem |
|
||||
| max-h-80 | max-height: 20rem |
|
||||
| max-h-96 | max-height: 24rem |
|
||||
| max-h-full | max-height: 100% |
|
||||
| max-h-screen | max-height: 100vh |
|
||||
98
packages/amis-ui/scss/helper/sizing/_width.md
Normal file
98
packages/amis-ui/scss/helper/sizing/_width.md
Normal file
@ -0,0 +1,98 @@
|
||||
---
|
||||
title: Width
|
||||
---
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| w-px | width: 0.0625rem |
|
||||
| w-0 | width: 0 |
|
||||
| w-none | width: 0 |
|
||||
| w-0\.5 | width: 0.125rem |
|
||||
| w-1 | width: 0.25rem |
|
||||
| w-1\.5 | width: 0.375rem |
|
||||
| w-2 | width: 0.5rem |
|
||||
| w-2\.5 | width: 0.625rem |
|
||||
| w-3 | width: 0.75rem |
|
||||
| w-3\.5 | width: 0.875rem |
|
||||
| w-4 | width: 1rem |
|
||||
| w-5 | width: 1.25rem |
|
||||
| w-6 | width: 1.5rem |
|
||||
| w-7 | width: 1.75rem |
|
||||
| w-8 | width: 2rem |
|
||||
| w-9 | width: 2.25rem |
|
||||
| w-10 | width: 2.5rem |
|
||||
| w-11 | width: 2.75rem |
|
||||
| w-12 | width: 3rem |
|
||||
| w-14 | width: 3.5rem |
|
||||
| w-16 | width: 4rem |
|
||||
| w-18 | width: 4.5rem |
|
||||
| w-20 | width: 5rem |
|
||||
| w-24 | width: 6rem |
|
||||
| w-28 | width: 7rem |
|
||||
| w-32 | width: 8rem |
|
||||
| w-36 | width: 9rem |
|
||||
| w-40 | width: 10rem |
|
||||
| w-44 | width: 11rem |
|
||||
| w-48 | width: 12rem |
|
||||
| w-52 | width: 13rem |
|
||||
| w-56 | width: 14rem |
|
||||
| w-60 | width: 15rem |
|
||||
| w-64 | width: 16rem |
|
||||
| w-72 | width: 18rem |
|
||||
| w-80 | width: 20rem |
|
||||
| w-96 | width: 24rem |
|
||||
| w-auto | width: auto |
|
||||
| w-1x | width: 1em |
|
||||
| w-2x | width: 2em |
|
||||
| w-3x | width: 3em |
|
||||
| w-1\/2 | width: 50% |
|
||||
| w-1\/3 | width: 33.333333% |
|
||||
| w-2\/3 | width: 66.666667% |
|
||||
| w-1\/4 | width: 25% |
|
||||
| w-2\/4 | width: 50% |
|
||||
| w-3\/4 | width: 75% |
|
||||
| w-1\/5 | width: 20% |
|
||||
| w-2\/5 | width: 40% |
|
||||
| w-3\/5 | width: 60% |
|
||||
| w-4\/5 | width: 80% |
|
||||
| w-1\/6 | width: 16.666667% |
|
||||
| w-2\/6 | width: 33.333333% |
|
||||
| w-3\/6 | width: 50% |
|
||||
| w-4\/6 | width: 66.666667% |
|
||||
| w-5\/6 | width: 83.333333% |
|
||||
| w-1\/12 | width: 8.333333% |
|
||||
| w-2\/12 | width: 16.666667% |
|
||||
| w-3\/12 | width: 25% |
|
||||
| w-4\/12 | width: 33.333333% |
|
||||
| w-5\/12 | width: 41.666667% |
|
||||
| w-6\/12 | width: 50% |
|
||||
| w-7\/12 | width: 58.333333% |
|
||||
| w-8\/12 | width: 66.666667% |
|
||||
| w-9\/12 | width: 75% |
|
||||
| w-10\/12 | width: 83.333333% |
|
||||
| w-11\/12 | width: 91.666667% |
|
||||
| w-full | width: 100% |
|
||||
| w-screen | width: 100vw |
|
||||
| w-min | width: min-content |
|
||||
| w-max | width: max-content |
|
||||
| min-w-0 | min-width: 0px |
|
||||
| min-w-full | min-width: 100% |
|
||||
| min-w-min | min-width: min-content |
|
||||
| min-w-max | min-width: max-content |
|
||||
| max-w-none | max-width: none |
|
||||
| max-w-0 | max-width: 0rem |
|
||||
| max-w-xs | max-width: 20rem |
|
||||
| max-w-sm | max-width: 24rem |
|
||||
| max-w-md | max-width: 28rem |
|
||||
| max-w-lg | max-width: 32rem |
|
||||
| max-w-xl | max-width: 36rem |
|
||||
| max-w-2xl | max-width: 42rem |
|
||||
| max-w-3xl | max-width: 48rem |
|
||||
| max-w-4xl | max-width: 56rem |
|
||||
| max-w-5xl | max-width: 64rem |
|
||||
| max-w-6xl | max-width: 72rem |
|
||||
| max-w-7xl | max-width: 80rem |
|
||||
| max-w-full | max-width: 100% |
|
||||
| max-w-min | max-width: min-content |
|
||||
| max-w-max | max-width: max-content |
|
||||
| max-w-prose | max-width: 65ch |
|
||||
527
packages/amis-ui/scss/helper/spacing/_margin.md
Normal file
527
packages/amis-ui/scss/helper/spacing/_margin.md
Normal file
@ -0,0 +1,527 @@
|
||||
---
|
||||
title: Margin
|
||||
---
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| m-px | margin: 0.0625rem |
|
||||
| m-0 | margin: 0 |
|
||||
| m-none | margin: 0 |
|
||||
| m-0\.5 | margin: 0.125rem |
|
||||
| m-1 | margin: 0.25rem |
|
||||
| m-1\.5 | margin: 0.375rem |
|
||||
| m-2 | margin: 0.5rem |
|
||||
| m-2\.5 | margin: 0.625rem |
|
||||
| m-3 | margin: 0.75rem |
|
||||
| m-3\.5 | margin: 0.875rem |
|
||||
| m-4 | margin: 1rem |
|
||||
| m-5 | margin: 1.25rem |
|
||||
| m-6 | margin: 1.5rem |
|
||||
| m-7 | margin: 1.75rem |
|
||||
| m-8 | margin: 2rem |
|
||||
| m-9 | margin: 2.25rem |
|
||||
| m-10 | margin: 2.5rem |
|
||||
| m-11 | margin: 2.75rem |
|
||||
| m-12 | margin: 3rem |
|
||||
| m-14 | margin: 3.5rem |
|
||||
| m-16 | margin: 4rem |
|
||||
| m-18 | margin: 4.5rem |
|
||||
| m-20 | margin: 5rem |
|
||||
| m-24 | margin: 6rem |
|
||||
| m-28 | margin: 7rem |
|
||||
| m-32 | margin: 8rem |
|
||||
| m-36 | margin: 9rem |
|
||||
| m-40 | margin: 10rem |
|
||||
| m-44 | margin: 11rem |
|
||||
| m-48 | margin: 12rem |
|
||||
| m-52 | margin: 13rem |
|
||||
| m-56 | margin: 14rem |
|
||||
| m-60 | margin: 15rem |
|
||||
| m-64 | margin: 16rem |
|
||||
| m-72 | margin: 18rem |
|
||||
| m-80 | margin: 20rem |
|
||||
| m-96 | margin: 24rem |
|
||||
| m-auto | margin: auto |
|
||||
| -m-px | margin: -0.0625rem |
|
||||
| -m-0 | margin: 0 |
|
||||
| -m-none | margin: 0 |
|
||||
| -m-0\.5 | margin: -0.125rem |
|
||||
| -m-1 | margin: -0.25rem |
|
||||
| -m-1\.5 | margin: -0.375rem |
|
||||
| -m-2 | margin: -0.5rem |
|
||||
| -m-2\.5 | margin: -0.625rem |
|
||||
| -m-3 | margin: -0.75rem |
|
||||
| -m-3\.5 | margin: -0.875rem |
|
||||
| -m-4 | margin: -1rem |
|
||||
| -m-5 | margin: -1.25rem |
|
||||
| -m-6 | margin: -1.5rem |
|
||||
| -m-7 | margin: -1.75rem |
|
||||
| -m-8 | margin: -2rem |
|
||||
| -m-9 | margin: -2.25rem |
|
||||
| -m-10 | margin: -2.5rem |
|
||||
| -m-11 | margin: -2.75rem |
|
||||
| -m-12 | margin: -3rem |
|
||||
| -m-14 | margin: -3.5rem |
|
||||
| -m-16 | margin: -4rem |
|
||||
| -m-18 | margin: -4.5rem |
|
||||
| -m-20 | margin: -5rem |
|
||||
| -m-24 | margin: -6rem |
|
||||
| -m-28 | margin: -7rem |
|
||||
| -m-32 | margin: -8rem |
|
||||
| -m-36 | margin: -9rem |
|
||||
| -m-40 | margin: -10rem |
|
||||
| -m-44 | margin: -11rem |
|
||||
| -m-48 | margin: -12rem |
|
||||
| -m-52 | margin: -13rem |
|
||||
| -m-56 | margin: -14rem |
|
||||
| -m-60 | margin: -15rem |
|
||||
| -m-64 | margin: -16rem |
|
||||
| -m-72 | margin: -18rem |
|
||||
| -m-80 | margin: -20rem |
|
||||
| -m-96 | margin: -24rem |
|
||||
| mx-px | margin-left: 0.0625rem; margin-right: 0.0625rem |
|
||||
| mx-0 | margin-left: 0; margin-right: 0 |
|
||||
| mx-none | margin-left: 0; margin-right: 0 |
|
||||
| mx-0\.5 | margin-left: 0.125rem; margin-right: 0.125rem |
|
||||
| mx-1 | margin-left: 0.25rem; margin-right: 0.25rem |
|
||||
| mx-1\.5 | margin-left: 0.375rem; margin-right: 0.375rem |
|
||||
| mx-2 | margin-left: 0.5rem; margin-right: 0.5rem |
|
||||
| mx-2\.5 | margin-left: 0.625rem; margin-right: 0.625rem |
|
||||
| mx-3 | margin-left: 0.75rem; margin-right: 0.75rem |
|
||||
| mx-3\.5 | margin-left: 0.875rem; margin-right: 0.875rem |
|
||||
| mx-4 | margin-left: 1rem; margin-right: 1rem |
|
||||
| mx-5 | margin-left: 1.25rem; margin-right: 1.25rem |
|
||||
| mx-6 | margin-left: 1.5rem; margin-right: 1.5rem |
|
||||
| mx-7 | margin-left: 1.75rem; margin-right: 1.75rem |
|
||||
| mx-8 | margin-left: 2rem; margin-right: 2rem |
|
||||
| mx-9 | margin-left: 2.25rem; margin-right: 2.25rem |
|
||||
| mx-10 | margin-left: 2.5rem; margin-right: 2.5rem |
|
||||
| mx-11 | margin-left: 2.75rem; margin-right: 2.75rem |
|
||||
| mx-12 | margin-left: 3rem; margin-right: 3rem |
|
||||
| mx-14 | margin-left: 3.5rem; margin-right: 3.5rem |
|
||||
| mx-16 | margin-left: 4rem; margin-right: 4rem |
|
||||
| mx-18 | margin-left: 4.5rem; margin-right: 4.5rem |
|
||||
| mx-20 | margin-left: 5rem; margin-right: 5rem |
|
||||
| mx-24 | margin-left: 6rem; margin-right: 6rem |
|
||||
| mx-28 | margin-left: 7rem; margin-right: 7rem |
|
||||
| mx-32 | margin-left: 8rem; margin-right: 8rem |
|
||||
| mx-36 | margin-left: 9rem; margin-right: 9rem |
|
||||
| mx-40 | margin-left: 10rem; margin-right: 10rem |
|
||||
| mx-44 | margin-left: 11rem; margin-right: 11rem |
|
||||
| mx-48 | margin-left: 12rem; margin-right: 12rem |
|
||||
| mx-52 | margin-left: 13rem; margin-right: 13rem |
|
||||
| mx-56 | margin-left: 14rem; margin-right: 14rem |
|
||||
| mx-60 | margin-left: 15rem; margin-right: 15rem |
|
||||
| mx-64 | margin-left: 16rem; margin-right: 16rem |
|
||||
| mx-72 | margin-left: 18rem; margin-right: 18rem |
|
||||
| mx-80 | margin-left: 20rem; margin-right: 20rem |
|
||||
| mx-96 | margin-left: 24rem; margin-right: 24rem |
|
||||
| mx-auto | margin-left: auto; margin-right: auto |
|
||||
| -mx-px | margin-left: -0.0625rem; margin-right: -0.0625rem |
|
||||
| -mx-0 | margin-left: 0; margin-right: 0 |
|
||||
| -mx-none | margin-left: 0; margin-right: 0 |
|
||||
| -mx-0\.5 | margin-left: -0.125rem; margin-right: -0.125rem |
|
||||
| -mx-1 | margin-left: -0.25rem; margin-right: -0.25rem |
|
||||
| -mx-1\.5 | margin-left: -0.375rem; margin-right: -0.375rem |
|
||||
| -mx-2 | margin-left: -0.5rem; margin-right: -0.5rem |
|
||||
| -mx-2\.5 | margin-left: -0.625rem; margin-right: -0.625rem |
|
||||
| -mx-3 | margin-left: -0.75rem; margin-right: -0.75rem |
|
||||
| -mx-3\.5 | margin-left: -0.875rem; margin-right: -0.875rem |
|
||||
| -mx-4 | margin-left: -1rem; margin-right: -1rem |
|
||||
| -mx-5 | margin-left: -1.25rem; margin-right: -1.25rem |
|
||||
| -mx-6 | margin-left: -1.5rem; margin-right: -1.5rem |
|
||||
| -mx-7 | margin-left: -1.75rem; margin-right: -1.75rem |
|
||||
| -mx-8 | margin-left: -2rem; margin-right: -2rem |
|
||||
| -mx-9 | margin-left: -2.25rem; margin-right: -2.25rem |
|
||||
| -mx-10 | margin-left: -2.5rem; margin-right: -2.5rem |
|
||||
| -mx-11 | margin-left: -2.75rem; margin-right: -2.75rem |
|
||||
| -mx-12 | margin-left: -3rem; margin-right: -3rem |
|
||||
| -mx-14 | margin-left: -3.5rem; margin-right: -3.5rem |
|
||||
| -mx-16 | margin-left: -4rem; margin-right: -4rem |
|
||||
| -mx-18 | margin-left: -4.5rem; margin-right: -4.5rem |
|
||||
| -mx-20 | margin-left: -5rem; margin-right: -5rem |
|
||||
| -mx-24 | margin-left: -6rem; margin-right: -6rem |
|
||||
| -mx-28 | margin-left: -7rem; margin-right: -7rem |
|
||||
| -mx-32 | margin-left: -8rem; margin-right: -8rem |
|
||||
| -mx-36 | margin-left: -9rem; margin-right: -9rem |
|
||||
| -mx-40 | margin-left: -10rem; margin-right: -10rem |
|
||||
| -mx-44 | margin-left: -11rem; margin-right: -11rem |
|
||||
| -mx-48 | margin-left: -12rem; margin-right: -12rem |
|
||||
| -mx-52 | margin-left: -13rem; margin-right: -13rem |
|
||||
| -mx-56 | margin-left: -14rem; margin-right: -14rem |
|
||||
| -mx-60 | margin-left: -15rem; margin-right: -15rem |
|
||||
| -mx-64 | margin-left: -16rem; margin-right: -16rem |
|
||||
| -mx-72 | margin-left: -18rem; margin-right: -18rem |
|
||||
| -mx-80 | margin-left: -20rem; margin-right: -20rem |
|
||||
| -mx-96 | margin-left: -24rem; margin-right: -24rem |
|
||||
| my-px | margin-top: 0.0625rem; margin-bottom: 0.0625rem |
|
||||
| my-0 | margin-top: 0; margin-bottom: 0 |
|
||||
| my-none | margin-top: 0; margin-bottom: 0 |
|
||||
| my-0\.5 | margin-top: 0.125rem; margin-bottom: 0.125rem |
|
||||
| my-1 | margin-top: 0.25rem; margin-bottom: 0.25rem |
|
||||
| my-1\.5 | margin-top: 0.375rem; margin-bottom: 0.375rem |
|
||||
| my-2 | margin-top: 0.5rem; margin-bottom: 0.5rem |
|
||||
| my-2\.5 | margin-top: 0.625rem; margin-bottom: 0.625rem |
|
||||
| my-3 | margin-top: 0.75rem; margin-bottom: 0.75rem |
|
||||
| my-3\.5 | margin-top: 0.875rem; margin-bottom: 0.875rem |
|
||||
| my-4 | margin-top: 1rem; margin-bottom: 1rem |
|
||||
| my-5 | margin-top: 1.25rem; margin-bottom: 1.25rem |
|
||||
| my-6 | margin-top: 1.5rem; margin-bottom: 1.5rem |
|
||||
| my-7 | margin-top: 1.75rem; margin-bottom: 1.75rem |
|
||||
| my-8 | margin-top: 2rem; margin-bottom: 2rem |
|
||||
| my-9 | margin-top: 2.25rem; margin-bottom: 2.25rem |
|
||||
| my-10 | margin-top: 2.5rem; margin-bottom: 2.5rem |
|
||||
| my-11 | margin-top: 2.75rem; margin-bottom: 2.75rem |
|
||||
| my-12 | margin-top: 3rem; margin-bottom: 3rem |
|
||||
| my-14 | margin-top: 3.5rem; margin-bottom: 3.5rem |
|
||||
| my-16 | margin-top: 4rem; margin-bottom: 4rem |
|
||||
| my-18 | margin-top: 4.5rem; margin-bottom: 4.5rem |
|
||||
| my-20 | margin-top: 5rem; margin-bottom: 5rem |
|
||||
| my-24 | margin-top: 6rem; margin-bottom: 6rem |
|
||||
| my-28 | margin-top: 7rem; margin-bottom: 7rem |
|
||||
| my-32 | margin-top: 8rem; margin-bottom: 8rem |
|
||||
| my-36 | margin-top: 9rem; margin-bottom: 9rem |
|
||||
| my-40 | margin-top: 10rem; margin-bottom: 10rem |
|
||||
| my-44 | margin-top: 11rem; margin-bottom: 11rem |
|
||||
| my-48 | margin-top: 12rem; margin-bottom: 12rem |
|
||||
| my-52 | margin-top: 13rem; margin-bottom: 13rem |
|
||||
| my-56 | margin-top: 14rem; margin-bottom: 14rem |
|
||||
| my-60 | margin-top: 15rem; margin-bottom: 15rem |
|
||||
| my-64 | margin-top: 16rem; margin-bottom: 16rem |
|
||||
| my-72 | margin-top: 18rem; margin-bottom: 18rem |
|
||||
| my-80 | margin-top: 20rem; margin-bottom: 20rem |
|
||||
| my-96 | margin-top: 24rem; margin-bottom: 24rem |
|
||||
| my-auto | margin-top: auto; margin-bottom: auto |
|
||||
| -my-px | margin-top: -0.0625rem; margin-bottom: -0.0625rem |
|
||||
| -my-0 | margin-top: 0; margin-bottom: 0 |
|
||||
| -my-none | margin-top: 0; margin-bottom: 0 |
|
||||
| -my-0\.5 | margin-top: -0.125rem; margin-bottom: -0.125rem |
|
||||
| -my-1 | margin-top: -0.25rem; margin-bottom: -0.25rem |
|
||||
| -my-1\.5 | margin-top: -0.375rem; margin-bottom: -0.375rem |
|
||||
| -my-2 | margin-top: -0.5rem; margin-bottom: -0.5rem |
|
||||
| -my-2\.5 | margin-top: -0.625rem; margin-bottom: -0.625rem |
|
||||
| -my-3 | margin-top: -0.75rem; margin-bottom: -0.75rem |
|
||||
| -my-3\.5 | margin-top: -0.875rem; margin-bottom: -0.875rem |
|
||||
| -my-4 | margin-top: -1rem; margin-bottom: -1rem |
|
||||
| -my-5 | margin-top: -1.25rem; margin-bottom: -1.25rem |
|
||||
| -my-6 | margin-top: -1.5rem; margin-bottom: -1.5rem |
|
||||
| -my-7 | margin-top: -1.75rem; margin-bottom: -1.75rem |
|
||||
| -my-8 | margin-top: -2rem; margin-bottom: -2rem |
|
||||
| -my-9 | margin-top: -2.25rem; margin-bottom: -2.25rem |
|
||||
| -my-10 | margin-top: -2.5rem; margin-bottom: -2.5rem |
|
||||
| -my-11 | margin-top: -2.75rem; margin-bottom: -2.75rem |
|
||||
| -my-12 | margin-top: -3rem; margin-bottom: -3rem |
|
||||
| -my-14 | margin-top: -3.5rem; margin-bottom: -3.5rem |
|
||||
| -my-16 | margin-top: -4rem; margin-bottom: -4rem |
|
||||
| -my-18 | margin-top: -4.5rem; margin-bottom: -4.5rem |
|
||||
| -my-20 | margin-top: -5rem; margin-bottom: -5rem |
|
||||
| -my-24 | margin-top: -6rem; margin-bottom: -6rem |
|
||||
| -my-28 | margin-top: -7rem; margin-bottom: -7rem |
|
||||
| -my-32 | margin-top: -8rem; margin-bottom: -8rem |
|
||||
| -my-36 | margin-top: -9rem; margin-bottom: -9rem |
|
||||
| -my-40 | margin-top: -10rem; margin-bottom: -10rem |
|
||||
| -my-44 | margin-top: -11rem; margin-bottom: -11rem |
|
||||
| -my-48 | margin-top: -12rem; margin-bottom: -12rem |
|
||||
| -my-52 | margin-top: -13rem; margin-bottom: -13rem |
|
||||
| -my-56 | margin-top: -14rem; margin-bottom: -14rem |
|
||||
| -my-60 | margin-top: -15rem; margin-bottom: -15rem |
|
||||
| -my-64 | margin-top: -16rem; margin-bottom: -16rem |
|
||||
| -my-72 | margin-top: -18rem; margin-bottom: -18rem |
|
||||
| -my-80 | margin-top: -20rem; margin-bottom: -20rem |
|
||||
| -my-96 | margin-top: -24rem; margin-bottom: -24rem |
|
||||
| mt-px | margin-top: 0.0625rem |
|
||||
| mt-0 | margin-top: 0 |
|
||||
| mt-none | margin-top: 0 |
|
||||
| mt-0\.5 | margin-top: 0.125rem |
|
||||
| mt-1 | margin-top: 0.25rem |
|
||||
| mt-1\.5 | margin-top: 0.375rem |
|
||||
| mt-2 | margin-top: 0.5rem |
|
||||
| mt-2\.5 | margin-top: 0.625rem |
|
||||
| mt-3 | margin-top: 0.75rem |
|
||||
| mt-3\.5 | margin-top: 0.875rem |
|
||||
| mt-4 | margin-top: 1rem |
|
||||
| mt-5 | margin-top: 1.25rem |
|
||||
| mt-6 | margin-top: 1.5rem |
|
||||
| mt-7 | margin-top: 1.75rem |
|
||||
| mt-8 | margin-top: 2rem |
|
||||
| mt-9 | margin-top: 2.25rem |
|
||||
| mt-10 | margin-top: 2.5rem |
|
||||
| mt-11 | margin-top: 2.75rem |
|
||||
| mt-12 | margin-top: 3rem |
|
||||
| mt-14 | margin-top: 3.5rem |
|
||||
| mt-16 | margin-top: 4rem |
|
||||
| mt-18 | margin-top: 4.5rem |
|
||||
| mt-20 | margin-top: 5rem |
|
||||
| mt-24 | margin-top: 6rem |
|
||||
| mt-28 | margin-top: 7rem |
|
||||
| mt-32 | margin-top: 8rem |
|
||||
| mt-36 | margin-top: 9rem |
|
||||
| mt-40 | margin-top: 10rem |
|
||||
| mt-44 | margin-top: 11rem |
|
||||
| mt-48 | margin-top: 12rem |
|
||||
| mt-52 | margin-top: 13rem |
|
||||
| mt-56 | margin-top: 14rem |
|
||||
| mt-60 | margin-top: 15rem |
|
||||
| mt-64 | margin-top: 16rem |
|
||||
| mt-72 | margin-top: 18rem |
|
||||
| mt-80 | margin-top: 20rem |
|
||||
| mt-96 | margin-top: 24rem |
|
||||
| -mt-px | margin-top: -0.0625rem |
|
||||
| -mt-0 | margin-top: 0 |
|
||||
| -mt-none | margin-top: 0 |
|
||||
| -mt-0\.5 | margin-top: -0.125rem |
|
||||
| -mt-1 | margin-top: -0.25rem |
|
||||
| -mt-1\.5 | margin-top: -0.375rem |
|
||||
| -mt-2 | margin-top: -0.5rem |
|
||||
| -mt-2\.5 | margin-top: -0.625rem |
|
||||
| -mt-3 | margin-top: -0.75rem |
|
||||
| -mt-3\.5 | margin-top: -0.875rem |
|
||||
| -mt-4 | margin-top: -1rem |
|
||||
| -mt-5 | margin-top: -1.25rem |
|
||||
| -mt-6 | margin-top: -1.5rem |
|
||||
| -mt-7 | margin-top: -1.75rem |
|
||||
| -mt-8 | margin-top: -2rem |
|
||||
| -mt-9 | margin-top: -2.25rem |
|
||||
| -mt-10 | margin-top: -2.5rem |
|
||||
| -mt-11 | margin-top: -2.75rem |
|
||||
| -mt-12 | margin-top: -3rem |
|
||||
| -mt-14 | margin-top: -3.5rem |
|
||||
| -mt-16 | margin-top: -4rem |
|
||||
| -mt-18 | margin-top: -4.5rem |
|
||||
| -mt-20 | margin-top: -5rem |
|
||||
| -mt-24 | margin-top: -6rem |
|
||||
| -mt-28 | margin-top: -7rem |
|
||||
| -mt-32 | margin-top: -8rem |
|
||||
| -mt-36 | margin-top: -9rem |
|
||||
| -mt-40 | margin-top: -10rem |
|
||||
| -mt-44 | margin-top: -11rem |
|
||||
| -mt-48 | margin-top: -12rem |
|
||||
| -mt-52 | margin-top: -13rem |
|
||||
| -mt-56 | margin-top: -14rem |
|
||||
| -mt-60 | margin-top: -15rem |
|
||||
| -mt-64 | margin-top: -16rem |
|
||||
| -mt-72 | margin-top: -18rem |
|
||||
| -mt-80 | margin-top: -20rem |
|
||||
| -mt-96 | margin-top: -24rem |
|
||||
| mr-px | margin-right: 0.0625rem |
|
||||
| mr-0 | margin-right: 0 |
|
||||
| mr-none | margin-right: 0 |
|
||||
| mr-0\.5 | margin-right: 0.125rem |
|
||||
| mr-1 | margin-right: 0.25rem |
|
||||
| mr-1\.5 | margin-right: 0.375rem |
|
||||
| mr-2 | margin-right: 0.5rem |
|
||||
| mr-2\.5 | margin-right: 0.625rem |
|
||||
| mr-3 | margin-right: 0.75rem |
|
||||
| mr-3\.5 | margin-right: 0.875rem |
|
||||
| mr-4 | margin-right: 1rem |
|
||||
| mr-5 | margin-right: 1.25rem |
|
||||
| mr-6 | margin-right: 1.5rem |
|
||||
| mr-7 | margin-right: 1.75rem |
|
||||
| mr-8 | margin-right: 2rem |
|
||||
| mr-9 | margin-right: 2.25rem |
|
||||
| mr-10 | margin-right: 2.5rem |
|
||||
| mr-11 | margin-right: 2.75rem |
|
||||
| mr-12 | margin-right: 3rem |
|
||||
| mr-14 | margin-right: 3.5rem |
|
||||
| mr-16 | margin-right: 4rem |
|
||||
| mr-18 | margin-right: 4.5rem |
|
||||
| mr-20 | margin-right: 5rem |
|
||||
| mr-24 | margin-right: 6rem |
|
||||
| mr-28 | margin-right: 7rem |
|
||||
| mr-32 | margin-right: 8rem |
|
||||
| mr-36 | margin-right: 9rem |
|
||||
| mr-40 | margin-right: 10rem |
|
||||
| mr-44 | margin-right: 11rem |
|
||||
| mr-48 | margin-right: 12rem |
|
||||
| mr-52 | margin-right: 13rem |
|
||||
| mr-56 | margin-right: 14rem |
|
||||
| mr-60 | margin-right: 15rem |
|
||||
| mr-64 | margin-right: 16rem |
|
||||
| mr-72 | margin-right: 18rem |
|
||||
| mr-80 | margin-right: 20rem |
|
||||
| mr-96 | margin-right: 24rem |
|
||||
| -mr-px | margin-right: -0.0625rem |
|
||||
| -mr-0 | margin-right: 0 |
|
||||
| -mr-none | margin-right: 0 |
|
||||
| -mr-0\.5 | margin-right: -0.125rem |
|
||||
| -mr-1 | margin-right: -0.25rem |
|
||||
| -mr-1\.5 | margin-right: -0.375rem |
|
||||
| -mr-2 | margin-right: -0.5rem |
|
||||
| -mr-2\.5 | margin-right: -0.625rem |
|
||||
| -mr-3 | margin-right: -0.75rem |
|
||||
| -mr-3\.5 | margin-right: -0.875rem |
|
||||
| -mr-4 | margin-right: -1rem |
|
||||
| -mr-5 | margin-right: -1.25rem |
|
||||
| -mr-6 | margin-right: -1.5rem |
|
||||
| -mr-7 | margin-right: -1.75rem |
|
||||
| -mr-8 | margin-right: -2rem |
|
||||
| -mr-9 | margin-right: -2.25rem |
|
||||
| -mr-10 | margin-right: -2.5rem |
|
||||
| -mr-11 | margin-right: -2.75rem |
|
||||
| -mr-12 | margin-right: -3rem |
|
||||
| -mr-14 | margin-right: -3.5rem |
|
||||
| -mr-16 | margin-right: -4rem |
|
||||
| -mr-18 | margin-right: -4.5rem |
|
||||
| -mr-20 | margin-right: -5rem |
|
||||
| -mr-24 | margin-right: -6rem |
|
||||
| -mr-28 | margin-right: -7rem |
|
||||
| -mr-32 | margin-right: -8rem |
|
||||
| -mr-36 | margin-right: -9rem |
|
||||
| -mr-40 | margin-right: -10rem |
|
||||
| -mr-44 | margin-right: -11rem |
|
||||
| -mr-48 | margin-right: -12rem |
|
||||
| -mr-52 | margin-right: -13rem |
|
||||
| -mr-56 | margin-right: -14rem |
|
||||
| -mr-60 | margin-right: -15rem |
|
||||
| -mr-64 | margin-right: -16rem |
|
||||
| -mr-72 | margin-right: -18rem |
|
||||
| -mr-80 | margin-right: -20rem |
|
||||
| -mr-96 | margin-right: -24rem |
|
||||
| mb-px | margin-bottom: 0.0625rem |
|
||||
| mb-0 | margin-bottom: 0 |
|
||||
| mb-none | margin-bottom: 0 |
|
||||
| mb-0\.5 | margin-bottom: 0.125rem |
|
||||
| mb-1 | margin-bottom: 0.25rem |
|
||||
| mb-1\.5 | margin-bottom: 0.375rem |
|
||||
| mb-2 | margin-bottom: 0.5rem |
|
||||
| mb-2\.5 | margin-bottom: 0.625rem |
|
||||
| mb-3 | margin-bottom: 0.75rem |
|
||||
| mb-3\.5 | margin-bottom: 0.875rem |
|
||||
| mb-4 | margin-bottom: 1rem |
|
||||
| mb-5 | margin-bottom: 1.25rem |
|
||||
| mb-6 | margin-bottom: 1.5rem |
|
||||
| mb-7 | margin-bottom: 1.75rem |
|
||||
| mb-8 | margin-bottom: 2rem |
|
||||
| mb-9 | margin-bottom: 2.25rem |
|
||||
| mb-10 | margin-bottom: 2.5rem |
|
||||
| mb-11 | margin-bottom: 2.75rem |
|
||||
| mb-12 | margin-bottom: 3rem |
|
||||
| mb-14 | margin-bottom: 3.5rem |
|
||||
| mb-16 | margin-bottom: 4rem |
|
||||
| mb-18 | margin-bottom: 4.5rem |
|
||||
| mb-20 | margin-bottom: 5rem |
|
||||
| mb-24 | margin-bottom: 6rem |
|
||||
| mb-28 | margin-bottom: 7rem |
|
||||
| mb-32 | margin-bottom: 8rem |
|
||||
| mb-36 | margin-bottom: 9rem |
|
||||
| mb-40 | margin-bottom: 10rem |
|
||||
| mb-44 | margin-bottom: 11rem |
|
||||
| mb-48 | margin-bottom: 12rem |
|
||||
| mb-52 | margin-bottom: 13rem |
|
||||
| mb-56 | margin-bottom: 14rem |
|
||||
| mb-60 | margin-bottom: 15rem |
|
||||
| mb-64 | margin-bottom: 16rem |
|
||||
| mb-72 | margin-bottom: 18rem |
|
||||
| mb-80 | margin-bottom: 20rem |
|
||||
| mb-96 | margin-bottom: 24rem |
|
||||
| -mb-px | margin-bottom: -0.0625rem |
|
||||
| -mb-0 | margin-bottom: 0 |
|
||||
| -mb-none | margin-bottom: 0 |
|
||||
| -mb-0\.5 | margin-bottom: -0.125rem |
|
||||
| -mb-1 | margin-bottom: -0.25rem |
|
||||
| -mb-1\.5 | margin-bottom: -0.375rem |
|
||||
| -mb-2 | margin-bottom: -0.5rem |
|
||||
| -mb-2\.5 | margin-bottom: -0.625rem |
|
||||
| -mb-3 | margin-bottom: -0.75rem |
|
||||
| -mb-3\.5 | margin-bottom: -0.875rem |
|
||||
| -mb-4 | margin-bottom: -1rem |
|
||||
| -mb-5 | margin-bottom: -1.25rem |
|
||||
| -mb-6 | margin-bottom: -1.5rem |
|
||||
| -mb-7 | margin-bottom: -1.75rem |
|
||||
| -mb-8 | margin-bottom: -2rem |
|
||||
| -mb-9 | margin-bottom: -2.25rem |
|
||||
| -mb-10 | margin-bottom: -2.5rem |
|
||||
| -mb-11 | margin-bottom: -2.75rem |
|
||||
| -mb-12 | margin-bottom: -3rem |
|
||||
| -mb-14 | margin-bottom: -3.5rem |
|
||||
| -mb-16 | margin-bottom: -4rem |
|
||||
| -mb-18 | margin-bottom: -4.5rem |
|
||||
| -mb-20 | margin-bottom: -5rem |
|
||||
| -mb-24 | margin-bottom: -6rem |
|
||||
| -mb-28 | margin-bottom: -7rem |
|
||||
| -mb-32 | margin-bottom: -8rem |
|
||||
| -mb-36 | margin-bottom: -9rem |
|
||||
| -mb-40 | margin-bottom: -10rem |
|
||||
| -mb-44 | margin-bottom: -11rem |
|
||||
| -mb-48 | margin-bottom: -12rem |
|
||||
| -mb-52 | margin-bottom: -13rem |
|
||||
| -mb-56 | margin-bottom: -14rem |
|
||||
| -mb-60 | margin-bottom: -15rem |
|
||||
| -mb-64 | margin-bottom: -16rem |
|
||||
| -mb-72 | margin-bottom: -18rem |
|
||||
| -mb-80 | margin-bottom: -20rem |
|
||||
| -mb-96 | margin-bottom: -24rem |
|
||||
| ml-px | margin-left: 0.0625rem |
|
||||
| ml-0 | margin-left: 0 |
|
||||
| ml-none | margin-left: 0 |
|
||||
| ml-0\.5 | margin-left: 0.125rem |
|
||||
| ml-1 | margin-left: 0.25rem |
|
||||
| ml-1\.5 | margin-left: 0.375rem |
|
||||
| ml-2 | margin-left: 0.5rem |
|
||||
| ml-2\.5 | margin-left: 0.625rem |
|
||||
| ml-3 | margin-left: 0.75rem |
|
||||
| ml-3\.5 | margin-left: 0.875rem |
|
||||
| ml-4 | margin-left: 1rem |
|
||||
| ml-5 | margin-left: 1.25rem |
|
||||
| ml-6 | margin-left: 1.5rem |
|
||||
| ml-7 | margin-left: 1.75rem |
|
||||
| ml-8 | margin-left: 2rem |
|
||||
| ml-9 | margin-left: 2.25rem |
|
||||
| ml-10 | margin-left: 2.5rem |
|
||||
| ml-11 | margin-left: 2.75rem |
|
||||
| ml-12 | margin-left: 3rem |
|
||||
| ml-14 | margin-left: 3.5rem |
|
||||
| ml-16 | margin-left: 4rem |
|
||||
| ml-18 | margin-left: 4.5rem |
|
||||
| ml-20 | margin-left: 5rem |
|
||||
| ml-24 | margin-left: 6rem |
|
||||
| ml-28 | margin-left: 7rem |
|
||||
| ml-32 | margin-left: 8rem |
|
||||
| ml-36 | margin-left: 9rem |
|
||||
| ml-40 | margin-left: 10rem |
|
||||
| ml-44 | margin-left: 11rem |
|
||||
| ml-48 | margin-left: 12rem |
|
||||
| ml-52 | margin-left: 13rem |
|
||||
| ml-56 | margin-left: 14rem |
|
||||
| ml-60 | margin-left: 15rem |
|
||||
| ml-64 | margin-left: 16rem |
|
||||
| ml-72 | margin-left: 18rem |
|
||||
| ml-80 | margin-left: 20rem |
|
||||
| ml-96 | margin-left: 24rem |
|
||||
| -ml-px | margin-left: -0.0625rem |
|
||||
| -ml-0 | margin-left: 0 |
|
||||
| -ml-none | margin-left: 0 |
|
||||
| -ml-0\.5 | margin-left: -0.125rem |
|
||||
| -ml-1 | margin-left: -0.25rem |
|
||||
| -ml-1\.5 | margin-left: -0.375rem |
|
||||
| -ml-2 | margin-left: -0.5rem |
|
||||
| -ml-2\.5 | margin-left: -0.625rem |
|
||||
| -ml-3 | margin-left: -0.75rem |
|
||||
| -ml-3\.5 | margin-left: -0.875rem |
|
||||
| -ml-4 | margin-left: -1rem |
|
||||
| -ml-5 | margin-left: -1.25rem |
|
||||
| -ml-6 | margin-left: -1.5rem |
|
||||
| -ml-7 | margin-left: -1.75rem |
|
||||
| -ml-8 | margin-left: -2rem |
|
||||
| -ml-9 | margin-left: -2.25rem |
|
||||
| -ml-10 | margin-left: -2.5rem |
|
||||
| -ml-11 | margin-left: -2.75rem |
|
||||
| -ml-12 | margin-left: -3rem |
|
||||
| -ml-14 | margin-left: -3.5rem |
|
||||
| -ml-16 | margin-left: -4rem |
|
||||
| -ml-18 | margin-left: -4.5rem |
|
||||
| -ml-20 | margin-left: -5rem |
|
||||
| -ml-24 | margin-left: -6rem |
|
||||
| -ml-28 | margin-left: -7rem |
|
||||
| -ml-32 | margin-left: -8rem |
|
||||
| -ml-36 | margin-left: -9rem |
|
||||
| -ml-40 | margin-left: -10rem |
|
||||
| -ml-44 | margin-left: -11rem |
|
||||
| -ml-48 | margin-left: -12rem |
|
||||
| -ml-52 | margin-left: -13rem |
|
||||
| -ml-56 | margin-left: -14rem |
|
||||
| -ml-60 | margin-left: -15rem |
|
||||
| -ml-64 | margin-left: -16rem |
|
||||
| -ml-72 | margin-left: -18rem |
|
||||
| -ml-80 | margin-left: -20rem |
|
||||
| -ml-96 | margin-left: -24rem |
|
||||
265
packages/amis-ui/scss/helper/spacing/_padding.md
Normal file
265
packages/amis-ui/scss/helper/spacing/_padding.md
Normal file
@ -0,0 +1,265 @@
|
||||
---
|
||||
title: Padding
|
||||
---
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| p-px | padding: 0.0625rem |
|
||||
| p-0 | padding: 0 |
|
||||
| p-none | padding: 0 |
|
||||
| p-0\.5 | padding: 0.125rem |
|
||||
| p-1 | padding: 0.25rem |
|
||||
| p-1\.5 | padding: 0.375rem |
|
||||
| p-2 | padding: 0.5rem |
|
||||
| p-2\.5 | padding: 0.625rem |
|
||||
| p-3 | padding: 0.75rem |
|
||||
| p-3\.5 | padding: 0.875rem |
|
||||
| p-4 | padding: 1rem |
|
||||
| p-5 | padding: 1.25rem |
|
||||
| p-6 | padding: 1.5rem |
|
||||
| p-7 | padding: 1.75rem |
|
||||
| p-8 | padding: 2rem |
|
||||
| p-9 | padding: 2.25rem |
|
||||
| p-10 | padding: 2.5rem |
|
||||
| p-11 | padding: 2.75rem |
|
||||
| p-12 | padding: 3rem |
|
||||
| p-14 | padding: 3.5rem |
|
||||
| p-16 | padding: 4rem |
|
||||
| p-18 | padding: 4.5rem |
|
||||
| p-20 | padding: 5rem |
|
||||
| p-24 | padding: 6rem |
|
||||
| p-28 | padding: 7rem |
|
||||
| p-32 | padding: 8rem |
|
||||
| p-36 | padding: 9rem |
|
||||
| p-40 | padding: 10rem |
|
||||
| p-44 | padding: 11rem |
|
||||
| p-48 | padding: 12rem |
|
||||
| p-52 | padding: 13rem |
|
||||
| p-56 | padding: 14rem |
|
||||
| p-60 | padding: 15rem |
|
||||
| p-64 | padding: 16rem |
|
||||
| p-72 | padding: 18rem |
|
||||
| p-80 | padding: 20rem |
|
||||
| p-96 | padding: 24rem |
|
||||
| px-px | padding-left: 0.0625rem; padding-right: 0.0625rem |
|
||||
| px-0 | padding-left: 0; padding-right: 0 |
|
||||
| px-none | padding-left: 0; padding-right: 0 |
|
||||
| px-0\.5 | padding-left: 0.125rem; padding-right: 0.125rem |
|
||||
| px-1 | padding-left: 0.25rem; padding-right: 0.25rem |
|
||||
| px-1\.5 | padding-left: 0.375rem; padding-right: 0.375rem |
|
||||
| px-2 | padding-left: 0.5rem; padding-right: 0.5rem |
|
||||
| px-2\.5 | padding-left: 0.625rem; padding-right: 0.625rem |
|
||||
| px-3 | padding-left: 0.75rem; padding-right: 0.75rem |
|
||||
| px-3\.5 | padding-left: 0.875rem; padding-right: 0.875rem |
|
||||
| px-4 | padding-left: 1rem; padding-right: 1rem |
|
||||
| px-5 | padding-left: 1.25rem; padding-right: 1.25rem |
|
||||
| px-6 | padding-left: 1.5rem; padding-right: 1.5rem |
|
||||
| px-7 | padding-left: 1.75rem; padding-right: 1.75rem |
|
||||
| px-8 | padding-left: 2rem; padding-right: 2rem |
|
||||
| px-9 | padding-left: 2.25rem; padding-right: 2.25rem |
|
||||
| px-10 | padding-left: 2.5rem; padding-right: 2.5rem |
|
||||
| px-11 | padding-left: 2.75rem; padding-right: 2.75rem |
|
||||
| px-12 | padding-left: 3rem; padding-right: 3rem |
|
||||
| px-14 | padding-left: 3.5rem; padding-right: 3.5rem |
|
||||
| px-16 | padding-left: 4rem; padding-right: 4rem |
|
||||
| px-18 | padding-left: 4.5rem; padding-right: 4.5rem |
|
||||
| px-20 | padding-left: 5rem; padding-right: 5rem |
|
||||
| px-24 | padding-left: 6rem; padding-right: 6rem |
|
||||
| px-28 | padding-left: 7rem; padding-right: 7rem |
|
||||
| px-32 | padding-left: 8rem; padding-right: 8rem |
|
||||
| px-36 | padding-left: 9rem; padding-right: 9rem |
|
||||
| px-40 | padding-left: 10rem; padding-right: 10rem |
|
||||
| px-44 | padding-left: 11rem; padding-right: 11rem |
|
||||
| px-48 | padding-left: 12rem; padding-right: 12rem |
|
||||
| px-52 | padding-left: 13rem; padding-right: 13rem |
|
||||
| px-56 | padding-left: 14rem; padding-right: 14rem |
|
||||
| px-60 | padding-left: 15rem; padding-right: 15rem |
|
||||
| px-64 | padding-left: 16rem; padding-right: 16rem |
|
||||
| px-72 | padding-left: 18rem; padding-right: 18rem |
|
||||
| px-80 | padding-left: 20rem; padding-right: 20rem |
|
||||
| px-96 | padding-left: 24rem; padding-right: 24rem |
|
||||
| py-px | padding-top: 0.0625rem; padding-bottom: 0.0625rem |
|
||||
| py-0 | padding-top: 0; padding-bottom: 0 |
|
||||
| py-none | padding-top: 0; padding-bottom: 0 |
|
||||
| py-0\.5 | padding-top: 0.125rem; padding-bottom: 0.125rem |
|
||||
| py-1 | padding-top: 0.25rem; padding-bottom: 0.25rem |
|
||||
| py-1\.5 | padding-top: 0.375rem; padding-bottom: 0.375rem |
|
||||
| py-2 | padding-top: 0.5rem; padding-bottom: 0.5rem |
|
||||
| py-2\.5 | padding-top: 0.625rem; padding-bottom: 0.625rem |
|
||||
| py-3 | padding-top: 0.75rem; padding-bottom: 0.75rem |
|
||||
| py-3\.5 | padding-top: 0.875rem; padding-bottom: 0.875rem |
|
||||
| py-4 | padding-top: 1rem; padding-bottom: 1rem |
|
||||
| py-5 | padding-top: 1.25rem; padding-bottom: 1.25rem |
|
||||
| py-6 | padding-top: 1.5rem; padding-bottom: 1.5rem |
|
||||
| py-7 | padding-top: 1.75rem; padding-bottom: 1.75rem |
|
||||
| py-8 | padding-top: 2rem; padding-bottom: 2rem |
|
||||
| py-9 | padding-top: 2.25rem; padding-bottom: 2.25rem |
|
||||
| py-10 | padding-top: 2.5rem; padding-bottom: 2.5rem |
|
||||
| py-11 | padding-top: 2.75rem; padding-bottom: 2.75rem |
|
||||
| py-12 | padding-top: 3rem; padding-bottom: 3rem |
|
||||
| py-14 | padding-top: 3.5rem; padding-bottom: 3.5rem |
|
||||
| py-16 | padding-top: 4rem; padding-bottom: 4rem |
|
||||
| py-18 | padding-top: 4.5rem; padding-bottom: 4.5rem |
|
||||
| py-20 | padding-top: 5rem; padding-bottom: 5rem |
|
||||
| py-24 | padding-top: 6rem; padding-bottom: 6rem |
|
||||
| py-28 | padding-top: 7rem; padding-bottom: 7rem |
|
||||
| py-32 | padding-top: 8rem; padding-bottom: 8rem |
|
||||
| py-36 | padding-top: 9rem; padding-bottom: 9rem |
|
||||
| py-40 | padding-top: 10rem; padding-bottom: 10rem |
|
||||
| py-44 | padding-top: 11rem; padding-bottom: 11rem |
|
||||
| py-48 | padding-top: 12rem; padding-bottom: 12rem |
|
||||
| py-52 | padding-top: 13rem; padding-bottom: 13rem |
|
||||
| py-56 | padding-top: 14rem; padding-bottom: 14rem |
|
||||
| py-60 | padding-top: 15rem; padding-bottom: 15rem |
|
||||
| py-64 | padding-top: 16rem; padding-bottom: 16rem |
|
||||
| py-72 | padding-top: 18rem; padding-bottom: 18rem |
|
||||
| py-80 | padding-top: 20rem; padding-bottom: 20rem |
|
||||
| py-96 | padding-top: 24rem; padding-bottom: 24rem |
|
||||
| pt-px | padding-top: 0.0625rem |
|
||||
| pt-0 | padding-top: 0 |
|
||||
| pt-none | padding-top: 0 |
|
||||
| pt-0\.5 | padding-top: 0.125rem |
|
||||
| pt-1 | padding-top: 0.25rem |
|
||||
| pt-1\.5 | padding-top: 0.375rem |
|
||||
| pt-2 | padding-top: 0.5rem |
|
||||
| pt-2\.5 | padding-top: 0.625rem |
|
||||
| pt-3 | padding-top: 0.75rem |
|
||||
| pt-3\.5 | padding-top: 0.875rem |
|
||||
| pt-4 | padding-top: 1rem |
|
||||
| pt-5 | padding-top: 1.25rem |
|
||||
| pt-6 | padding-top: 1.5rem |
|
||||
| pt-7 | padding-top: 1.75rem |
|
||||
| pt-8 | padding-top: 2rem |
|
||||
| pt-9 | padding-top: 2.25rem |
|
||||
| pt-10 | padding-top: 2.5rem |
|
||||
| pt-11 | padding-top: 2.75rem |
|
||||
| pt-12 | padding-top: 3rem |
|
||||
| pt-14 | padding-top: 3.5rem |
|
||||
| pt-16 | padding-top: 4rem |
|
||||
| pt-18 | padding-top: 4.5rem |
|
||||
| pt-20 | padding-top: 5rem |
|
||||
| pt-24 | padding-top: 6rem |
|
||||
| pt-28 | padding-top: 7rem |
|
||||
| pt-32 | padding-top: 8rem |
|
||||
| pt-36 | padding-top: 9rem |
|
||||
| pt-40 | padding-top: 10rem |
|
||||
| pt-44 | padding-top: 11rem |
|
||||
| pt-48 | padding-top: 12rem |
|
||||
| pt-52 | padding-top: 13rem |
|
||||
| pt-56 | padding-top: 14rem |
|
||||
| pt-60 | padding-top: 15rem |
|
||||
| pt-64 | padding-top: 16rem |
|
||||
| pt-72 | padding-top: 18rem |
|
||||
| pt-80 | padding-top: 20rem |
|
||||
| pt-96 | padding-top: 24rem |
|
||||
| pr-px | padding-right: 0.0625rem |
|
||||
| pr-0 | padding-right: 0 |
|
||||
| pr-none | padding-right: 0 |
|
||||
| pr-0\.5 | padding-right: 0.125rem |
|
||||
| pr-1 | padding-right: 0.25rem |
|
||||
| pr-1\.5 | padding-right: 0.375rem |
|
||||
| pr-2 | padding-right: 0.5rem |
|
||||
| pr-2\.5 | padding-right: 0.625rem |
|
||||
| pr-3 | padding-right: 0.75rem |
|
||||
| pr-3\.5 | padding-right: 0.875rem |
|
||||
| pr-4 | padding-right: 1rem |
|
||||
| pr-5 | padding-right: 1.25rem |
|
||||
| pr-6 | padding-right: 1.5rem |
|
||||
| pr-7 | padding-right: 1.75rem |
|
||||
| pr-8 | padding-right: 2rem |
|
||||
| pr-9 | padding-right: 2.25rem |
|
||||
| pr-10 | padding-right: 2.5rem |
|
||||
| pr-11 | padding-right: 2.75rem |
|
||||
| pr-12 | padding-right: 3rem |
|
||||
| pr-14 | padding-right: 3.5rem |
|
||||
| pr-16 | padding-right: 4rem |
|
||||
| pr-18 | padding-right: 4.5rem |
|
||||
| pr-20 | padding-right: 5rem |
|
||||
| pr-24 | padding-right: 6rem |
|
||||
| pr-28 | padding-right: 7rem |
|
||||
| pr-32 | padding-right: 8rem |
|
||||
| pr-36 | padding-right: 9rem |
|
||||
| pr-40 | padding-right: 10rem |
|
||||
| pr-44 | padding-right: 11rem |
|
||||
| pr-48 | padding-right: 12rem |
|
||||
| pr-52 | padding-right: 13rem |
|
||||
| pr-56 | padding-right: 14rem |
|
||||
| pr-60 | padding-right: 15rem |
|
||||
| pr-64 | padding-right: 16rem |
|
||||
| pr-72 | padding-right: 18rem |
|
||||
| pr-80 | padding-right: 20rem |
|
||||
| pr-96 | padding-right: 24rem |
|
||||
| pb-px | padding-bottom: 0.0625rem |
|
||||
| pb-0 | padding-bottom: 0 |
|
||||
| pb-none | padding-bottom: 0 |
|
||||
| pb-0\.5 | padding-bottom: 0.125rem |
|
||||
| pb-1 | padding-bottom: 0.25rem |
|
||||
| pb-1\.5 | padding-bottom: 0.375rem |
|
||||
| pb-2 | padding-bottom: 0.5rem |
|
||||
| pb-2\.5 | padding-bottom: 0.625rem |
|
||||
| pb-3 | padding-bottom: 0.75rem |
|
||||
| pb-3\.5 | padding-bottom: 0.875rem |
|
||||
| pb-4 | padding-bottom: 1rem |
|
||||
| pb-5 | padding-bottom: 1.25rem |
|
||||
| pb-6 | padding-bottom: 1.5rem |
|
||||
| pb-7 | padding-bottom: 1.75rem |
|
||||
| pb-8 | padding-bottom: 2rem |
|
||||
| pb-9 | padding-bottom: 2.25rem |
|
||||
| pb-10 | padding-bottom: 2.5rem |
|
||||
| pb-11 | padding-bottom: 2.75rem |
|
||||
| pb-12 | padding-bottom: 3rem |
|
||||
| pb-14 | padding-bottom: 3.5rem |
|
||||
| pb-16 | padding-bottom: 4rem |
|
||||
| pb-18 | padding-bottom: 4.5rem |
|
||||
| pb-20 | padding-bottom: 5rem |
|
||||
| pb-24 | padding-bottom: 6rem |
|
||||
| pb-28 | padding-bottom: 7rem |
|
||||
| pb-32 | padding-bottom: 8rem |
|
||||
| pb-36 | padding-bottom: 9rem |
|
||||
| pb-40 | padding-bottom: 10rem |
|
||||
| pb-44 | padding-bottom: 11rem |
|
||||
| pb-48 | padding-bottom: 12rem |
|
||||
| pb-52 | padding-bottom: 13rem |
|
||||
| pb-56 | padding-bottom: 14rem |
|
||||
| pb-60 | padding-bottom: 15rem |
|
||||
| pb-64 | padding-bottom: 16rem |
|
||||
| pb-72 | padding-bottom: 18rem |
|
||||
| pb-80 | padding-bottom: 20rem |
|
||||
| pb-96 | padding-bottom: 24rem |
|
||||
| pl-px | padding-left: 0.0625rem |
|
||||
| pl-0 | padding-left: 0 |
|
||||
| pl-none | padding-left: 0 |
|
||||
| pl-0\.5 | padding-left: 0.125rem |
|
||||
| pl-1 | padding-left: 0.25rem |
|
||||
| pl-1\.5 | padding-left: 0.375rem |
|
||||
| pl-2 | padding-left: 0.5rem |
|
||||
| pl-2\.5 | padding-left: 0.625rem |
|
||||
| pl-3 | padding-left: 0.75rem |
|
||||
| pl-3\.5 | padding-left: 0.875rem |
|
||||
| pl-4 | padding-left: 1rem |
|
||||
| pl-5 | padding-left: 1.25rem |
|
||||
| pl-6 | padding-left: 1.5rem |
|
||||
| pl-7 | padding-left: 1.75rem |
|
||||
| pl-8 | padding-left: 2rem |
|
||||
| pl-9 | padding-left: 2.25rem |
|
||||
| pl-10 | padding-left: 2.5rem |
|
||||
| pl-11 | padding-left: 2.75rem |
|
||||
| pl-12 | padding-left: 3rem |
|
||||
| pl-14 | padding-left: 3.5rem |
|
||||
| pl-16 | padding-left: 4rem |
|
||||
| pl-18 | padding-left: 4.5rem |
|
||||
| pl-20 | padding-left: 5rem |
|
||||
| pl-24 | padding-left: 6rem |
|
||||
| pl-28 | padding-left: 7rem |
|
||||
| pl-32 | padding-left: 8rem |
|
||||
| pl-36 | padding-left: 9rem |
|
||||
| pl-40 | padding-left: 10rem |
|
||||
| pl-44 | padding-left: 11rem |
|
||||
| pl-48 | padding-left: 12rem |
|
||||
| pl-52 | padding-left: 13rem |
|
||||
| pl-56 | padding-left: 14rem |
|
||||
| pl-60 | padding-left: 15rem |
|
||||
| pl-64 | padding-left: 16rem |
|
||||
| pl-72 | padding-left: 18rem |
|
||||
| pl-80 | padding-left: 20rem |
|
||||
| pl-96 | padding-left: 24rem |
|
||||
155
packages/amis-ui/scss/helper/spacing/_space-between.md
Normal file
155
packages/amis-ui/scss/helper/spacing/_space-between.md
Normal file
@ -0,0 +1,155 @@
|
||||
---
|
||||
title: Space Between
|
||||
---
|
||||
|
||||
|
||||
| Class | Properties |
|
||||
| ----------- | ------------------------ |
|
||||
| space-x-px | margin-left: 0.0625rem |
|
||||
| space-x-px.space-x-reverse | margin-right: 0.0625rem |
|
||||
| space-x-0 | margin-left: 0 |
|
||||
| space-x-0.space-x-reverse | margin-right: 0 |
|
||||
| space-x-none | margin-left: 0 |
|
||||
| space-x-none.space-x-reverse | margin-right: 0 |
|
||||
| space-x-0\.5 | margin-left: 0.125rem |
|
||||
| space-x-0\.5.space-x-reverse | margin-right: 0.125rem |
|
||||
| space-x-1 | margin-left: 0.25rem |
|
||||
| space-x-1.space-x-reverse | margin-right: 0.25rem |
|
||||
| space-x-1\.5 | margin-left: 0.375rem |
|
||||
| space-x-1\.5.space-x-reverse | margin-right: 0.375rem |
|
||||
| space-x-2 | margin-left: 0.5rem |
|
||||
| space-x-2.space-x-reverse | margin-right: 0.5rem |
|
||||
| space-x-2\.5 | margin-left: 0.625rem |
|
||||
| space-x-2\.5.space-x-reverse | margin-right: 0.625rem |
|
||||
| space-x-3 | margin-left: 0.75rem |
|
||||
| space-x-3.space-x-reverse | margin-right: 0.75rem |
|
||||
| space-x-3\.5 | margin-left: 0.875rem |
|
||||
| space-x-3\.5.space-x-reverse | margin-right: 0.875rem |
|
||||
| space-x-4 | margin-left: 1rem |
|
||||
| space-x-4.space-x-reverse | margin-right: 1rem |
|
||||
| space-x-5 | margin-left: 1.25rem |
|
||||
| space-x-5.space-x-reverse | margin-right: 1.25rem |
|
||||
| space-x-6 | margin-left: 1.5rem |
|
||||
| space-x-6.space-x-reverse | margin-right: 1.5rem |
|
||||
| space-x-7 | margin-left: 1.75rem |
|
||||
| space-x-7.space-x-reverse | margin-right: 1.75rem |
|
||||
| space-x-8 | margin-left: 2rem |
|
||||
| space-x-8.space-x-reverse | margin-right: 2rem |
|
||||
| space-x-9 | margin-left: 2.25rem |
|
||||
| space-x-9.space-x-reverse | margin-right: 2.25rem |
|
||||
| space-x-10 | margin-left: 2.5rem |
|
||||
| space-x-10.space-x-reverse | margin-right: 2.5rem |
|
||||
| space-x-11 | margin-left: 2.75rem |
|
||||
| space-x-11.space-x-reverse | margin-right: 2.75rem |
|
||||
| space-x-12 | margin-left: 3rem |
|
||||
| space-x-12.space-x-reverse | margin-right: 3rem |
|
||||
| space-x-14 | margin-left: 3.5rem |
|
||||
| space-x-14.space-x-reverse | margin-right: 3.5rem |
|
||||
| space-x-16 | margin-left: 4rem |
|
||||
| space-x-16.space-x-reverse | margin-right: 4rem |
|
||||
| space-x-18 | margin-left: 4.5rem |
|
||||
| space-x-18.space-x-reverse | margin-right: 4.5rem |
|
||||
| space-x-20 | margin-left: 5rem |
|
||||
| space-x-20.space-x-reverse | margin-right: 5rem |
|
||||
| space-x-24 | margin-left: 6rem |
|
||||
| space-x-24.space-x-reverse | margin-right: 6rem |
|
||||
| space-x-28 | margin-left: 7rem |
|
||||
| space-x-28.space-x-reverse | margin-right: 7rem |
|
||||
| space-x-32 | margin-left: 8rem |
|
||||
| space-x-32.space-x-reverse | margin-right: 8rem |
|
||||
| space-x-36 | margin-left: 9rem |
|
||||
| space-x-36.space-x-reverse | margin-right: 9rem |
|
||||
| space-x-40 | margin-left: 10rem |
|
||||
| space-x-40.space-x-reverse | margin-right: 10rem |
|
||||
| space-x-44 | margin-left: 11rem |
|
||||
| space-x-44.space-x-reverse | margin-right: 11rem |
|
||||
| space-x-48 | margin-left: 12rem |
|
||||
| space-x-48.space-x-reverse | margin-right: 12rem |
|
||||
| space-x-52 | margin-left: 13rem |
|
||||
| space-x-52.space-x-reverse | margin-right: 13rem |
|
||||
| space-x-56 | margin-left: 14rem |
|
||||
| space-x-56.space-x-reverse | margin-right: 14rem |
|
||||
| space-x-60 | margin-left: 15rem |
|
||||
| space-x-60.space-x-reverse | margin-right: 15rem |
|
||||
| space-x-64 | margin-left: 16rem |
|
||||
| space-x-64.space-x-reverse | margin-right: 16rem |
|
||||
| space-x-72 | margin-left: 18rem |
|
||||
| space-x-72.space-x-reverse | margin-right: 18rem |
|
||||
| space-x-80 | margin-left: 20rem |
|
||||
| space-x-80.space-x-reverse | margin-right: 20rem |
|
||||
| space-x-96 | margin-left: 24rem |
|
||||
| space-x-96.space-x-reverse | margin-right: 24rem |
|
||||
| space-y-px | margin-top: 0.0625rem |
|
||||
| space-y-px.space-y-reverse | margin-bottom: 0.0625rem |
|
||||
| space-y-0 | margin-top: 0 |
|
||||
| space-y-0.space-y-reverse | margin-bottom: 0 |
|
||||
| space-y-none | margin-top: 0 |
|
||||
| space-y-none.space-y-reverse | margin-bottom: 0 |
|
||||
| space-y-0\.5 | margin-top: 0.125rem |
|
||||
| space-y-0\.5.space-y-reverse | margin-bottom: 0.125rem |
|
||||
| space-y-1 | margin-top: 0.25rem |
|
||||
| space-y-1.space-y-reverse | margin-bottom: 0.25rem |
|
||||
| space-y-1\.5 | margin-top: 0.375rem |
|
||||
| space-y-1\.5.space-y-reverse | margin-bottom: 0.375rem |
|
||||
| space-y-2 | margin-top: 0.5rem |
|
||||
| space-y-2.space-y-reverse | margin-bottom: 0.5rem |
|
||||
| space-y-2\.5 | margin-top: 0.625rem |
|
||||
| space-y-2\.5.space-y-reverse | margin-bottom: 0.625rem |
|
||||
| space-y-3 | margin-top: 0.75rem |
|
||||
| space-y-3.space-y-reverse | margin-bottom: 0.75rem |
|
||||
| space-y-3\.5 | margin-top: 0.875rem |
|
||||
| space-y-3\.5.space-y-reverse | margin-bottom: 0.875rem |
|
||||
| space-y-4 | margin-top: 1rem |
|
||||
| space-y-4.space-y-reverse | margin-bottom: 1rem |
|
||||
| space-y-5 | margin-top: 1.25rem |
|
||||
| space-y-5.space-y-reverse | margin-bottom: 1.25rem |
|
||||
| space-y-6 | margin-top: 1.5rem |
|
||||
| space-y-6.space-y-reverse | margin-bottom: 1.5rem |
|
||||
| space-y-7 | margin-top: 1.75rem |
|
||||
| space-y-7.space-y-reverse | margin-bottom: 1.75rem |
|
||||
| space-y-8 | margin-top: 2rem |
|
||||
| space-y-8.space-y-reverse | margin-bottom: 2rem |
|
||||
| space-y-9 | margin-top: 2.25rem |
|
||||
| space-y-9.space-y-reverse | margin-bottom: 2.25rem |
|
||||
| space-y-10 | margin-top: 2.5rem |
|
||||
| space-y-10.space-y-reverse | margin-bottom: 2.5rem |
|
||||
| space-y-11 | margin-top: 2.75rem |
|
||||
| space-y-11.space-y-reverse | margin-bottom: 2.75rem |
|
||||
| space-y-12 | margin-top: 3rem |
|
||||
| space-y-12.space-y-reverse | margin-bottom: 3rem |
|
||||
| space-y-14 | margin-top: 3.5rem |
|
||||
| space-y-14.space-y-reverse | margin-bottom: 3.5rem |
|
||||
| space-y-16 | margin-top: 4rem |
|
||||
| space-y-16.space-y-reverse | margin-bottom: 4rem |
|
||||
| space-y-18 | margin-top: 4.5rem |
|
||||
| space-y-18.space-y-reverse | margin-bottom: 4.5rem |
|
||||
| space-y-20 | margin-top: 5rem |
|
||||
| space-y-20.space-y-reverse | margin-bottom: 5rem |
|
||||
| space-y-24 | margin-top: 6rem |
|
||||
| space-y-24.space-y-reverse | margin-bottom: 6rem |
|
||||
| space-y-28 | margin-top: 7rem |
|
||||
| space-y-28.space-y-reverse | margin-bottom: 7rem |
|
||||
| space-y-32 | margin-top: 8rem |
|
||||
| space-y-32.space-y-reverse | margin-bottom: 8rem |
|
||||
| space-y-36 | margin-top: 9rem |
|
||||
| space-y-36.space-y-reverse | margin-bottom: 9rem |
|
||||
| space-y-40 | margin-top: 10rem |
|
||||
| space-y-40.space-y-reverse | margin-bottom: 10rem |
|
||||
| space-y-44 | margin-top: 11rem |
|
||||
| space-y-44.space-y-reverse | margin-bottom: 11rem |
|
||||
| space-y-48 | margin-top: 12rem |
|
||||
| space-y-48.space-y-reverse | margin-bottom: 12rem |
|
||||
| space-y-52 | margin-top: 13rem |
|
||||
| space-y-52.space-y-reverse | margin-bottom: 13rem |
|
||||
| space-y-56 | margin-top: 14rem |
|
||||
| space-y-56.space-y-reverse | margin-bottom: 14rem |
|
||||
| space-y-60 | margin-top: 15rem |
|
||||
| space-y-60.space-y-reverse | margin-bottom: 15rem |
|
||||
| space-y-64 | margin-top: 16rem |
|
||||
| space-y-64.space-y-reverse | margin-bottom: 16rem |
|
||||
| space-y-72 | margin-top: 18rem |
|
||||
| space-y-72.space-y-reverse | margin-bottom: 18rem |
|
||||
| space-y-80 | margin-top: 20rem |
|
||||
| space-y-80.space-y-reverse | margin-bottom: 20rem |
|
||||
| space-y-96 | margin-top: 24rem |
|
||||
| space-y-96.space-y-reverse | margin-bottom: 24rem |
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user