From 4e565eae8d20d7deda502ba3739c63889554a320 Mon Sep 17 00:00:00 2001
From: 2betop <2betop.cn@gmail.com>
Date: Mon, 30 Nov 2020 16:53:04 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E5=85=85=E6=96=87=E6=A1=A3,=E8=B0=83?=
=?UTF-8?q?=E6=95=B4=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
docs/css-utilities/index.md | 6 +-
docs/css-utilities/responsive-design.md | 10 ++-
docs/css-utilities/state.md | 19 +++---
examples/components/App.tsx | 21 +++----
examples/components/DocSearch.jsx | 7 ++-
examples/components/MdRenderer.tsx | 17 ++---
examples/mobile.html | 4 +-
examples/style.scss | 65 ++++++++++++++------
mock/server.conf | 2 +-
package.json | 2 +-
scripts/NodeParser/IntersectionNodeParser.ts | 13 ++--
scripts/build-schemas.ts | 2 +-
12 files changed, 106 insertions(+), 62 deletions(-)
diff --git a/docs/css-utilities/index.md b/docs/css-utilities/index.md
index e56d88ae1..082849abd 100644
--- a/docs/css-utilities/index.md
+++ b/docs/css-utilities/index.md
@@ -4,13 +4,13 @@ title: 快速开始
amis 参考 [tailwindcss](https://tailwindcss.com/) 加入了大量的帮助类 css，掌握这些用法，完全不用手写 css。
-理念来自[tailwindcss](https://tailwindcss.com/), 不过这边做了一定的筛选，把一些不常用的用法剔除了，另外响应式方面只做了 pc 端和手机端，其他的设备并没有支持。这个文件未压缩版本大概是 300K 左右，比官方的要小很多。目前这个文件没有和主题文件合并在一起，用户可以选择性加载。
+理念来自于[tailwindcss](https://tailwindcss.com/), 不过根据我们经验分析，做了一定的筛选，把一些不常用的用法剔除了，另外响应式方面只做了 pc 端和手机端，其他的设备并没有支持。这个文件未压缩版本大概是 300K 左右，比官方的要小很多。目前这个文件没有和主题文件合并在一起，用户可以选择性加载。
```html
```
-引入这个 css 后，就可以像下面那样直接给 html 标签加类名的方式来设定样式了。
+引入这个 css 后，就可以像下面那样直接用 html 标签加类名的方式来设定样式了。
```html
这是一段文字，pc 端我是黑色的，在移动端查看，我是红色的。
+``` -->
+
+```schema:height="100" scope="body"
+{
+ "type": "tpl",
+ "className": "text-black-500 mobile:text-red-500",
+ "tpl": "这是一段文字，pc 端我是黑色的，在移动端查看，我是红色的。"
+}
```
几乎所有的类名都可以在开头处加个 `mobile:` 用来表示是移动端样式。
diff --git a/docs/css-utilities/state.md b/docs/css-utilities/state.md
index 354e40567..77a989f6f 100644
--- a/docs/css-utilities/state.md
+++ b/docs/css-utilities/state.md
@@ -2,12 +2,17 @@
title: 状态样式
---
-响应式设计目前只支持 pc 端和手机端，其他设备目前不支持，貌似也没必要支持。默认就是 pc，如果你在 css 类名前面再加个 `mobile:` 开头，就是专门给移动设备设置样式了。
+除了给默认状态设置样式外，还支持几个特定状态的样式设置比如：hover（鼠标悬停）、active（当前选中）或者 disabled（当前不可用）。
-```html
-
- 这是一段文字，pc 端我是黑色的，在移动端查看，我是红色的。
-
+```schema:height="100" scope="body"
+{
+ "type": "button",
+ "label": "按钮",
+ "className": "bg-pink-400 hover:bg-pink-600",
+ "actionType": "dialog",
+ "dialog": {
+ "title": "弹框",
+ "body": "Hello World!"
+ }
+}
```
-
-几乎所有的类名都可以在开头处加个 `mobile:` 用来表示是移动端样式。
diff --git a/examples/components/App.tsx b/examples/components/App.tsx
index 89d0a2508..0ef76dfb6 100644
--- a/examples/components/App.tsx
+++ b/examples/components/App.tsx
@@ -148,7 +148,7 @@ export class App extends React.PureComponent {
});
document
- .querySelectorAll(`link[title=${this.state.theme.value}]`)
+ .querySelectorAll(`link[title="${this.state.theme.value}"]`)
.forEach(item => {
item.disabled = false;
});
@@ -164,13 +164,13 @@ export class App extends React.PureComponent {
if (preState.theme.value !== this.state.theme.value) {
document
- .querySelectorAll(`link[title=${preState.theme.value}]`)
+ .querySelectorAll(`link[title="${preState.theme.value}"]`)
.forEach(item => {
item.disabled = true;
});
document
- .querySelectorAll(`link[title=${this.state.theme.value}]`)
+ .querySelectorAll(`link[title="${this.state.theme.value}"]`)
.forEach(item => {
item.disabled = false;
});
@@ -295,15 +295,14 @@ export class App extends React.PureComponent {
-
-
-
-
);
}
diff --git a/examples/components/DocSearch.jsx b/examples/components/DocSearch.jsx
index 294c692bf..44445c816 100644
--- a/examples/components/DocSearch.jsx
+++ b/examples/components/DocSearch.jsx
@@ -120,10 +120,13 @@ export default class DocSearch extends React.Component {
const ns = this.props.theme.ns;
return (
<>
- */}
+
+
+
@@ -129,9 +123,18 @@ 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);
+ const origin = script.parentNode;
+ origin.parentNode.replaceChild(dom, origin);
this.doms.push(dom);
ReactDOM.unstable_renderSubtreeIntoContainer(
diff --git a/examples/mobile.html b/examples/mobile.html
index d853bab61..11f00365b 100644
--- a/examples/mobile.html
+++ b/examples/mobile.html
@@ -12,6 +12,7 @@
+
+