test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-30 10:59:42 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'upstream/master'

Browse Source 
* upstream/master: (35 commits)
  文档占位
  补充 css
  补充文档
  修复 Hls 视频不能播放的问题
  补充 badge
  Update LICENSE
  修复 picker 不能全选的问题
  优化样式
  可以设置 reset 为 undefined
  select clearable 逻辑优化
  select clearable 逻辑优化
  文档补充
  修复 tree 在空选项的时候不能创建节点问题 & 循环引用导致的默认 alert confirm 没有生效问题
  优化预览样式
  css 文档
  文档
  不丑姑娘文档
  补充样式
  样式调整
  补充文档
  ...
This commit is contained in:
wuduoyi 2020-12-10 17:00:54 +08:00
commit 31867cea8d
104 changed files with 8333 additions and 355 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

194
LICENSE
View File

@ -1,13 +1,201 @@
Copyright Baidu
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright [yyyy] [name of copyright owner]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
limitations under the License.

6
README.md
View File

@ -1,5 +1,11 @@
# amis
![build](https://api.travis-ci.org/baidu/amis.svg?branch=master)
![license](https://img.shields.io/github/license/baidu/amis.svg)
![version](https://img.shields.io/npm/v/amis)
![language](https://img.shields.io/github/languages/top/baidu/amis)
![last](https://img.shields.io/github/last-commit/baidu/amis.svg)
前端低代码框架，通过 JSON 配置就能生成各种后台页面，极大减少开发成本，甚至可以不需要了解前端。
目前在百度广泛用于内部平台的前端开发，已有 100+ 部门使用，创建了 3w+ 页面。

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

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

13
docs/concepts/style.md
View File

@ -10,6 +10,11 @@ order: 18
amis 中有大量的功能类 class 可以使用，即可以用在 schema 中，也可以用在自定义组件开发中，掌握这些 class, 几乎可以不用写样式。
<div class="bg-pink-500 text-light shadow p-4 rounded-md hover:bg-pink-600">
<div class="text-lg b-b p-b-sm">注意</div>
<div class="p-t-xs">CSS辅助类样式做了全新的升级，请前往<a class="text-light underline hover:text-pink-300" href="/style">新版样式</a>查看使用文档。旧版本可以继续，但将不再做迭代更新。</div>
</div>
## 基本使用
例如，下面这个例子，我们内容区渲染了两个按钮，但是可以看到，两个按钮紧贴在一起，并不是很美观，于是我们想添加一定的间隔
@ -17,7 +22,7 @@ amis 中有大量的功能类 class 可以使用，即可以用在 schema 中，
```schema:height="100" scope="body"
[
{
"type": "action",
"type": "button",
"label": "按钮1",
"actionType": "dialog",
"dialog": {
@ -26,7 +31,7 @@ amis 中有大量的功能类 class 可以使用，即可以用在 schema 中，
}
},
{
"type": "action",
"type": "button",
"label": "按钮2",
"actionType": "dialog",
"dialog": {
@ -44,7 +49,7 @@ amis 中有大量的功能类 class 可以使用，即可以用在 schema 中，
```schema:height="100" scope="body"
[
{
"type": "action",
"type": "button",
"label": "按钮1",
"actionType": "dialog",
"dialog": {
@ -53,7 +58,7 @@ amis 中有大量的功能类 class 可以使用，即可以用在 schema 中，
}
},
{
"type": "action",
"type": "button",
"label": "按钮2",
"className": "m-l",
"actionType": "dialog",

69
docs/css-utilities/index.md Normal file
View File

@ -0,0 +1,69 @@
---
title: 快速开始
---
amis 参考 [tailwindcss](https://tailwindcss.com/) 加入了大量的帮助类 css，掌握这些用法，完全不用手写 css 了。
理念来自于[tailwindcss](https://tailwindcss.com/), 不过我们做了一定的筛选，把一些不常用的用法剔除了，另外响应式方面只做了 pc 端和手机端，其他的设备并没有支持。这个文件未压缩版本大概是 800K 左右，比官方的要小很多。目前这个文件没有和主题文件合并在一起，用户可以选择性加载。
```html
<link rel="stylesheet" href="amis/lib/utilities.css" />
```
引入这个 css 后，就可以像下面那样直接用 html 标签加类名的方式来设定样式了。
```html
<div
class="p-6 m-auto max-w-sm m-x-auto bg-white rounded-xl shadow-md flex items-center space-x-4"
>
<div class="flex-shrink-0">
<svg
class="h-12 w-12"
viewBox="0 0 40 40"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a">
<stop stop-color="#2397B3" offset="0%"></stop>
<stop stop-color="#13577E" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b">
<stop stop-color="#73DFF2" offset="0%"></stop>
<stop stop-color="#47B1EB" offset="100%"></stop>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<path
d="M28.872 22.096c.084.622.128 1.258.128 1.904 0 7.732-6.268 14-14 14-2.176 0-4.236-.496-6.073-1.382l-6.022 2.007c-1.564.521-3.051-.966-2.53-2.53l2.007-6.022A13.944 13.944 0 0 1 1 24c0-7.331 5.635-13.346 12.81-13.95A9.967 9.967 0 0 0 13 14c0 5.523 4.477 10 10 10a9.955 9.955 0 0 0 5.872-1.904z"
fill="url(#a)"
transform="translate(1 1)"
></path>
<path
d="M35.618 20.073l2.007 6.022c.521 1.564-.966 3.051-2.53 2.53l-6.022-2.007A13.944 13.944 0 0 1 23 28c-7.732 0-14-6.268-14-14S15.268 0 23 0s14 6.268 14 14c0 2.176-.496 4.236-1.382 6.073z"
fill="url(#b)"
transform="translate(1 1)"
></path>
<path
d="M18 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM24 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM30 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
fill="#FFF"
></path>
</g>
</svg>
</div>
<div>
<div class="text-xl font-medium text-black">ChitChat</div>
<p class="text-gray-500">You have a new message!</p>
</div>
</div>
```
比如这个栗子：
- 通过 `flex` `flex-shrink-0` 来设置布局方式。
- 通过 `bg-blue-100` `bg-white` 之类的类名设置背景色。
- 通过 `shadow-md` 设置投影。
- 通过 `rounded-xl` 设置圆角。
- 通过 `text-xl`、`font-medium` 设置字体大小粗细。
- 等等。。
具体用法请查看相关章节的文档。

13
docs/css-utilities/responsive-design.md Normal file
View File

@ -0,0 +1,13 @@
---
title: 响应式设计
---
响应式设计目前只支持 pc 端和手机端，其他设备目前不支持，貌似也没必要支持。当什么前缀都不加时，就是给所有视图模式添加样式，包括移动端和 pc 端。如果你在 css 类名前面再加个 `m:` 前缀，就是专门给手机端设置样式。如果你在类名前面加个 `pc:` 前缀，则是给桌面端设置样式。
```schema:height="100" scope="body"
{
"type": "tpl",
"className": "text-blue-500 m:text-red-500",
"tpl": "这段文字在 pc 端是蓝色的，在移动端则是是红色的。"
}
```

142
docs/css-utilities/state.md Normal file
View File

@ -0,0 +1,142 @@
---
title: 状态样式
---
除了给默认状态设置样式外，还支持几个特定状态的样式设置比如：hover（鼠标悬停）、active（当前选中）、focus（当前聚焦）或者 disabled（当前不可用）。
```html
<button
class="Button
rounded-xl text-light
bg-pink-400 border-pink-600
hover:bg-pink-500 hover:border-pink-800
active:bg-pink-600 active:border-pink-900"
>
按钮示例
</button>
<button
class="Button m-l-16
rounded-xl text-light
bg-pink-500 border-pink-800
hover:bg-pink-500 hover:border-pink-800"
>
悬停态
</button>
<button
class="Button m-l-xs
rounded-xl text-light
bg-pink-600 border-pink-900
hover:bg-pink-600 hover:border-pink-900"
>
按下态
</button>
<button
class="Button m-l-xs
rounded-xl text-light
disabled:text-dark disabled:bg-pink-200 disabled:border-pink-400"
disabled
>
禁用态
</button>
```
## Hover
在 css 类名前面添加 `hover:` 表示在 hover 时启用这个样式比如。
```html
<button
class="Button
text-blue-500
hover:text-red-500"
>
蓝色按钮，hover 红色
</button>
```
## Group-Hover
当 hover 某个元素的时候，你想要给子元素设置不同的样式，需要两步操作。
1. 给容器添加 `group` 类名。
2. 给子元素添加 `group-hover:` 前缀形式的样式类。
```html
<div
class="group p-4 border border-solid border-dark
hover:bg-dark"
>
<p class="group-hover:text-red-500">整体hover 红色</p>
<p class="group-hover:text-green-500">整体hover 绿色</p>
</div>
```
## Focus
当要给元素设置「聚焦态」样式时，类名添加 `focus:` 前缀。
```html
<button
class="Button
text-blue-500
focus:border-dark
focus:text-red-500"
>
蓝色按钮，focus 红色
</button>
```
## Active
当要给元素设置「选中态」样式时，类名添加 `active:` 前缀。
```html
<button
class="Button
text-blue-500
active:border-dark
active:text-red-500
is-active"
>
蓝色按钮，active 红色
</button>
```
## Disabled
当要给元素设置「禁用态」样式时，类名添加 `disabled:` 前缀。
```html
<button
disabled
class="Button
text-blue-500
disabled:border-dark
disabled:text-red-500"
>
蓝色按钮，disabled 红色
</button>
```
## 结合响应式设计一起？
那就先加「设备前缀」，再加「状态前缀」。如：`pc:hover:bg-pink-500`、`m:hover:bg-blue-500`
```html
<button
class="Button
rounded-xl text-light
pc:bg-pink-400 pc:border-pink-600
pc:hover:bg-pink-500 pc:hover:border-pink-800
m:bg-blue-400 m:border-blue-600
m:hover:bg-blue-500 m:hover:border-blue-800
"
>
按钮示例
</button>
```

68
docs/types/api.md
View File

@ -647,7 +647,72 @@ const schema = {
返回的数据是否替换掉当前的数据，默认为 `false`（即追加），设置为`true`就是完全替换当前数据。
### 属性表
## 自动刷新
凡是拉取类接口，默认都会开启自动刷新，比如 form 配置 initApi: `/api/initForm?tpl=${tpl}`。这个接口会在 form 初始化的请求。当接口中有参数时，amis 会监控这个接口的实际结果是否有变化，假如这个时候 form 里面有个字段名为 tpl 的表单项，它的值发生变化，这个 form 的 initApi 又会请求一次。
```schema:scope="body"
{
"type": "form",
"mode": "horizontal",
"title": "监听表单内部的修改",
"initApi": "/api/mock2/form/initData?tpl=${tpl}",
"actions": [],
"controls": [
{
"label": "数据模板",
"type": "select",
"labelClassName": "text-muted",
"name": "tpl",
"value": "tpl1",
"inline": true,
"options": [
{
"label": "模板1",
"value": "tpl1"
},
{
"label": "模板2",
"value": "tpl2"
},
{
"label": "模板3",
"value": "tpl3"
}
],
"description": "<span class=\"text-danger\">请修改这里看效果</span>"
},
{
"label": "名称",
"type": "static",
"labelClassName": "text-muted",
"name": "name"
},
{
"label": "作者",
"type": "static",
"labelClassName": "text-muted",
"name": "author"
},
{
"label": "请求时间",
"type": "static-datetime",
"labelClassName": "text-muted",
"format": "YYYY-MM-DD HH:mm:ss",
"name": "date"
}
]
}
```
这个功能是自动开启的，直接配置 api 地址（`/api/xxx?xx=${xxx}`），或者对象形式配置 `{method: 'get', url: '/api/xxx?xx=${xxx}'}` 都会自动启动这个功能。如果想要关闭这个功能，有两种方式。
1. 把依赖的数据写在对象形式的 data 里面比如 `{method: 'get', url: '/api/xxx', data: {'xx': "${xxx}"}}`。
2. 对象形式添加 `autoRefresh: false` 属性。
【重点】利用这个 feature 结合 `sendOn` 接口发送条件，可以做到接口的串行加载。比如，接口 2 的地址上写上接口 1 会返回的某个字段，然后配置接口 2 的发送条件为这个字段必须存在时。这样接口 2 就会等接口 1 完了才会加载。
## 属性表
| 字段名 | 说明 | 类型 | 备注 |
| -------------- | ------------ | ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@ -663,3 +728,4 @@ const schema = {
| adaptor | 接收适配器 | 字符串 | 如果接口返回不符合要求，可以通过配置一个适配器来处理成 amis 需要的。同样支持 Function 或者 字符串函数体格式 |
| replaceData | 替换当前数据 | 布尔 | 返回的数据是否替换掉当前的数据，默认为 `false`，即：`追加`，设置成 `true` 就是完全替换。 |
| responseType | 返回类型 | 字符串 | 如果是下载需要设置为 'blob' |
| autoRefresh | 是否自动刷新 | 布尔 | 配置是否需要自动刷新接口。 |

58
examples/components/App.tsx
View File

@ -24,6 +24,8 @@ import Select from '../../src/components/Select';
import DocSearch from './DocSearch';
import Doc, {docs} from './Doc';
import Example, {examples} from './Example';
import CssDocs, {cssDocs} from './CssDocs';
import CSSDocs from './CssDocs';
let ExamplePathPrefix = '/examples';
let DocPathPrefix = '/docs';
@ -35,6 +37,10 @@ if (process.env.NODE_ENV === 'production') {
ContextPath = '/amis';
}
export function getContextPath() {
return ContextPath;
}
const themes = [
{
label: '默认主题',
@ -141,9 +147,11 @@ export class App extends React.PureComponent {
item.disabled = true;
});
document.querySelector(
`link[title=${this.state.theme.value}]`
).disabled = false;
document
.querySelectorAll(`link[title="${this.state.theme.value}"]`)
.forEach(item => {
item.disabled = false;
});
if (this.state.theme.value === 'dark') {
document.querySelector('body').classList.add('dark');
@ -155,13 +163,17 @@ export class App extends React.PureComponent {
const props = this.props;
if (preState.theme.value !== this.state.theme.value) {
document.querySelector(
`link[title=${preState.theme.value}]`
).disabled = true;
document
.querySelectorAll(`link[title="${preState.theme.value}"]`)
.forEach(item => {
item.disabled = true;
});
document.querySelector(
`link[title=${this.state.theme.value}]`
).disabled = false;
document
.querySelectorAll(`link[title="${this.state.theme.value}"]`)
.forEach(item => {
item.disabled = false;
});
}
if (props.location.pathname !== preProps.location.pathname) {
@ -219,6 +231,12 @@ export class App extends React.PureComponent {
<Link to={`${ContextPath}/examples`} activeClassName="is-active">
示例
</Link>
<Link
to={`${ContextPath}/css-utilities`}
activeClassName="is-active"
>
样式
</Link>
<a
href="https://github.com/fex-team/amis-editor-demo"
target="_blank"
@ -280,15 +298,14 @@ export class App extends React.PureComponent {
<div className={`${theme.ns}Layout-searchBar hidden-xs hidden-sm`}>
<DocSearch theme={theme} />
<a
className="gh-icon"
href="https://github.com/baidu/amis"
target="_blank"
>
<i className="fa fa-github" />
</a>
</div>
<a
className="gh-icon"
href="https://github.com/baidu/amis"
target="_blank"
>
<i className="fa fa-github" />
</a>
</>
);
}
@ -462,6 +479,10 @@ export default function entry({pathPrefix}) {
from={`${ContextPath}/examples`}
to={`${ContextPath}/examples/pages/simple`}
/>
<Redirect
from={`${ContextPath}/css-utilities`}
to={`${ContextPath}/css-utilities/index`}
/>
<Route path={`${ContextPath}/docs`} component={Doc}>
{navigations2route(DocPathPrefix, docs)}
@ -469,6 +490,9 @@ export default function entry({pathPrefix}) {
<Route path={`${ContextPath}/examples`} component={Example}>
{navigations2route(ExamplePathPrefix, examples)}
</Route>
<Route path={`${ContextPath}/css-utilities`} component={CSSDocs}>
{navigations2route(ExamplePathPrefix, cssDocs)}
</Route>
</Route>
<Route path="*" component={NotFound} />

794
examples/components/CssDocs.tsx Normal file
View File

@ -0,0 +1,794 @@
import React from 'react';
import makeMarkdownRenderer from './MdRenderer';
export const cssDocs = [
{
label: '开始',
children: [
{
label: '快速开始',
path: '/css-utilities/index',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../docs/css-utilities/index.md'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: '响应式设计',
path: '/css-utilities/responsive-design',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../docs/css-utilities/responsive-design.md'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: '状态样式',
path: '/css-utilities/state',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../docs/css-utilities/state.md'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
}
]
},
{
// prefix: ({classnames: cx}) => <li className={cx('AsideNav-divider')} />,
label: 'Layout',
children: [
{
label: 'Box Sizing',
path: '/css-utilities/layout/box-sizing',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/layout/_box-sizing.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Display',
path: '/css-utilities/layout/display',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/layout/_display.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Floats',
path: '/css-utilities/layout/floats',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/layout/_float.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Clear',
path: '/css-utilities/layout/clear',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/layout/_clear.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Overflow',
path: '/css-utilities/layout/overflow',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/layout/_overflow.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Position',
path: '/css-utilities/layout/position',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/layout/_position.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Top / Right / Bottom / Left',
path: '/css-utilities/layout/top-right-bottom-left',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/layout/_top-right-bottom-left.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Visibility',
path: '/css-utilities/layout/visibility',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/layout/_visibility.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Z-Index',
path: '/css-utilities/layout/z-index',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/layout/_z-index.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
}
]
},
{
label: 'Flexbox',
children: [
{
label: 'Flex Direction',
path: '/css-utilities/flexbox/direction',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/flex/_direction.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Flex Wrap',
path: '/css-utilities/flexbox/wrap',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/flex/_wrap.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Flex',
path: '/css-utilities/flexbox/flex',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/flex/_flex.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Flex Grow',
path: '/css-utilities/flexbox/grow',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/flex/_grow.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Flex Shrink',
path: '/css-utilities/flexbox/shrink',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/flex/_shrink.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Flex Order',
path: '/css-utilities/flexbox/order',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/flex/_order.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
}
]
},
{
label: 'Grid',
children: [
{
label: 'Grid Template Columns',
path: '/css-utilities/grid/columns',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/grid/_columns.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Grid Column Start / End',
path: '/css-utilities/grid/column-start-end',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/grid/_column-start-end.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Grid Template Rows',
path: '/css-utilities/grid/rows',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/grid/_rows.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Grid Row Start / End',
path: '/css-utilities/grid/row-start-end',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/grid/_row-start-end.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Grid Auto Flow',
path: '/css-utilities/grid/auto-flow',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/grid/_auto-flow.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Grid Auto Columns',
path: '/css-utilities/grid/auto-columns',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/grid/_auto-columns.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Grid Auto Rows',
path: '/css-utilities/grid/auto-rows',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/grid/_auto-rows.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Gap',
path: '/css-utilities/grid/gap',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/grid/_gap.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
}
]
},
{
label: 'Box Alignment',
children: [
{
label: 'Justify Content',
path: '/css-utilities/box-alignment/justify-content',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/box-alignment/_justify-content.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Justify Items',
path: '/css-utilities/box-alignment/justify-items',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/box-alignment/_justify-items.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Justify Self',
path: '/css-utilities/box-alignment/justify-self',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/box-alignment/_justify-self.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Align Content',
path: '/css-utilities/box-alignment/align-content',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/box-alignment/_align-content.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Align Items',
path: '/css-utilities/box-alignment/align-items',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/box-alignment/_align-items.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Align Self',
path: '/css-utilities/box-alignment/align-self',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/box-alignment/_align-self.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Place Content',
path: '/css-utilities/box-alignment/place-content',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/box-alignment/_place-content.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Place Items',
path: '/css-utilities/box-alignment/place-items',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/box-alignment/_place-items.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Place Self',
path: '/css-utilities/box-alignment/place-self',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/box-alignment/_place-self.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
}
]
},
{
label: 'Spacing',
children: [
{
label: 'Padding',
path: '/css-utilities/spacing/padding',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/spacing/_padding.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Margin',
path: '/css-utilities/spacing/margin',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/spacing/_margin.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Space Between',
path: '/css-utilities/spacing/space-between',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/spacing/_space-between.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
}
]
},
{
label: 'Sizing',
children: [
{
label: 'Width',
path: '/css-utilities/sizing/width',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/sizing/_width.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Height',
path: '/css-utilities/sizing/height',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/sizing/_height.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
}
]
},
{
label: 'Typography',
children: [
{
label: 'Font Size',
path: '/css-utilities/typography/font-size',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/typography/_font-size.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Font css-utilities',
path: '/css-utilities/typography/font-style',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/typography/_font-style.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Font Weight',
path: '/css-utilities/typography/font-weight',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/typography/_font-weight.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Letter Spacing',
path: '/css-utilities/typography/letter-spacing',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/typography/_letter-spacing.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Line Height',
path: '/css-utilities/typography/line-height',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/typography/_line-height.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'List Style Type',
path: '/css-utilities/typography/list-style-type',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/typography/_list-style-type.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Text Alignment',
path: '/css-utilities/typography/text-align',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/typography/_text-align.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Text Color',
path: '/css-utilities/typography/text-color',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/typography/_text-color.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Text Decoration',
path: '/css-utilities/typography/text-decoration',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/typography/_text-decoration.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Text Transform',
path: '/css-utilities/typography/text-transform',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/typography/_text-transform.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Vertical Alignment',
path: '/css-utilities/typography/vertical-align',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/typography/_vertical-align.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Whitespace',
path: '/css-utilities/typography/whitespace',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/typography/_whitespace.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Word Break',
path: '/css-utilities/typography/word-break',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/typography/_word-break.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
}
]
},
{
label: 'Backgrounds',
children: [
{
label: 'Background Color',
path: '/css-utilities/background/background-color',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/background/_background-color.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
}
]
},
{
label: 'BORDERS',
children: [
{
label: 'Border Radius',
path: '/css-utilities/border/border-radius',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/border/_border-radius.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Border Width',
path: '/css-utilities/border/border-width',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/border/_border-width.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Border Color',
path: '/css-utilities/border/border-color',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/border/_border-color.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Border Style',
path: '/css-utilities/border/border-style',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/border/_border-style.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
}
]
},
{
label: 'Effect',
children: [
{
label: 'Box Shadow',
path: '/css-utilities/effect/box-shadow',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/effect/_box-shadow.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
},
{
label: 'Opacity',
path: '/css-utilities/effect/opacity',
getComponent: (location: any, cb: any) =>
(require as any)(
['../../scss/utilities/effect/_opacity.scss'],
(doc: any) => {
cb(null, makeMarkdownRenderer(doc));
}
)
}
]
}
];
export default class CSSDocs extends React.PureComponent<any> {
componentDidMount() {
this.props.setNavigations(cssDocs);
}
componentDidUpdate() {
this.props.setNavigations(cssDocs);
}
render() {
return (
<>
{React.cloneElement(this.props.children as any, {
...(this.props.children as any).props,
theme: this.props.theme,
classPrefix: this.props.classPrefix,
locale: this.props.locale,
viewMode: this.props.viewMode,
offScreen: this.props.offScreen
})}
</>
);
}
}

7
examples/components/DocSearch.jsx
View File

@ -120,10 +120,13 @@ export default class DocSearch extends React.Component {
const ns = this.props.theme.ns;
return (
<>
<div className={`${ns}TextControl-input Doc-search`}>
{/* <div className={`${ns}TextControl-input Doc-search`}>
<Icon icon="search" className="icon" />
<input readOnly placeholder={'搜索...'} onClick={this.onOpen} />
</div>
</div> */}
<a onClick={this.onOpen}>
<Icon icon="search" className="icon" />
</a>
<Drawer
className="Doc-searchDrawer"

95
examples/components/MdRenderer.tsx
View File

@ -1,7 +1,7 @@
/* eslint-disable no-unused-vars */
import React from 'react';
import ReactDOM from 'react-dom';
import {render} from '../../src/index';
import {getTheme, render} from '../../src/index';
import axios from 'axios';
import TitleBar from '../../src/components/TitleBar';
import LazyComponent from '../../src/components/LazyComponent';
@ -11,56 +11,29 @@ import NestedLinks from '../../src/components/AsideNav';
import {Portal} from 'react-overlays';
import classnames from 'classnames';
import {Link} from 'react-router';
import Play from './Play';
class CodePreview extends React.Component {
class CodePreview extends React.Component<any> {
state = {
PlayGround: null
};
componentDidMount() {
require(['./Play'], component =>
this.setState({
PlayGround: component.default
}));
}
render() {
const {container, setAsideFolded, setHeaderVisible, ...rest} = this.props;
let height = this.props.height;
return <Play {...rest} vertical />;
}
}
const PlayGround = this.state.PlayGround;
// 不要放在 .markdown-body 下面，因为样式会干扰，复写又麻烦，所以通过 Overlay 渲染到同级
function eachDom(dom: HTMLElement, iterator: (dom: HTMLElement) => void) {
if (!dom) {
return;
}
if (this.props.viewMode === 'mobile') {
// 移动端下高度不能太低
if (height < 500) {
height = 500;
}
}
return (
<div>
<span style={{display: 'block', height: height}} ref="span" />
{PlayGround ? (
<Overlay
container={container}
target={() => this.refs.span}
placement="bottom"
show
>
<PopOver
theme={(rest as any).theme}
offset={{x: 0, y: -height}}
style={{height}}
className=":MDPreview-shcema-preview-popover"
>
<div className="MDPreview-schema-preview">
<PlayGround {...rest} vertical />
</div>
</PopOver>
</Overlay>
) : null}
</div>
);
iterator(dom);
if (dom.children && dom.children.length) {
[].slice.call(dom.children).forEach(dom => eachDom(dom, iterator));
}
}
@ -76,6 +49,7 @@ class Preview extends React.Component {
componentDidMount() {
this.renderSchema();
this.fixHtmlPreview();
if (location.hash && location.hash.length > 1) {
// 禁用自动跳转
@ -92,6 +66,8 @@ class Preview extends React.Component {
componentDidUpdate() {
this.renderSchema();
this.fixHtmlPreview();
}
componentWillUnmount() {
@ -129,21 +105,30 @@ class Preview extends React.Component {
let dom = document.createElement('div');
let height = props.height ? parseInt(props.height, 10) : 200;
if (this.props.viewMode === 'mobile') {
// 移动端下高度不能太低
if (height < 500) {
height = 500;
}
}
dom.setAttribute('class', 'doc-play-ground');
dom.setAttribute('style', `height: ${height}px;`);
script.parentNode.replaceChild(dom, script);
// dom.setAttribute('style', `min-height: ${height}px;`);
const origin = script.parentNode;
origin.parentNode.replaceChild(dom, origin);
this.doms.push(dom);
ReactDOM.unstable_renderSubtreeIntoContainer(
this,
<LazyComponent
{...this.props}
height={height}
container={() => ReactDOM.findDOMNode(this)}
component={CodePreview}
code={script.innerText}
scope={props.scope}
unMountOnHidden
height={height}
placeholder="加载中，请稍后。。。"
/>,
dom
@ -151,10 +136,30 @@ class Preview extends React.Component {
}
}
fixHtmlPreview() {
const htmlPreviews = document.querySelectorAll('.amis-doc>.preview');
if (!htmlPreviews && !htmlPreviews.length) {
return;
}
const ns = getTheme((this.props as any).theme)?.classPrefix;
htmlPreviews.forEach(dom => {
eachDom(dom as HTMLElement, dom => {
if (typeof dom.className !== 'string') {
return;
}
dom.className = dom.className.replace(
/(^|\s)([A-Z])/g,
'$1' + ns + '$2'
);
});
});
}
render() {
return (
<div className="MDPreview">
<div className="markdown-body" ref={this.divRef}>
<div className="markdown" ref={this.divRef}>
Doc
</div>
</div>

18
examples/components/Play.jsx
View File

@ -354,6 +354,7 @@ export default class PlayGround extends React.Component {
// };
renderEditor() {
const {theme} = this.props;
return (
<CodeEditor
value={this.state.schemaCode}
@ -361,25 +362,20 @@ export default class PlayGround extends React.Component {
// editorFactory={this.editorFactory}
editorDidMount={this.editorDidMount}
language="json"
editorTheme={theme === 'dark' ? 'vs-dark' : 'vs'}
/>
);
}
render() {
const {vertical} = this.props;
const {vertical, height} = this.props;
if (vertical) {
return (
<div className="vbox">
<div className="row-row">
<div className="cell pos-rlt">
<div className="scroll-y h-full pos-abt w-full b-b">
{this.renderPreview()}
</div>
</div>
</div>
<div className="row-row b-t" style={{height: 200}}>
<div className="cell">{this.renderEditor()}</div>
<div className="Playgroud">
<div style={{minHeight: height}} className="Playgroud-preview">
{this.renderPreview()}
</div>
<div className="Playgroud-code">{this.renderEditor()}</div>
</div>
);
}

5
examples/components/Style/index.tsx Normal file
View File

@ -0,0 +1,5 @@
import React from 'react';
export default function () {
return <p>Todo</p>;
}

47
examples/doc.css
View File

@ -5,6 +5,10 @@
format('woff');
}
.markdown {
padding: 25px 45px 25px;
}
.markdown-body {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
@ -18,7 +22,6 @@
min-width: 200px;
/* max-width: 980px; */
/* margin: 0 auto; */
padding: 25px 45px 25px;
}
.anchor {
@ -110,7 +113,7 @@
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}
.markdown-body a:not(.btn) {
/* .markdown-body a:not(.btn) {
color: #4078c0;
text-decoration: none;
}
@ -119,7 +122,7 @@
.markdown-body a:active:not(.btn) {
color: #4078c0;
text-decoration: underline;
}
} */
.markdown-body hr {
height: 0;
@ -724,11 +727,16 @@
}
.doc-play-ground {
border: 1px solid #ddd;
min-height: 200px;
height: auto;
position: relative;
width: 100%;
overflow: hidden;
margin: 20px 0;
}
.doc-play-ground > .visibility-sensor {
position: relative;
width: 100%;
height: 100%;
}
.doc-play-ground .nav-tabs {
@ -758,6 +766,29 @@
margin-bottom: 15px;
}
.amis-doc pre {
margin-top: 15px;
.amis-doc {
margin: 20px 0;
}
.amis-doc > .preview {
padding-top: 3rem;
padding-bottom: 3rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
overflow: hidden;
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
background-color: #dbeafe;
}
body.dark .amis-doc > .preview {
background: #191c22;
color: #fff;
}
.amis-doc > pre {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0.75rem;
border-bottom-right-radius: 0.75rem;
}

109
examples/index.html
View File

@ -1,64 +1,55 @@
<!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="./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="font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="animate.css/animate.css" />
<link rel="stylesheet" href="prismjs/themes/prism.css" />
<!--DEPENDENCIES_INJECT_PLACEHOLDER-->
<link rel="stylesheet" href="./doc.css" />
<link rel="stylesheet" title="default" href="../scss/themes/default.scss" />
<link
rel="stylesheet"
title="cxd"
disabled
href="../scss/themes/cxd.scss"
/>
<link
rel="stylesheet"
title="dark"
disabled
href="../scss/themes/dark.scss"
/>
<link rel="stylesheet" href="./style.scss" />
<style>
.app-wrapper {
position: relative;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="root" class="app-wrapper"></div>
<script src="./mod.js"></script>
<script type="text/javascript">
var _hmt = _hmt || [];
<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="./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="font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="animate.css/animate.css" />
<link rel="stylesheet" href="prismjs/themes/prism.css" />
<!--DEPENDENCIES_INJECT_PLACEHOLDER-->
<link rel="stylesheet" href="./doc.css" />
<link rel="stylesheet" title="default" href="../scss/themes/default.scss" />
<link rel="stylesheet" title="cxd" disabled href="../scss/themes/cxd.scss" />
<link rel="stylesheet" title="dark" disabled href="../scss/themes/dark.scss" />
// 百度统计
(function () {
var hm = document.createElement('script');
hm.src = 'https://hm.baidu.com/hm.js?1f80f2c9dbe21dc3af239cf9eee90f1f';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(hm, s);
})();
<link rel="stylesheet" href="../scss/utilities.scss" />
<link rel="stylesheet" href="./style.scss" />
<style>
.app-wrapper {
position: relative;
width: 100%;
height: 100%;
}
</style>
</head>
/* @require ./index.jsx 标记为同步依赖，提前加载 */
amis.require(['./index.jsx'], function (app) {
var initialState = {};
app.bootstrap(document.getElementById('root'), initialState);
});
</script>
</body>
</html>
<body>
<div id="root" class="app-wrapper"></div>
<script src="./mod.js"></script>
<script type="text/javascript">
var _hmt = _hmt || [];
// 百度统计
(function () {
var hm = document.createElement('script');
hm.src = 'https://hm.baidu.com/hm.js?1f80f2c9dbe21dc3af239cf9eee90f1f';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(hm, s);
})();
/* @require ./index.jsx 标记为同步依赖，提前加载 */
amis.require(['./index.jsx'], function (app) {
var initialState = {};
app.bootstrap(document.getElementById('root'), initialState);
});
</script>
</body>
</html>

4
examples/mobile.html
View File

@ -12,6 +12,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<link rel="stylesheet" href="font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="animate.css/animate.css" />
<!--DEPENDENCIES_INJECT_PLACEHOLDER-->
<link rel="stylesheet" title="default" href="../scss/themes/default.scss" />
<link
rel="stylesheet"
@ -25,6 +26,7 @@
disabled
href="../scss/themes/dark.scss"
/>
<link rel="stylesheet" href="../scss/utilities.scss" />
<style>
.app-wrapper {
position: relative;
@ -54,7 +56,7 @@
];
const theme = themes[localStorage.getItem('themeIndex') || 0];
// mobile 下先禁掉所有外链避免影响
document.querySelectorAll('link').forEach(item => {
document.querySelectorAll('link[title]').forEach(item => {
item.disabled = true;
});
document.querySelector(`link[title=${theme.value}]`).disabled = false;

2409
examples/static/iconfont.css
View File

File diff suppressed because one or more lines are too long

167
examples/style.scss
View File

@ -7,15 +7,19 @@ body {
&.dark {
background-color: #333538 !important;
pre {
color: #fff;
}
.markdown-body {
color: #fff;
}
}
}
a {
text-decoration: none !important;
}
// a {
// text-decoration: none !important;
// }
.page-play,
.page-edit {
@ -60,33 +64,39 @@ a {
}
}
.MDPreview {
flex: 1 auto;
overflow: auto;
width: 100%;
position: relative;
// .MDPreview {
// flex: 1 auto;
// overflow: auto;
// width: 100%;
// position: relative;
&-shcema-preview-popover {
box-shadow: none !important;
margin-top: -1px !important;
padding: 0 45px !important;
left: 0 !important;
width: 100% !important;
// max-width: 980px !important;
z-index: 1 !important;
background: transparent !important;
border: none !important;
}
// &-shcema-preview-popover {
// box-shadow: none !important;
// margin-top: -1px !important;
// padding: 0 45px !important;
// left: 0 !important;
// width: 100% !important;
// // max-width: 980px !important;
// z-index: 1 !important;
// background: transparent !important;
// border: none !important;
// }
&-schema-preview {
border: 1px solid #ddd;
// background: rgb(240, 243, 244);
position: relative;
height: 100%;
width: 100%;
overflow: auto;
}
}
// &-schema-preview {
// border: 1px solid #ddd;
// background: $body-bg;
// // background: rgb(240, 243, 244);
// position: relative;
// height: 100%;
// width: 100%;
// // overflow: auto;
// }
// }
// body.dark .MDPreview-schema-preview {
// background: #191c22;
// color: #fff;
// }
// .view-code {
// position: fixed;
@ -126,18 +136,18 @@ a {
box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);
}
.gh-icon {
position: fixed;
right: 15px;
top: 15px;
font-size: 22px;
padding: 0 10px;
color: #333;
// .gh-icon {
// position: fixed;
// right: 15px;
// top: 15px;
// font-size: 22px;
// padding: 0 10px;
// color: #333;
&:hover {
color: #333;
}
}
// &:hover {
// color: #333;
// }
// }
}
&-brandBar,
@ -187,7 +197,6 @@ a {
&-headerBar {
height: 64px;
padding-right: 20px;
&-links {
height: 64px;
@ -200,10 +209,13 @@ a {
color: #333;
padding: 0px 22px;
font-weight: 500;
text-decoration: none;
&:hover,
&.is-active {
color: #108cee;
position: relative;
text-decoration: none;
&::before {
content: '';
@ -219,18 +231,43 @@ a {
}
&-searchBar {
width: 120px;
width: 55px;
align-self: center;
padding-left: 10px;
.Doc-search {
margin-top: 15px;
border: 0;
> a {
cursor: pointer;
color: #666;
> .icon-search {
margin-right: 8px;
top: 3px;
> svg {
width: 14px;
height: 14px;
top: 2px;
}
> i {
font-size: 18px;
}
&:hover {
color: #333;
}
& + a {
margin-left: 10px;
}
}
// .Doc-search {
// margin-top: 15px;
// border: 0;
// > .icon-search {
// margin-right: 8px;
// top: 3px;
// }
// }
&::before {
left: 0;
}
@ -477,10 +514,6 @@ a {
}
.markdown-body {
> *:first-child {
margin-top: 36px !important;
}
> h1,
> h2 {
border-top: 1px solid #e0e7ec;
@ -910,7 +943,7 @@ a {
}
}
.dark {
body.dark {
.search-result {
background-color: #333538;
}
@ -934,4 +967,34 @@ a {
display: block;
margin: 0 auto;
border-radius: 30px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.Playgroud {
border: 1px solid #ddd;
background: $body-bg;
body.dark & {
background: #191c22;
color: #fff;
}
&-preview {
border-bottom: 1px solid #ddd;
position: relative;
display: flex;
align-items: stretch;
flex-direction: column;
> div {
flex: 1;
}
}
&-code {
flex-shrink: 0;
height: 200px;
}
}

58
fis-conf.js
View File

@ -5,6 +5,7 @@ const path = require('path');
const fs = require('fs');
const package = require('./package.json');
const parserMarkdown = require('./scripts/md-parser');
const parserCodeMarkdown = require('./scripts/code-md-parser');
fis.get('project.ignore').push('public/**', 'npm/**', 'gh-pages/**');
// 配置只编译哪些文件。
@ -31,7 +32,8 @@ Resource.extend({
fis.set('project.files', [
'schema.json',
'scss/**.scss',
'/scss/utilities.scss',
'/scss/themes/*.scss',
'/examples/*.html',
'/examples/*.tpl',
'/examples/static/*.png',
@ -81,7 +83,32 @@ fis.match('/src/icons/**.svg', {
});
fis.match('_*.scss', {
release: false
parser: [
parserCodeMarkdown,
function (contents, file) {
return contents.replace(
/\bhref=\\('|")(.+?)\\\1/g,
function (_, quota, link) {
if (/\.md($|#)/.test(link) && !/^https?\:/.test(link)) {
let parts = link.split('#');
parts[0] = parts[0].replace('.md', '');
if (parts[0][0] !== '/') {
parts[0] = path
.resolve(path.dirname(file.subpath), parts[0])
.replace(/^\/docs/, '');
}
return 'href=\\' + quota + parts.join('#') + '\\' + quota;
}
return _;
}
);
}
],
isMod: true,
rExt: '.js'
});
fis.match('/node_modules/**.js', {
@ -271,7 +298,32 @@ if (fis.project.currentMedia() === 'publish') {
});
publishEnv.match('_*.scss', {
release: false
parser: [
parserCodeMarkdown,
function (contents, file) {
return contents.replace(
/\bhref=\\('|")(.+?)\\\1/g,
function (_, quota, link) {
if (/\.md($|#)/.test(link) && !/^https?\:/.test(link)) {
let parts = link.split('#');
parts[0] = parts[0].replace('.md', '');
if (parts[0][0] !== '/') {
parts[0] = path
.resolve(path.dirname(file.subpath), parts[0])
.replace(/^\/docs/, '/amis');
}
return 'href=\\' + quota + parts.join('#') + '\\' + quota;
}
return _;
}
);
}
],
isMod: true,
rExt: '.js'
});
publishEnv.match('*', {

6
mock/server.conf
View File

@ -1,7 +1,9 @@
rewrite ^\/(?:examples|docs)\/[a-z0-9\-_\/]+$ /examples/index.html
rewrite ^\/(?:examples|docs|css-utilities)(?:\/[a-z0-9\-_\/]+)?$ /examples/index.html
rewrite ^\/play$ /examples/index.html
rewrite ^\/edit$ /examples/index.html
rewrite ^\/api\/ /mock/index.js
rewrite ^\/cxd /examples/cxd.html
rewrite ^\/cxd /examples/cxd.html
redirect ^\/$ /docs/index

2
package.json
View File

@ -113,7 +113,7 @@
"@types/react-json-tree": "^0.6.6",
"@types/react-onclickoutside": "^6.0.2",
"@types/react-overlays": "^0.8.4",
"@types/react-router": "^4.0.16",
"@types/react-router": "^3.0.24",
"@types/react-select": "^1.0.59",
"@types/react-test-renderer": "^16.8.1",
"@types/react-transition-group": "^2.0.6",

13
scripts/NodeParser/IntersectionNodeParser.ts
View File

@ -12,14 +12,11 @@ export class IntersectionNodeParser extends BaseIntersectionNodeParser {
protected readonly childParser: NodeParser;
public constructor(typeChecker: ts.TypeChecker, childNodeParser: NodeParser) {
super(typeChecker, childNodeParser);
super(typeChecker as any, childNodeParser);
this.childParser = childNodeParser;
}
public createType(
node: ts.IntersectionTypeNode,
context: Context
): BaseType | undefined {
public createType(node: any, context: Context): BaseType | undefined {
// 这两个只能用 allOf 来了，提取不了。
const shouldBeReference = (type: any) =>
['SchemaObject', 'FormControlSchema'].includes(
@ -30,12 +27,12 @@ export class IntersectionNodeParser extends BaseIntersectionNodeParser {
// 跟 SchemaObject and 一般都有问题，改成 allOf 不要支持 additional props false 了
if (matched) {
const types: BaseType[] = node.types
.map(type => this.childParser.createType(type, context)!)
.filter(item => item);
.map((type: any) => this.childParser.createType(type as any, context)!)
.filter((item: any) => item);
return new IntersectionType(types);
}
return super.createType(node, context);
return super.createType(node as any, context);
}
}

2
scripts/build-schemas.ts
View File

@ -189,7 +189,7 @@ function hackIt(generator: any) {
replaceNodeParser(
chainNodeParser.nodeParsers,
IntersectionNodeParser,
new MyIntersectionNodeParser(typeChecker, chainNodeParser)
new MyIntersectionNodeParser(typeChecker as any, chainNodeParser) as any
);
}

11
scripts/code-md-parser.js Normal file
View File

@ -0,0 +1,11 @@
const parserMarkdown = require('./md-parser');
module.exports = function (content, file) {
const markdowns = [];
content.replace(/\/\*\!markdown\n([\s\S]+?)\*\//g, function (_, md) {
markdowns.push(md.trim());
});
return parserMarkdown(markdowns.join('\n\n'), file);
};

26
scripts/md-parser.js
View File

@ -145,29 +145,31 @@ module.exports = function (content, file) {
setting[parts[0]] = parts[1] ? decodeURIComponent(parts[1]) : '';
if (parts[0] === 'height') {
setting.height =
parseInt(setting.height, 10) + 200 /*编辑器的高度*/;
setting.height = parseInt(setting.height, 10) /*编辑器的高度*/;
attr = attr.replace(item, `height="${setting.height}"`);
}
});
// placeholder[index] = `<iframe class="doc-iframe" width="100%" height="${setting.height || 200}px" frameBorder="0" src="/play?code=${encodeURIComponent(code)}&scope=${encodeURIComponent(setting.scope)}"></iframe>`;
if (lang === 'html') {
if (~code.indexOf('<html')) {
if (~code.indexOf('<html') || ~code.indexOf('<link')) {
return _;
}
placeholder[
index
] = `<div class="amis-doc"><div class="preview">${code}</div><pre><code class="lang-html">${prism.highlight(
code,
] = `<!--amis-preview-start--><div class="amis-doc"><div class="preview">${code}</div><pre><code class="lang-html">${prism.highlight(
code
.replace(/"data:(\w+\/\w+);.*?"/g, '"data:$1; ..."')
.replace(/<svg([^>]*)>[\s\S]*?<\/svg>/g, '<svg$1>...</svg>')
.replace(/class="([^"]*?)\.\.\.([^"]*?)"/g, 'class="$1..."'),
prism.languages[lang],
lang
)}</code></pre></div>`;
)}</code></pre></div><!--amis-preview-end-->`;
} else {
placeholder[
index
] = `<div class="amis-preview" style="height: ${setting.height}px"><script type="text/schema" ${attr}>${code}</script></div>`;
] = `<!--amis-preview-start--><div class="amis-preview" style="min-height: ${setting.height}px"><script type="text/schema" ${attr}>${code}</script></div><!--amis-preview-end-->`;
}
return `[[${index++}]]`;
@ -180,7 +182,15 @@ module.exports = function (content, file) {
content = fis.compile.partial(content, file, 'html');
// + `\n\n<div class="m-t-lg b-l b-info b-3x wrapper bg-light dk">文档内容有误？欢迎大家一起来编写，文档地址：<i class="fa fa-github"></i><a href="https://github.com/baidu/amis/tree/master${file.subpath}">${file.subpath}</a>。</div>`;
info.html = content;
info.html =
'<div class="markdown-body">' +
content.replace(
/<\!\-\-amis\-preview\-(start|end)\-\-\>/g,
function (_, type) {
return type === 'start' ? '</div>' : '<div class="markdown-body">';
}
) +
'</div>';
info.toc = toc;
return 'module.exports = ' + JSON.stringify(info, null, 2) + ';';

57
scss/_functions.scss
View File

@ -40,3 +40,60 @@
@return $pixels / $context * 1rem;
}
@function tint($color, $intensity) {
$r: red($color);
$g: green($color);
$b: blue($color);
@return rgb(
$r + (255 - $r) * $intensity,
$g + (255 - $g) * $intensity,
$b + (255 - $b) * $intensity
);
}
@function shade($color, $intensity) {
$r: red($color);
$g: green($color);
$b: blue($color);
@return rgb($r * $intensity, $g * $intensity, $b * $intensity);
}
// 判断对象是否是 map
@function is-map($var) {
@return type-of($var) == 'map';
}
@function str-replace($string, $search, $replace: '') {
$str: #{'' + $string};
$index: str-index($str, $search);
@if $index {
@return str-slice($str, 1, $index - 1) + $replace +
str-replace(
str-slice($str, $index + str-length($search)),
$search,
$replace
);
}
@return $str;
}
@function selector-escape($str) {
@return str-replace(
str-replace(str-replace($str, '.', '\\.'), ':', '\\:'),
'/',
'\\/'
);
}
@function suffixName($str) {
@if $str == default {
@return '';
} @else {
@return '-' + $str;
}
}

86
scss/_mixins.scss
View File

@ -34,6 +34,14 @@
}
}
@mixin media-device($name, $devices: $devices) {
$n: map-get($devices, $name);
@media #{$n} {
@content;
}
}
@mixin clearfix() {
&::before,
&::after {
@ -45,14 +53,17 @@
}
}
// @deprecated 不建议用了
@mixin color-schema($bg-color: #555, $percent: 15%, $sat-percent: 100%) {
background-color: saturate(darken($bg-color, $percent), $sat-percent);
}
// @deprecated 不建议用了
@mixin color-schema-lt($bg-color: #555, $percent: 15%, $sat-percent: 100%) {
background-color: desaturate(lighten($bg-color, $percent), $sat-percent);
}
// @deprecated 不建议用了
@mixin color-variant(
$bg-color: #555,
$lt-percent: 10%,
@ -88,6 +99,7 @@
}
}
// @deprecated 不建议用了
@mixin font-variant($bg-color) {
$font-color: desaturate(lighten($bg-color, 40%), 10%);
$link-color: desaturate(lighten($bg-color, 50%), 10%);
@ -135,6 +147,7 @@
// }
}
// @deprecated 不建议用了
@mixin text-wariant($bg-color, $name) {
a.bg-#{'' + $name}:hover {
background-color: darken($bg-color, 5%);
@ -233,52 +246,69 @@
box-shadow: $Button-boxShadow;
@include hover {
color: $hover-color;
background-color: $hover-background;
border-color: $hover-border;
@if ($color != $hover-color) {
color: $hover-color;
}
@if ($background != $hover-background) {
background-color: $hover-background;
}
@if ($border != $hover-border) {
border-color: $hover-border;
}
}
@include focus {
color: $color;
background-color: $background;
border-color: $border;
box-shadow: $Button-boxShadow;
}
// @include focus {
// color: $color;
// background-color: $background;
// border-color: $border;
// box-shadow: $Button-boxShadow;
// }
@include hover-focus {
color: $hover-color;
background-color: $hover-background;
border-color: $hover-border;
// color: $hover-color;
// background-color: $hover-background;
// border-color: $hover-border;
box-shadow: $Button-boxShadow;
}
&:active,
&.is-active {
@if ($active-color != $color) {
color: $active-color;
}
@if ($active-background != $background) {
background-color: $active-background;
}
@if ($active-border != $border) {
border-color: $active-border;
}
}
&.is-disabled,
&:disabled {
@if variable-exists(Button-onDisabled-bg) {
@if variable-exists(Button-onDisabled-bg) and
$Button-onDisabled-bg !=
$background
{
background-color: $Button-onDisabled-bg;
} @else {
background-color: $background;
}
@if variable-exists(Button-onDisabled-color) {
@if variable-exists(Button-onDisabled-color) and
$Button-onDisabled-color !=
$color
{
color: $Button-onDisabled-color;
} @else {
color: $color;
}
@if variable-exists(Button-onDisabled-borderColor) {
@if variable-exists(Button-onDisabled-borderColor) and
$Button-onDisabled-borderColor !=
$border
{
border-color: $Button-onDisabled-borderColor;
} @else {
border-color: $border;
}
}
&:not(:disabled):not(.is-disabled):active,
&:not(:disabled):not(.is-disabled).is-active {
color: $active-color;
background-color: $active-background;
border-color: $active-border;
}
}
@mixin input-clear {

6
scss/_utilities.scss
View File

@ -156,9 +156,9 @@
display: none;
}
.inline {
display: inline-block !important;
}
// .inline {
// display: inline-block !important;
// }
.none {
display: none;

414
scss/_variables.scss
View File

@ -1,39 +1,381 @@
// 类名前缀
$ns: '' !default;
// 颜色
$white: #fff !default;
$gray100: #f8f9fa !default;
$gray200: #e9ecef !default;
$gray300: #dee2e6 !default;
$gray400: #ced4da !default;
$gray500: #adb5bd !default;
$gray600: #6c757d !default;
$gray700: #495057 !default;
$gray800: #343a40 !default;
$gray900: #212529 !default;
$black: #000 !default;
$orange: #fd7e14 !default;
$yellow: #ffc107 !default;
$green: #28a745 !default;
$turquoise: #00d1b2 !default;
$cyan: #17a2b8 !default;
$blue: #007bff !default;
$purple: #6f42c1 !default;
$red: #dc3545 !default;
$primary: $blue !default;
$secondary: $gray600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray100 !default;
$dark: $gray800 !default;
$remFactor: 16px !default;
$devices: (
m: '(max-width: 768px)',
pc: '(min-width: 769px)'
) !default;
// 生成颜色的工具有很多，可以参考这些链接来弄。
// https://tailwind.ink/
// https://www.tailwindshades.com/
// https://tailwind.simeongriggs.dev/
// https://javisperez.github.io/tailwindcolorshades/#/
// v1 版本 {
// color50: tint($color, 0.95);
// color100: tint($color, 0.9);
// color200: tint($color, 0.75);
// color300: tint($color, 0.6);
// color400: tint($color, 0.3);
// color500: $color;
// color600: shade($color, 0.9);
// color700: shade($color, 0.6);
// color800: shade($color, 0.45);
// color900: shade($color, 0.3);
// }
$colors: (
black: #000,
white: #fff,
primary: #007bff,
secondary: #6c757d,
success: #28a745,
info: #17a2b8,
warning: #28a745,
danger: #dc3545,
light: #f8f9fa,
dark: #343a40,
gray: (
50: #f9fafb,
100: #f3f4f6,
200: #e5e7eb,
300: #d1d5db,
400: #9ca3af,
500: #6b7280,
600: #4b5563,
700: #374151,
800: #1f2937,
900: #111827
),
red: (
50: #fef2f2,
100: #fee2e2,
200: #fecaca,
300: #fca5a5,
400: #f87171,
500: #ef4444,
600: #dc2626,
700: #b91c1c,
800: #991b1b,
900: #7f1d1d
),
yellow: (
50: #fffbeb,
100: #fef3c7,
200: #fde68a,
300: #fcd34d,
400: #fbbf24,
500: #f59e0b,
600: #d97706,
700: #b45309,
800: #92400e,
900: #78350f
),
green: (
50: #ecfdf5,
100: #d1fae5,
200: #a7f3d0,
300: #6ee7b7,
400: #34d399,
500: #10b981,
600: #059669,
700: #047857,
800: #065f46,
900: #064e3b
),
blue: (
50: #eff6ff,
100: #dbeafe,
200: #bfdbfe,
300: #93c5fd,
400: #60a5fa,
500: #3b82f6,
600: #2563eb,
700: #1d4ed8,
800: #1e40af,
900: #1e3a8a
),
cyan: (
50: #ecfeff,
100: #cffafe,
200: #a5f3fc,
300: #67e8f9,
400: #22d3ee,
500: #06b6d4,
600: #0891b2,
700: #0e7490,
800: #155e75,
900: #164e63
),
indigo: (
50: #eef2ff,
100: #e0e7ff,
200: #c7d2fe,
300: #a5b4fc,
400: #818cf8,
500: #6366f1,
600: #4f46e5,
700: #4338ca,
800: #3730a3,
900: #312e81
),
purple: (
50: #f5f3ff,
100: #ede9fe,
200: #ddd6fe,
300: #c4b5fd,
400: #a78bfa,
500: #8b5cf6,
600: #7c3aed,
700: #6d28d9,
800: #5b21b6,
900: #4c1d95
),
pink: (
50: #fdf2f8,
100: #fce7f3,
200: #fbcfe8,
300: #f9a8d4,
400: #f472b6,
500: #ec4899,
600: #db2777,
700: #be185d,
800: #9d174d,
900: #831843
)
) !default;
// 颜色 Alias 不要直接修改, 直接修改 colors 对象。
$white: map-get($colors, white);
$gray50: map-get($colors, gray, 50);
$gray100: map-get($colors, gray, 100);
$gray200: map-get($colors, gray, 200);
$gray300: map-get($colors, gray, 300);
$gray400: map-get($colors, gray, 400);
$gray500: map-get($colors, gray, 500);
$gray600: map-get($colors, gray, 600);
$gray700: map-get($colors, gray, 700);
$gray800: map-get($colors, gray, 800);
$gray900: map-get($colors, gray, 900);
$gray: $gray500;
$red: map-get($colors, red, 500);
$yellow: map-get($colors, yellow, 500);
$green: map-get($colors, green, 500);
$blue: map-get($colors, blue, 500);
$cyan: map-get($colors, cyan, 500);
$indigo: map-get($colors, indigo, 500);
$purple: map-get($colors, purple, 500);
$pink: map-get($colors, pink, 500);
$black: map-get($colors, black);
$primary: map-get($colors, 'primary');
$secondary: map-get($colors, 'secondary');
$success: map-get($colors, 'success');
$info: map-get($colors, 'info');
$warning: map-get($colors, 'warning');
$danger: map-get($colors, 'danger');
$light: map-get($colors, 'light');
$dark: map-get($colors, 'dark');
$spacing: (
//
// 下面是参考 tailwind
//
px: px2rem(1px),
0: 0,
none: 0,
0.5: px2rem(2px),
1: px2rem(4px),
1.5: px2rem(6px),
2: px2rem(8px),
2.5: px2rem(10px),
3: px2rem(12px),
3.5: px2rem(14px),
4: px2rem(16px),
5: px2rem(20px),
6: px2rem(24px),
7: px2rem(28px),
8: px2rem(32px),
9: px2rem(36px),
10: px2rem(40px),
11: px2rem(44px),
12: px2rem(48px),
14: px2rem(56px),
16: px2rem(64px),
18: px2rem(72px),
20: px2rem(80px),
24: px2rem(96px),
28: px2rem(112px),
32: px2rem(128px),
36: px2rem(144px),
40: px2rem(160px),
44: px2rem(176px),
48: px2rem(192px),
52: px2rem(208px),
56: px2rem(224px),
60: px2rem(240px),
64: px2rem(256px),
72: px2rem(288px),
80: px2rem(320px),
96: px2rem(384px)
) !default;
$inset: map-merge(
$spacing,
(
auto: auto,
'1/2': 50%,
'1/3': 33.333333%,
'2/3': 66.666667%,
'1/4': 25%,
'2/4': 50%,
'3/4': 75%,
'full': 100%
)
) !default;
$widths: map-merge(
$spacing,
(
auto: auto,
1x: 1em,
2x: 2em,
3x: 3em,
'1/2': 50%,
'1/3': 33.333333%,
'2/3': 66.666667%,
'1/4': 25%,
'2/4': 50%,
'3/4': 75%,
'1/5': 20%,
'2/5': 40%,
'3/5': 60%,
'4/5': 80%,
'1/6': 16.666667%,
'2/6': 33.333333%,
'3/6': 50%,
'4/6': 66.666667%,
'5/6': 83.333333%,
'1/12': 8.333333%,
'2/12': 16.666667%,
'3/12': 25%,
'4/12': 33.333333%,
'5/12': 41.666667%,
'6/12': 50%,
'7/12': 58.333333%,
'8/12': 66.666667%,
'9/12': 75%,
'10/12': 83.333333%,
'11/12': 91.666667%,
full: 100%,
screen: 100vw,
min: min-content,
max: max-content
)
) !default;
$maxWidths: (
none: none,
0: 0rem,
xs: 20rem,
sm: 24rem,
md: 28rem,
lg: 32rem,
xl: 36rem,
2xl: 42rem,
3xl: 48rem,
4xl: 56rem,
5xl: 64rem,
6xl: 72rem,
7xl: 80rem,
full: 100%,
min: min-content,
max: max-content,
prose: 65ch
) !default;
$heights: map-merge(
$spacing,
(
auto: auto,
'1/2': 50%,
'1/3': 33.333333%,
'2/3': 66.666667%,
'1/4': 25%,
'2/4': 50%,
'3/4': 75%,
'1/5': 20%,
'2/5': 40%,
'3/5': 60%,
'4/5': 80%,
'1/6': 16.666667%,
'2/6': 33.333333%,
'3/6': 50%,
'4/6': 66.666667%,
'5/6': 83.333333%,
full: 100%,
screen: 100vh
)
) !default;
$maxHeights: map-merge(
$spacing,
(
full: 100%,
screen: 100vh
)
) !default;
$fontSizes: (
xs: 0.75rem 1rem,
sm: 0.875rem 1.25rem,
base: 1rem 1.5rem,
md: 1.125rem 1.75rem,
lg: 1.25rem 1.75rem,
xl: 1.5rem 2rem,
2xl: 1.875rem 2.25rem,
3xl: 2.25rem 2.5rem,
4xl: 3rem 1,
5xl: 3.75rem 1,
6xl: 4.5rem 1,
7xl: 6rem 1,
8xl: 8rem 1
) !default;
$borderRadiuses: (
'none': 0px,
'sm': 0.125rem,
'default': 0.25rem,
'md': 0.375rem,
'lg': 0.5rem,
'xl': 0.75rem,
'2xl': 1rem,
'3xl': 1.5rem,
'full': 9999px
) !default;
$borderWidths: (
'default': 1px,
'0': 0px,
'2': 2px,
'4': 4px,
'8': 8px
) !default;
$boxShadows: (
'sm': '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
'default': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
'md': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
'lg':
'0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
'xl':
'0 20px 25px -5px rgba(0, 0, 0, 0.1) , 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
'inner': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
'none': none
) !default;
// 字体相关
$fontFamilySansSerif: -apple-system, BlinkMacSystemFont, 'SF Pro SC',
'SF Pro Text', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Segoe UI', Roboto,
@ -85,6 +427,8 @@ $boxShadow: 0 0.5rem 1rem rgba($black, 0.15) !default;
$boxShadowLg: 0 1rem 3rem rgba($black, 0.175) !default;
// 窗口适配
// @deprecated 不打算支持这么多视图，只区分 pc 和 移动端
// 改用 devices 了
$breakpoints: (
xs: 0,
sm: 576px,
@ -102,7 +446,7 @@ $text--loud-color: darken($text-color, 10%) !default;
$background: $white !default;
$code-color: $red !default;
$code-color: $danger !default;
$code-background: $background !default;
$pre-color: $text-color !default;
@ -329,8 +673,8 @@ $Toast-icon-height: $Toast-icon-width !default;
$Toast-color: $white !default;
$Toast--danger-color: $Toast-color !default;
$Toast--danger-bgColor: $red !default;
$Toast--danger-borderColor: $red !default;
$Toast--danger-bgColor: $danger !default;
$Toast--danger-borderColor: $danger !default;
$Toast--info-color: $Toast-color !default;
$Toast--info-bgColor: $info !default;

20
scss/components/_button.scss
View File

@ -13,6 +13,15 @@
min-width: $Button-mimWidth;
}
&:active,
&.is-active {
box-shadow: $Button-onActive-boxShadow;
&:focus {
box-shadow: $Button-onActive-boxShadow;
}
}
@include button-size(
$Button-paddingY,
$Button-paddingX,
@ -23,7 +32,7 @@
);
@include hover-focus {
color: $text-color;
// color: $text-color;
text-decoration: none;
}
@ -60,15 +69,6 @@
cursor: pointer;
}
&:not(:disabled):not(.is-disabled):active,
&:not(:disabled):not(.is-disabled).is-active {
box-shadow: $Button-onActive-boxShadow;
&:focus {
box-shadow: $Button-onActive-boxShadow;
}
}
> .pull-left,
> .pull-right {
line-height: inherit;

2
scss/components/form/_form.scss
View File

@ -38,7 +38,7 @@
}
.#{$ns}Form-star {
color: $red;
color: $danger;
font-size: $fontSizeXs;
line-height: 1;
}

2
scss/components/form/_select.scss
View File

@ -227,7 +227,7 @@
}
&-option-hl {
color: $red;
color: $danger;
}
&-addBtn {

1
scss/components/form/_transfer.scss
View File

@ -46,6 +46,7 @@
flex-grow: 1;
max-height: 100%;
overflow: auto;
position: relative; // 貌似不加 relative 会有 bug。
}
&-search + &-checkboxes {

4
scss/layout/_aside.scss
View File

@ -238,6 +238,10 @@
}
}
// @include media-device('mobile') {
// }
@include media-breakpoint-up(md) {
.#{$ns}Layout--folded {
.#{$ns}AsideNav-label {

130
scss/themes/_default-variables.scss
View File

@ -2,17 +2,129 @@
$ns: 'a-';
$primary: #7266ba;
$info: #23b7e5;
$success: #27c24c;
$warning: #fad733;
$danger: #f05050;
$light: #edf1f2;
$dark: #3a3f51;
$black: #1c2b36;
$colors: (
black: #1c2b36,
white: #fff,
primary: #7266ba,
secondary: #6c757d,
success: #27c24c,
info: #23b7e5,
warning: #fad733,
danger: #f05050,
light: #edf1f2,
dark: #3a3f51,
gray: (
50: #f9fafb,
100: #f3f4f6,
200: #e5e7eb,
300: #d1d5db,
400: #9ca3af,
500: #6b7280,
600: #4b5563,
700: #374151,
800: #1f2937,
900: #111827
),
red: (
50: #fef2f2,
100: #fee2e2,
200: #fecaca,
300: #fca5a5,
400: #f87171,
500: #ef4444,
600: #dc2626,
700: #b91c1c,
800: #991b1b,
900: #7f1d1d
),
yellow: (
50: #fffbeb,
100: #fef3c7,
200: #fde68a,
300: #fcd34d,
400: #fbbf24,
500: #f59e0b,
600: #d97706,
700: #b45309,
800: #92400e,
900: #78350f
),
green: (
50: #ecfdf5,
100: #d1fae5,
200: #a7f3d0,
300: #6ee7b7,
400: #34d399,
500: #10b981,
600: #059669,
700: #047857,
800: #065f46,
900: #064e3b
),
blue: (
50: #eff6ff,
100: #dbeafe,
200: #bfdbfe,
300: #93c5fd,
400: #60a5fa,
500: #3b82f6,
600: #2563eb,
700: #1d4ed8,
800: #1e40af,
900: #1e3a8a
),
cyan: (
50: #ecfeff,
100: #cffafe,
200: #a5f3fc,
300: #67e8f9,
400: #22d3ee,
500: #06b6d4,
600: #0891b2,
700: #0e7490,
800: #155e75,
900: #164e63
),
indigo: (
50: #eef2ff,
100: #e0e7ff,
200: #c7d2fe,
300: #a5b4fc,
400: #818cf8,
500: #6366f1,
600: #4f46e5,
700: #4338ca,
800: #3730a3,
900: #312e81
),
purple: (
50: #f5f3ff,
100: #ede9fe,
200: #ddd6fe,
300: #c4b5fd,
400: #a78bfa,
500: #8b5cf6,
600: #7c3aed,
700: #6d28d9,
800: #5b21b6,
900: #4c1d95
),
pink: (
50: #fdf2f8,
100: #fce7f3,
200: #fbcfe8,
300: #f9a8d4,
400: #f472b6,
500: #ec4899,
600: #db2777,
700: #be185d,
800: #9d174d,
900: #831843
)
);
$text-color: #58666e;
$link-color: $info;
$link-color: map-get($colors, 'info');
$Form-input-borderColor: #cfdadd;

68
scss/utilities.scss Normal file
View File

@ -0,0 +1,68 @@
@import './functions';
@import './variables';
@import './mixins';
// background
@import './utilities/background/background-color';
@import './utilities/border/border-color';
@import './utilities/border/border-radius';
@import './utilities/border/border-width';
@import './utilities/border/border-style';
@import './utilities/layout/box-sizing';
@import './utilities/layout/clear';
@import './utilities/layout/display';
@import './utilities/layout/float';
@import './utilities/layout/overflow';
@import './utilities/layout/position';
@import './utilities/layout/top-right-bottom-left';
@import './utilities/layout/visibility';
@import './utilities/layout/z-index';
@import './utilities/flex/direction';
@import './utilities/flex/flex';
@import './utilities/flex/grow';
@import './utilities/flex/order';
@import './utilities/flex/shrink';
@import './utilities/flex/wrap';
@import './utilities/grid/auto-columns';
@import './utilities/grid/auto-flow';
@import './utilities/grid/auto-rows';
@import './utilities/grid/column-start-end';
@import './utilities/grid/columns';
@import './utilities/grid/gap';
@import './utilities/grid/row-start-end';
@import './utilities/grid/rows';
@import './utilities/box-alignment/align-content';
@import './utilities/box-alignment/align-items';
@import './utilities/box-alignment/align-self';
@import './utilities/box-alignment/justify-content';
@import './utilities/box-alignment/justify-items';
@import './utilities/box-alignment/justify-self';
@import './utilities/box-alignment/place-content';
@import './utilities/box-alignment/place-items';
@import './utilities/box-alignment/place-self';
@import './utilities/effect/box-shadow';
@import './utilities/spacing/margin';
@import './utilities/spacing/padding';
@import './utilities/spacing/space-between';
@import './utilities/sizing/width';
@import './utilities/sizing/height';
@import './utilities/typography/font-size';
@import './utilities/typography/font-style';
@import './utilities/typography/font-weight';
@import './utilities/typography/line-height';
@import './utilities/typography/list-style-type';
@import './utilities/typography/text-align';
@import './utilities/typography/text-color';
@import './utilities/typography/text-decoration';
@import './utilities/typography/text-transform';
@import './utilities/typography/whitespace';
@import './utilities/typography/word-break';

89
scss/utilities/background/_background-color.scss Normal file
View File

@ -0,0 +1,89 @@
/*!markdown
---
title: 背景色
---
待补充
*/
@mixin bg-colors-map(
$colors: $colors,
$namePrefix: '',
$prefix: '.',
$suffix: ''
) {
#{$prefix}bg#{$namePrefix}-transparent#{$suffix} {
background-color: transparent;
}
#{$prefix}bg#{$namePrefix}-current#{$suffix} {
background-color: currentColor;
}
@each $name, $color in $colors {
@if (is-map($color)) {
@include bg-colors-map($color, #{'-' + $name}, $prefix, $suffix);
} @else if $suffix == '.is-active' {
#{$prefix}bg#{$namePrefix}-#{'' + $name}.is-active,
#{$prefix}bg#{$namePrefix}-#{'' + $name}:active {
background-color: $color;
}
} @else if $suffix == '.is-disabled' {
#{$prefix}bg#{$namePrefix}-#{'' + $name}.is-disabled,
#{$prefix}bg#{$namePrefix}-#{'' + $name}:disabled {
background-color: $color;
}
} @else {
#{$prefix}bg#{$namePrefix}-#{'' + $name}#{$suffix} {
background-color: $color;
}
}
}
}
@mixin bg-colors($prefix: '.', $suffix: '') {
#{$prefix}bg-transparent#{$suffix} {
background-color: transparent;
}
#{$prefix}bg-none#{$suffix} {
background: none !important;
}
@include bg-colors-map($colors, '', $prefix, $suffix);
}
@include bg-colors();
@include bg-colors('.' + selector-escape('hover:'), ':hover');
@include bg-colors('.' + selector-escape('active:'), '.is-active');
@include bg-colors('.' + selector-escape('focus:'), ':focus');
@include bg-colors('.' + selector-escape('disabled:'), '.is-disabled');
@include bg-colors('.group:hover .' + selector-escape('group-hover:'));
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include bg-colors('.' + selector-escape($deivce + ':'));
@include bg-colors(
'.' + selector-escape($deivce + ':') + selector-escape('hover:'),
':hover'
);
@include bg-colors(
'.' + selector-escape($deivce + ':') + selector-escape('active:'),
'.is-active'
);
@include bg-colors(
'.' + selector-escape($deivce + ':') + selector-escape('focus:'),
':focus'
);
@include bg-colors(
'.' + selector-escape($deivce + ':') + selector-escape('disabled:'),
'.is-disabled'
);
@include bg-colors(
'.group:hover .' + selector-escape($deivce + ':') +
selector-escape('group-hover:')
);
}
}

75
scss/utilities/border/_border-color.scss Normal file
View File

@ -0,0 +1,75 @@
/*!markdown
---
title: 边框颜色
---
待补充
*/
@mixin border-colors-map(
$colors: $colors,
$namePrefix: '',
$prefix: '.',
$suffix: ''
) {
@each $name, $color in $colors {
@if (is-map($color)) {
@include border-colors-map($color, #{'-' + $name}, $prefix, $suffix);
} @else if $suffix == '.is-active' {
#{$prefix}border#{$namePrefix}-#{'' + $name}.is-active,
#{$prefix}border#{$namePrefix}-#{'' + $name}:active {
border-color: $color;
}
} @else if $suffix == '.is-disabled' {
#{$prefix}border#{$namePrefix}-#{'' + $name}.is-disabled,
#{$prefix}border#{$namePrefix}-#{'' + $name}:disabled {
border-color: $color;
}
} @else {
#{$prefix}border#{$namePrefix}-#{'' + $name}#{$suffix} {
border-color: $color;
}
}
}
}
@mixin border-colors($prefix: '.', $suffix: '') {
@include border-colors-map($colors, '', $prefix, $suffix);
}
@include border-colors();
@include border-colors('.' + selector-escape('hover:'), ':hover');
@include border-colors('.' + selector-escape('active:'), '.is-active');
@include border-colors('.' + selector-escape('focus:'), ':focus');
@include border-colors('.' + selector-escape('disabled:'), '.is-disabled');
@include border-colors('.group:hover .' + selector-escape('group-hover:'));
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include border-colors('.' + selector-escape($deivce + ':'));
@include border-colors(
'.' + selector-escape($deivce + ':') + selector-escape('hover:'),
':hover'
);
@include border-colors(
'.' + selector-escape($deivce + ':') + selector-escape('active:'),
'.is-active'
);
@include border-colors(
'.' + selector-escape($deivce + ':') + selector-escape('focus:'),
':focus'
);
@include border-colors(
'.' + selector-escape($deivce + ':') + selector-escape('disabled:'),
'.is-disabled'
);
@include border-colors(
'.group:hover .' + selector-escape($deivce + ':') +
selector-escape('group-hover:')
);
}
}

71
scss/utilities/border/_border-radius.scss Normal file
View File

@ -0,0 +1,71 @@
/*!markdown
---
title: 边框圆角
---
待补充
*/
@mixin border-radius($prefix: '.', $suffix: '') {
@each $name, $value in $borderRadiuses {
#{$prefix}rounded#{suffixName($name)}#{$suffix} {
border-radius: $value;
}
}
@each $name, $value in $borderRadiuses {
#{$prefix}rounded-t#{suffixName($name)}#{$suffix} {
border-top-left-radius: $value;
border-top-right-radius: $value;
}
}
@each $name, $value in $borderRadiuses {
#{$prefix}rounded-r#{suffixName($name)}#{$suffix} {
border-top-right-radius: $value;
border-bottom-right-radius: $value;
}
}
@each $name, $value in $borderRadiuses {
#{$prefix}rounded-b#{suffixName($name)}#{$suffix} {
border-bottom-right-radius: $value;
border-bottom-left-radius: $value;
}
}
@each $name, $value in $borderRadiuses {
#{$prefix}rounded-l#{suffixName($name)}#{$suffix} {
border-top-left-radius: $value;
border-bottom-left-radius: $value;
}
}
@each $name, $value in $borderRadiuses {
#{$prefix}rounded-tl#{suffixName($name)}#{$suffix} {
border-top-left-radius: $value;
}
#{$prefix}rounded-tr#{suffixName($name)}#{$suffix} {
border-top-right-radius: $value;
}
#{$prefix}rounded-br#{suffixName($name)}#{$suffix} {
border-bottom-right-radius: $value;
}
#{$prefix}rounded-bl#{suffixName($name)}#{$suffix} {
border-bottom-left-radius: $value;
}
}
}
@include border-radius();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include border-radius('.' + selector-escape($deivce + ':'));
}
}
// @include border-radius('.' + selector-escape('hover:'), ':hover');
// @include border-radius('.' + selector-escape('active:'), '.is-active');
// @include border-radius('.' + selector-escape('focus:'), ':focus');
// @include border-radius('.' + selector-escape('disabled:'), '.is-disabled');
// @include border-radius('.group:hover .' + selector-escape('group-hover:'));

34
scss/utilities/border/_border-style.scss Normal file
View File

@ -0,0 +1,34 @@
/*!markdown
---
title: 边框样式
---
待补充
*/
@mixin make-border-style($prefix: '.') {
@each $name,
$value
in (
'solid': solid,
'dashed': dashed,
'dotted': dotted,
'double': double,
'none': none
)
{
#{$prefix}border-#{$name} {
border-style: $value;
}
}
}
@include make-border-style();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-border-style('.' + selector-escape($deivce + ':'));
}
}

46
scss/utilities/border/_border-width.scss Normal file
View File

@ -0,0 +1,46 @@
/*!markdown
---
title: 边框宽度
---
待补充
*/
@mixin border-widths($prefix: '.', $suffix: '') {
@each $name, $value in $borderWidths {
#{$prefix}border#{suffixName($name)}#{$suffix} {
border-width: $value;
}
}
@each $name, $value in $borderWidths {
#{$prefix}border-t#{suffixName($name)}#{$suffix} {
border-top-width: $value;
}
#{$prefix}border-r#{suffixName($name)}#{$suffix} {
border-right-width: $value;
}
#{$prefix}border-b#{suffixName($name)}#{$suffix} {
border-bottom-width: $value;
}
#{$prefix}border-l#{suffixName($name)}#{$suffix} {
border-left-width: $value;
}
}
}
@include border-widths();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include border-widths('.' + selector-escape($deivce + ':'));
}
}
// @include border-radius('.' + selector-escape('hover:'), ':hover');
// @include border-radius('.' + selector-escape('active:'), '.is-active');
// @include border-radius('.' + selector-escape('focus:'), ':focus');
// @include border-radius('.' + selector-escape('disabled:'), '.is-disabled');
// @include border-radius('.group:hover .' + selector-escape('group-hover:'));

37
scss/utilities/box-alignment/_align-content.scss Normal file
View File

@ -0,0 +1,37 @@
/*!markdown
---
title: Align Content
---
待补充
*/
@mixin make-align-content($prefix: '.') {
#{$prefix}content-center {
align-content: center;
}
#{$prefix}content-start {
align-content: flex-start;
}
#{$prefix}content-end {
align-content: flex-end;
}
#{$prefix}content-between {
align-content: space-between;
}
#{$prefix}content-around {
align-content: space-around;
}
#{$prefix}content-evenly {
align-content: space-evenly;
}
}
@include make-align-content();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-align-content('.' + selector-escape($deivce + ':'));
}
}

35
scss/utilities/box-alignment/_align-items.scss Normal file
View File

@ -0,0 +1,35 @@
/*!markdown
---
title: Align Items
---
待补充
*/
@mixin make-align-items($prefix: '.') {
#{$prefix}items-start {
align-items: flex-start;
}
#{$prefix}items-end {
align-items: flex-end;
}
#{$prefix}items-center {
align-items: center;
}
#{$prefix}items-baseline {
align-items: baseline;
}
#{$prefix}items-stretch {
align-items: stretch;
}
}
@include make-align-items();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-align-items('.' + selector-escape($deivce + ':'));
}
}

35
scss/utilities/box-alignment/_align-self.scss Normal file
View File

@ -0,0 +1,35 @@
/*!markdown
---
title: Align Self
---
待补充
*/
@mixin make-align-self($prefix: '.') {
#{$prefix}self-auto {
align-self: auto;
}
#{$prefix}self-start {
align-self: flex-start;
}
#{$prefix}self-end {
align-self: flex-end;
}
#{$prefix}self-center {
align-self: center;
}
#{$prefix}self-stretch {
align-self: stretch;
}
}
@include make-align-self();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-align-self('.' + selector-escape($deivce + ':'));
}
}

37
scss/utilities/box-alignment/_justify-content.scss Normal file
View File

@ -0,0 +1,37 @@
/*!markdown
---
title: Jsutify Content
---
待补充
*/
@mixin make-justify-content($prefix: '.') {
#{$prefix}justify-start {
justify-content: flex-start;
}
#{$prefix}justify-end {
justify-content: flex-end;
}
#{$prefix}justify-center {
justify-content: center;
}
#{$prefix}justify-between {
justify-content: space-between;
}
#{$prefix}justify-around {
justify-content: space-around;
}
#{$prefix}justify-evenly {
justify-content: space-evenly;
}
}
@include make-justify-content();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-justify-content('.' + selector-escape($deivce + ':'));
}
}

34
scss/utilities/box-alignment/_justify-items.scss Normal file
View File

@ -0,0 +1,34 @@
/*!markdown
---
title: Justify Items
---
待补充
*/
@mixin make-justify-items($prefix: '.') {
#{$prefix}justify-items-auto {
justify-items: auto;
}
#{$prefix}justify-items-start {
justify-items: start;
}
#{$prefix}justify-items-end {
justify-items: end;
}
#{$prefix}justify-items-center {
justify-items: center;
}
#{$prefix}justify-items-stretch {
justify-items: stretch;
}
}
@include make-justify-items();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-justify-items('.' + selector-escape($deivce + ':'));
}
}

34
scss/utilities/box-alignment/_justify-self.scss Normal file
View File

@ -0,0 +1,34 @@
/*!markdown
---
title: Jsutify Self
---
待补充
*/
@mixin make-justify-self($prefix: '.') {
#{$prefix}justify-self-auto {
justify-self: auto;
}
#{$prefix}justify-self-start {
justify-self: start;
}
#{$prefix}justify-self-end {
justify-self: end;
}
#{$prefix}justify-self-center {
justify-self: center;
}
#{$prefix}justify-self-stretch {
justify-self: stretch;
}
}
@include make-justify-self();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-justify-self('.' + selector-escape($deivce + ':'));
}
}

40
scss/utilities/box-alignment/_place-content.scss Normal file
View File

@ -0,0 +1,40 @@
/*!markdown
---
title: Place Content
---
待补充
*/
@mixin make-place-content($prefix: '.') {
#{$prefix}place-content-center {
place-content: center;
}
#{$prefix}place-content-start {
place-content: start;
}
#{$prefix}place-content-end {
place-content: end;
}
#{$prefix}place-content-between {
place-content: space-between;
}
#{$prefix}place-content-around {
place-content: space-around;
}
#{$prefix}place-content-evenly {
place-content: space-evenly;
}
#{$prefix}place-content-stretch {
place-content: stretch;
}
}
@include make-place-content();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-place-content('.' + selector-escape($deivce + ':'));
}
}

34
scss/utilities/box-alignment/_place-items.scss Normal file
View File

@ -0,0 +1,34 @@
/*!markdown
---
title: Place Items
---
待补充
*/
@mixin make-place-items($prefix: '.') {
#{$prefix}place-items-auto {
place-items: auto;
}
#{$prefix}place-items-start {
place-items: start;
}
#{$prefix}place-items-end {
place-items: end;
}
#{$prefix}place-items-center {
place-items: center;
}
#{$prefix}place-items-stretch {
place-items: stretch;
}
}
@include make-place-items();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-place-items('.' + selector-escape($deivce + ':'));
}
}

34
scss/utilities/box-alignment/_place-self.scss Normal file
View File

@ -0,0 +1,34 @@
/*!markdown
---
title: Place Self
---
待补充
*/
@mixin make-place-self($prefix: '.') {
#{$prefix}place-self-auto {
place-self: auto;
}
#{$prefix}place-self-start {
place-self: start;
}
#{$prefix}place-self-end {
place-self: end;
}
#{$prefix}place-self-center {
place-self: center;
}
#{$prefix}place-self-stretch {
place-self: stretch;
}
}
@include make-place-self();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-place-self('.' + selector-escape($deivce + ':'));
}
}

64
scss/utilities/effect/_box-shadow.scss Normal file
View File

@ -0,0 +1,64 @@
/*!markdown
---
title: Box Shadow
---
待补充
*/
@mixin make-box-shadow($prefix: '.', $suffix: '') {
@each $name, $value in $boxShadows {
@if $suffix == '.is-active' {
#{$prefix}shadow#{suffixName($name)}.is-active,
#{$prefix}shadow#{suffixName($name)}:active {
box-shadow: #{$value};
}
} @else if $suffix == '.is-disabled' {
#{$prefix}shadow#{suffixName($name)}.is-disabled,
#{$prefix}shadow#{suffixName($name)}:disabled {
box-shadow: #{$value};
}
} @else {
#{$prefix}shadow#{suffixName($name)}#{$suffix} {
box-shadow: #{$value};
}
}
}
}
@include make-box-shadow();
@include make-box-shadow('.' + selector-escape('hover:'), ':hover');
@include make-box-shadow('.' + selector-escape('active:'), '.is-active');
@include make-box-shadow('.' + selector-escape('focus:'), ':focus');
@include make-box-shadow('.' + selector-escape('disabled:'), '.is-disabled');
@include make-box-shadow('.group:hover .' + selector-escape('group-hover:'));
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-box-shadow('.' + selector-escape($deivce + ':'));
@include make-box-shadow(
'.' + selector-escape($deivce + ':') + selector-escape('hover:'),
':hover'
);
@include make-box-shadow(
'.' + selector-escape($deivce + ':') + selector-escape('active:'),
'.is-active'
);
@include make-box-shadow(
'.' + selector-escape($deivce + ':') + selector-escape('focus:'),
':focus'
);
@include make-box-shadow(
'.' + selector-escape($deivce + ':') + selector-escape('disabled:'),
'.is-disabled'
);
@include make-box-shadow(
'.group:hover .' + selector-escape($deivce + ':') +
selector-escape('group-hover:')
);
}
}

50
scss/utilities/effect/_opacity.scss Normal file
View File

@ -0,0 +1,50 @@
/*!markdown
---
title: Opacity
---
待补充
*/
@mixin make-opacity($prefix: '.', $suffix: '') {
@each $name,
$value
in (
'0': 0,
'5': 0.05,
'10': 0.1,
'20': 0.2,
'25': 0.25,
'30': 0.3,
'40': 0.4,
'50': 0.5,
'60': 0.6,
'70': 0.7,
'75': 0.75,
'80': 0.8,
'90': 0.9,
'95': 0.95,
'100': 1
)
{
#{$prefix}opacity#{suffixName($name)}#{$suffix} {
opacity: $value;
}
}
}
@include make-opacity();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-opacity('.' + selector-escape($deivce + ':'));
}
}
// @include border-radius('.' + selector-escape('hover:'), ':hover');
// @include border-radius('.' + selector-escape('active:'), '.is-active');
// @include border-radius('.' + selector-escape('focus:'), ':focus');
// @include border-radius('.' + selector-escape('disabled:'), '.is-disabled');
// @include border-radius('.group:hover .' + selector-escape('group-hover:'));

36
scss/utilities/flex/_direction.scss Normal file
View File

@ -0,0 +1,36 @@
/*!markdown
---
title: Flex Direction
---
待补充
*/
@mixin make-flex-direction($prefix: '.') {
#{$prefix}flex-row {
flex-direction: row;
}
#{$prefix}flex-row-reverse {
flex-direction: row-reverse;
}
#{$prefix}flex-col {
flex-direction: column;
}
#{$prefix}flex-col-reverse {
flex-direction: column-reverse;
}
}
@include make-flex-direction();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-flex-direction('.' + selector-escape($deivce + ':'));
}
}
// hover ?

33
scss/utilities/flex/_flex.scss Normal file
View File

@ -0,0 +1,33 @@
/*!markdown
---
title: Flex
---
待补充
*/
@mixin make-flex($prefix: '.') {
#{$prefix}flex-1 {
flex: 1 1 0%;
}
#{$prefix}flex-auto {
flex: 1 1 auto;
}
#{$prefix}flex-initial {
flex: 0 1 auto;
}
#{$prefix}flex-none {
flex: none;
}
}
@include make-flex();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-flex('.' + selector-escape($deivce + ':'));
}
}

25
scss/utilities/flex/_grow.scss Normal file
View File

@ -0,0 +1,25 @@
/*!markdown
---
title: Flex Grow
---
待补充
*/
@mixin make-flex-grow($prefix: '.') {
#{$prefix}flex-grow-0 {
flex-grow: 0;
}
#{$prefix}flex-grow {
flex-grow: 1;
}
}
@include make-flex-grow();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-flex-grow('.' + selector-escape($deivce + ':'));
}
}

42
scss/utilities/flex/_order.scss Normal file
View File

@ -0,0 +1,42 @@
/*!markdown
---
title: Flex Order
---
待补充
*/
@mixin make-flex-order($prefix: '.') {
@each $name,
$value
in (
'1': 1,
'2': 2,
'3': 3,
'4': 4,
'5': 5,
'6': 6,
'7': 7,
'8': 8,
'9': 9,
'10': 10,
'11': 11,
'12': 12,
'first': -9999,
'last': 9999
)
{
#{$prefix + 'order-' + $name} {
order: $value;
}
}
}
@include make-flex-order();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-flex-order('.' + selector-escape($deivce + ':'));
}
}

25
scss/utilities/flex/_shrink.scss Normal file
View File

@ -0,0 +1,25 @@
/*!markdown
---
title: Flex Shrink
---
待补充
*/
@mixin make-flex-shrink($prefix: '.') {
#{$prefix}flex-shrink-0 {
flex-shrink: 0;
}
#{$prefix}flex-shrink {
flex-shrink: 1;
}
}
@include make-flex-shrink();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-flex-shrink('.' + selector-escape($deivce + ':'));
}
}

32
scss/utilities/flex/_wrap.scss Normal file
View File

@ -0,0 +1,32 @@
/*!markdown
---
title: Flex Wrap
---
待补充
*/
@mixin make-flex-wrap($prefix: '.') {
#{$prefix}flex-wrap {
flex-wrap: wrap;
}
#{$prefix}flex-wrap-reverse {
flex-wrap: wrap-reverse;
}
#{$prefix}flex-nowrap {
flex-wrap: nowrap;
}
}
@include make-flex-wrap();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-flex-wrap('.' + selector-escape($deivce + ':'));
}
}
// hover ?

33
scss/utilities/grid/_auto-columns.scss Normal file
View File

@ -0,0 +1,33 @@
/*!markdown
---
title: Grid Auto Columns
---
待补充
*/
@mixin make-grid-auto-columns($prefix: '.') {
#{$prefix}auto-cols-auto {
grid-auto-columns: auto;
}
#{$prefix}auto-cols-min {
grid-auto-columns: min-content;
}
#{$prefix}auto-cols-max {
grid-auto-columns: max-content;
}
#{$prefix}auto-cols-fr {
grid-auto-columns: minmax(0, 1fr);
}
}
@include make-grid-auto-columns();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-grid-auto-columns('.' + selector-escape($deivce + ':'));
}
}

33
scss/utilities/grid/_auto-flow.scss Normal file
View File

@ -0,0 +1,33 @@
/*!markdown
---
title: Grid Auto Flow
---
待补充
*/
@mixin make-grid-auto-flow($prefix: '.') {
#{$prefix}grid-flow-row {
grid-auto-flow: row;
}
#{$prefix}grid-flow-col {
grid-auto-flow: column;
}
#{$prefix}grid-flow-row-dense {
grid-auto-flow: row dense;
}
#{$prefix}grid-flow-col-dense {
grid-auto-flow: column dense;
}
}
@include make-grid-auto-flow();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-grid-auto-flow('.' + selector-escape($deivce + ':'));
}
}

33
scss/utilities/grid/_auto-rows.scss Normal file
View File

@ -0,0 +1,33 @@
/*!markdown
---
title: Grid Auto Flow
---
待补充
*/
@mixin make-grid-auto-rows($prefix: '.') {
#{$prefix}auto-rows-auto {
grid-auto-rows: auto;
}
#{$prefix}auto-rows-min {
grid-auto-rows: min-content;
}
#{$prefix}auto-rows-max {
grid-auto-rows: max-content;
}
#{$prefix}auto-rows-fr {
grid-auto-rows: minmax(0, 1fr);
}
}
@include make-grid-auto-rows();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-grid-auto-rows('.' + selector-escape($deivce + ':'));
}
}

158
scss/utilities/grid/_column-start-end.scss Normal file
View File

@ -0,0 +1,158 @@
/*!markdown
---
title: Grid Row Start / End
---
待补充
*/
@mixin make-grid-span($prefix: '.') {
#{$prefix}col-auto {
grid-column: auto;
}
#{$prefix}col-span-1 {
grid-column: span 1 / span 1;
}
#{$prefix}col-span-2 {
grid-column: span 2 / span 2;
}
#{$prefix}col-span-3 {
grid-column: span 3 / span 3;
}
#{$prefix}col-span-4 {
grid-column: span 4 / span 4;
}
#{$prefix}col-span-5 {
grid-column: span 5 / span 5;
}
#{$prefix}col-span-6 {
grid-column: span 6 / span 6;
}
#{$prefix}col-span-7 {
grid-column: span 7 / span 7;
}
#{$prefix}col-span-8 {
grid-column: span 8 / span 8;
}
#{$prefix}col-span-9 {
grid-column: span 9 / span 9;
}
#{$prefix}col-span-10 {
grid-column: span 10 / span 10;
}
#{$prefix}col-span-11 {
grid-column: span 11 / span 1;
}
#{$prefix}col-span-12 {
grid-column: span 12 / span 12;
}
#{$prefix}col-span-full {
grid-column: 1 / -1;
}
}
@mixin make-grid-start($prefix: '.') {
#{$prefix}col-start-1 {
grid-column-start: 1;
}
#{$prefix}col-start-2 {
grid-column-start: 2;
}
#{$prefix}col-start-3 {
grid-column-start: 3;
}
#{$prefix}col-start-4 {
grid-column-start: 4;
}
#{$prefix}col-start-5 {
grid-column-start: 5;
}
#{$prefix}col-start-6 {
grid-column-start: 6;
}
#{$prefix}col-start-7 {
grid-column-start: 7;
}
#{$prefix}col-start-8 {
grid-column-start: 8;
}
#{$prefix}col-start-9 {
grid-column-start: 9;
}
#{$prefix}col-start-10 {
grid-column-start: 10;
}
#{$prefix}col-start-11 {
grid-column-start: 11;
}
#{$prefix}col-start-12 {
grid-column-start: 12;
}
#{$prefix}col-start-13 {
grid-column-start: 13;
}
#{$prefix}col-start-auto {
grid-column-start: auto;
}
}
@mixin make-grid-end($prefix: '.') {
#{$prefix}col-end-1 {
grid-column-end: 1;
}
#{$prefix}col-end-2 {
grid-column-end: 2;
}
#{$prefix}col-end-3 {
grid-column-end: 3;
}
#{$prefix}col-end-4 {
grid-column-end: 4;
}
#{$prefix}col-end-5 {
grid-column-end: 5;
}
#{$prefix}col-end-6 {
grid-column-end: 6;
}
#{$prefix}col-end-7 {
grid-column-end: 7;
}
#{$prefix}col-end-8 {
grid-column-end: 8;
}
#{$prefix}col-end-9 {
grid-column-end: 9;
}
#{$prefix}col-end-10 {
grid-column-end: 10;
}
#{$prefix}col-end-11 {
grid-column-end: 11;
}
#{$prefix}col-end-12 {
grid-column-end: 12;
}
#{$prefix}col-end-13 {
grid-column-end: 13;
}
#{$prefix}col-end-auto {
grid-column-end: auto;
}
}
@include make-grid-span();
@include make-grid-start();
@include make-grid-end();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-grid-span('.' + selector-escape($deivce + ':'));
@include make-grid-start('.' + selector-escape($deivce + ':'));
@include make-grid-end('.' + selector-escape($deivce + ':'));
}
}

60
scss/utilities/grid/_columns.scss Normal file
View File

@ -0,0 +1,60 @@
/*!markdown
---
title: Grid Template Columns
---
待补充
*/
@mixin make-grid-columns($prefix: '.') {
#{$prefix}grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
#{$prefix}grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#{$prefix}grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
#{$prefix}grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
#{$prefix}grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
#{$prefix}grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
#{$prefix}grid-cols-7 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
#{$prefix}grid-cols-8 {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
#{$prefix}grid-cols-9 {
grid-template-columns: repeat(9, minmax(0, 1fr));
}
#{$prefix}grid-cols-10 {
grid-template-columns: repeat(10, minmax(0, 1fr));
}
#{$prefix}grid-cols-11 {
grid-template-columns: repeat(11, minmax(0, 1fr));
}
#{$prefix}grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
#{$prefix}grid-cols-none {
grid-template-columns: none;
}
}
@include make-grid-columns();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-grid-columns('.' + selector-escape($deivce + ':'));
}
}

42
scss/utilities/grid/_gap.scss Normal file
View File

@ -0,0 +1,42 @@
/*!markdown
---
title: Gap
---
待补充
*/
@mixin make-gaps($prefix: '.') {
@each $name, $value in $spacing {
@if $name == default {
#{$prefix}gap {
gap: $value;
}
#{$prefix}gap-x {
column-gap: $value;
}
#{$prefix}gap-y {
row-gap: $value;
}
} @else {
#{$prefix}gap-#{'' + selector-escape($name)} {
gap: $value;
}
#{$prefix}gap-x-#{'' + selector-escape($name)} {
column-gap: $value;
}
#{$prefix}gap-y-#{'' + selector-escape($name)} {
row-gap: $value;
}
}
}
}
@include make-gaps();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-gaps('.' + selector-escape($deivce + ':'));
}
}

158
scss/utilities/grid/_row-start-end.scss Normal file
View File

@ -0,0 +1,158 @@
/*!markdown
---
title: Grid Row Start / End
---
待补充
*/
@mixin make-grid-row-span($prefix: '.') {
#{$prefix}row-auto {
grid-row: auto;
}
#{$prefix}row-span-1 {
grid-row: span 1 / span 1;
}
#{$prefix}row-span-2 {
grid-row: span 2 / span 2;
}
#{$prefix}row-span-3 {
grid-row: span 3 / span 3;
}
#{$prefix}row-span-4 {
grid-row: span 4 / span 4;
}
#{$prefix}row-span-5 {
grid-row: span 5 / span 5;
}
#{$prefix}row-span-6 {
grid-row: span 6 / span 6;
}
#{$prefix}row-span-7 {
grid-row: span 7 / span 7;
}
#{$prefix}row-span-8 {
grid-row: span 8 / span 8;
}
#{$prefix}row-span-9 {
grid-row: span 9 / span 9;
}
#{$prefix}row-span-10 {
grid-row: span 10 / span 10;
}
#{$prefix}row-span-11 {
grid-row: span 11 / span 1;
}
#{$prefix}row-span-12 {
grid-row: span 12 / span 12;
}
#{$prefix}row-span-full {
grid-row: 1 / -1;
}
}
@mixin make-grid-row-start($prefix: '.') {
#{$prefix}row-start-1 {
grid-row-start: 1;
}
#{$prefix}row-start-2 {
grid-row-start: 2;
}
#{$prefix}row-start-3 {
grid-row-start: 3;
}
#{$prefix}row-start-4 {
grid-row-start: 4;
}
#{$prefix}row-start-5 {
grid-row-start: 5;
}
#{$prefix}row-start-6 {
grid-row-start: 6;
}
#{$prefix}row-start-7 {
grid-row-start: 7;
}
#{$prefix}row-start-8 {
grid-row-start: 8;
}
#{$prefix}row-start-9 {
grid-row-start: 9;
}
#{$prefix}row-start-10 {
grid-row-start: 10;
}
#{$prefix}row-start-11 {
grid-row-start: 11;
}
#{$prefix}row-start-12 {
grid-row-start: 12;
}
#{$prefix}row-start-13 {
grid-row-start: 13;
}
#{$prefix}row-start-auto {
grid-row-start: auto;
}
}
@mixin make-grid-row-end($prefix: '.') {
#{$prefix}row-end-1 {
grid-row-end: 1;
}
#{$prefix}row-end-2 {
grid-row-end: 2;
}
#{$prefix}row-end-3 {
grid-row-end: 3;
}
#{$prefix}row-end-4 {
grid-row-end: 4;
}
#{$prefix}row-end-5 {
grid-row-end: 5;
}
#{$prefix}row-end-6 {
grid-row-end: 6;
}
#{$prefix}row-end-7 {
grid-row-end: 7;
}
#{$prefix}row-end-8 {
grid-row-end: 8;
}
#{$prefix}row-end-9 {
grid-row-end: 9;
}
#{$prefix}row-end-10 {
grid-row-end: 10;
}
#{$prefix}row-end-11 {
grid-row-end: 11;
}
#{$prefix}row-end-12 {
grid-row-end: 12;
}
#{$prefix}row-end-13 {
grid-row-end: 13;
}
#{$prefix}row-end-auto {
grid-row-end: auto;
}
}
@include make-grid-row-span();
@include make-grid-row-start();
@include make-grid-row-end();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-grid-row-span('.' + selector-escape($deivce + ':'));
@include make-grid-row-start('.' + selector-escape($deivce + ':'));
@include make-grid-row-end('.' + selector-escape($deivce + ':'));
}
}

42
scss/utilities/grid/_rows.scss Normal file
View File

@ -0,0 +1,42 @@
/*!markdown
---
title: Grid Template Rows
---
待补充
*/
@mixin make-grid-rows($prefix: '.') {
#{$prefix}grid-rows-1 {
grid-template-rows: repeat(1, minmax(0, 1fr));
}
#{$prefix}grid-rows-2 {
grid-template-rows: repeat(2, minmax(0, 1fr));
}
#{$prefix}grid-rows-3 {
grid-template-rows: repeat(3, minmax(0, 1fr));
}
#{$prefix}grid-rows-4 {
grid-template-rows: repeat(4, minmax(0, 1fr));
}
#{$prefix}grid-rows-5 {
grid-template-rows: repeat(5, minmax(0, 1fr));
}
#{$prefix}grid-rows-6 {
grid-template-rows: repeat(6, minmax(0, 1fr));
}
#{$prefix}grid-rows-none {
grid-template-rows: none;
}
}
@include make-grid-rows();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-grid-rows('.' + selector-escape($deivce + ':'));
}
}

51
scss/utilities/layout/_box-sizing.scss Normal file
View File

@ -0,0 +1,51 @@
/*!markdown
---
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/css-utilities/responsive-design.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
## 状态前缀
不支持[「状态前缀」](../../../docs/css-utilities/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
*/
@mixin make-box-sizing($prefix: '.') {
#{$prefix}box-border {
box-sizing: border-box;
}
#{$prefix}box-content {
box-sizing: content-box;
}
}
@include make-box-sizing();

56
scss/utilities/layout/_clear.scss Normal file
View File

@ -0,0 +1,56 @@
/*!markdown
---
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/css-utilities/responsive-design.md)。
## 状态前缀
不支持[「状态前缀」](../../../docs/css-utilities/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
*/
@mixin make-clear($prefix: '.') {
#{$prefix}clear-right {
clear: right;
}
#{$prefix}clear-left {
clear: left;
}
#{$prefix}clear-none {
clear: none;
}
#{$prefix}clear-both {
clear: both;
}
}
@include make-clear();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-clear('.' + selector-escape($deivce + ':'));
}
}

82
scss/utilities/layout/_display.scss Normal file
View File

@ -0,0 +1,82 @@
/*!markdown
---
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: hidden; |
## 用法
css 相关的知识点就不介绍了，请参考：
https://www.w3school.com.cn/cssref/pr_class_display.asp
https://tailwindcss.com/docs/display
# 响应式设计
支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/css-utilities/responsive-design.md)。
## 状态前缀
不支持[「状态前缀」](../../../docs/css-utilities/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
*/
@mixin make-display($prefix: '.') {
@each $name,
$value
in (
'block': block,
'inline-block': inline-block,
'inline': inline,
'flex': flex,
'inline-flex': inline-flex,
'table': table,
'table-caption': table-caption,
'table-cell': table-cell,
'table-column': table-column,
'table-column-group': table-column-group,
'table-footer-group': table-footer-group,
'table-header-group': table-header-group,
'table-row-group': table-row-group,
'table-row': table-row,
'flow-root': flow-root,
'grid': grid,
'inline-grid': inline-grid,
'contents': contents,
'hidden': none
)
{
#{$prefix + $name} {
display: $value;
}
}
}
@include make-display();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-display('.' + selector-escape($deivce + ':'));
}
}

71
scss/utilities/layout/_float.scss Normal file
View File

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

85
scss/utilities/layout/_overflow.scss Normal file
View File

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

55
scss/utilities/layout/_position.scss Normal file
View File

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

292
scss/utilities/layout/_top-right-bottom-left.scss Normal file
View File

@ -0,0 +1,292 @@
/*!markdown
---
title: Top / Right / Bottom / Left
---
用来控制位置的样式集。
| Class | Properties |
| ------------ | --------------------------------------------------------------------------------- |
| inset-0 | top: 0px;<br/>right: 0px;<br/>bottom: 0px;<br/>left: 0px; |
| -inset-0 | top: 0px;<br/>right: 0px;<br/>bottom: 0px;<br/>left: 0px; |
| inset-y-0 | top: 0px;<br/>bottom: 0px; |
| inset-x-0 | right: 0px;<br/>left: 0px; |
| -inset-y-0 | top: 0px;<br/>bottom: 0px; |
| -inset-x-0 | right: 0px;<br/>left: 0px; |
| top-0 | top: 0px; |
| right-0 | right: 0px; |
| bottom-0 | bottom: 0px; |
| left-0 | left: 0px; |
| -top-0 | top: 0px; |
| -right-0 | right: 0px; |
| -bottom-0 | bottom: 0px; |
| -left-0 | left: 0px; |
| inset-0.5 | top: 0.125rem;<br/>right: 0.125rem;<br/>bottom: 0.125rem;<br/>left: 0.125rem; |
| -inset-0.5 | top: -0.125rem;<br/>right: -0.125rem;<br/>bottom: -0.125rem;<br/>left: -0.125rem; |
| inset-y-0.5 | top: 0.125rem;<br/>bottom: 0.125rem; |
| inset-x-0.5 | right: 0.125rem;<br/>left: 0.125rem; |
| -inset-y-0.5 | top: -0.125rem;<br/>bottom: -0.125rem; |
| -inset-x-0.5 | right: -0.125rem;<br/>left: -0.125rem; |
| top-0.5 | top: 0.125rem; |
| right-0.5 | right: 0.125rem; |
| bottom-0.5 | bottom: 0.125rem; |
| left-0.5 | left: 0.125rem; |
| -top-0.5 | top: -0.125rem; |
| -right-0.5 | right: -0.125rem; |
| -bottom-0.5 | bottom: -0.125rem; |
| -left-0.5 | left: -0.125rem; |
按以下尺寸表依次类推
| 尺寸 | 大小 |
| ---- | -------------- |
| 0 | 0 |
| 0.5 | 0.125rem; |
| 1 | 0.25rem |
| 1.5 | 0.375rem |
| 1.5 | 0.375rem |
| 2 | 0.5rem |
| 2.5 | 0.625rem |
| 3 | 0.75rem |
| 3.5 | 0.875rem |
| 4 | 1rem |
| 5 | 1.25rem |
| 6 | 1.5rem |
| 7 | 1.75rem |
| 8 | 2rem |
| 9 | 2.25rem |
| 10 | 2.5rem |
| 11 | 2.75rem |
| 12 | 3rem |
| 14 | 3.5rem |
| 16 | 4rem |
| 20 | 5rem |
| 24 | 6rem |
| 28 | 7rem |
| 32 | 8rem |
| 36 | 9rem |
| 40 | 10rem |
| 44 | 11rem |
| 48 | 12rem |
| 52 | 13rem |
| 56 | 14rem |
| 60 | 15rem |
| 64 | 16rem |
| 68 | 17rem |
| 72 | 18rem |
| 76 | 19rem |
| 80 | 20rem |
| 96 | 24rem |
| auto | auto |
| 1/2 | 50% |
| 1/3 | 33.333333% |
| 2/3 | 66.666667% |
| 1/4 | 25%; |
| 2/4 | 50%; |
| 3/4 | 75%; |
| full | 100%; |
| px | 0.0625rem(1px) |
## 用法
结合 relative 和 absolute 定位 和位置样式 `{top|right|bottom|left|inset}-xxx`，可以很方便的实现各种组件布局。
```html
<div class="grid grid-cols-4 m:grid-cols-2 gap-4">
<!-- Span top edge -->
<div class="relative h-32 w-32 ... bg-blue-500">
<div class="absolute inset-x-0 top-0 h-16 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">1</div>
</div>
<!-- Span right edge -->
<div class="relative h-32 w-32 ... bg-blue-500">
<div class="absolute inset-y-0 right-0 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">2</div>
</div>
<!-- Span bottom edge -->
<div class="relative h-32 w-32 ... bg-blue-500">
<div class="absolute inset-x-0 bottom-0 h-16 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">3</div>
</div>
<!-- Span left edge -->
<div class="relative h-32 w-32 ... bg-blue-500">
<div class="absolute inset-y-0 left-0 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">4</div>
</div>
<!-- Fill entire parent -->
<div class="relative h-32 w-32 ... bg-blue-500">
<div class="absolute inset-0 bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">5</div>
</div>
<!-- Pin to top left corner -->
<div class="relative h-32 w-32 ... bg-blue-500">
<div class="absolute left-0 top-0 h-16 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">6</div>
</div>
<!-- Pin to top right corner -->
<div class="relative h-32 w-32 ... bg-blue-500">
<div class="absolute top-0 right-0 h-16 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">7</div>
</div>
<!-- Pin to bottom right corner -->
<div class="relative h-32 w-32 ... bg-blue-500">
<div class="absolute bottom-0 right-0 h-16 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">8</div>
</div>
<!-- Pin to bottom left corner -->
<div class="relative h-32 w-32 ... bg-blue-500">
<div class="absolute bottom-0 left-0 h-16 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">9</div>
</div>
</div>
```
## 响应式设计
支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/css-utilities/responsive-design.md)。
## 状态前缀
不支持[「状态前缀」](../../../docs/css-utilities/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
*/
@mixin make-single-position(
$selector,
$direction,
$name,
$value,
$prefix: '.'
) {
#{$prefix}#{'' + selector-escape($selector + '-' + $name) } {
#{$direction}: $value;
}
}
@mixin make-single-positions($direction, $map: $inset, $prefix: '.') {
@each $name, $value in $map {
@include make-single-position(
$direction,
$direction,
$name,
$value,
$prefix
);
}
@each $name, $value in $map {
@if (type-of($value) == 'number') {
@include make-single-position(
#{'-' + $direction},
$direction,
$name,
($value * -1),
$prefix
);
}
}
}
@mixin make-inset-positions($map: $inset, $prefix: '.') {
@each $name, $value in $map {
#{$prefix}#{selector-escape('inset-' + $name) } {
top: $value;
right: $value;
bottom: $value;
left: $value;
}
}
@each $name, $value in $map {
@if (type-of($value) == 'number') {
#{$prefix}#{selector-escape('-inset-' + $name) } {
top: $value * -1;
right: $value * -1;
bottom: $value * -1;
left: $value * -1;
}
}
}
}
@mixin make-inset-x-positions($map: $inset, $prefix: '.') {
@each $name, $value in $map {
#{$prefix}#{selector-escape('inset-x-' + $name) } {
right: $value;
left: $value;
}
}
@each $name, $value in $map {
@if (type-of($value) == 'number') {
#{$prefix}#{selector-escape('-inset-x-' + $name) } {
right: $value * -1;
left: $value * -1;
}
}
}
}
@mixin make-inset-y-positions($map: $inset, $prefix: '.') {
@each $name, $value in $map {
#{$prefix}#{selector-escape('inset-y-' + $name) } {
top: $value;
bottom: $value;
}
}
@each $name, $value in $map {
@if (type-of($value) == 'number') {
#{$prefix}#{selector-escape('-inset-y-' + $name) } {
top: $value * -1;
bottom: $value * -1;
}
}
}
}
@include make-single-positions('top');
@include make-single-positions('right');
@include make-single-positions('bottom');
@include make-single-positions('left');
@include make-inset-positions();
@include make-inset-x-positions();
@include make-inset-y-positions();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-single-positions(
'top',
$inset,
'.' + selector-escape($deivce + ':')
);
@include make-single-positions(
'right',
$inset,
'.' + selector-escape($deivce + ':')
);
@include make-single-positions(
'bottom',
$inset,
'.' + selector-escape($deivce + ':')
);
@include make-single-positions(
'left',
$inset,
'.' + selector-escape($deivce + ':')
);
@include make-inset-positions($inset, '.' + selector-escape($deivce + ':'));
@include make-inset-x-positions(
$inset,
'.' + selector-escape($deivce + ':')
);
@include make-inset-y-positions(
$inset,
'.' + selector-escape($deivce + ':')
);
}
}

42
scss/utilities/layout/_visibility.scss Normal file
View File

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

67
scss/utilities/layout/_z-index.scss Normal file
View File

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

63
scss/utilities/sizing/_height.scss Normal file
View File

@ -0,0 +1,63 @@
/*!markdown
---
title: Height
---
待补充
*/
@mixin height-sizing($map: $heights, $prefix: '.') {
@each $name, $value in $map {
@if $name == default {
#{$prefix}h {
height: $value;
}
} @else {
#{$prefix}h-#{'' + selector-escape($name)} {
height: $value;
}
}
}
}
@mixin max-height-sizing($map: $maxHeights, $prefix: '.') {
@each $name, $value in $map {
@if $name == default {
#{$prefix}max-h {
max-height: $value;
}
} @else {
#{$prefix}max-h-#{'' + selector-escape($name)} {
max-height: $value;
}
}
}
}
@mixin make-heights($prefix: '.') {
@include height-sizing($heights, $prefix);
#{$prefix}min-h-0 {
min-height: 0px;
}
#{$prefix}min-h-full {
min-height: 100%;
}
#{$prefix}min-h-screen {
min-height: 100vh;
}
@include max-height-sizing($maxHeights, $prefix);
}
@include make-heights();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-heights('.' + selector-escape($deivce + ':'));
}
}

65
scss/utilities/sizing/_width.scss Normal file
View File

@ -0,0 +1,65 @@
@mixin width-sizing($map: $widths, $prefix: '.') {
@each $name, $value in $map {
@if $name == default {
#{$prefix}w {
width: $value;
}
} @else {
#{$prefix}w-#{'' + selector-escape($name)} {
width: $value;
}
}
}
}
/*!markdown
---
title: Width
---
待补充
*/
@mixin max-width-sizing($map: $maxWidths, $prefix: '.') {
@each $name, $value in $map {
@if $name == default {
#{$prefix}max-w {
max-width: $value;
}
} @else {
#{$prefix}max-w-#{'' + selector-escape($name)} {
max-width: $value;
}
}
}
}
@mixin make-widths($prefix: '.') {
@include width-sizing($widths, $prefix);
#{$prefix}min-w-0 {
min-width: 0px;
}
#{$prefix}min-w-full {
min-width: 100%;
}
#{$prefix}min-w-min {
min-width: min-content;
}
#{$prefix}min-w-max {
min-width: max-content;
}
@include max-width-sizing($maxWidths, $prefix);
}
@include make-widths();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-widths('.' + selector-escape($deivce + ':'));
}
}

280
scss/utilities/spacing/_margin.scss Normal file
View File

@ -0,0 +1,280 @@
/*!markdown
---
title: Margin
---
待补充
*/
@mixin margin-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
@each $name, $value in $spacing {
@if $name == default {
#{$prefix}m#{$suffix} {
margin: $value;
}
} @else {
#{$prefix}m-#{'' + selector-escape($name)}#{$suffix} {
margin: $value;
}
}
}
#{$prefix}m-auto#{$suffix} {
margin: auto;
}
}
@mixin margin-negative-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
@each $name, $value in $spacing {
@if $name == default {
#{$prefix}-m#{$suffix} {
margin: $value * -1;
}
} @else {
#{$prefix}-m-#{'' + selector-escape($name)}#{$suffix} {
margin: $value * -1;
}
}
}
}
@mixin margin-x-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
@each $name, $value in $spacing {
@if $name == default {
#{$prefix}mx#{$suffix} {
margin-left: $value;
margin-right: $value;
}
} @else {
#{$prefix}mx-#{'' + selector-escape($name)}#{$suffix} {
margin-left: $value;
margin-right: $value;
}
}
}
#{$prefix}mx-auto#{$suffix} {
margin-left: auto;
margin-right: auto;
}
}
@mixin margin-negative-x-spacing(
$spacing: $spacing,
$prefix: '.',
$suffix: ''
) {
@each $name, $value in $spacing {
@if $name == default {
#{$prefix}-mx#{$suffix} {
margin-left: $value * -1;
margin-right: $value * -1;
}
} @else {
#{$prefix}-mx-#{'' + selector-escape($name)}#{$suffix} {
margin-left: $value * -1;
margin-right: $value * -1;
}
}
}
}
@mixin margin-y-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
@each $name, $value in $spacing {
@if $name == default {
#{$prefix}my#{$suffix} {
margin-top: $value;
margin-bottom: $value;
}
} @else {
#{$prefix}my-#{'' + selector-escape($name)}#{$suffix} {
margin-top: $value;
margin-bottom: $value;
}
}
}
#{$prefix}my-auto#{$suffix} {
margin-top: auto;
margin-bottom: auto;
}
}
@mixin margin-negative-y-spacing(
$spacing: $spacing,
$prefix: '.',
$suffix: ''
) {
@each $name, $value in $spacing {
@if $name == default {
#{$prefix}-my#{$suffix} {
margin-top: $value * -1;
margin-bottom: $value * -1;
}
} @else {
#{$prefix}-my-#{'' + selector-escape($name)}#{$suffix} {
margin-top: $value * -1;
margin-bottom: $value * -1;
}
}
}
}
@mixin margin-top-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
@each $name, $value in $spacing {
@if $name == default {
#{$prefix}mt#{$suffix} {
margin-top: $value;
}
} @else {
#{$prefix}mt-#{'' + selector-escape($name)}#{$suffix} {
margin-top: $value;
}
}
}
}
@mixin margin-negative-top-spacing(
$spacing: $spacing,
$prefix: '.',
$suffix: ''
) {
@each $name, $value in $spacing {
@if $name == default {
#{$prefix}-mt#{$suffix} {
margin-top: $value * -1;
}
} @else {
#{$prefix}-mt-#{'' + selector-escape($name)}#{$suffix} {
margin-top: $value * -1;
}
}
}
}
@mixin margin-right-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
@each $name, $value in $spacing {
@if $name == default {
#{$prefix}mr#{$suffix} {
margin-right: $value;
}
} @else {
#{$prefix}mr-#{'' + selector-escape($name)}#{$suffix} {
margin-right: $value;
}
}
}
}
@mixin margin-negative-right-spacing(
$spacing: $spacing,
$prefix: '.',
$suffix: ''
) {
@each $name, $value in $spacing {
@if $name == default {
#{$prefix}-mr#{$suffix} {
margin-right: $value * -1;
}
} @else {
#{$prefix}-mr-#{'' + selector-escape($name)}#{$suffix} {
margin-right: $value * -1;
}
}
}
}
@mixin margin-bottom-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
@each $name, $value in $spacing {
@if $name == default {
#{$prefix}mb#{$suffix} {
margin-bottom: $value;
}
} @else {
#{$prefix}mb-#{'' + selector-escape($name)}#{$suffix} {
margin-bottom: $value;
}
}
}
}
@mixin margin-negative-bottom-spacing(
$spacing: $spacing,
$prefix: '.',
$suffix: ''
) {
@each $name, $value in $spacing {
@if $name == default {
#{$prefix}-mb#{$suffix} {
margin-bottom: $value * -1;
}
} @else {
#{$prefix}-mb-#{'' + selector-escape($name)}#{$suffix} {
margin-bottom: $value * -1;
}
}
}
}
@mixin margin-left-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
@each $name, $value in $spacing {
@if $name == default {
#{$prefix}ml#{$suffix} {
margin-left: $value;
}
} @else {
#{$prefix}ml-#{'' + selector-escape($name)}#{$suffix} {
margin-left: $value;
}
}
}
}
@mixin margin-negative-left-spacing(
$spacing: $spacing,
$prefix: '.',
$suffix: ''
) {
@each $name, $value in $spacing {
@if $name == default {
#{$prefix}-ml#{$suffix} {
margin-left: $value * -1;
}
} @else {
#{$prefix}-ml-#{'' + selector-escape($name)}#{$suffix} {
margin-left: $value * -1;
}
}
}
}
@mixin make-margins($prefix: '.', $suffix: '') {
@include margin-spacing($spacing, $prefix, $suffix);
@include margin-negative-spacing($spacing, $prefix, $suffix);
@include margin-x-spacing($spacing, $prefix, $suffix);
@include margin-negative-x-spacing($spacing, $prefix, $suffix);
@include margin-y-spacing($spacing, $prefix, $suffix);
@include margin-negative-y-spacing($spacing, $prefix, $suffix);
@include margin-top-spacing($spacing, $prefix, $suffix);
@include margin-negative-top-spacing($spacing, $prefix, $suffix);
@include margin-right-spacing($spacing, $prefix, $suffix);
@include margin-negative-right-spacing($spacing, $prefix, $suffix);
@include margin-bottom-spacing($spacing, $prefix, $suffix);
@include margin-negative-bottom-spacing($spacing, $prefix, $suffix);
@include margin-left-spacing($spacing, $prefix, $suffix);
@include margin-negative-left-spacing($spacing, $prefix, $suffix);
}
@include make-margins();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-margins('.' + selector-escape($deivce + ':'));
}
}
// @include bg-colors('.' + selector-escape('hover:'), ':hover');
// @include bg-colors('.' + selector-escape('active:'), '.is-active');
// @include bg-colors('.' + selector-escape('focus:'), ':focus');
// @include bg-colors('.' + selector-escape('disabled:'), '.is-disabled');
// @include bg-colors('.group:hover .' + selector-escape('group-hover:'));

133
scss/utilities/spacing/_padding.scss Normal file
View File

@ -0,0 +1,133 @@
/*!markdown
---
title: Padding
---
待补充
*/
@mixin padding-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
@each $name, $value in $spacing {
@if $name == default {
#{$prefix}p#{$suffix} {
padding: $value;
}
} @else {
#{$prefix}p-#{'' + selector-escape($name)}#{$suffix} {
padding: $value;
}
}
}
}
@mixin padding-x-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
@each $name, $value in $spacing {
@if $name == default {
#{$prefix}px#{$suffix} {
padding-left: $value;
padding-right: $value;
}
} @else {
#{$prefix}px-#{'' + selector-escape($name)}#{$suffix} {
padding-left: $value;
padding-right: $value;
}
}
}
}
@mixin padding-y-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
@each $name, $value in $spacing {
@if $name == default {
#{$prefix}py#{$suffix} {
padding-top: $value;
padding-bottom: $value;
}
} @else {
#{$prefix}py-#{'' + selector-escape($name)}#{$suffix} {
padding-top: $value;
padding-bottom: $value;
}
}
}
}
@mixin padding-top-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
@each $name, $value in $spacing {
@if $name == default {
#{$prefix}pt#{$suffix} {
padding-top: $value;
}
} @else {
#{$prefix}pt-#{'' + selector-escape($name)}#{$suffix} {
padding-top: $value;
}
}
}
}
@mixin padding-right-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
@each $name, $value in $spacing {
@if $name == default {
#{$prefix}pr#{$suffix} {
padding-right: $value;
}
} @else {
#{$prefix}pr-#{'' + selector-escape($name)}#{$suffix} {
padding-right: $value;
}
}
}
}
@mixin padding-bottom-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
@each $name, $value in $spacing {
@if $name == default {
#{$prefix}pb#{$suffix} {
padding-bottom: $value;
}
} @else {
#{$prefix}pb-#{'' + selector-escape($name)}#{$suffix} {
padding-bottom: $value;
}
}
}
}
@mixin padding-left-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
@each $name, $value in $spacing {
@if $name == default {
#{$prefix}pl#{$suffix} {
padding-left: $value;
}
} @else {
#{$prefix}pl-#{'' + selector-escape($name)}#{$suffix} {
padding-left: $value;
}
}
}
}
@mixin make-padding($prefix: '.', $suffix: '') {
@include padding-spacing($spacing, $prefix, $suffix);
@include padding-x-spacing($spacing, $prefix, $suffix);
@include padding-y-spacing($spacing, $prefix, $suffix);
@include padding-top-spacing($spacing, $prefix, $suffix);
@include padding-right-spacing($spacing, $prefix, $suffix);
@include padding-bottom-spacing($spacing, $prefix, $suffix);
@include padding-left-spacing($spacing, $prefix, $suffix);
}
@include make-padding();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-padding('.' + selector-escape($deivce + ':'));
}
}
// @include bg-colors('.' + selector-escape('hover:'), ':hover');
// @include bg-colors('.' + selector-escape('active:'), '.is-active');
// @include bg-colors('.' + selector-escape('focus:'), ':focus');
// @include bg-colors('.' + selector-escape('disabled:'), '.is-disabled');
// @include bg-colors('.group:hover .' + selector-escape('group-hover:'));

73
scss/utilities/spacing/_space-between.scss Normal file
View File

@ -0,0 +1,73 @@
/*!markdown
---
title: Space Between
---
待补充
*/
@mixin space-x-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
@each $name, $value in $spacing {
@if $name == default {
#{$prefix}space-x#{$suffix} {
& > :not([hidden]) ~ :not([hidden]) {
margin-left: $value;
}
&.space-x-reverse > :not([hidden]) ~ :not([hidden]) {
margin-right: $value;
}
}
} @else {
#{$prefix}space-x-#{'' + selector-escape($name)}#{$suffix} {
& > :not([hidden]) ~ :not([hidden]) {
margin-left: $value;
}
&.space-x-reverse > :not([hidden]) ~ :not([hidden]) {
margin-right: $value;
}
}
}
}
}
@mixin space-y-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
@each $name, $value in $spacing {
@if $name == default {
#{$prefix}space-y#{$suffix} {
& > :not([hidden]) ~ :not([hidden]) {
margin-top: $value;
}
&.space-y-reverse > :not([hidden]) ~ :not([hidden]) {
margin-bottom: $value;
}
}
} @else {
#{$prefix}space-y-#{'' + selector-escape($name)}#{$suffix} {
& > :not([hidden]) ~ :not([hidden]) {
margin-top: $value;
}
&.space-y-reverse > :not([hidden]) ~ :not([hidden]) {
margin-bottom: $value;
}
}
}
}
}
@mixin make-spaces($prefix: '.', $suffix: '') {
@include space-x-spacing($spacing, $prefix, $suffix);
@include space-y-spacing($spacing, $prefix, $suffix);
}
@include make-spaces();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-spaces('.' + selector-escape($deivce + ':'));
}
}

25
scss/utilities/typography/_font-size.scss Normal file
View File

@ -0,0 +1,25 @@
/*!markdown
---
title: Font Size
---
待补充
*/
@mixin make-font-size($prefix: '.', $suffix: '') {
@each $name, $values in $fontSizes {
#{$prefix}text-#{$name}#{$suffix} {
font-size: nth($values, 1);
line-height: nth($values, 2);
}
}
}
@include make-font-size();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-font-size('.' + selector-escape($deivce + ':'));
}
}

28
scss/utilities/typography/_font-style.scss Normal file
View File

@ -0,0 +1,28 @@
/*!markdown
---
title: Font Style
---
待补充
*/
@mixin make-font-style($prefix: '.') {
#{$prefix}italic {
font-style: italic;
}
#{$prefix}not-italic {
font-style: normal;
}
}
@include make-font-style();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-font-style('.' + selector-escape($deivce + ':'));
}
}
// hover ?

39
scss/utilities/typography/_font-weight.scss Normal file
View File

@ -0,0 +1,39 @@
/*!markdown
---
title: Font Weight
---
待补充
*/
@mixin make-font-weight($prefix: '.') {
@each $name,
$value
in (
'thin': 100,
'extralight': 200,
'light': 300,
'normal': 400,
'medium': 500,
'semibold': 600,
'bold': 700,
'extrabold': 800,
'black': 900
)
{
#{$prefix}font-#{$name} {
font-weight: $value;
}
}
}
@include make-font-weight();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-font-weight('.' + selector-escape($deivce + ':'));
}
}
// hover ?

36
scss/utilities/typography/_letter-spacing.scss Normal file
View File

@ -0,0 +1,36 @@
/*!markdown
---
title: Letter Spacing
---
待补充
*/
@mixin make-letter-spacing($prefix: '.') {
@each $name,
$value
in (
'tighter': -0.05em,
'tight': -0.025em,
'normal': 0em,
'wide': 0.025,
'wider': 0.05em,
'widest': 0.1em
)
{
#{$prefix}tracking-#{$name} {
letter-spacing: $value;
}
}
}
@include make-letter-spacing();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-letter-spacing('.' + selector-escape($deivce + ':'));
}
}
// hover ?

44
scss/utilities/typography/_line-height.scss Normal file
View File

@ -0,0 +1,44 @@
/*!markdown
---
title: Line Height
---
待补充
*/
@mixin make-line-height($prefix: '.') {
@each $name,
$value
in (
'3': 0.75rem,
'4': 1rem,
'5': 1.25rem,
'6': 1.5rem,
'7': 1.75rem,
'8': 2rem,
'9': 2.25rem,
'10': 2.5rem,
'none': 1,
'tight': 1.25,
'snug': 1.375,
'normal': 1.5,
'relaxed': 1.625,
'loose': 2
)
{
#{$prefix}leading-#{$name} {
line-height: $value;
}
}
}
@include make-line-height();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-line-height('.' + selector-escape($deivce + ':'));
}
}
// hover ?

37
scss/utilities/typography/_list-style-type.scss Normal file
View File

@ -0,0 +1,37 @@
/*!markdown
---
title: List Style Type
---
待补充
*/
@mixin make-list-style-type($prefix: '.') {
@each $name, $value in ('none': none, 'disc': disc, 'decimal': decimal) {
#{$prefix}list-#{$name} {
list-style-type: $value;
}
}
}
@mixin make-list-style-position($prefix: '.') {
@each $name, $value in ('inside': inside, 'outside': outside) {
#{$prefix}list-#{$name} {
list-style-position: $value;
}
}
}
@include make-list-style-type();
@include make-list-style-position();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-list-style-type('.' + selector-escape($deivce + ':'));
@include make-list-style-position('.' + selector-escape($deivce + ':'));
}
}
// hover ?

29
scss/utilities/typography/_text-align.scss Normal file
View File

@ -0,0 +1,29 @@
/*!markdown
---
title: Text Align
---
待补充
*/
@mixin make-text-align($prefix: '.') {
@each $name,
$value
in ('left': left, 'center': center, 'right': right, 'justify': justify)
{
#{$prefix}text-#{$name} {
text-align: $value;
}
}
}
@include make-text-align();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-text-align('.' + selector-escape($deivce + ':'));
}
}
// hover ?

80
scss/utilities/typography/_text-color.scss Normal file
View File

@ -0,0 +1,80 @@
/*!markdown
---
title: Text Color
---
待补充
*/
@mixin text-colors-map(
$colors: $colors,
$namePrefix: '',
$prefix: '.',
$suffix: ''
) {
@each $name, $color in $colors {
@if (is-map($color)) {
@include text-colors-map($color, #{'-' + $name}, $prefix, $suffix);
} @else if $suffix == '.is-active' {
#{$prefix}text#{$namePrefix}-#{'' + $name}.is-active,
#{$prefix}text#{$namePrefix}-#{'' + $name}:active {
color: $color;
}
} @else if $suffix == '.is-disabled' {
#{$prefix}text#{$namePrefix}-#{'' + $name}.is-disabled,
#{$prefix}text#{$namePrefix}-#{'' + $name}:disabled {
color: $color;
}
} @else {
#{$prefix}text#{$namePrefix}-#{'' + $name}#{$suffix} {
color: $color;
}
}
}
}
@mixin text-colors($prefix: '.', $suffix: '') {
#{$prefix}text-transparent#{$suffix} {
color: transparent;
}
#{$prefix}text-current#{$suffix} {
color: currentColor;
}
@include text-colors-map($colors, '', $prefix, $suffix);
}
@include text-colors();
@include text-colors('.' + selector-escape('hover:'), ':hover');
@include text-colors('.' + selector-escape('active:'), '.is-active');
@include text-colors('.' + selector-escape('focus:'), ':focus');
@include text-colors('.' + selector-escape('disabled:'), '.is-disabled');
@include text-colors('.group:hover .' + selector-escape('group-hover:'));
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include text-colors('.' + selector-escape($deivce + ':'));
@include text-colors(
'.' + selector-escape($deivce + ':') + selector-escape('hover:'),
':hover'
);
@include text-colors(
'.' + selector-escape($deivce + ':') + selector-escape('active:'),
'.is-active'
);
@include text-colors(
'.' + selector-escape($deivce + ':') + selector-escape('focus:'),
':focus'
);
@include text-colors(
'.' + selector-escape($deivce + ':') + selector-escape('disabled:'),
'.is-disabled'
);
@include text-colors(
'.group:hover .' + selector-escape($deivce + ':') +
selector-escape('group-hover:')
);
}
}

30
scss/utilities/typography/_text-decoration.scss Normal file
View File

@ -0,0 +1,30 @@
/*!markdown
---
title: Text Decoration
---
待补充
*/
@mixin make-text-decoration($prefix: '.') {
#{$prefix}underline {
text-decoration: underline;
}
#{$prefix}line-through {
text-decoration: line-through;
}
#{$prefix}no-underline {
text-decoration: none;
}
}
@include make-text-decoration();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-text-decoration('.' + selector-escape($deivce + ':'));
}
}
// hover ?

35
scss/utilities/typography/_text-overflow.scss Normal file
View File

@ -0,0 +1,35 @@
/*!markdown
---
title: Text OverFlow
---
待补充
*/
@mixin make-text-overflow($prefix: '.') {
#{$prefix}truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#{$prefix}overflow-ellipsis {
text-overflow: ellipsis;
}
#{$prefix}overflow-clip {
text-overflow: clip;
}
}
@include make-text-overflow();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-text-overflow('.' + selector-escape($deivce + ':'));
}
}
// hover ?

34
scss/utilities/typography/_text-transform.scss Normal file
View File

@ -0,0 +1,34 @@
/*!markdown
---
title: Text Transform
---
待补充
*/
@mixin make-text-transform($prefix: '.') {
@each $name,
$value
in (
'uppercase': uppercase,
'lowercase': lowercase,
'capitalize': capitalize,
'normal-case': none
)
{
#{$prefix}#{$name} {
text-transform: $value;
}
}
}
@include make-text-transform();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-text-transform('.' + selector-escape($deivce + ':'));
}
}
// hover ?

36
scss/utilities/typography/_vertical-align.scss Normal file
View File

@ -0,0 +1,36 @@
/*!markdown
---
title: Vertial Align
---
待补充
*/
@mixin make-vertical-align($prefix: '.') {
@each $name,
$value
in (
'baseline': baseline,
'top': top,
'middle': middle,
'bottom': bottom,
'text-top': text-top,
'text-bottom': text-bottom
)
{
#{$prefix}align-#{$name} {
vertical-align: $value;
}
}
}
@include make-vertical-align();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-vertical-align('.' + selector-escape($deivce + ':'));
}
}
// hover ?

35
scss/utilities/typography/_whitespace.scss Normal file
View File

@ -0,0 +1,35 @@
/*!markdown
---
title: Whitespace
---
待补充
*/
@mixin make-whitespace($prefix: '.') {
@each $name,
$value
in (
'normal': normal,
'nowrap': nowrap,
'pre': pre,
'pre-line': pre-line,
'pre-wrap': pre-wrap
)
{
#{$prefix}align-#{$name} {
vertical-align: $value;
}
}
}
@include make-whitespace();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-whitespace('.' + selector-escape($deivce + ':'));
}
}
// hover ?

31
scss/utilities/typography/_word-break.scss Normal file
View File

@ -0,0 +1,31 @@
/*!markdown
---
title: Word Break
---
待补充
*/
@mixin make-word-break($prefix: '.') {
#{$prefix}break-normal {
overflow-wrap: normal;
word-break: normal;
}
#{$prefix}break-words {
overflow-wrap: break-word;
}
#{$prefix}break-all {
word-break: break-all;
}
}
@include make-word-break();
@each $deivce in map-keys($devices) {
@include media-device($deivce) {
@include make-word-break('.' + selector-escape($deivce + ':'));
}
}
// hover ?

36
src/components/Alert.tsx
View File

@ -11,8 +11,6 @@ import {ClassNamesFn, themeable, ThemeProps} from '../theme';
import {LocaleProps, localeable} from '../locale';
import Html from './Html';
import {PlainObject} from '../types';
import {render as renderSchema} from '../factory';
export interface AlertProps extends ThemeProps, LocaleProps {
container?: any;
confirmText?: string;
@ -256,6 +254,18 @@ export class Alert extends React.Component<AlertProps, AlertState> {
}
}
export type renderSchemaFn = (
controls: Array<any>,
value: PlainObject,
callback?: (values: PlainObject) => void,
scopeRef?: (value: any) => void,
theme?: string
) => JSX.Element;
let renderSchemaFn: renderSchemaFn;
export function setRenderSchemaFn(fn: renderSchemaFn) {
renderSchemaFn = fn;
}
function renderForm(
controls: Array<any>,
value: PlainObject = {},
@ -263,27 +273,7 @@ function renderForm(
scopeRef?: (value: any) => void,
theme?: string
) {
return renderSchema(
{
name: 'form',
type: 'form',
wrapWithPanel: false,
mode: 'horizontal',
controls,
messages: {
validateFailed: ''
}
},
{
data: value,
onFinished: callback,
scopeRef,
theme
},
{
session: 'prompt'
}
);
return renderSchemaFn?.(controls, value, callback, scopeRef, theme);
}
export const alert: (content: string, title?: string) => void = (

1
src/components/Radios.tsx
View File

@ -40,6 +40,7 @@ interface RadioProps extends OptionProps {
export class Radios extends React.Component<RadioProps, any> {
static defaultProps = {
type: 'radio',
resetValue: '',
joinValues: true,
clearable: false,
columnsCount: 1 // 一行显示一个

9
src/components/Select.tsx
View File

@ -109,6 +109,7 @@ export interface OptionProps {
extractValue?: boolean;
delimiter?: string;
clearable?: boolean;
resetValue: any;
placeholder?: string;
disabled?: boolean;
creatable?: boolean;
@ -362,6 +363,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
placeholder: '请选择',
valueField: 'value',
labelField: 'label',
resetValue: '',
inline: false,
disabled: false,
checkAll: false,
@ -663,7 +665,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
const onChange = this.props.onChange;
e.preventDefault();
e.stopPropagation();
onChange('');
onChange(this.props.resetValue);
}
handleAddClick() {
@ -970,6 +972,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
const selection = this.state.selection;
const inputValue = this.state.inputValue;
const resetValue = this.props.resetValue;
return (
<Downshift
@ -1011,7 +1014,9 @@ export class Select extends React.Component<SelectProps, SelectState> {
<div className={cx(`Select-valueWrap`)}>
{this.renderValue(options)}
</div>
{clearable && !disabled && value && value.length ? (
{clearable &&
!disabled &&
(Array.isArray(value) ? value.length : value !== resetValue) ? (
<a onClick={this.clearValue} className={cx('Select-clear')}>
<Icon icon="close" className="icon" />
</a>

13
src/components/Tree.tsx
View File

@ -331,13 +331,10 @@ export class TreeSelector extends React.Component<
@autobind
handleAdd(parent: Option | null = null) {
const {bultinCUD, onAdd, options} = this.props;
let idx: Array<number> | undefined = undefined;
if (!bultinCUD) {
idx = parent
? findTreeIndex(options, item => item === parent)
: undefined;
return onAdd && onAdd(idx);
const idxes = findTreeIndex(options, item => item === parent) || [];
return onAdd && onAdd(idxes.concat(0));
} else {
this.setState({
isEditing: false,
@ -400,11 +397,11 @@ export class TreeSelector extends React.Component<
},
() => {
if (isAdding && onAdd) {
let idx =
const idxes =
(addingParent &&
findTreeIndex(options, item => item === addingParent)) ||
[];
onAdd(idx, {[labelField]: value}, true);
onAdd(idxes.concat(0), {[labelField]: value}, true);
} else if (isEditing && onEdit) {
onEdit(
{
@ -735,7 +732,7 @@ export class TreeSelector extends React.Component<
return (
<div className={cx(`Tree ${className || ''}`)}>
{options && options.length ? (
{(options && options.length) || addBtn || hideRoot === false ? (
<ul className={cx('Tree-list')}>
{hideRoot ? (
<>

32
src/factory.tsx
View File

@ -44,7 +44,7 @@ import {
import find from 'lodash/find';
import Alert from './components/Alert2';
import {toast} from './components/Toast';
import {alert, confirm} from './components/Alert';
import {alert, confirm, setRenderSchemaFn} from './components/Alert';
import {LazyComponent} from './components';
import ImageGallery from './components/ImageGallery';
import {
@ -1049,9 +1049,9 @@ export function render(
fetcher: options.fetcher
? wrapFetcher(options.fetcher)
: defaultOptions.fetcher,
confirm: options.confirm
? promisify(options.confirm)
: defaultOptions.confirm,
confirm: promisify(
options.confirm || defaultOptions.confirm || window.confirm
),
locale,
translate
} as any;
@ -1227,3 +1227,27 @@ export function withRootStore<
ComposedComponent: T;
};
}
setRenderSchemaFn((controls, value, callback, scopeRef, theme) => {
return render(
{
name: 'form',
type: 'form',
wrapWithPanel: false,
mode: 'horizontal',
controls,
messages: {
validateFailed: ''
}
},
{
data: value,
onFinished: callback,
scopeRef,
theme
},
{
session: 'prompt'
}
);
});

Some files were not shown because too many files have changed in this diff Show More