Merge pull request #197 from kaola-fed/feature_sidebar_20170801

sidebar样式优化，增加iconClass和一级菜单url属性
kaola-fed · Aug 1, 2017 · 84c120f · 84c120f
2 parents ffc8425 + 2d13675
commit 84c120f
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 10 deletions.
diff --git a/src/js/components/navigation/KLMenu/KLMenuItem/index.mcss b/src/js/components/navigation/KLMenu/KLMenuItem/index.mcss
@@ -32,4 +32,8 @@
         top: 0;
      }
    }
+
+   &:last-child {
+     margin-bottom: 5px;
+   }
 }
diff --git a/src/js/components/navigation/KLMenu/KLSubMenu/index.html b/src/js/components/navigation/KLMenu/KLSubMenu/index.html
@@ -1,15 +1,39 @@
+{#if url}
+<a class="m-subMenu {class}" r-class={ {'active': active} } href="{url}">
+  <div class="head">
+    {#if iconClass}
+    <span class="head_icon {iconClass}"></span>
+    {/if}
+    <span class="head_title">
+      {#if title}
+        {title}
+      {#elseif titleTemplate}
+        {#inc titleTemplate}
+      {/if}
+    </span>
+  </div>
+</a>
+{#else}
 <li class="m-subMenu {class}" r-class={ {'active': active} } on-click={this.toggle($event)}>
   <div class="head">
-    <span class="head_arrow u-icon u-icon-angle-down" r-class={ {'isOpen':active} }></span>
+    {#if iconClass}
+    <span class="head_icon {iconClass}"></span>
+    {/if}
     <span class="head_title">
       {#if title}
         {title}
       {#elseif titleTemplate}
         {#inc titleTemplate}
       {/if}
     </span>
+    {#if this.$body}
+      <span class="head_arrow u-icon u-icon-angle-right" r-class={ {'isOpen':active} }></span>
+    {/if}
   </div>
-  <ul class="menuItems" r-hide="!active" r-animation="on:enter;collapse:on;on:leave;collapse:off;">
+  {#if active}
+  <ul class="menuItems" r-animation="on:enter;collapse:on;on:leave;collapse:off;">
     {#inc this.$body}
   </ul>
-</li>
+  {/if}
+</li>
+{/if}
diff --git a/src/js/components/navigation/KLMenu/KLSubMenu/index.js b/src/js/components/navigation/KLMenu/KLSubMenu/index.js
@@ -15,6 +15,8 @@ const RootMenuMixin = require('../mixins/rootMenu');
  * @param {object}        [options.data]                          = 绑定属性
  * @param {string}        [options.data.class]                    => 补充class
  * @param {boolean}       [options.data.defaultOpen=false]        => 是否默认展开,如果需要默认展开,设置为true
+ * @param {string}        [options.data.url='']                   => 如果一级菜单需要链接,可配置url属性
+ * @param {string}        [options.data.iconClass='']             => 菜单文字前的icon
  * @param {string}        [options.data.title]                    => 标题文案
  * @param {string}        [options.data.titleTemplate]            => 标题文案模板
  */
@@ -28,6 +30,8 @@ const KLSubMenu = Component.extend({
     this.defaults({
       class: '',
       title: '',
+      href: '',
+      iconClass: '',
       titleTemplate: '',
     });
     this.supr();

diff --git a/src/js/components/navigation/KLMenu/KLSubMenu/index.mcss b/src/js/components/navigation/KLMenu/KLSubMenu/index.mcss
@@ -1,10 +1,13 @@
 .m-subMenu {
     position: relative;
+    display: block;
     border-bottom: 1px solid #DFEAF3;
     cursor: pointer;
 
     .head {
         position: relative;
+        display: flex;
+        align-items: center;
         padding: 15px 0 15px 47px;
         font-size: 14px;
         transition: all .4s ease;
@@ -15,16 +18,22 @@
 
         .head_arrow {
             position: absolute;
-            top: 15px;
-            left: 28px;
+            right: 10px;
             font-size: 14px;
             transition: all .4s ease;
             transform: rotate(0);
 
             &.isOpen {
-                transform: rotate(180deg);
+                transform: rotate(90deg);
             }
         }
+
+        .head_icon {
+            position:absolute;
+            left: 20px;
+            color: #333;
+            font-size: 16px;
+        }
     }
 
     .menuItems {
@@ -37,7 +46,6 @@
 
     &.active {
         background: #F6F9FC;
-        padding-bottom: 5px;
     }
 }
 

diff --git a/src/js/components/navigation/KLSidebar/index.html b/src/js/components/navigation/KLSidebar/index.html
@@ -3,13 +3,13 @@
     <kl-menu uniqueOpened="{uniqueOpened}">
       {#list menus as menu}
       {#if menu[childrenKey] && menu[childrenKey].length}
-      <kl-menu-sub title="{menu[titleKey]}" defaultOpen="{menu.open}">
+      <kl-menu-sub title="{menu[titleKey]}" defaultOpen="{menu.open}" iconClass="{menu.iconClass}">
         {#list menu[childrenKey] as page}
         <kl-menu-item isCurrent="{page.open}" url="{page[urlKey]}">{page[pageKey]}</kl-menu-item>
         {/list}
       </kl-menu-sub>
       {#else}
-      <kl-menu-sub titleTemplate="<a href='{menu[urlKey]}'>{menu[titleKey]}</a>"></kl-menu-sub>
+      <kl-menu-sub url="{menu[urlKey]}" titleTemplate="{menu[titleKey]}" iconClass="{menu.iconClass}"></kl-menu-sub>
       {/if}
       {/list}
     </kl-menu>

diff --git a/src/mcss/base/var.mcss b/src/mcss/base/var.mcss
@@ -14,7 +14,7 @@ $media-md-max-width =                   960px - 1;
 $media-lg-max-width =                   1220px - 1;
 
 /* Fonts */
-$font-family-sans-serif = "Helvetica Neue", "Helvetica", "Arial", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
+$font-family-sans-serif = PingFangTC-Regular,Microsoft YaHei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
 $font-family-serif = Georgia, "Times New Roman", Times, SimSun, "FontAwesome", serif;
 $font-family-monospace = Monaco, Menlo, Consolas, "Courier New", "FontAwesome", monospace;
 $font-family-kai = Georgia, "Times New Roman", Times, Kai, "Kaiti SC", KaiTi, BiauKai, "FontAwesome", serif;
-Original file line number
+Diff line change
@@ Expand Up / @@ -32,4 +32,8 @@ @@
             top: 0;
          }
        }
+       &:last-child {
+         margin-bottom: 5px;
+       }
     }