You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2020/06/28 09:56:58 UTC
[incubator-echarts-doc] branch live-example updated: example: add
example open button
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch live-example
in repository https://gitbox.apache.org/repos/asf/incubator-echarts-doc.git
The following commit(s) were added to refs/heads/live-example by this push:
new 448e34a example: add example open button
448e34a is described below
commit 448e34a4e468c4fe85e9a01554862364f1eb4abe
Author: pissang <bm...@gmail.com>
AuthorDate: Sun Jun 28 17:56:17 2020 +0800
example: add example open button
---
src/components/DocContent.vue | 44 ++++++++++++++++++++++++++++++++++++++----
src/components/LiveExample.vue | 8 +++-----
src/controls/ControlText.vue | 2 +-
src/i18n.js | 7 +++++++
4 files changed, 51 insertions(+), 10 deletions(-)
diff --git a/src/components/DocContent.vue b/src/components/DocContent.vue
index c62d16d..57c52ce 100644
--- a/src/components/DocContent.vue
+++ b/src/components/DocContent.vue
@@ -27,10 +27,15 @@
></DocContentItemCard>
</div>
</div>
- <LiveExample
- v-if="shared.showOptionExample && !shared.isMobile"
- :isDownLayout="isExampleTopDownPlayout"
- ></LiveExample>
+ <template v-if="!shared.isMobile">
+ <LiveExample
+ v-if="shared.showOptionExample"
+ :isDownLayout="isExampleTopDownPlayout"
+ ></LiveExample>
+ <div v-else class="open-option-example" @click="openOptionExample">
+ <i class="el-icon-data-line"></i> {{ $t('example.titleShort') }}
+ </div>
+ </template>
</div>
</template>
@@ -223,6 +228,10 @@ export default {
this.pageOutline = {};
this.loading = false;
});
+ },
+
+ openOptionExample() {
+ this.shared.showOptionExample = true;
}
},
@@ -251,11 +260,36 @@ export default {
.doc-main {
margin-left: 10px;
+
+ .open-option-example {
+ position: fixed;
+ right: 0;
+ // bottom: 50px;
+ top: 50%;
+ padding: 10px;
+ border-radius: 20px 0 0 20px;
+ box-shadow: 0 0 10px rgba(0,0,0,0.2);
+ background: #fff;
+ cursor: pointer;
+
+ font-size: 12px;
+
+ &:hover {
+ background: #eee;
+ }
+
+ i {
+ font-size: 16px;
+ vertical-align: middle;
+ }
+ }
}
.doc-content {
text-align: left;
+ // transition: margin-right 500ms cubic-bezier(0.215, 0.610, 0.355, 1);
+
&.option-example-actived {
&.option-example-down-layout {
@@ -267,6 +301,7 @@ export default {
}
+
h2 {
color: #B03A5B;
font-size: 34px;
@@ -297,6 +332,7 @@ export default {
@include description-html-formatter;
}
+
}
.ec-doc-tutorial {
diff --git a/src/components/LiveExample.vue b/src/components/LiveExample.vue
index 8ced7d6..85dde0a 100644
--- a/src/components/LiveExample.vue
+++ b/src/components/LiveExample.vue
@@ -337,6 +337,9 @@ export default {
text-align: left;
background: #fff;
+ // transition: width 500ms cubic-bezier(0.215, 0.610, 0.355, 1);
+
+
// background: #162436;
// border-left: 1px solid #ddd;
@@ -376,11 +379,6 @@ export default {
.example-code {
position: relative;
- // h4 {
- // margin: 0 10px;
- // padding: 0;
- // }
-
.codemirror-main {
position: absolute;
left: 10px;
diff --git a/src/controls/ControlText.vue b/src/controls/ControlText.vue
index d0245e0..e0e98d2 100644
--- a/src/controls/ControlText.vue
+++ b/src/controls/ControlText.vue
@@ -1,6 +1,6 @@
<template>
<div class="control-text">
-<el-input v-model="innerValue" size="mini" @change="onValueChange"></el-input>
+<el-input v-model="innerValue" size="mini" :placeholder="$t('example.inputPlaceholder')" @change="onValueChange"></el-input>
</div>
</template>
diff --git a/src/i18n.js b/src/i18n.js
index f209fc2..8b35eda 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -21,6 +21,7 @@ export default {
},
example: {
title: 'Preview the Option',
+ titleShort: 'Preview',
intro: 'Try different values of the option and preview the effects!',
noExample: 'No example available for current component.',
@@ -33,6 +34,8 @@ export default {
absoluteMode: 'ABSOLUTE',
percentMode: 'PERCENT',
+ inputPlaceholder: 'Input to change the text content',
+
builtin: 'Builtin',
upload: 'Upload SVG or PNG',
@@ -64,6 +67,8 @@ export default {
},
example: {
title: '配置项效果预览',
+ titleShort: '预览',
+
intro: '调节控件可预览配置项不同取值的效果',
noExample: '当前组件暂无可用示例',
@@ -75,6 +80,8 @@ export default {
absoluteMode: '绝对值',
percentMode: '百分比',
+ inputPlaceholder: '输入改变文本',
+
builtin: '内置',
upload: '上传 SVG 或 PNG',
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org