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 2021/08/28 08:17:22 UTC
[echarts-handbook] branch master updated: add sidebar toggle in
mobile
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/echarts-handbook.git
The following commit(s) were added to refs/heads/master by this push:
new 755d545 add sidebar toggle in mobile
755d545 is described below
commit 755d545b92e78bfb95b188bfa3e09afa8bd98b88
Author: pissang <bm...@gmail.com>
AuthorDate: Sat Aug 28 16:17:14 2021 +0800
add sidebar toggle in mobile
---
components/partials/Sidebar.vue | 114 ++++++++++++++++++++++++++++++-
contents/en/posts.yml | 8 +--
contents/zh/basics/release-note/5-2-0.md | 2 +-
contents/zh/posts.yml | 4 +-
4 files changed, 118 insertions(+), 10 deletions(-)
diff --git a/components/partials/Sidebar.vue b/components/partials/Sidebar.vue
index 1b28f24..e9a89d3 100644
--- a/components/partials/Sidebar.vue
+++ b/components/partials/Sidebar.vue
@@ -1,6 +1,11 @@
<template>
- <div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10">
- <!-- active: {{ active }}. {{ posts }} -->
+ <div
+ :class="
+ `bd-sidebar col-sm-3 col-sm-9 col-md-2 col-md-10 ${
+ sidebarOpen ? '' : 'closed'
+ }`
+ "
+ >
<div class="bd-docs-nav">
<ul class="nav bd-sidenav nav-root level0">
<SidebarNavItem
@@ -13,6 +18,52 @@
</SidebarNavItem>
</ul>
</div>
+ <div class="open-sidebar" @click="sidebarOpen = !sidebarOpen">
+ <!-- <svg
+ xmlns="http://www.w3.org/2000/svg"
+ class="h-6 w-6"
+ fill="none"
+ viewBox="0 0 24 24"
+ stroke="currentColor"
+ >
+ <path
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ stroke-width="2"
+ d="M4 6h16M4 12h8m-8 6h16"
+ />
+ </svg> -->
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ class="h-6 w-6"
+ fill="none"
+ viewBox="0 0 24 24"
+ stroke="currentColor"
+ v-if="!sidebarOpen"
+ >
+ <path
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ stroke-width="2"
+ d="M9 5l7 7-7 7"
+ />
+ </svg>
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ class="h-6 w-6"
+ fill="none"
+ viewBox="0 0 24 24"
+ stroke="currentColor"
+ v-else
+ >
+ <path
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ stroke-width="2"
+ d="M15 19l-7-7 7-7"
+ />
+ </svg>
+ </div>
</div>
</template>
@@ -26,6 +77,17 @@ export default Vue.extend({
SidebarNavItem
},
+ data() {
+ return {
+ sidebarOpen: false
+ }
+ },
+ watch: {
+ $route(to, from) {
+ this.sidebarOpen = false
+ }
+ },
+
mounted() {
const $actived = this.$el.querySelector('.actived') as HTMLElement
if ($actived) {
@@ -56,10 +118,56 @@ export default Vue.extend({
padding: 0;
overflow-y: auto;
border-right: 1px solid #eee;
+ border-bottom: none;
- @media (max-width: 768px) {
+ .open-sidebar {
display: none;
}
+
+ @media (max-width: 768px) {
+ &.closed {
+ left: -280px;
+ @apply shadow-none;
+ }
+
+ position: fixed;
+ left: 0;
+ width: 280px;
+ top: 50px;
+ bottom: 0;
+ background-color: #fff;
+ @apply shadow-2xl;
+ border-right: none;
+ overflow: visible;
+
+ @apply transition-all;
+
+ .bd-docs-nav {
+ overflow-x: hidden;
+ overflow-y: scroll;
+ width: 280px;
+ height: calc(100vh - 50px);
+ }
+
+ .open-sidebar {
+ display: block;
+ position: absolute;
+ left: 280px;
+ bottom: 20px;
+ width: 40px;
+ height: 40px;
+ padding: 5px;
+ color: #000;
+ z-index: 1200;
+ background: #eee;
+ @apply shadow-lg rounded-r-2xl;
+
+ svg {
+ width: 100%;
+ height: 100%;
+ }
+ }
+ }
}
.bd-sidenav {
diff --git a/contents/en/posts.yml b/contents/en/posts.yml
index 3e67478..0621f70 100644
--- a/contents/en/posts.yml
+++ b/contents/en/posts.yml
@@ -14,16 +14,16 @@
dir: inspiration
- title: Get Help
dir: help
- - title: Release Note
+ - title: What's New
dir: release-note
children:
- - title: ECharts 5.2.0
- draft: true
- dir: 5-2-0
- title: ECharts 5 Features
dir: v5-feature
- title: ECharts 5 Upgrade Guide
dir: v5-upgrade-guide
+ - title: 5.2
+ draft: true
+ dir: 5-2-0
- title: Concepts
dir: concepts
children:
diff --git a/contents/zh/basics/release-note/5-2-0.md b/contents/zh/basics/release-note/5-2-0.md
index 689f3ee..4349c5c 100644
--- a/contents/zh/basics/release-note/5-2-0.md
+++ b/contents/zh/basics/release-note/5-2-0.md
@@ -2,7 +2,7 @@
## 全局过渡动画
-在 Apache ECharts 中我们一直把自然流畅的过渡动画作为一个重要特性。通过避免数据的突变，不仅仅可以改善视觉效果，更为表达数据的关联和演变提供了可能。因此，在 5.2.0 中，我们进一步将过渡动画从表现系列内部数据的变化，泛化到全局能力。接下来，我们会看到这种全局的**过渡动画（Universal Transition）**是如何为图表增加表现力和叙事能力的。
+在 Apache ECharts 中我们一直把自然流畅的过渡动画作为一个重要特性。通过避免数据的突变，不仅仅可以改善视觉效果，更为表达数据的关联和演变提供了可能。因此，在 5.2.0 中，我们进一步将过渡动画从表现系列内部数据的变化，泛化到全局能力。接下来，我们会看到这种全局的**过渡动画 Universal Transition**是如何为图表增加表现力和叙事能力的。
在之前的版本中，过渡动画有一定的局限性：只能用于相同类型的图形的位置、尺寸、形状，而且只能作用在相同类型的系列上。比如，下面例子就是通过饼图中扇区形状的变化反映了数据分布的变化：
diff --git a/contents/zh/posts.yml b/contents/zh/posts.yml
index e6aa5e8..bef1eca 100644
--- a/contents/zh/posts.yml
+++ b/contents/zh/posts.yml
@@ -14,14 +14,14 @@
dir: inspiration
- title: 寻求帮助
dir: help
- - title: 版本介绍
+ - title: 版本特性
dir: release-note
children:
- title: ECharts 5 特性介绍
dir: v5-feature
- title: ECharts 5 升级指南
dir: v5-upgrade-guide
- - title: 5.2.0
+ - title: 5.2
dir: 5-2-0
- title: 概念篇
dir: concepts
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org